/* Global mobile polish. Kept in one file so the mobile experience is auditable at a glance.
   Order matters: general small-screen fixes first, then progressively smaller breakpoints. */

/* ---------- Horizontal scroll lock (site-wide) ----------
   Layered defense: html/body are already clipped in critical.css. This block
   catches known leak sources — full-bleed rows, hero/decorative absolute-positioned
   layers, and images/media that ignore max-width constraints. */
html{overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip}
main{overflow-x:hidden;overflow-x:clip;width:100%;max-width:100vw}
img,video,svg,iframe,canvas{max-width:100%;height:auto}
.section,.hero-full,.hero-sub,.cta-band,.site-footer,.global-site-header{max-width:100vw}


/* ---------- Tablet and below ---------- */
@media(max-width:1023px){
  .section{padding-block:clamp(2.75rem,7vw,4.5rem)}
  .section-header{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
  /* Any grid that squeezes cards below ~280px gets awkward. Push to single column earlier. */
  .grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
}

/* ---------- Phones ---------- */
@media(max-width:960px){
  .global-site-header__topbar{display:none}
}

@media(max-width:760px){
  h1{font-size:clamp(2.1rem,7vw + .4rem,3rem);line-height:1.08}
  h2{font-size:clamp(1.7rem,5vw + .3rem,2.2rem)}
  h3{font-size:clamp(1.15rem,3vw + .5rem,1.5rem)}
  .container{padding-left:1.15rem;padding-right:1.15rem}
  /* Prevent iOS zooming on focus by holding inputs at 16px minimum. */
  input,select,textarea{font-size:16px}
  /* Stack CTA rows cleanly; give buttons real tap area. */
  .btn{min-height:48px;padding:.95rem 1.5rem}
  .btn--large{padding:1.05rem 1.5rem;font-size:1rem;min-height:52px}
  .btn--small{min-height:44px}
  /* Stretch CTA clusters so buttons don't sit at half-width. */
  .cta-band__actions,.hero-sub__cta-row{width:100%}
  .cta-band__actions .btn,.hero-sub__cta-row .btn{width:100%;justify-content:center}
}

@media(max-width:640px){
  h2{font-size:1.7rem}
  .btn--large{padding:1rem 1.5rem;font-size:1rem}
  .section{padding-block:clamp(2.25rem,8vw,3.5rem)}
  /* Add breathing room under a fixed mobile action bar (see mobileActions.js). */
  body.has-mobile-actions{padding-bottom:74px}
  /* Footer polish */
  .footer-grid{gap:2rem;padding-bottom:2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.5rem;text-align:left}
  /* Bridge form on phones — a bit tighter */
  .bridge-form{margin:1.5rem auto 1.25rem;padding:16px}
  /* Hero: give the trust badges a smaller footprint */
  .hero-full__proof{padding-top:1.25rem;margin-top:1.5rem}
}

@media(max-width:420px){
  .container{padding-left:1rem;padding-right:1rem}
  .hero-full__inner{padding-left:1rem;padding-right:1rem}
  /* Avoid horizontal jitter from long words in headlines. */
  h1,h2,h3{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
}

/* Print + reduced motion (kept from the original file). */
@media print{
  .global-site-header,.site-footer,.hero-full__bg,.hero-full__overlay,.hero-sub__bg,.hero-sub__overlay,.btn,.mobile-toggle,.mobile-actions,.mobile-panel,.hero-full__scroll{display:none!important}
  body{background:#fff;color:#000}
  a{text-decoration:underline;color:#000}
  .hero-full,.hero-sub{color:#000;min-height:auto;background:#fff}
  .hero-full__title,.hero-sub__title{color:#000;text-shadow:none}
  .hero-full__lead,.hero-sub__lead{color:#333;text-shadow:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}