/* Landing page (/) — Playfair hero + evidence slides from the
   Carnegie deck between the hero and the video, with slide-deck scroll snap
   on desktop. Loads on top of site.css; pulls in the regular landing styles. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Playfair+Display:wght@400..900&display=swap");
@import url("/css/landing.css");

/* ---- Hero title: Playfair Display (deck serif) ---- */
.nh .hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* looser title -> paragraph gap; em keeps it proportional to the title,
     which itself scales with the viewport (was 0.35em). */
  margin-bottom: 0.45em;
}
/* Hero vertical rhythm, tuned in the spacing lab. All viewport-relative so the
   proportions hold across window sizes. */
.nh .hero-intro {
  /* paragraph -> quote (was 3rem). Full 5.8rem on desktop, but capped down on
     narrow screens so the quote doesn't get pushed off a phone's first screen. */
  margin-bottom: clamp(2.4rem, 8vw, 4.9rem);
}
.nh .hero .container-narrow {
  transform: translateY(3svh);   /* nudge the whole block below centre */
}

/* ---- Slide-deck scroll snap (desktop only) ---- */
@media (min-width: 861px) and (min-height: 641px) {
  html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--banner-h);
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  .nh .hero,
  .ev-slide,
  .ev-close,
  .nh .video-section,
  .nh .schools,
  .nh .supporters {
    scroll-snap-align: start;
  }
  .nh .hero,
  .ev-slide,
  .ev-close {
    scroll-snap-stop: always;
  }
  .site-footer { scroll-snap-align: end; }
  .nh .video-section {
    min-height: calc(100svh - var(--banner-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }
}

/* =====================================================================
   Evidence slides — ported from the Carnegie deck, scoped to .evidence /
   .ev-close so nothing leaks into the site chrome. Always dark, in both
   themes (a deliberate dark band, like the supporters band is white).
   ===================================================================== */
.evidence, .ev-close {
  --ink: #f4f4f6;
  --soft: #b9bac8;
  --mut: #82849a;
  --card: #111118;
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.14);
  --mint: #71dfae;
  --peri: #7f90ff;
  --amber: #e9a852;
  --cyan: #38c3d6;
  --ember: #e06a4e;
  --tint: #a5b1ff;
  --eyeb: #9d9fb6;
  --labmut: #9395ab;
  --fn: #a3a6bb;
  --nsmall: #a8aabf;
  --cardg1: #13131b;
  --cardg2: #0e0e14;
  --cyan-soft: rgba(56,195,214,.55);
  --ember-soft: rgba(224,106,78,.55);
  --glow: 0 0 24px -4px var(--edge, transparent);
  --dserif: "Playfair Display", Georgia, "Times New Roman", serif;
  --dsans: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --dmono: "Roboto Mono", Menlo, monospace;
  background: #08080b;
  color: var(--ink);
  font-family: var(--dsans);
  font-size: 16px;
  line-height: 1.5;
}

.ev-slide {
  min-height: calc(100svh - var(--banner-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5svh clamp(24px, 5vw, 76px);
}
.ev-inner { width: 100%; max-width: 1230px; margin: 0 auto; }

/* eyebrow */
.evidence .eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--dmono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.42em;
  color: var(--eyeb);
  text-transform: uppercase;
  margin: 0 0 2.6svh;
}
.evidence .eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--mut);
  flex: none;
}

/* serif claim */
.evidence h2.claim {
  font-family: var(--dserif);
  font-weight: 560;
  font-size: clamp(28px, 3.35vw, 49px);
  line-height: 1.14;
  letter-spacing: 0.002em;
  margin: 0 0 3.4svh;
  text-wrap: balance;
  color: var(--ink);
}

/* lede */
.evidence .lede {
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.62;
  color: var(--soft);
  margin: -1.6svh 0 3svh;
}
.evidence .lede b { color: var(--ink); font-weight: 620; }

/* mono stat strip */
.evidence .strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  font-family: var(--dmono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--labmut);
  margin: 0 0 3.2svh;
}
.evidence .strip .k { color: var(--ink); font-weight: 600; }

