/* ============================================================================
   Mobile UX overrides.
   The pages use heavy inline styles (desktop-only), so we target the inline
   patterns with attribute selectors + !important — a stylesheet !important
   rule beats a plain inline declaration, letting us fix layout site-wide
   without editing every element.
   ============================================================================ */

img { max-width: 100%; height: auto; }
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 768px) {

  /* --- horizontal gutters: fixed "…px 56px" / "…px 48px" padding -> mobile-friendly --- */
  [style*="px 56px"],
  [style*="px 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- every multi-column grid collapses to a single column --- */
  [style*="grid-template-columns:"] { grid-template-columns: 1fr !important; }

  /* --- let flex/grid children shrink instead of forcing the row wider than the
         screen (default min-width:auto is the #1 cause of mobile h-overflow) --- */
  [style*="display:flex"] > *, [style*="display:grid"] > * { min-width: 0 !important; }

  /* --- clamp oversized display headings + relax tight tracking --- */
  [style*="letter-spacing:-2"],
  [style*="letter-spacing:-1."] { letter-spacing: -0.4px !important; }
  [style*="font-size:70px"] { font-size: 38px !important; line-height: 1.12 !important; }
  [style*="font-size:54px"] { font-size: 33px !important; line-height: 1.15 !important; }
  [style*="font-size:52px"] { font-size: 32px !important; line-height: 1.15 !important; }
  [style*="font-size:48px"] { font-size: 31px !important; line-height: 1.18 !important; }
  [style*="font-size:46px"] { font-size: 30px !important; }
  [style*="font-size:44px"] { font-size: 30px !important; }
  [style*="font-size:42px"] { font-size: 29px !important; }
  [style*="font-size:38px"] { font-size: 27px !important; }
  [style*="font-size:36px"] { font-size: 26px !important; }

  /* --- large flex gaps tighten + wrap (stats rows, footer columns, CTA duos) --- */
  [style*="gap:96px"], [style*="gap:80px"], [style*="gap:72px"],
  [style*="gap:64px"], [style*="gap:56px"] { gap: 22px !important; flex-wrap: wrap; }

  /* --- fixed-width cards become fluid --- */
  [style*="width:430px"], [style*="width:400px"] { width: 100% !important; max-width: 100% !important; }

  /* --- nav: hide the desktop link row (no room without a menu); logo + language
         toggle + Apply CTA remain. Full navigation still lives in the footer. --- */
  [style*="gap:30px"][style*="font-size:14.5px"] { display: none !important; }
  /* tighten the nav bar so logo + Español + Apply fit without clipping */
  [style*="backdrop-filter:blur(12px)"] { padding-left: 14px !important; padding-right: 14px !important; }
  img[style*="height:46px"] { height: 32px !important; }              /* nav logo */
  #langBtn { display: none !important; }                              /* language toggle lives in the hamburger menu */
  [style*="padding:11px 22px"] { padding: 9px 15px !important; font-size: 13px !important; }  /* Apply btn */

  /* --- stat rows (gap:96px) -> clean 2-up grid instead of an overflowing flex row --- */
  [style*="gap:96px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 12px !important;
    flex-wrap: wrap;
  }

  /* --- trim the biggest vertical section padding so pages aren't endlessly tall --- */
  [style*="padding:104px"], [style*="padding:110px"],
  [style*="padding:96px"], [style*="padding:88px"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

/* Respect reduced-motion — and guard against entrance animations ever leaving
   content stuck invisible (the pages use opacity:0 -> heroUp/data-reveal). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}