/* ════════════════════════════════════════════════════════════════════════
   white-lands.com — assets/responsive-fix.css  (v5.158)
   COMPREHENSIVE MOBILE PASS · load LAST (after redesign2.css).

   Why: redesign2.css ("Aurora Glass") scopes its rules to `body.wl-redesign`
   (specificity ≥ 0,2,x). The earlier mobile patch lives UNSCOPED in sales.css
   (0,1,x), so on phones redesign2 wins and the hero typography / glass-panel
   padding stay desktop-sized (hero h1 locked ~45px). This file re-asserts the
   mobile sizing at MATCHING specificity (`body.wl-redesign …`) and adds the
   spots no patch covered (inline 4-col proof band, promo pills, overflow
   hardening). SAFE: only ≤920px; desktop ≥921px untouched. !important only vs
   inline style="" attributes. Uses overflow-x:clip (NOT hidden) so the sticky
   header is never broken.
   ════════════════════════════════════════════════════════════════════════ */

/* 0. GLOBAL OVERFLOW HARDENING (harmless on desktop) */
img, svg, video, iframe, canvas { max-width: 100%; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
body.wl-redesign p,
body.wl-redesign li,
body.wl-redesign h1,
body.wl-redesign h2,
body.wl-redesign h3,
body.wl-redesign summary,
body.wl-redesign .ans,
body.wl-redesign .hero-arb__lead { overflow-wrap: anywhere; word-break: break-word; }

/* ╔════════ TABLET + PHONE — max-width: 920px ════════╗ */
@media (max-width: 920px) {

  /* never cause horizontal scroll; clip (not hidden) keeps sticky header alive */
  html, body { overflow-x: clip; }
  body.wl-redesign { width: 100%; max-width: 100%; }

  /* HERO typography — re-assert smaller at redesign2 specificity */
  body.wl-redesign .hero-arb h1 {
    font-size: clamp(2rem, 5.4vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; }
  body.wl-redesign .hero-arb__lead { font-size: 1.04rem; line-height: 1.6; }

  /* hero visual never exceeds column / viewport (wheel is JS-off on mobile) */
  body.wl-redesign .hero-vs { max-width: 100%; height: auto; }

  /* "free gift" promo pill (inline-styled) — wrap instead of overflow */
  body.wl-redesign .hero-arb__free {
    display: flex !important; max-width: 100%; box-sizing: border-box;
    flex-wrap: wrap; border-radius: 16px !important; line-height: 1.45; }

  /* daily-deal / pool-promo banners (inline-styled, JS-shown) */
  body.wl-redesign #dailyDealBanner,
  body.wl-redesign #poolPromoBanner { width: 100%; box-sizing: border-box; }
  body.wl-redesign #dailyDealBanner > span:last-child,
  body.wl-redesign #poolPromoBanner > span:last-child { white-space: normal !important; }

  /* header dropdown never wider than screen */
  .site-header__inner { max-width: 100%; }
  .site-nav { max-width: 100vw; box-sizing: border-box; }

  /* comparison table — horizontal-scroll wrapper */
  body.wl-redesign .compare-wrap {
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 14px; }
  body.wl-redesign .compare-table { min-width: 600px; }

  /* inline 4-col "battle-tested" proof band → 2 cols */
  body.wl-redesign div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important; }

  /* React add-on strip — stack & center */
  body.wl-redesign #react-strip {
    grid-template-columns: 1fr !important; text-align: center; gap: 18px !important; }
}

/* ╔════════ PHONE — max-width: 480px ════════╗ */
@media (max-width: 480px) {

  body.wl-redesign .hero-arb h1 { font-size: clamp(1.75rem, 7.6vw, 2.3rem); line-height: 1.1; }
  body.wl-redesign .hero-arb__lead { font-size: .96rem; margin-bottom: 22px; }
  body.wl-redesign .hero-arb__eyebrow { font-size: .72rem; padding: 6px 12px; line-height: 1.35; }

  body.wl-redesign .hero-arb__stat strong { font-size: 1.5rem; }
  body.wl-redesign .hero-arb__stat span   { font-size: .74rem; }
  body.wl-redesign .hero-arb__stats       { gap: 14px; padding-top: 22px; }

  /* hero actions — full-width stacked, tap-friendly */
  body.wl-redesign .hero-arb__actions { flex-direction: column; width: 100%; gap: 10px; }
  body.wl-redesign .hero-arb__actions .btn-primary,
  body.wl-redesign .hero-arb__actions .btn-secondary {
    width: 100%; box-sizing: border-box; justify-content: center; min-height: 48px; }

  /* final-CTA buttons — same */
  body.wl-redesign .cta-final__row { flex-direction: column; width: 100%; gap: 10px; }
  body.wl-redesign .cta-final__row .btn-primary,
  body.wl-redesign .cta-final__row .btn-secondary {
    width: 100%; box-sizing: border-box; justify-content: center; min-height: 48px; }

  /* glass panels — more horizontal room */
  body.wl-redesign .values  > .container,
  body.wl-redesign .how     > .container,
  body.wl-redesign .langs   > .container,
  body.wl-redesign .faq     > .container,
  body.wl-redesign .showcase > .container { padding: 30px 18px; border-radius: 20px; }

  body.wl-redesign div[style*="grid-template-columns:repeat(4,1fr)"] > div > div:first-child {
    font-size: 1.5rem !important; }

  /* comparison table — least-cramped scroll */
  body.wl-redesign .compare-table { min-width: 560px; }
  body.wl-redesign .compare-table thead th,
  body.wl-redesign .compare-table tbody td { padding: 10px 9px; font-size: .8rem; }
  body.wl-redesign .compare-bottom { font-size: .86rem; }

  /* footer bottom row wraps */
  body.wl-redesign .site-footer__bottom {
    flex-wrap: wrap; gap: 10px; text-align: center; justify-content: center; }

  /* sticky mobile CTA bar */
  body.wl-redesign .sticky-cta { left: 0; right: 0; box-sizing: border-box; }
  body.wl-redesign .sticky-cta .btn-primary { min-height: 44px; }

  /* leftover inline grids collapse to one column (defensive) */
  body.wl-redesign div[style*="grid-template-columns:repeat(3,1fr)"],
  body.wl-redesign div[style*="grid-template-columns:repeat(2,1fr)"]:not(.about-numbers__grid) {
    grid-template-columns: 1fr !important; }
}

/* ╔════════ EXTRA-SMALL — max-width: 360px ════════╗ */
@media (max-width: 360px) {
  body.wl-redesign .hero-arb h1 { font-size: 1.6rem; }
  body.wl-redesign .container { padding-left: 14px; padding-right: 14px; }
  body.wl-redesign div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important; }
}

/* TAP TARGETS on touch devices (any width) */
@media (hover: none) and (pointer: coarse) {
  body.wl-redesign .btn-primary,
  body.wl-redesign .btn-secondary,
  body.wl-redesign .site-nav a,
  body.wl-redesign .lang-dd__trigger,
  body.wl-redesign .scroll-top-btn { min-height: 44px; }
}