/* reveal animation */
.evidence .rev, .ev-close .rev {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.25,1);
}
.ev-slide.active .rev, .ev-close.active .rev { opacity: 1; transform: none; }
.evidence .d1, .ev-close .d1 { transition-delay: .08s; }
.evidence .d2, .ev-close .d2 { transition-delay: .18s; }
.evidence .d3, .ev-close .d3 { transition-delay: .28s; }
.evidence .d4, .ev-close .d4 { transition-delay: .38s; }
.evidence .d5 { transition-delay: .5s; }

/* ---- headline slide: headrow + KPI cards ---- */
.evidence .headrow {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, .8fr);
  gap: 2.6svh 48px;
  align-items: start;
  margin-bottom: 4svh;
}
/* Title spans the full width so it never wraps mid-phrase; lede + sample chip
   sit side by side on the row beneath it. */
.evidence .headrow .htitle { grid-column: 1 / -1; margin-bottom: 0; }
.evidence .headrow .lede { margin: 0; }
.evidence .sample-chip {
  justify-self: end;
  text-align: right;
  font-family: var(--dmono);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--mut);
  line-height: 2;
  padding-top: 0;
}
.evidence .sample-chip .big {
  font-family: var(--dsans);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 640;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.evidence .cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}
.evidence .card {
  position: relative;
  background: linear-gradient(180deg, var(--cardg1) 0%, var(--cardg2) 100%);
  border: 1.5px solid var(--edge, var(--line));
  border-radius: 14px;
  padding: clamp(20px, 2.2svh, 30px) clamp(20px, 1.9vw, 30px) clamp(22px, 2.4svh, 32px);
  overflow: hidden;
  box-shadow: var(--glow);
}
.evidence .card .lab {
  font-family: var(--dmono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.3em;
  color: var(--labmut);
  text-transform: uppercase;
  margin: 0 0 1.4svh;
}
.evidence .kpi {
  font-family: var(--dsans);
  font-weight: 560;
  font-size: clamp(58px, 6.2vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 2svh;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.evidence .kpi .pre {
  font-size: 55%;
  font-weight: 500;
  vertical-align: 6%;
  margin-right: 0.04em;
  color: var(--soft);
}
.evidence .kpi .suf {
  font-size: 44%;
  font-weight: 600;
  margin-left: 0.06em;
}
.evidence .card .body {
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.55;
  color: var(--soft);
  margin: 0;
  max-width: 24em;
}
.evidence .card .body b { color: var(--ink); font-weight: 620; }

/* ---- diverging chart ---- */
.evidence .dvg {
  display: grid;
  grid-template-columns: max-content 1fr 1fr;
  align-items: stretch;
  position: relative;
}
.evidence .dvg-lab {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 18px;
  font-size: 15px;
  color: var(--soft);
  white-space: nowrap;
  height: clamp(38px, 5.6svh, 52px);
}
.evidence .dvg-lab i {
  font-style: normal;
  font-family: var(--dmono);
  font-size: 12px;
  color: var(--mut);
  margin-right: 10px;
}
.evidence .dvg-l, .evidence .dvg-r {
  position: relative;
  height: clamp(38px, 5.6svh, 52px);
}
.evidence .dvg-r { border-left: 1px solid var(--line-2); }
.evidence .dvg .bar {
  position: absolute;
  top: 50%;
  height: clamp(22px, 3.4svh, 30px);
  transform: translateY(-50%) scaleX(0);
  border-radius: 3px;
  transition: transform .8s cubic-bezier(.25,.8,.3,1);
  transition-delay: var(--d, 0s);
}
.ev-slide.active .dvg .bar { transform: translateY(-50%) scaleX(1); }
.evidence .dvg-l .bar {
  right: 0;
  transform-origin: right center;
  background: linear-gradient(90deg, var(--cyan-soft), var(--cyan));
  border-radius: 3px 0 0 3px;
}
.evidence .dvg-r .bar {
  left: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--ember), var(--ember-soft));
  border-radius: 0 3px 3px 0;
}
.evidence .dvg .pct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: calc(var(--d, 0s) + .45s);
  white-space: nowrap;
}
.ev-slide.active .dvg .pct { opacity: 1; }
.evidence .dvg .pct.in { color: #06272c; }
.evidence .dvg-r .pct.in { color: #2d0f08; }

.evidence .dvg-legend {
  display: grid;
  /* minmax(0,1fr) forces the two label columns to be exactly equal regardless
     of text length — otherwise the longer "MOVED AWAY…" grows its column via
     min-content and pushes its centre off the chart's right half. */
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 1.6svh;
  font-family: var(--dmono);
  font-size: 13px;
  letter-spacing: 0.24em;
}
.evidence .dvg-legend .l, .evidence .dvg-legend .r { white-space: nowrap; }
/* Each label centered within its half of the chart (its 1fr data column),
   not hugging the center divider. */
.evidence .dvg-legend .l { text-align: center; color: var(--cyan); }
.evidence .dvg-legend .r { text-align: center; color: var(--ember); }
/* hidden replica of the widest label: sizes the legend's first column to match
   the chart's label column so the toward/away divider lands on the chart center */
/* letter-spacing:normal so the ghost matches the CHART's label column width
   (the legend's 0.24em tracking would otherwise inflate col 1 and shove both
   labels off-centre) */
.evidence .dvg-lab-ghost {
  height: auto; visibility: hidden;
  /* match the CHART label column exactly: the legend's mono font + 0.24em
     tracking would otherwise make the ghost wider and shove both labels
     off-centre. */
  letter-spacing: normal; font-family: var(--dsans);
}

.evidence .anno {
  position: absolute;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity .6s ease .9s;
  white-space: nowrap;
}
.ev-slide.active .anno { opacity: 1; }

/* ---- vertical bar chart (convergence) ---- */
.evidence .vplot {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  gap: clamp(14px, 2.4vw, 40px);
  align-items: end;
  height: clamp(210px, 34svh, 360px);
  border-bottom: 1px solid var(--line-2);
  position: relative;
}
.evidence .vcol {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.evidence .vbar {
  position: relative;
  width: 100%;
  height: calc(var(--h) * 1%);
  min-height: 3px;
  background: var(--c, #64779b);
  border-radius: 6px 6px 0 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .8s cubic-bezier(.25,.8,.3,1);
  transition-delay: var(--d, 0s);
}
.ev-slide.active .vbar { transform: scaleY(1); }
.evidence .vbar .n {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  font-family: var(--dmono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(6,10,14,.78);
  white-space: nowrap;
}
.evidence .vcol .pct {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--h) * 1% + 10px);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: calc(var(--d, 0s) + .5s);
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
}
.ev-slide.active .vcol .pct { opacity: 1; }
.evidence .vcol .pct small {
  display: block;
  font-family: var(--dmono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--nsmall);
}
.evidence .vcol .xl {
  margin-top: 12px;
  text-align: center;
  font-size: 15px;
  line-height: 1.35;
  color: var(--soft);
  min-height: 2.7em;
}
.evidence .vcol.hi .xl { color: var(--ink); font-weight: 600; }

/* ---- footnote / caption ---- */
.evidence .footnote {
  margin-top: 2svh;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fn);
}
.evidence .footnote b { color: var(--soft); font-weight: 600; }

/* ---- fairness stacked bar ---- */
.evidence .fair-bar {
  display: flex;
  gap: 3px;
  height: clamp(52px, 8svh, 72px);
  border-radius: 12px;
  overflow: hidden;
  clip-path: inset(0 100% 0 0 round 12px);
  transition: clip-path 1.1s cubic-bezier(.25,.8,.3,1) .25s;
}
.ev-slide.active .fair-bar { clip-path: inset(0 0 0 0 round 12px); }
.evidence .fair-seg {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  min-width: 0;
}
.evidence .fair-seg.agree {
  flex: 87;
  background: linear-gradient(90deg, #55c193, var(--mint));
  color: #05231a;
}
.evidence .fair-seg.neutral {
  flex: 10;
  /* lighter slate so the dark "10% / Neutral" reads as clearly as the dark
     label on the bright AGREE segment (the old #6b7286 was too dim) */
  background: #9aa3b8;
  color: #10131c;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 0 6px;
}
/* "Neutral" sits under the 10% in the narrow segment (desktop only) */
.evidence .fair-seg.neutral span { font-size: 11.5px; letter-spacing: 0.13em; }
.evidence .fair-seg.disagree {
  flex: 3;
  background: var(--ember);
  padding: 0;
}
.evidence .fair-seg b {
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.evidence .fair-seg span {
  font-family: var(--dmono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
}
/* survey statement pulled onto its own indented, quotation-style line */
.evidence .fair-lede { margin-bottom: 1.2svh; }
.evidence .fair-quote {
  margin: 0 0 1.8svh;
  padding-left: 1.5em;
  border-left: 2px solid var(--peri);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19.5px);
  line-height: 1.5;
  color: var(--ink);
}
.evidence .fair-more { margin-top: 0; }
.evidence .fair-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin-top: 16px;
  font-family: var(--dmono);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--nsmall);
}
.evidence .fair-legend i {
  font-style: normal;
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: -1px;
}
.evidence .fair-legend b { color: var(--ink); font-weight: 600; }

/* ---- split slide (respect) + point cards + protections ---- */
.evidence .split {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(24px, 3.4vw, 56px);
  align-items: stretch;
}
.evidence .split .card { display: flex; flex-direction: column; justify-content: center; }
.evidence .card .foot {
  margin-top: 2svh;
  padding-top: 1.6svh;
  border-top: 1px solid var(--line);
  font-family: var(--dmono);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--mut);
}
.evidence .bigfoot {
  margin-top: 2.4svh;
  padding-top: 2svh;
  border-top: 1px solid var(--line);
}
.evidence .bigfoot .row1 {
  font-family: var(--dserif);
  font-size: clamp(21px, 1.9vw, 28px);
  font-weight: 560;
  color: var(--ink);
}
.evidence .bigfoot .row1 sup { color: var(--amber); font-size: 65%; }
.evidence .bigfoot .row1 span {
  font-family: var(--dmono);
  font-size: 11.5px;
  letter-spacing: 0.3em;
  color: var(--mut);
  margin-left: 12px;
}
.evidence .bigfoot .row2 {
  margin-top: 6px;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--soft);
}
.evidence .bigfoot .row2 b { color: var(--ink); font-weight: 620; }

