/* Final CTA meter — m3 removed; rebalance m1/m2 across 12 cols */
.s-final .meter .m1 { grid-column: 1 / span 6; }
.s-final .meter .m2 { grid-column: 7 / span 6; text-align: right; justify-content: flex-end; }


/* ═══════════════════════════════════════════════════════════════════
   POLARIS — MOBILE PASS
   Layered ON TOP of styles.css. Targets ≤880px progressively.
   Strategy:
   - 880px: tablet/large phone — collapse multi-column layouts
   - 720px: phone proper — type ramps, padding tightens, side-scrollers
   - 480px: small phone — final compression
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   UNIFIED MOBILE TYPE SYSTEM
   Eliminates per-section variance. Applied at ≤720px.
   - Pull quotes (serif italic): single 19px size everywhere
   - Body copy (sans): single 15px size everywhere
   - Section H2: clamp(28px, 7.5vw, 36px) everywhere
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Pull quotes / lead italics — unified */
  .s-problem .lead-italic,
  .s-problem .pull p,
  .s-cons .intro,
  .s-cons .closer .r,
  .s-cons .closer .l em,
  .s-research .research-copy .intro,
  .s-research .research-copy .closing .pull,
  .s-polaris .intro,
  .s-polaris .is-not .it-is,
  .s-team .intro,
  .s-team .closer .pull,
  .s-lead .lede,
  .s-lead .closer .pull,
  .s-lead .doom .stat-line,
  .s-case .opener {
    font: 400 italic 19px/1.4 var(--serif) !important;
    letter-spacing: -0.015em !important;
  }
  .s-case .copy .opener {
    /* The case .copy .opener is sans, not serif — keep it sans */
    font: 400 15px/1.65 var(--sans) !important;
    font-style: normal !important;
  }

  /* Long body copy in editorial sections — unified to 15px */
  .s-problem .editorial p,
  .s-research .research-copy .closing p,
  .s-polaris .closing-copy p,
  .s-case .copy p,
  .s-case .copy .outcome,
  .s-final .lede,
  .s-team .closer p,
  .s-lead .body .copy p,
  .s-lead .closer p,
  .brief-journey .bj-intro {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Section H2 — unified */
  .hero h1 { /* hero is the display, leave alone */ }
  .s-problem h2,
  .s-cons h2,
  .s-research .research-copy h2,
  .s-polaris h2,
  .s-diag h2,
  .brief-journey h2,
  .s-case h2,
  .s-final h2 {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    line-height: 1 !important;
  }
  .s-final h2 { font-size: clamp(30px, 8vw, 42px) !important; }
}

/* Universal horizontal-scroller pattern.
   Applied to repeating block groups on mobile (Consequence cells,
   Research stats, Diagnostic outcomes). Each card snaps; the next
   card "peeks" so scrollability is signaled without copy. */
@media (max-width: 720px) {
  .h-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 22px 18px; /* matches container --pad so cards bleed to edge */
    margin: 0 -22px;
    scroll-padding-left: 22px;
  }
  .h-scroll::-webkit-scrollbar { display: none; }
  .h-scroll > * { scroll-snap-align: start; }

  /* Subtle progress hint sits below scrollers */
  .h-scroll-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font: 600 9.5px/1 var(--mono);
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    text-transform: uppercase;
  }
  .h-scroll-hint .arrow { color: var(--polaris-gold); }
  .dark .h-scroll-hint, .on-dark .h-scroll-hint { color: rgba(242,241,236,0.5); }
}


