/* ==========================================================
   HOW IT WORKS
   ========================================================== */
.ld-hiw{background:#063a52;padding:76px 0}
.ld-head--hiw{margin-bottom:44px}
.ld-hiw-eyebrow{font-size:11px;letter-spacing:2px;color:#bbdbf2;font-weight:700;margin-bottom:14px}
.ld-hiw-cta{background:#fff;color:#063a52;padding:14px 26px;border:0;border-radius:100px;font-family:inherit;font-weight:700;font-size:14px}
.ld-hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ld-hiw-step{background:#00557a;border-radius:18px;padding:26px 22px;border:1px solid rgba(255,255,255,0.06)}
.ld-hiw-step-num{font-size:11px;letter-spacing:1.5px;color:rgba(255,255,255,0.45);font-weight:700;margin-bottom:26px}
.ld-hiw-step-icon{width:44px;height:44px;border-radius:12px;background:rgba(0,152,219,0.18);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ld-hiw-step-title{font-weight:700;font-size:17px;color:#fff;margin-bottom:8px}
.ld-hiw-step-desc{font-size:12px;line-height:1.6;color:rgba(255,255,255,0.55)}

/* ==========================================================
   RESPONSIVE
   Additive only — mirrors the breakpoint stops in style.css.
   Stops: 1024 / 620
   ========================================================== */

@media (max-width:1024px){
  /* minmax(0,1fr) everywhere, not 1fr: image-slot puts its <img> in a
     shadow root, so the page's img{max-width:100%} cannot reach it and the
     natural image width becomes an unshrinkable min-content floor that
     blows the track out past its container. minmax(0,..) removes the floor. */
  .ld-hiw-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:620px){
  .ld-hiw{padding:52px 0}
  .ld-hiw-steps{grid-template-columns:minmax(0,1fr);gap:12px}
}