.evidence .prot-h {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--dmono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.42em;
  color: var(--eyeb);
  text-transform: uppercase;
  margin: 4px 0 10px;
}
.evidence .prot-h::before { content: ""; width: 26px; height: 1px; background: var(--mut); }
.evidence .prot {
  display: grid;
  grid-template-columns: 44px 1fr;
  padding: clamp(12px, 1.9svh, 20px) 4px;
  border-top: 1px solid var(--line);
}
.evidence .prot:first-of-type { border-top: 0; }
.evidence .prot .no {
  font-family: var(--dmono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--amber);
  padding-top: 4px;
}
.evidence .prot h3 {
  margin: 0 0 4px;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 650;
  color: var(--ink);
}
.evidence .prot p {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.55;
  color: var(--soft);
  max-width: 40em;
}

.evidence .pt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 3.4svh;
}
.evidence .pt-card {
  position: relative;
  background: linear-gradient(180deg, var(--cardg1) 0%, var(--cardg2) 100%);
  border: 1.5px solid var(--edge, var(--line));
  border-radius: 14px;
  padding: 22px 26px 24px 64px;
  overflow: hidden;
  box-shadow: var(--glow);
}
.evidence .pt-card .no {
  position: absolute;
  left: 27px;
  top: 24px;
  font-family: var(--dmono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--edge, var(--peri));
}
.evidence .pt-card h3 {
  margin: 0 0 6px;
  font-size: clamp(16.5px, 1.35vw, 19.5px);
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.evidence .pt-card p {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.6;
  color: var(--soft);
  max-width: 36em;
}
.evidence .pt-card p b { color: var(--ink); font-weight: 620; }
.evidence .pt-card p .tint { color: var(--tint); font-weight: 600; }

/* ---- closer ---- */
.ev-close {
  min-height: calc(100svh - var(--banner-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 6svh clamp(24px, 5vw, 76px);
}
.ev-close .logo-lg {
  width: 58px; height: 58px;
  border-radius: 15px;
  margin: 0 auto 1.8svh;
  display: block;
}
/* SWAYBETA.AI sits directly under the logo, above the title */
.ev-close .site {
  font-family: var(--dmono);
  font-size: 12.5px;
  letter-spacing: 0.42em;
  color: var(--soft);
  margin: 0 0 3.2svh;
}
.ev-close h2 {
  font-family: var(--dserif);
  font-weight: 550;
  font-size: clamp(36px, 4.6vw, 66px);
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}

/* supporters, folded into the closer as a ghosted credits row */
.ev-close .sup-eyebrow {
  font-family: var(--dmono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  color: var(--mut);
  text-transform: uppercase;
  margin: 7svh 0 3.4svh;
}
.ev-close .sup-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 52px;
  max-width: 1050px;
  margin: 0 auto;
}
.ev-close .sup-row img {
  height: 38px;
  width: auto;
  max-width: 175px;
  object-fit: contain;
  filter: grayscale(1) invert(1) brightness(1.5);
  mix-blend-mode: screen;
  opacity: .82;
}
@media (max-width: 860px) {
  .ev-close .sup-row { gap: 20px 32px; }
  .ev-close .sup-row img { height: 30px; max-width: 140px; }
}

/* ---- responsive ---- */
@media (max-width: 1060px) {
  .evidence .headrow { grid-template-columns: 1fr; }
  .evidence .sample-chip { justify-self: start; text-align: left; padding-top: 0; }
  .evidence .cards3 { grid-template-columns: 1fr 1fr; }
  .evidence .cards3 .card:last-child { grid-column: 1 / -1; }
  .evidence .split { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ev-slide { min-height: 0; padding: 48px 24px; }
  .evidence .cards3 { grid-template-columns: 1fr; }
  .evidence .cards3 .card:last-child { grid-column: auto; }
  .evidence .kpi { font-size: 64px; }
  .evidence .dvg { grid-template-columns: 1fr 1fr; }
  .evidence .dvg-lab { display: none; }
  .evidence .dvg-l, .evidence .dvg-r { height: 56px; }
  .evidence .dvg .bar, .evidence .dvg .pct { top: 64%; }
  .evidence .dvg-l::after {
    content: attr(data-lab);
    position: absolute;
    left: 8px; top: 4px;
    font-family: var(--dmono);
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--mut);
    white-space: nowrap;
  }
  .evidence .anno { display: none; }
  /* the descriptive "the undecided develop a view" tag collides with the 70%
     inside the narrow half-width bar on mobile — drop it, like the annos */
  .evidence .dvg .pct-note { display: none; }
  /* the two 8% bars are too short on a phone to hold a dark in-bar label
     legibly, so keep these outside the bar in cyan (on desktop the bars are
     wide enough that the label sits inside, aligned at the divider) */
  .evidence .dvg-l .pct-8 {
    right: calc(11.1% + 8px) !important;
    color: var(--cyan) !important;
  }
  /* legend fits under each chart half: two even columns, tighter type */
  .evidence .dvg-legend {
    grid-template-columns: 1fr 1fr;
    font-size: clamp(8.5px, 2.7vw, 11px);
    letter-spacing: 0.03em;
    gap: 0 8px;
  }
  /* the depolarization-ratio stat is the least essential of the three —
     hide it so the strip stays to two lines at most on a phone */
  .evidence .strip .strip-opt { display: none; }
  .evidence .vcol .xl { font-size: 10.5px; }
  .evidence .vbar .n { display: none; }
  .evidence .vcol .pct { font-size: 12.5px; }
  .evidence .vplot { gap: 8px; height: 220px; }
  .evidence .pt-grid { grid-template-columns: 1fr; }
  .evidence .fair-seg.neutral b, .evidence .fair-seg.neutral span { display: none; }
}

/* ---- slide-deck scroll snap on mobile ----
   The desktop block up top only fires at >=861px, so phones scrolled freely.
   Here we bring the deck feel to phones too, but with two guards:
   - proximity (not mandatory) snapping, so the tall chart slides never trap
     the reader between two snap points mid-slide;
   - gated on a tall-enough viewport (min-height:600px) so short landscape
     phones, where a full-height slide would overflow awkwardly, keep the
     plain natural-height scroll.
   safe center keeps tall slides from being clipped under the banner: content
   that overflows the slide falls back to top-aligned instead of centering. */
@media (max-width: 860px) and (min-height: 600px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--banner-h);
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  .nh .hero,
  .ev-slide,
  .ev-close,
  .nh .video-section,
  .nh .schools {
    scroll-snap-align: start;
  }
  .ev-slide,
  .ev-close {
    min-height: calc(100svh - var(--banner-h));
    justify-content: safe center;
  }
  .nh .video-section {
    min-height: calc(100svh - var(--banner-h));
    display: flex;
    flex-direction: column;
    justify-content: safe center;
  }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .evidence .rev, .ev-close .rev,
  .evidence .dvg .bar, .evidence .dvg .pct,
  .evidence .vbar, .evidence .vcol .pct,
  .evidence .anno, .evidence .fair-bar {
    transition: none !important;
    opacity: 1 !important;
  }
  .evidence .rev, .ev-close .rev { transform: none !important; }
  .evidence .dvg .bar { transform: translateY(-50%) scaleX(1) !important; }
  .evidence .vbar { transform: scaleY(1) !important; }
  .evidence .fair-bar { clip-path: inset(0 0 0 0 round 12px) !important; }
}

/* ---- light mode: the evidence band flips to a light treatment ---- */
html.light-mode .evidence,
html.light-mode .ev-close {
  --ink: #191a22;
  --soft: #3f4257;
  --mut: #666a80;
  --eyeb: #5b5f76;
  --labmut: #5d6178;
  --fn: #565b71;
  --nsmall: #5c6076;
  --line: rgba(20,22,44,.10);
  --line-2: rgba(20,22,44,.24);
  --mint: #0f8a60;
  --peri: #4b5ed8;
  --amber: #b07310;
  --cyan: #0c86a0;
  --ember: #c3492a;
  --tint: #4b5ed8;
  --cardg1: #ffffff;
  --cardg2: #f9f9fc;
  --cyan-soft: rgba(12,134,160,.5);
  --ember-soft: rgba(195,73,42,.55);
  --glow: 0 14px 34px -22px rgba(35,2,77,.45);
}
html.light-mode .evidence { background: #f6f6f9; }
html.light-mode .ev-close { background: #ffffff; }
/* supporters keep their native colors on the white closer */
html.light-mode .ev-close .sup-row img {
  filter: none;
  mix-blend-mode: normal;
  opacity: .95;
}

/* =====================================================================
   Video slide — a typographic poster (facade). The tagline stands in for
   the thumbnail; the real YouTube player loads on click (see new-home.js).
   The poster stays dark in both themes so it matches the player it swaps in.
   ===================================================================== */
.nh .video-section .video-embed {
  margin: 0 auto;
  max-width: 1040px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 34px 80px -44px rgba(0,0,0,.85);
}
.nh .vt-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: #f4f4f6;
  background:
    radial-gradient(120% 100% at 50% 34%, rgba(127,144,255,.17), transparent 56%),
    linear-gradient(165deg, #0f0f17 0%, #08080c 100%);
}
.nh .vt-poster:focus-visible { outline: 2px solid #a5b1ff; outline-offset: -5px; }
.nh .vt-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vw, 26px);
  text-align: center;
  padding: 0 24px;
}
.nh .vt-logo { width: clamp(38px, 4vw, 50px); height: auto; opacity: .95; }
.nh .vt-say {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 5.4vw, 60px);
  line-height: 1.03;
  letter-spacing: .005em;
  margin: 0;
}
.nh .vt-say em { color: #a5b1ff; font-style: italic; }
.nh .vt-btn {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1.5px solid rgba(165,177,255,.55);
  background: radial-gradient(circle at 50% 40%, rgba(127,144,255,.32), rgba(10,10,16,.72));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 30px -6px rgba(0,0,0,.6), 0 0 0 8px rgba(127,144,255,.06);
  transition: transform .25s cubic-bezier(.2,.7,.25,1), border-color .25s, box-shadow .25s;
}
.nh .vt-btn svg { margin-left: 4px; }
.nh .vt-poster:hover .vt-btn,
.nh .vt-poster:focus-visible .vt-btn {
  transform: scale(1.07);
  border-color: #a5b1ff;
  box-shadow: 0 10px 34px -6px rgba(0,0,0,.7), 0 0 0 10px rgba(127,144,255,.12);
}
.nh .vt-under {
  font-family: "Roboto Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #82849a;
}
.nh .vt-dur {
  position: absolute;
  right: 14px;
  bottom: 13px;
  font-family: "Roboto Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: #d6d7e6;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
  padding: 3px 8px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .nh .vt-btn { transition: none; }
}