/* ═══════════════════════════════════════════════════════════════════
   GLOBAL TIGHTENING (≤720px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  html { font-size: 14.5px; }
  body { overflow-x: hidden; }

  /* Section rhythm */
  section { padding: 64px 0; }

  /* Section header: stack labels */
  .sec-head {
    padding: 16px 0;
    margin-bottom: 36px;
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .sec-head .num,
  .sec-head .ttl,
  .sec-head .meta {
    grid-column: 1 / -1 !important;
    text-align: left !important;
    white-space: normal;
  }
  /* Drop the meta (3rd line) on mobile — least useful */
  .sec-head .meta { display: none !important; }
  /* Add a leading bar to the title (2nd line) so it matches the eyebrow style */
  .sec-head .ttl::before {
    content: "▎";
    color: var(--polaris-gold);
    margin-right: 6px;
  }
  .dark .sec-head .ttl::before,
  .on-dark .sec-head .ttl::before,
  .s-research .sec-head .ttl::before,
  .brief-journey .sec-head .ttl::before,
  .s-final .sec-head .ttl::before { color: var(--polaris-gold); }
  /* Gold-on-gold would be invisible — use ink for the diagnostic section */
  .s-diag .sec-head .ttl::before { color: var(--ink); }

  /* Dark sections: soften the title color to match the muted eyebrow,
     so it doesn't compete with the main headline beneath. */
  .s-research .sec-head .num,
  .s-research .sec-head .ttl,
  .brief-journey .sec-head .num,
  .brief-journey .sec-head .ttl,
  .s-final .sec-head .num,
  .s-final .sec-head .ttl,
  .s-problem.dark .sec-head .num,
  .s-problem.dark .sec-head .ttl { color: var(--ink-dk-mute) !important; }

  /* Sections 4 and 9 don't carry the .dark class — give their sec-head
     the same hairline borders so they match sections 2 and 7. */
  .s-research .sec-head,
  .s-final .sec-head { border-color: rgba(242,241,236,0.18); }

  /* Buttons: full-width by default, comfortable hit target */
  .btn { padding: 16px 20px; font-size: 11.5px; min-height: 48px; box-sizing: border-box; }
  .btn-gold, .btn-line { width: 100%; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════
   NAV — brand + Sections ▾ + CTA on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .nav-wrap { top: 12px; padding: 0 12px; }
  .nav {
    width: 100%;
    justify-content: space-between;
    padding: 5px 5px 5px 12px;
    gap: 6px;
  }
  .nav .brand { padding-right: 0; margin-right: 0; border-right: 0; }
  .nav .brand .lbl { font-size: 9.5px; letter-spacing: 0.16em; }
  .nav .cta-pill {
    padding: 10px 12px;
    font-size: 9.5px;
    letter-spacing: 0.10em;
  }
  .nav .cta-pill .ar { display: none; }

  /* Sections trigger — injected via JS */
  .nav-sections-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: transparent;
    border: 1px solid rgba(14,26,46,0.12);
    border-radius: 999px;
    font: 600 9.5px/1 var(--mono);
    letter-spacing: 0.14em;
    color: var(--ink);
    text-transform: uppercase;
    cursor: pointer;
    margin-left: auto;
    margin-right: 4px;
  }
  .nav-sections-trigger .chev { font-size: 9px; opacity: 0.6; transition: transform 180ms var(--ease); }
  .nav-sections-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
}
@media (min-width: 721px) {
  .nav-sections-trigger { display: none !important; }
}

/* Sections sheet (mobile only) */
.nav-sections-sheet {
  position: fixed;
  top: 64px;
  left: 12px;
  right: 12px;
  z-index: 79;
  background: var(--polar-white);
  border: 1px solid rgba(14,26,46,0.10);
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(14,26,46,0.28);
  padding: 8px;
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.nav-sections-sheet.open { display: block; opacity: 1; transform: none; }
.nav-sections-sheet a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink);
  text-transform: uppercase;
  border-radius: 8px;
  border: 0;
  text-decoration: none;
}
.nav-sections-sheet a:hover, .nav-sections-sheet a:active { background: rgba(14,26,46,0.04); }
.nav-sections-sheet a .n {
  font-size: 9px;
  color: var(--polaris-gold);
  letter-spacing: 0.18em;
}
@media (min-width: 721px) {
  .nav-sections-sheet { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   STICKY BOTTOM CTA — appears after hero on mobile
   ═══════════════════════════════════════════════════════════════════ */
.mobile-bottom-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 75;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  background: var(--ink);
  color: var(--polar-white);
  border-radius: 999px;
  box-shadow: 0 12px 32px -8px rgba(14,26,46,0.45), 0 2px 0 rgba(255,255,255,0.06) inset;
  opacity: 0;
  transform: translateY(120%);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
  pointer-events: none;
}
.mobile-bottom-cta.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mobile-bottom-cta .label {
  font: 500 12px/1.3 var(--sans);
  color: rgba(242,241,236,0.7);
  flex: 1;
  min-width: 0;
}
.mobile-bottom-cta .label b {
  display: block;
  color: var(--polar-white);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.mobile-bottom-cta .go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  background: var(--polaris-gold);
  color: var(--polar-white);
  border-radius: 999px;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
@media (min-width: 721px) {
  .mobile-bottom-cta { display: none !important; }
}
@media (max-width: 720px) {
  .mobile-bottom-cta { display: flex; }
  /* Ensure the bottom CTA never covers the page bottom content */
  .s-refs { padding-bottom: 100px; }
  footer.foot { padding-bottom: 92px; }
}


/* ═══════════════════════════════════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .hero { padding-top: 84px; }
  .hero .head { grid-template-columns: 1fr; row-gap: 28px; padding-bottom: 48px; }
  .hero .head-left, .hero .report { grid-column: 1 / -1; }
  .hero h1 {
    font-size: clamp(36px, 8.4vw, 56px) !important;
    margin: 0 0 20px !important;
  }
  .hero .head-left .lede { font-size: 16px; max-width: none; padding: 14px 0 0 !important; }
  .hero .ribbon {
    gap: 10px;
    padding: 12px 0 20px;
    margin-bottom: 24px;
    font-size: 9.5px;
  }
  .hero .ribbon .sep { display: none; }
  .hero .report { max-width: 320px; margin: 0 auto; gap: 0 !important; }
  .hero .report .report-frame {
    margin-bottom: -32px; /* pull CTA up under the report */
    filter: drop-shadow(0 18px 36px rgba(14,26,46,0.18)) drop-shadow(0 4px 10px rgba(14,26,46,0.12));
  }
  .hero .report .report-frame img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
  .hero .report .ctas { margin: 0 !important; gap: 8px; align-items: stretch; }
  .hero .report .ctas .btn { width: 100%; justify-content: center; }
  .hero .report .ctas .ctas-secondary { font-size: 12px; text-align: center; }
}

