/* ═══════════════════════════════════════════════════════════════════════
   mobile.css — DEDICATED MOBILE LAYER (loads LAST, after mgx.css)
   Shared by all 4 sites · everything gated behind @media (max-width:768px)
   with a small-phone tier at 480px. Nothing here applies at desktop widths,
   so desktop CSS is left byte-for-byte untouched. Per-site accent is read
   from --accent (red mortgage / green VWI) — no hardcoded brand hex.
   ═══════════════════════════════════════════════════════════════════════ */

/* shared mobile rhythm tokens (uniform across all four sites) */
:root {
  --m-gutter: 20px;
  --m-gap: 16px;
  --m-section-y: 56px;
  --m-radius: 16px;
}

@media (max-width: 768px) {
  /* ───────────────────────── GLOBAL DEFENSES ───────────────────────── */
  html, body { max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }
  img, iframe, video, embed, object, table, canvas, svg { max-width: 100%; }
  /* …but the film embed renders at a fixed 1920px and is GPU-scaled to the frame —
     it must NOT be clamped by the global max-width or it collapses to a tiny box */
  .vidsec .film-frame .film-embed { max-width: none !important; }
  /* nothing escapes the viewport horizontally */
  .wrap, .section, main, header, footer { max-width: 100%; }
  /* tap targets */
  .btn, .nav-links a, .header-cta, .header-phone, .faq-q, .rev-arrow,
  .footer-soc a, .hamburger, .vid-mute, .ap-opt, .ap-in, button, select {
    min-height: 44px;
  }

  /* === HEADER / VWHAM DRAWER — mobile (drawer = full screen) === */
  .site-header { padding: 12px 18px !important; }
  .drawer { width: 100vw !important; max-width: 100vw !important; }
  .drawer .drawer-link, .drawer a { min-height: 46px; display: flex; align-items: center; }
  /* brand tertiary line stays tucked under the wordmark, small, out of the way */
  .site-header .brand .bx { display: none; }

  /* === HERO — mobile === */
  .hero { min-height: auto !important; padding: 96px 20px 56px !important; }
  .hero-c { text-align: center; margin: 0 auto; max-width: 100%; min-width: 0; }
  .hero-eyebrow { font-size: 10.5px !important; padding: 6px 13px !important; letter-spacing: .12em !important; margin-bottom: 18px !important; }
  .hero-h, .hero-h.hero-rotating { font-size: clamp(34px, 9vw, 50px) !important; line-height: 1.06 !important; }
  .hero-h .hr-lead, .hero-h .hr-word { white-space: normal !important; }
  .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
  .hero-actions .btn { width: 100%; max-width: 360px; justify-content: center; }

  /* === TRUST / STATS BAR — mobile === */
  .trust-stats { grid-template-columns: 1fr 1fr !important; gap: 18px 12px !important; }
  .ub-partners { flex-wrap: wrap; justify-content: center; }
  /* 2-up × 2 on every site (like Insurance) — never collapse to a single column */

  /* === RATE WIDGET (BankingBridge) — mobile ===
     The decorative glass card overflowed / overlapped neighbours. Make it a
     simple full-width bordered container that the embed can reflow inside. */
  .rates-sec > .wrap { max-width: 100% !important; padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
  .rates-frame { width: 100% !important; max-width: 100% !important; margin: 0 !important;
    padding: 16px !important; overflow-x: hidden; box-shadow: none !important; border-radius: var(--m-radius) !important; }
  .rates-frame [id^="bb-"] { max-width: 100% !important; overflow-x: auto; }
  .rates-frame iframe { width: 100% !important; max-width: 100% !important; }
  .rates-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rates-cta { flex-direction: column; align-items: stretch; }
  .rates-cta .btn, .rates-cta .rates-callbtn { width: 100%; justify-content: center; }
  .rates-disc { text-align: left; }

  /* === VIDEO / MOTION — mobile ===
     The heavy film is NOT mounted below 768px (JS gate prevents the 4K-class
     decode that crashed mobile). It shows a poster with a tap-to-play control;
     this styles that poster + the injected play button. */
  .vidsec .vid-frame { max-width: 100% !important; border-radius: var(--m-radius); }
  /* solid dark poster so the (unmounted) film area never flashes a blank box */
  .vidsec .film-frame .film-poster { opacity: 1 !important; background: #0a0a0b !important; }
  .vidsec .film-frame.loaded .film-poster { opacity: 0 !important; }
  .film-frame .film-poster::after { width: 0 !important; height: 0 !important; border: 0 !important; animation: none !important; }
  .film-tap { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; gap: 10px;
    align-content: center; cursor: pointer; color: #fff; text-align: center; -webkit-tap-highlight-color: transparent; }
  .film-tap .ft-play { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 92%, #000); box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); }
  .film-tap .ft-play svg { width: 26px; height: 26px; margin-left: 3px; }
  .film-tap .ft-lbl { font-family: var(--jb, monospace); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
  .vidsec .mgx-cta { flex-direction: column; }
  .vidsec .mgx-cta .btn, .vidsec .mgx-callbtn { width: 100%; max-width: 360px; justify-content: center; }
  /* film control buttons (volume / fullscreen) sit clear of the corners */
  .film-fs { right: 14px; bottom: 14px; }

  /* === CALCULATOR — mobile (single column; slim, no outer card, tidy result panel) === */
  .kyn-grid { grid-template-columns: 1fr !important; gap: var(--m-gap) !important; }
  #estimate, .calc-section { background: #fff !important; }
  .calc-wide { max-width: 100% !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  .calc-wide .cw-inputs { padding: 0 !important; gap: 22px; margin-bottom: 24px; justify-content: flex-start !important; }
  .calc-wide .cw-inputs .est2-row { margin-bottom: 0 !important; }
  .calc-wide .cw-results { padding: 22px !important; }   /* keep the tinted result panel on mobile */
  input[type="range"] { width: 100% !important; }
  .calc-wide .btn, .cw-results .btn { width: 100% !important; max-width: none; font-size: 15px !important; padding: 15px 20px !important; }
  /* the dark know-your-numbers table: LEFT-aligned with dividers between groups */
  .kyn-table .vw-table td { text-align: left !important; }
  .kyn-table .vw-table tr { border-top: 1px solid rgba(255,255,255,.12) !important; padding-top: 16px !important; margin-top: 4px !important; }
  .kyn-table .vw-table tr:first-child { border-top: 0 !important; }
  .kyn-table .vw-table td:first-child { color: #fff !important; font-weight: 700 !important; margin-top: 8px; }
  /* left-align the planning section heading on mobile */
  .growmoney .section-head, .kyn .section-head { text-align: left !important; }
  .growmoney .section-head .lede, .kyn .section-head .lede { margin-left: 0 !important; margin-right: 0 !important; }

  /* === FORECAST — mobile (unify alignment: body left, charts full-width) === */
  .forecast .fc-inner { text-align: left; }
  .forecast .fc-panel { width: 100% !important; max-width: 100% !important; margin: 18px 0 0 !important; padding: 20px !important; }
  .forecast .fc-extra { grid-template-columns: 1fr !important; gap: var(--m-gap) !important; margin: 16px 0 0 !important; }
  .forecast .fc-mini { width: 100% !important; }
  .forecast .fc-sub, .forecast .fc-h { text-align: left; margin-left: 0; margin-right: 0; }
  .forecast .section-head, .forecast .fc-axis { text-align: left; }

  /* === REVIEWS CAROUSEL — mobile (1 card in view · arrows UNDER · starts on first) === */
  .reviews .revx { display: flex !important; flex-wrap: wrap; justify-content: center; position: relative; }
  .reviews .rev-rail { flex: 1 1 100%; width: 100% !important; order: 0; -webkit-mask-image: none !important; mask-image: none !important;
    overflow-x: auto !important; scroll-snap-type: x mandatory; justify-content: flex-start !important; }
  .reviews .rev-tile { flex: 0 0 100% !important; width: 100% !important; scroll-snap-align: start !important; }
  .reviews .rev-clone { display: none !important; }   /* no marquee clones on mobile */
  .reviews .rev-arrow { display: grid !important; place-items: center; position: static; width: 46px; height: 46px; border-radius: 50%;
    background: #0a0a0a; color: #fff; border: 0; margin-top: 22px; }
  .reviews .rev-arrow svg { width: 19px; height: 19px; }
  .reviews .rev-arrow.prev { order: 1; margin-right: 8px; }
  .reviews .rev-arrow.next { order: 2; }

  /* === TOOLS / EDUCATION / FAQ / CTA — mobile === */
  .feat-grid, .tools-grid, .edu-grid, .benefits-grid, .offer-grid,
  .protgrid, .protgrid2, .step-row, .process-track, [class*="grid-3"], [class*="cols-3"] {
    grid-template-columns: 1fr !important; gap: var(--m-gap) !important; }
  .faq-list { max-width: 100%; }
  .faq-q { width: 100%; text-align: left; gap: 12px; }
  .cta-band, .cta-mini, .final { overflow: hidden; }
  .cta-band .cta-row, .cta-mini-act, .final-actions { flex-direction: column; align-items: center; width: 100%; }
  .cta-band .cta-row .btn, .cta-band .cta-ghost, .cta-mini-act .btn, .final-actions .btn { width: 100%; max-width: 360px; justify-content: center; }
  .cta-band .cta-h, .cta-mini-hook { font-size: clamp(26px, 7vw, 38px) !important; }
  /* tighten the spaced-out CTA above the reviews (title ↔ buttons were too far apart) */
  .cta-band { padding: 48px 0 !important; }
  .cta-band .cta-h { margin-top: 12px !important; }
  .cta-band .cta-sub { margin-top: 12px !important; }
  .cta-band .cta-row { margin-top: 22px !important; }
  .cta-band .cta-trust { margin-top: 16px !important; }
  .cta-mini { padding: 34px 0 !important; }
  /* mini CTA: hook + button close together, centered (no big gap) */
  .cta-mini-inner { flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
    gap: 18px !important; min-height: 0 !important; text-align: center; }
  .cta-mini-hook { flex: none !important; margin: 0 !important; text-align: center; }
  .cta-mini-act { width: 100%; flex-direction: column; align-items: center; gap: 12px; }
  .cta-mini-act .btn { width: 100%; max-width: 360px; justify-content: center; }

  /* === FORMS (RMA quiz / VWI apply) — mobile === */
  .ap-2col, .ap-grid, .ap-opts { grid-template-columns: 1fr !important; gap: 12px !important; }
  .ap-in, .ap-field input, .ap-field select, .ap-field textarea { width: 100% !important; font-size: 16px !important; /* no iOS zoom */ }
  .ap-opt { min-height: 48px; }
  .ap-nav, .ap-actions { flex-direction: column-reverse; gap: 10px; }
  .ap-nav .btn, .ap-actions .btn { width: 100%; justify-content: center; }

  /* === FOOTER — mobile (clean single-column stack, ALL content left-aligned) === */
  .site-footer, .site-footer .wrap { text-align: left !important; }
  .site-footer .footer-top { grid-template-columns: 1fr !important; gap: 30px !important; text-align: left !important; }
  .footer-brand { grid-column: auto; text-align: left !important; }
  .footer-brand .footer-lockup { justify-content: flex-start !important; }
  .footer-brand p, .footer-brand .nap { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
  .footer-col, .footer-col h6, .footer-col a { text-align: left !important; }
  .footer-col a { min-height: 0 !important; margin-bottom: 8px !important; display: block; padding: 4px 0; }
  .footer-col h6 { margin-bottom: 12px !important; }
  .footer-legal, .footer-legal p, .footer-nmls { text-align: left !important; }
  .footer-legal .ehl { justify-content: flex-start !important; }
  .footer-bot { flex-direction: column; align-items: flex-start !important; gap: 14px; text-align: left !important; }
  .footer-soc { gap: 12px; justify-content: flex-start !important; }
}

/* ───────────────────────── small phones ───────────────────────── */
@media (max-width: 480px) {
  .hero { padding: 88px 16px 48px !important; }
  .hero-h, .hero-h.hero-rotating { font-size: clamp(32px, 9.4vw, 42px) !important; }
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .reviews .rev-tile { flex-basis: 100% !important; width: 100% !important; }
  .section, .section.dark { padding-top: var(--m-section-y) !important; padding-bottom: var(--m-section-y) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .film-tap .ft-play { box-shadow: none; }
}