@media (max-width: 720px) {
  .hero h1 { font-size: clamp(32px, 9.5vw, 44px) !important; line-height: 0.96; }
  /* Drop secondary ribbon items that wrap awkwardly */
  .hero .ribbon .pill:not(.live) { display: none; }
  .hero .ribbon { padding: 10px 0 16px; margin-bottom: 18px; gap: 8px; flex-wrap: wrap; }
  .hero .ribbon > span:nth-child(4),
  .hero .ribbon > span:nth-child(5) { display: none; } /* "INTRODUCES" + sep — keep tight */
}


/* ═══════════════════════════════════════════════════════════════════
   2. PROBLEM
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .s-problem .copy-col, .s-problem .aside-col {
    grid-column: 1 / -1 !important;
  }
  .s-problem .aside-col {
    position: static !important;
    margin-top: 32px;
  }
}
@media (max-width: 720px) {
  .s-problem .lead-italic { margin-bottom: 24px; }

  /* Signal card — big number left, copy with bar right */
  .s-problem aside.signal {
    padding: 22px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 18px;
    row-gap: 12px;
    align-items: start;
  }
  .s-problem aside.signal .key {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .s-problem aside.signal .stat {
    grid-column: 1;
    grid-row: 2;
    font-size: 88px !important;
    line-height: 0.9;
    margin: 0 !important;
    align-self: center;
  }
  .s-problem aside.signal .desc {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    padding-left: 18px;
    border-left: 1px solid rgba(242,241,236,0.18);
    font-size: 13.5px;
    line-height: 1.5;
  }
  .s-problem.dark aside.signal .desc { border-left-color: rgba(242,241,236,0.18); }
  .s-problem aside.signal .src {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   3. CONSEQUENCE — convert 4-cell matrix to side-scroller
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .s-cons h2 { grid-column: 1 / -1 !important; }
  .s-cons .intro {
    grid-column: 1 / -1 !important;
    margin-top: 16px;
  }

  .s-cons .matrix {
    grid-column: 1 / -1;
    margin: 36px 0 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 22px 18px;
    margin-left: -22px;
    margin-right: -22px;
    border: 0;
    scroll-padding-left: 22px;
  }
  .s-cons .matrix::-webkit-scrollbar { display: none; }
  .s-cons .cell {
    scroll-snap-align: start;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 22px 20px !important;
    background: var(--shell-hi);
    min-height: 220px;
  }
  .s-cons .cell h3, .s-cons .cell p, .s-cons .cell .arr { padding-left: 0 !important; }
  .s-cons .cell h3 { font-size: 17px; }
  .s-cons .cell p { font-size: 14px; }

  .s-cons .closer { padding: 28px 22px !important; margin-top: 28px; }
  .s-cons .closer .l { font-size: 16px !important; text-align: left; }
}


/* ═══════════════════════════════════════════════════════════════════
   4. RESEARCH — copy first, then stats as side-scroller
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .s-research .research-copy,
  .s-research .stats { grid-column: 1 / -1 !important; }
  .s-research .stats { margin-top: 32px; }
}
@media (max-width: 720px) {
  .s-research .research-copy h2 { max-width: none; }
  .s-research .research-copy .intro { padding-left: 14px; }
  .s-research .research-copy .closing .pull { max-width: none; width: auto !important; height: auto !important; }

  /* Stats become a side-scroller */
  .s-research .stats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 22px 18px;
    margin-left: -22px;
    margin-right: -22px;
    border: 0;
    scroll-padding-left: 22px;
  }
  .s-research .stats::-webkit-scrollbar { display: none; }
  .s-research .stat {
    scroll-snap-align: start;
    padding: 22px 20px !important;
    border: 1px solid rgba(242,241,236,0.18);
    border-radius: 6px;
    background: rgba(242,241,236,0.02);
    min-height: 240px;
    justify-content: space-between;
  }
  .s-research .stat .big { font-size: 52px !important; }
  .s-research .stat .src { font-size: 13px; max-width: none; }

  /* Override any LCD/scroll variant tweaks already present — keep consistent */
  .s-research .stats.lcd, .s-research .stats.scroll {
    gap: 12px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   5. POLARIS — vertical diagram
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .s-polaris h2 { grid-column: 1 / -1 !important; }
  .s-polaris .intro { grid-column: 1 / -1 !important; padding-left: 14px; margin-top: 18px; }

  .s-polaris .diagram {
    grid-template-columns: 1fr !important;
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    overflow: hidden;
  }
  .s-polaris .diagram .col {
    padding: 26px 22px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .s-polaris .diagram .col.r {
    text-align: left !important;
    align-items: flex-start !important;
  }
  .s-polaris .diagram .col.r p { margin-left: 0 !important; }
  .s-polaris .diagram .col.r .key {
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 8px;
  }
  .s-polaris .diagram .col p { max-width: none; }
  /* Vertical connectors via borders */
  .s-polaris .diagram .col.l { border-bottom: 1px solid var(--rule); }
  .s-polaris .diagram .center {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 32px 20px !important;
  }
  .s-polaris .diagram .col.r { border-top: 0; }

  .s-polaris .closing-copy { margin-top: 36px !important; }
}
@media (max-width: 720px) {
  .s-polaris h2 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }
  .s-polaris .diagram .col h3 { font-size: 19px; }
}


/* ═══════════════════════════════════════════════════════════════════
   6. DIAGNOSTIC — outcomes as side-scroller
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .s-diag h2 { grid-column: 1 / -1 !important; }
  .s-diag .intro { grid-column: 1 / -1 !important; align-self: start; margin-top: 16px; }
  .s-diag .diag-report { display: none; }
}
@media (max-width: 720px) {
  .s-diag { padding: 64px 0; }
  .s-diag h2 br { display: none; }

  .s-diag .outcomes {
    grid-column: 1 / -1;
    margin-top: 32px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 22px 18px;
    margin-left: -22px;
    margin-right: -22px;
    scroll-padding-left: 22px;
  }
  .s-diag .outcomes::-webkit-scrollbar { display: none; }
  .s-diag .outcome { scroll-snap-align: start; padding: 22px 20px; min-height: 200px; }
  .s-diag .outcome .n { font-size: 28px; }
  .s-diag .outcome h4 { font-size: 16px; }
  .s-diag .outcome p { font-size: 13.5px; }

  .s-diag .submit {
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
    padding: 20px !important;
    margin-top: 16px;
  }
  .s-diag .submit .btn { width: 100%; justify-content: center; }
  .s-diag .submit .accept { font-size: 13px; }
}


/* ═══════════════════════════════════════════════════════════════════
   7. BRIEF JOURNEY — keep as horizontal scroller (the metaphor)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .brief-journey { padding: 56px 0 64px; margin-top: 0; }
  .brief-journey h2 { grid-column: 1 / -1 !important; }
  .brief-journey .bj-intro { grid-column: 1 / -1; }

  .brief-journey .bj-rail {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 22px 22px;
    margin: 36px -22px 0 !important;
    scroll-padding-left: 22px;
  }
  .brief-journey .bj-rail::-webkit-scrollbar { display: none; }

  .brief-journey .bj-stage {
    scroll-snap-align: start;
    padding: 22px 20px;
    border: 1px solid rgba(242,241,236,0.14);
    border-radius: 6px;
    background: rgba(242,241,236,0.02);
    min-height: 260px;
  }
  .brief-journey .bj-arrow {
    /* Hide the connector arrows in scroller mode — they break the snap rhythm */
    display: none !important;
  }
  .brief-journey .bj-num { font-size: 28px; }
  .brief-journey .bj-title { font-size: 15px; }
  .brief-journey .bj-stage p { font-size: 13.5px; }
  .brief-journey .bj-dials { gap: 10px; }
  .brief-journey .bj-dial { width: 64px; height: 64px; }
  .brief-journey .bj-dial svg { width: 64px; height: 64px; }
  .brief-journey .bj-dial-num { top: 22px; font-size: 18px; }
}


/* ═══════════════════════════════════════════════════════════════════
   8. SHIELDCOAT CASE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .s-case h2, .s-case .opener, .s-case .copy, .s-case .visual {
    grid-column: 1 / -1 !important;
  }
  .s-case .opener {
    margin-top: 18px;
    padding-left: 14px;
    align-self: start;
  }
  .s-case .body {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 28px;
    margin-top: 36px;
  }
  /* Visual (slider) appears BEFORE long copy on mobile — gives buyer the proof first */
  .s-case .visual { order: -1; }
}
@media (max-width: 720px) {
  .s-case .opener { padding-left: 14px; }
  .s-case .case-meta {
    grid-template-columns: 1fr !important;
    row-gap: 4px;
    padding: 12px 0;
  }
  .s-case .case-meta > span:nth-child(n) {
    grid-column: 1 / -1 !important;
    text-align: left !important;
    font-size: 9.5px;
  }
  .s-case .copy p,
  .s-case .copy .outcome { max-width: none; }
  .s-case .copy .shift { padding: 18px 18px; margin: 22px 0; }
  .s-case .copy .shift .shift-row {
    grid-template-columns: 48px 1fr;
    gap: 12px;
  }
  .s-case .copy .shift .val { font-size: 15px; }

  /* Slider — works fine on touch, just tighten the chrome */
  .ba-slider { aspect-ratio: 4/5; }
  .ba-bar .lab-out { font-size: 9px; }
  .ba-bar .hint { font-size: 9px; }
  .ba-slider .knob { width: 32px; height: 32px; }
  .ba-slider .knob svg { width: 12px; height: 12px; }
  .ba-slider .lab { font-size: 8.5px; padding: 5px 9px; }
}


/* ═══════════════════════════════════════════════════════════════════
   9. FINAL CTA
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .s-final h2,
  .s-final .lede,
  .s-final .anti,
  .s-final .cta-statement,
  .s-final .ctas {
    grid-column: 1 / -1 !important;
  }
  .s-final h2 { width: auto !important; max-width: none !important; }
}
@media (max-width: 720px) {

  .s-final .cta-statement { font-size: 22px !important; margin: 28px 0 4px; max-width: none; }
  .s-final .ctas { flex-direction: column; }
  .s-final .ctas .btn { width: 100%; justify-content: center; }
  .s-final .meter { margin-top: 36px !important; row-gap: 8px; }
}


/* ═══════════════════════════════════════════════════════════════════
   10. REFS + FOOTER
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .s-refs { padding: 48px 0 100px; }
  .s-refs .container > h3 { margin-bottom: 18px; }
  .s-refs .ref { font-size: 12.5px; padding: 12px 0; gap: 10px; grid-template-columns: 28px 1fr; }
  .s-refs .ref a { font-size: 11.5px; }

  footer.foot { padding: 20px 0 92px; }
  footer.foot .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 9px;
  }
  footer.foot .row .center { order: -1; }
}


/* ═══════════════════════════════════════════════════════════════════
   SMALL PHONE (≤480px) — final compression
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --pad: 18px; }
  .h-scroll, .s-cons .matrix, .s-research .stats, .s-diag .outcomes, .brief-journey .bj-rail {
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    scroll-padding-left: 18px !important;
    grid-auto-columns: 86%;
  }
  .nav-sections-sheet { left: 8px; right: 8px; }
  .mobile-bottom-cta { left: 8px; right: 8px; bottom: 8px; padding: 10px 12px 10px 16px; }
  .mobile-bottom-cta .label b { font-size: 12px; }
  .mobile-bottom-cta .label { font-size: 11px; }
  .mobile-bottom-cta .go { padding: 9px 12px; font-size: 9.5px; }
}