/* =========================================================
   OPERATION IMAGINAL, Landing Page
   Standalone stylesheet. Does not depend on style.css.
   ========================================================= */

/* 1. FONTS */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/fraunces-700.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/fraunces-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jetbrains-mono-500.woff2') format('woff2'); }

/* 2. TOKENS */
:root {
  --bg: #F7F2E4;
  --bg-elev: #FFFCF2;
  --bg-elev-2: #EFE7D0;
  --bg-light: #FFF8EB;
  --ink: #1C2620;
  --ink-dim: #5C6B5D;
  --ink-faint: #93A092;
  --rule: #DDD3B6;
  --accent: #2E5D3F;
  --accent-2: #D97742;
  --accent-2-deep: #B85A2A;
  --danger: #8B2C1B;
  --honey: #E8B547;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shadow-soft: 0 2px 8px rgba(46,93,63,.06), 0 8px 32px rgba(28,38,32,.08);
  --shadow-card: 0 1px 3px rgba(28,38,32,.05), 0 12px 32px rgba(28,38,32,.08);

  --section-pad: 80px;
  --gutter: 20px;
  --max-w: 1120px;
}

/* 3. RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .8; }
ol, ul { list-style: none; }

/* 4. TYPOGRAPHY */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
h1 { font-size: 32px; margin-bottom: 20px; }
h2 { font-size: 26px; margin-bottom: 16px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  margin-bottom: 16px;
}
.voices .eyebrow {
  font-size: 16px;
  font-weight: 600;
}

/* 5. UTILITIES */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
  font-family: var(--font-sans);
}
.btn-primary {
  background: var(--accent-2);
  color: var(--bg-light);
  box-shadow: 0 4px 14px rgba(217,119,66,.25);
}
.btn-primary:hover {
  background: var(--accent-2-deep);
  box-shadow: 0 6px 20px rgba(217,119,66,.35);
  transform: translateY(-1px);
  opacity: 1;
}
.btn-large { padding: 18px 36px; font-size: 16px; font-weight: 700; }
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--rule);
}
.btn-ghost:hover { border-color: var(--accent); background: rgba(46,93,63,.04); opacity: 1; }

/* 5b. PRE-LAUNCH NOTICE */
.prelaunch-notice {
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink-dim);
}
.prelaunch-notice .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.prelaunch-notice .prelaunch-copy {
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}
.prelaunch-notice a {
  color: var(--accent-2-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prelaunch-notice a:hover {
  opacity: 1;
  color: var(--accent-2);
}
.prelaunch-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .prelaunch-notice { font-size: 13px; padding: 12px 0; }
  .prelaunch-notice .wrap { gap: 10px; }
}

/* 6. HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247,242,228,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wordmark-glyph {
  width: 20px; height: 20px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, var(--honey) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, var(--accent) 0%, #6B8E5A 40%, transparent 75%);
  box-shadow: 0 0 0 2px var(--bg), 0 2px 8px rgba(46,93,63,.2);
}
.header-cta {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  padding: 8px 14px;
  border: 1.5px solid var(--accent-2);
  border-radius: 999px;
  transition: all .15s ease;
}
.header-cta:hover { background: var(--accent-2); color: var(--bg-light); opacity: 1; }
.header-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Form-card compact social proof (Phase 1) */
.form-counter-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  text-align: center;
  margin: 16px 0 4px;
  letter-spacing: 0.02em;
}
.form-counter-line .js-counter {
  color: var(--ink);
  font-weight: 600;
  font-feature-settings: 'tnum';
}

@media (prefers-reduced-motion: reduce) {
  .header-cta { transition: none; }
}

/* 7. HERO */
.hero { padding: 80px 0 60px; }
.hero .wrap { display: flex; flex-direction: column; gap: 40px; }
.hero-copy { max-width: 600px; }
.hero-copy h1 { font-size: 32px; line-height: 1.15; }
.hero-subline {
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 54ch;
}
.hero-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Center the visible counter / founding-wave block horizontally
     within .hero-copy. Only one of .hero-counter / .hero-counter-open
     is visible at a time, so centering keeps either of them sitting
     pleasantly on the column axis instead of pinned left. */
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.hero-counter-num {
  font-family: var(--font-serif);
  font-size: 44px; font-weight: 800;
  color: var(--accent-2);
  font-feature-settings: 'tnum';
  line-height: 1;
}
.hero-counter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* 7b. HERO VIDEO SECTION */
.hero-cinema {
  position: relative;
  background: #111;
  line-height: 0;
}
.hero-cinema .hero-video {
  display: block;
  width: 100%;
  height: auto;
}
.hero-unmute {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(28, 38, 32, 0.75);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s;
  z-index: 2;
}
.hero-unmute:hover {
  background: rgba(28, 38, 32, 0.9);
  opacity: 1;
}

/* 8. FORM */
.form-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: var(--shadow-card);
}
.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.form-label-hint {
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0;
}
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .15s;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent-2);
  background: var(--bg-elev);
}
.form-row textarea { min-height: 80px; resize: vertical; }
.form-submit { width: 100%; margin-top: 12px; }
.form-expand-btn {
  display: block;
  background: none; border: none; padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  margin-bottom: 16px;
}
.form-expand-btn:hover { color: var(--accent-2-deep); }
.form-error {
  display: none;
  color: var(--danger);
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
}
.form-notice {
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* 9. POST-SIGN STATES */
.post-sign { text-align: center; padding: 40px 0; }
.post-sign h2 { margin-top: 8px; }
.post-sign .lede {
  font-size: 17px;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 auto;
}
.post-sign p { margin-top: 16px; }
.share-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

/* 10. VOICES */
.voices {
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.portrait-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 800px;
  margin: 24px auto 28px;
}
.portrait-tile {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: var(--ink);
  transition: transform .2s ease;
}
.portrait-tile:hover { transform: translateY(-2px); opacity: 1; }
.portrait-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  border: 2px solid var(--accent);
  background: var(--bg-elev-2);
  box-shadow: var(--shadow-soft);
  filter: grayscale(100%);
  transition: filter .3s, border-color .2s, box-shadow .2s;
}
.portrait-tile:hover img {
  filter: grayscale(0);
  border-color: var(--accent-2);
  box-shadow: var(--shadow-card);
}
.portrait-tile span {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  line-height: 1.3;
}
.voices-text {
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto 20px;
}
.voices .btn-ghost {
  font-size: 16px;
  padding: 16px 28px;
}

/* 10b. VOICE PANEL (overlay quote carousel) */
.portrait-tile { cursor: pointer; }
.portrait-tile.is-active img {
  filter: grayscale(0);
  border-color: var(--accent-2);
  box-shadow: var(--shadow-card);
}
.portrait-tile.is-active span { color: var(--accent-2-deep); }

.voices .wrap { position: relative; }

.voice-panel {
  display: none;
  position: absolute;
  top: 0;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 600px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 28px 24px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  text-align: left;
  z-index: 10;
  animation: vp-in .25s ease;
}
.voice-panel.is-open { display: block; }
@keyframes vp-in {
  from { opacity: 0; transform: translateX(-50%); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* Caret pointing down to the clicked portrait */
.vp-caret {
  position: absolute;
  bottom: -8px;
  width: 16px; height: 16px;
  background: var(--bg-elev);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transform: rotate(45deg);
  z-index: 1;
}

.vp-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-faint);
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
}
.vp-close:hover { color: var(--ink); }

.vp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.vp-portrait {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--accent-2);
  flex-shrink: 0;
}
.vp-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.vp-cred {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.3;
  margin-top: 2px;
}

.vp-track {
  overflow: hidden;
  touch-action: pan-y;
}
.vp-text {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  border-left: 3px solid var(--accent-2);
  padding-left: 16px;
  margin: 0 0 12px;
}
.vp-source {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.03em;
  margin: 0 0 16px;
  padding-left: 19px;
}

.vp-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  transition: border-color .2s, color .2s;
  margin-left: 19px;
  margin-bottom: 12px;
}
.vp-audio-btn:hover {
  border-color: var(--accent-2);
  color: var(--accent-2-deep);
}
.vp-audio-progress {
  height: 2px;
  background: var(--accent-2);
  width: 0;
  transition: width .2s;
  margin: 0 19px 12px;
  border-radius: 1px;
}

.vp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.vp-arrow {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 28px; height: 28px;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
}
.vp-arrow:hover:not([disabled]) {
  border-color: var(--accent-2);
  color: var(--accent-2);
}
.vp-arrow[disabled] {
  opacity: .3;
  cursor: default;
}

.vp-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.vp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: none;
  background: var(--rule);
  cursor: pointer;
  padding: 0;
  transition: background .2s;
}
.vp-dot.is-active { background: var(--accent-2); }
.vp-dot:hover { background: var(--accent-2-deep); }

.vp-counter {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-top: 4px;
  margin-bottom: 8px;
}

.vp-cta {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.vp-cta:hover { color: var(--accent-2-deep); }

/* Quote clip player (used by quote-clip.js) */
.quote-clip-wrap { margin-top: 8px; }
.quote-clip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.quote-clip-btn:hover {
  border-color: var(--accent-2);
  color: var(--accent-2-deep);
}
.quote-clip-btn-icon { font-size: 12px; }
.quote-clip-btn-duration { color: var(--ink-faint); }
.quote-clip-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
  background: #000;
}
.quote-clip-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.quote-clip-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.quote-clip-yt-link {
  color: var(--ink-dim);
  text-decoration: none;
}
.quote-clip-yt-link:hover { color: var(--accent); }
.quote-clip-close {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}
.quote-clip-close:hover { color: var(--ink); }

/* 12. STATS */
.stats {
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--rule);
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px 22px;
  background: var(--bg-elev);
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height: 260px;
}
.stat-card:hover,
.stat-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
  opacity: 1;
}
.stat-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.stat-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 800;
  color: var(--accent-2);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 4px 0 14px;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.stat-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 28ch;
  margin: 0 auto;
}
.stat-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color .2s ease;
}
.stat-card:hover .stat-cta,
.stat-card:focus-visible .stat-cta { color: var(--accent-2-deep); }

.stat-sparkline {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto 10px;
  overflow: visible;
}
.sparkline-line {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke .2s ease;
}
.sparkline-fill {
  fill: var(--accent-2);
  opacity: 0.10;
}
.sparkline-dot { fill: var(--accent-2); transition: fill .2s ease; }
.sparkline-dot-end { fill: var(--accent-2-deep); }
.sparkline-val {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  fill: var(--ink-dim);
}
.sparkline-val-end {
  fill: var(--accent-2-deep);
  font-weight: 700;
}
.sparkline-year {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--ink-faint);
  letter-spacing: 0.05em;
}
.stat-card:hover .sparkline-line,
.stat-card:focus-visible .sparkline-line { stroke: var(--accent-2-deep); }
.stat-card:hover .sparkline-dot,
.stat-card:focus-visible .sparkline-dot { fill: var(--accent-2-deep); }

/* 13. DEMANDS, moved to dispensary/assets/demands.css (v2).
   The old .demands / .demand-* rules were removed 2026-04-24 when the
   landing-page Demands section was rebuilt as .demands-v2 / .dv2-*. */

/* 14. FINAL CTA */
.cta-final {
  text-align: center;
  padding: var(--section-pad) var(--gutter);
  border-top: 1px solid var(--rule);
  background: linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 500px; height: 500px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(217,119,66,.06) 0%, transparent 60%);
  pointer-events: none;
}
.cta-final-inner {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}
.counter-bare { text-align: center; }
.counter-bare-num {
  font-family: var(--font-serif);
  font-size: 48px; font-weight: 800;
  color: var(--accent-2);
  font-feature-settings: 'tnum';
  line-height: 1;
}
.counter-bare-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 8px;
}
.cta-final h2 {
  font-size: 28px;
  line-height: 1.15;
  margin: 24px 0 28px;
}

/* 15. FOOTER (2026-05-20: matches sibling pages, single flowing <p> of
   links separated by middle-dots, mono uppercase. Disclaimer paragraphs
   sit below in .site-footer-legal, mono mixed-case for contrast. */
.site-footer {
  padding: 40px var(--gutter);
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid var(--rule);
}
.site-footer > p {
  max-width: 820px;
  margin: 0 auto 18px;
  line-height: 1.9;
}
.site-footer > p a { color: var(--ink-dim); text-decoration: none; }
.site-footer > p a:hover { color: var(--accent); }

.site-footer-legal {
  max-width: 680px;
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.site-footer-legal p {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 8px;
  text-transform: none;
}
.site-footer-legal p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------
   15a. THE POLICY VACUUM
   Canada AI legislation impact section. Full-bleed deep moss
   green hammer that sits between hero and wiify on landing.
   Uses existing tokens (accent, honey, accent-2) only.
   --------------------------------------------------------- */
.vacuum {
  background: var(--accent);
  color: var(--bg-light);
  padding: clamp(56px, 8vw, 96px) 0;
  position: relative;
  overflow: hidden;
}
.vacuum::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(217, 119, 66, 0.09), transparent 60%),
    radial-gradient(circle at 90% 80%, rgba(139, 44, 27, 0.12), transparent 55%);
  pointer-events: none;
}
.vacuum::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-2) 50%, transparent 100%);
  pointer-events: none;
}
.vacuum .wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.vacuum-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.vacuum-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vacuum-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(217, 119, 66, 0.22);
  display: inline-block;
}

.vacuum-headline {
  font-family: var(--font-serif);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 24px;
}
.vacuum-headline-strike s {
  text-decoration: line-through;
  text-decoration-color: var(--accent-2);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  color: rgba(255, 255, 255, 0.9);
}

.vacuum-body {
  font-size: clamp(16px, 1.6vw, 18.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 22px;
  max-width: 56ch;
}
.vacuum-body strong {
  color: var(--accent-2);
  font-weight: 700;
}
/* ZERO emphasis on the dark-green vacuum card (2026-05-20).
   Inline span in .vacuum-body, all-caps red, slightly larger than
   the surrounding body so it reads at a glance. */
.vacuum-zero {
  display: inline-block;
  color: #FF4438;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 1.15em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 2px;
}
.vacuum-bar-num-zero {
  color: #FF4438 !important;
  font-weight: 800;
  font-size: 1.25em;
}

.vacuum-punch {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: #fff;
  border-left: 3px solid var(--accent-2);
  padding: 6px 0 6px 18px;
  margin: 0 0 28px;
  max-width: 52ch;
}

.vacuum-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-2);
  color: var(--bg-light);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(217, 119, 66, 0.35);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.vacuum-cta:hover,
.vacuum-cta:focus-visible {
  transform: translateY(-2px);
  background: var(--accent-2-deep);
  box-shadow: 0 8px 22px rgba(217, 119, 66, 0.45);
  outline: none;
}

/* ---- Bar chart ---- */
.vacuum-chart {
  margin: 0;
  padding: 24px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}
.vacuum-chart-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 14px;
}
.vacuum-bars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vacuum-bar {
  display: grid;
  grid-template-columns: 32px minmax(88px, auto) 1fr 36px;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  color: #fff;
}
.vacuum-bar-flag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--accent);
  background: var(--bg-light);
  border-radius: 4px;
  padding: 3px 0;
}
.vacuum-bar-name {
  font-family: var(--font-sans);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.vacuum-bar-track {
  position: relative;
  height: 18px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.vacuum-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-2) 0%, #e89060 100%);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(217, 119, 66, 0.35);
  transition: width 900ms cubic-bezier(.2, .7, .2, 1);
}
.vacuum-bar.motion-in .vacuum-bar-fill {
  width: calc(var(--pct) * 1%);
}
.vacuum-bar-num {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  color: #fff;
  font-feature-settings: 'tnum';
}
.vacuum-bar-canada .vacuum-bar-fill {
  background: linear-gradient(90deg, var(--danger) 0%, #b13c27 100%);
  box-shadow: 0 0 10px rgba(139, 44, 27, 0.55);
}
.vacuum-bar-canada .vacuum-bar-num { color: rgba(255, 255, 255, 0.7); }
/* .vacuum-bar-strike + <s>1</s> treatment removed 2026-05-20 with the
   shift to a bold red "0" (vacuum-bar-num-zero, ZERO frame). */

.vacuum-chart-note {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin: 16px 0 10px;
}
.vacuum-chart-note em {
  font-style: italic;
  color: var(--accent-2);
}
.vacuum-source {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.5;
}

/* ---- Tumbler Ridge expander (sits inside the chart figure) ---- */
.vacuum-tumbler {
  margin-top: 18px;
  border: 1px solid rgba(217, 119, 66, 0.35);
  border-radius: 10px;
  background: rgba(139, 44, 27, 0.18);
  overflow: hidden;
  transition: border-color .2s ease, background .2s ease;
}
.vacuum-tumbler[open] {
  background: rgba(139, 44, 27, 0.24);
  border-color: rgba(217, 119, 66, 0.55);
}

.vacuum-tumbler-btn {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  user-select: none;
  transition: background .18s ease;
  outline: none;
}
.vacuum-tumbler-btn::-webkit-details-marker { display: none; }
.vacuum-tumbler-btn::marker { content: ''; }
.vacuum-tumbler-btn:hover,
.vacuum-tumbler-btn:focus-visible {
  background: rgba(139, 44, 27, 0.30);
}
.vacuum-tumbler-btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent-2);
}

.vacuum-tumbler-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--danger);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 10px rgba(139, 44, 27, 0.45);
}
.vacuum-tumbler-label {
  flex: 1;
  line-height: 1.3;
}
.vacuum-tumbler-chev {
  width: 12px;
  height: 12px;
  position: relative;
  flex-shrink: 0;
}
.vacuum-tumbler-chev::before,
.vacuum-tumbler-chev::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--accent-2);
  border-radius: 1px;
  transition: transform .24s ease, opacity .24s ease;
}
.vacuum-tumbler-chev::before {
  width: 12px; height: 2px;
  transform: translate(-50%, -50%);
}
.vacuum-tumbler-chev::after {
  width: 2px; height: 12px;
  transform: translate(-50%, -50%);
}
.vacuum-tumbler[open] .vacuum-tumbler-chev::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.vacuum-tumbler-body {
  padding: 4px 16px 16px;
  animation: vacuum-tumbler-in 260ms cubic-bezier(.2, .7, .2, 1);
}
@keyframes vacuum-tumbler-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vacuum-tumbler-lede {
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
  color: #fff;
  margin: 0 0 14px;
}

.vacuum-tumbler-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vacuum-tumbler-facts li {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  padding: 10px 12px 10px 34px;
  position: relative;
  background: rgba(0, 0, 0, 0.18);
  border-left: 3px solid var(--danger);
  border-radius: 0 4px 4px 0;
}
.vacuum-tumbler-facts li::before {
  content: '';
  position: absolute;
  left: 14px; top: 15px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px rgba(139, 44, 27, 0.4), 0 0 8px rgba(139, 44, 27, 0.5);
}
.vacuum-tumbler-facts strong {
  color: var(--accent-2);
  font-weight: 700;
}

.vacuum-tumbler-source {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.55;
}
.vacuum-tumbler-link {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease;
}
.vacuum-tumbler-link:hover,
.vacuum-tumbler-link:focus-visible {
  color: #f39a6a;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .vacuum-bar-fill { transition: none; }
  .vacuum-bar .vacuum-bar-fill { width: calc(var(--pct) * 1%); }
  .vacuum-tumbler,
  .vacuum-tumbler-btn,
  .vacuum-tumbler-chev::before,
  .vacuum-tumbler-chev::after,
  .vacuum-tumbler-link { transition: none; }
  .vacuum-tumbler-body { animation: none; }
}

@media (min-width: 880px) {
  .vacuum-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
  }
  .vacuum-headline { margin-bottom: 28px; }
  .vacuum-chart { padding: 28px 26px 22px; }
  .vacuum-bar { grid-template-columns: 36px minmax(120px, auto) 1fr 40px; font-size: 15px; }
  .vacuum-bar-num { font-size: 22px; }
}

/* 16. TABLET (640px+) */
@media (min-width: 640px) {
  :root { --gutter: 32px; --section-pad: 96px; }

  h1 { font-size: 38px; }
  h2 { font-size: 30px; }

  .hero { padding: 100px 0 80px; }
  .hero .wrap { gap: 48px; }

  .form-card { padding: 36px 32px; }

  .portrait-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .portrait-tile span { font-size: 10px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stat-card { padding: 36px 32px 28px; min-height: 300px; }
  .stat-num { font-size: 56px; }

  .demands h2 { font-size: 42px; }
  .demand-title { font-size: 20px; }
  .demand-highlight .demand-title { font-size: 22px; }
  .cta-final h2 { font-size: 34px; }
  .counter-bare-num { font-size: 56px; }
}

/* 17. DESKTOP (1024px+) */
@media (min-width: 1024px) {
  :root { --gutter: 40px; }

  h1 { font-size: 44px; }

  .hero-cinema .hero-video {
    max-height: 60vh;
    object-fit: contain;
  }

  .hero { padding: 80px 0 60px; }
  .hero .wrap {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 64px;
    /* align-items: start pins the petition form to the top of its grid
       column so it stays above the fold next to the (potentially taller)
       hero-stat-shell. The prior align-items: center vertically split
       the height difference, pushing the form ~135px below the top of
       the variant B shell, often below the fold. 2026-05-11 post-launch
       tweak. */
    align-items: start;
  }
  .hero-copy h1 { font-size: 44px; }
  .hero-subline { font-size: 17px; }
  .hero-counter-num { font-size: 56px; }

  .form-card { padding: 40px; }

  .portrait-grid { grid-template-columns: repeat(6, 1fr); max-width: 900px; }
  .portrait-tile span { font-size: 10px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .stat-card { padding: 48px 44px 36px; min-height: 340px; }
  .stat-num { font-size: 64px; }
  .stat-sparkline { max-width: 280px; }
  .stat-text { font-size: 15.5px; }

  .demands h2 { font-size: 48px; }
  .demand-title { font-size: 21px; }
  .demand-highlight .demand-title { font-size: 23px; }
  .cta-final h2 { font-size: 38px; }
}

/* 18. EXTENDED VOICES GRID */
.extended-voices {
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.extended-voices h2 { margin-bottom: 8px; }
.extended-voices .voices-text { margin-bottom: 28px; }

/* Filter pills */
.ext-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.ext-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1.3;
}
.ext-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ext-pill.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ext-pill-count {
  font-size: 10px;
  opacity: .6;
}

/* Grid */
.ext-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Tiles */
.ext-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease, opacity .25s ease;
}
.ext-tile:hover { transform: translateY(-2px); }
.ext-tile.is-active { transform: translateY(-2px); }

.ext-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  border: 1.5px solid var(--rule);
  background: var(--bg-elev-2);
  filter: grayscale(100%);
  transition: filter .3s, border-color .2s, box-shadow .2s;
}
.ext-tile:hover img {
  filter: grayscale(0);
  border-color: var(--accent-2);
  box-shadow: var(--shadow-soft);
}
.ext-tile.is-active img {
  filter: grayscale(0);
  border-color: var(--accent-2);
  box-shadow: var(--shadow-soft);
}
.ext-tile span {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  line-height: 1.3;
}
.ext-tile.is-active span { color: var(--accent-2-deep); }

/* Hidden tiles (filtered out) */
.ext-tile[hidden] { display: none; }

/* 18c. EXTENDED VOICE BUBBLE (inline, matching voice-panel pattern) */
.extended-voices .wrap { position: relative; }

#extended-card {
  display: none;
  position: absolute;
  width: calc(100% - 32px);
  max-width: 600px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px 24px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  text-align: left;
  z-index: 10;
  animation: ext-bubble-in .25s ease;
}
#extended-card.is-open { display: block; }
@keyframes ext-bubble-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Caret pointing down to the clicked tile */
.ext-bubble-caret {
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  width: 16px; height: 16px;
  background: var(--bg-elev);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transform: rotate(45deg);
  z-index: 1;
}

.ext-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-faint);
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
}
.ext-close:hover { color: var(--ink); }

.ext-bubble-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ext-bubble-portrait {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--accent-2);
  flex-shrink: 0;
}
.ext-bubble-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.ext-bubble-cred {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.3;
  margin-top: 2px;
}

.ext-bubble-quote {
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  border-left: 3px solid var(--accent-2);
  padding-left: 16px;
  margin: 0 0 12px;
}
.ext-bubble-source {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.03em;
  margin: 0 0 12px;
  padding-left: 19px;
}
/* Extended bubble audio button, mirrors .vp-audio-btn */
.ext-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  transition: border-color .2s, color .2s;
  margin: 0 0 12px 19px;
}
.ext-audio-btn:hover {
  border-color: var(--accent-2);
  color: var(--accent-2-deep);
}
.ext-audio-progress {
  height: 2px;
  background: var(--accent-2);
  width: 0;
  transition: width .2s;
  margin: 0 19px 12px;
  border-radius: 1px;
}
.ext-bubble-cta {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-decoration: none;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.ext-bubble-cta:hover { color: var(--accent-2-deep); }

/* 18b. EXTENDED GRID, RESPONSIVE */
@media (min-width: 640px) {
  .ext-grid { grid-template-columns: repeat(6, 1fr); }
  .ext-tile span { font-size: 9px; }
}
@media (min-width: 1024px) {
  .ext-grid { grid-template-columns: repeat(8, 1fr); }
  .ext-tile span { font-size: 9px; }
}

/* 19. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero-cinema { display: none; }
}

/* 20. KARAOKE, per-word highlighting as audio plays
   Visual: sliding underline + color + weight triple-cue so the active word
   is unmistakable even in italic serif where weight alone is subtle. */
.vp-word, .ext-word {
  display: inline;
  color: inherit;
  font-weight: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .vp-word, .ext-word {
    transition: color 120ms ease, font-weight 120ms ease, background-size 90ms linear;
  }
}
.vp-word.is-spoken, .ext-word.is-spoken {
  color: var(--ink-faint);
}
.vp-word.is-active, .ext-word.is-active {
  color: var(--accent-2-deep);
  font-weight: 700;
  background-image: linear-gradient(var(--accent-2), var(--accent-2));
  background-size: 100% 2px;
}

/* =========================================================
   19. PHASE 2 · MOTION LAYER
   Hand-rolled transitions + keyframes. Triggered by motion.js.
   ========================================================= */

/* F3 · Hero gradient-mesh backdrop */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -1;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 35%, rgba(190,90,42,0.35) 0%, transparent 50%),
    radial-gradient(circle at 82% 22%, rgba(220,160,50,0.24) 0%, transparent 50%),
    radial-gradient(circle at 48% 82%, rgba(46,93,63,0.16) 0%, transparent 55%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: mesh-drift 8s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.8s ease-out;
  pointer-events: none;
}
.hero.motion-in::before,
.hero.motion-done::before { opacity: 1; }
@keyframes mesh-drift {
  0%   { background-position:   0%   0%; }
  33%  { background-position: 100%  30%; }
  66%  { background-position:  20% 100%; }
  100% { background-position:   0%   0%; }
}

/* F4 · Headline two-line mask reveal */
.hero-copy h1 .mask-line {
  display: block;
  overflow: hidden;
  line-height: 1.15;
}
.hero-copy h1 .mask-line > span {
  display: inline-block;
  transform: translateY(115%);
  will-change: transform;
}
.hero.motion-in .hero-copy h1 .mask-line > span {
  transform: translateY(0);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.12s;
}
.hero.motion-in .hero-copy h1 .mask-line:nth-child(2) > span {
  transition-delay: 0.3s;
}
.hero.motion-done .hero-copy h1 .mask-line > span {
  transform: none;
  transition: none;
}

/* Subhead + proof + form fade-in (hero cascade continuation) */
.hero-copy .hero-subline,
.hero-copy .hero-proof,
.hero-form {
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform;
}
.hero.motion-in .hero-copy .hero-subline {
  opacity: 1; transform: none;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.5s,
              transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}
.hero.motion-in .hero-copy .hero-proof {
  opacity: 1; transform: none;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.65s,
              transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.65s;
}
.hero.motion-in .hero-form {
  opacity: 1; transform: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.6s,
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}
.hero.motion-done .hero-copy .hero-subline,
.hero.motion-done .hero-copy .hero-proof,
.hero.motion-done .hero-form {
  opacity: 1; transform: none; transition: none;
}

/* F2 · Portrait staggered entrance (opacity-only, preserves hover transform) */
.portrait-tile {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.portrait-tile.motion-in { opacity: 1; }

/* F5 · Sequenced demand reveal, moved to demands.css (.demands-v2 .motion-in). */

/* F6 · Stat tick-up, numeric span animates, suffix stays static */
.stats .js-tick {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  display: inline-block;
  min-width: 1ch;
}

/* F8 · Extended voices section fade */
.extended-voices {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.extended-voices.motion-in { opacity: 1; transform: none; }

/* Phase 0 · Turnstile retry button */
.form-retry {
  display: none;
  margin: 8px 0 0;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}
.form-retry:hover { border-color: var(--accent-2); color: var(--accent-2-deep); }

/* Reduced motion, everything snap-final, no animation */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; background-position: 50% 50%; opacity: 1; transition: none; }
  .hero-copy h1 .mask-line > span,
  .hero-copy .hero-subline,
  .hero-copy .hero-proof,
  .hero-form,
  .portrait-tile,
  .demands-list > li,
  .extended-voices {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   COUNT STATE SWAP (Phase 0 founding signer)
   /api/count is threshold-gated. Below the founding threshold
   (default 1,000) the raw count is not revealed publicly. Every
   counter surface carries TWO variants in the DOM:

     .count-when-crossed  visible once the campaign crosses 1,000
     .count-when-opaque   visible before that, inviting early signers

   The live <html data-count-state="opaque|crossed"> attribute
   (set inline in <head>, refreshed by loadCount()) drives which
   variant renders. No flash, no orphan labels.
   ========================================================== */

.count-when-crossed { display: none; }
html[data-count-state="crossed"] .count-when-crossed { display: block; }
html[data-count-state="crossed"] .count-when-opaque  { display: none; }

/* Hero: opaque variant, founding-wave invitation.
   Typography aligned with the hero counter: serif italic headline in the
   rust accent, followed by a mono micro-label. */
.hero-counter-open {
  max-width: 360px;
  text-align: center;
  margin: 0 auto;
}
.hero-counter-open-h {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  color: var(--accent-2);
  line-height: 1.2;
  margin-bottom: 2px;
}
.hero-counter-open-h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  color: var(--accent-2-deep);
  line-height: 1.2;
  margin-bottom: 14px;
}
.hero-counter-open-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.5;
}
.hero-counter-open-sub-claim {
  margin-top: 6px;
  color: var(--ink);
  font-weight: 600;
}

/* Form-counter-line opaque variant: keeps the same visual weight as the
   crossed variant so the form card layout does not shift between states. */
.form-counter-line--open {
  color: var(--ink);
  font-weight: 600;
}

/* Final CTA opaque variant: slightly smaller than the numeric counterpart
   to leave room for two-line copy without crowding the adjacent headline. */
.counter-bare-num-open {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 600;
  font-style: italic;
  color: var(--accent-2);
  line-height: 1.1;
}

/* Small-screen refinement: tighten the hero opaque headline so it sits
   comfortably on a phone without wrapping awkwardly. */
@media (max-width: 560px) {
  .hero-counter-open-h { font-size: 20px; }
  .counter-bare-num-open { font-size: 30px; }
}

@media (min-width: 768px) {
  .hero-counter-open-h { font-size: 26px; }
  .counter-bare-num-open { font-size: 42px; }
}

/* =========================================================
   POEM TEASER (quiet closer between cta-final and footer)
   Links to /imagine. Styled as a soft "P.S." register so it
   does not compete with the conversion CTA above it.

   Visibility contract: the teaser is ALWAYS visible by default.
   We never gate content visibility on JS loading. The fade-in
   below is a progressive enhancement layered via animation-
   timeline: view() (Chrome 115+/Edge 115+); browsers without
   support just see the teaser at its natural opacity. The
   .motion-in class added by initFadeSection in motion.js is a
   no-op on visibility and exists only as a styling hook.
   ========================================================= */
.poem-teaser {
  background: var(--ink);
  border-top: none;
  padding: 0 0 calc(var(--section-pad) * 0.9);
  text-align: center;
  color: var(--bg);
}
/* Thin slice of the imagine-poem backplate sits flush at the top of the
   teaser as a visual hatch to the poem page. Loads lazily so it does not
   block first paint. */
.poem-teaser-image {
  display: block;
  width: 100%;
  height: clamp(96px, 16vw, 140px);
  object-fit: cover;
  object-position: center 38%;
  margin: 0 0 calc(var(--section-pad) * 0.8);
}
.poem-teaser > .poem-teaser-inner {
  padding: 0 var(--gutter);
}

/* Progressive enhancement: scroll-tied fade-in for browsers with
   CSS scroll-driven animations. Falls back to always-visible. */
@supports (animation-timeline: view()) {
  .poem-teaser {
    animation: poemTeaserEnter linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  @keyframes poemTeaserEnter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}
.poem-teaser-inner {
  max-width: 38rem;
  margin: 0 auto;
}
.poem-teaser-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.7;
  margin: 0 0 1.6rem;
}
.poem-teaser-line {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.6vw + 0.7rem, 1.7rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--bg);
  margin: 0 0 0.85rem;
  text-wrap: balance;
}
.poem-teaser-line:last-of-type { margin-bottom: 1.8rem; }
.poem-teaser-line em {
  font-style: italic;
  color: var(--accent-2);
  font-weight: 600;
}
.poem-teaser-line-faint { color: var(--ink-faint); opacity: 0.85; }
.poem-teaser-cta {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--accent-2);
  border-bottom: 1px dotted currentColor;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.poem-teaser-cta em { font-style: italic; font-weight: 600; }
.poem-teaser-cta:hover {
  color: var(--bg);
  border-bottom-style: solid;
}
.poem-teaser-secondary {
  margin: 18px 0 0; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); opacity: 0.6;
}
.poem-teaser-secondary a {
  color: var(--ink-faint); text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.poem-teaser-secondary a:hover { color: var(--accent-2); }
.poem-teaser-cta:focus-visible {
  outline: 2px dashed var(--accent-2);
  outline-offset: 4px;
  border-bottom-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .poem-teaser { animation: none; opacity: 1; transform: none; }
}


/* =========================================================
   IDEMPOTENT PHOENIX, Phase 1 (2026-05-11)
   New component blocks for the landing rebuild. Scoped under
   dedicated prefixes so they coexist with the legacy hero /
   wiify / extended-voices CSS until those are retired.
   ========================================================= */

/* ── HERO VARIANT INFRASTRUCTURE ──────────────────────────────
   Removed 2026-05-20. The page now ships a single Godfathers hero;
   the A/B picker, data-hero-variant attribute, and inactive-variant
   hide rules are gone.
   ========================================================= */

/* ── 30. HERO STAT ──────────────────────────────────────────
   The big "1" plus comparison rows plus source line. Lives
   inside the existing .hero .hero-copy column so the right-
   rail form layout is preserved. The h1 carries the
   prosecutorial headline; the numeral is decorative-but-aria-
   labelled via the aria-label on .hero-stat-figure.
   ========================================================= */
.hero-stat-shell {
  margin-bottom: 32px;
}
.hero-stat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  margin-bottom: 12px;
}
.hero-stat-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(217,119,66,.12);
}
.hero-stat-headline {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 22ch;
}
.hero-stat-figure {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: 16px;
}
.hero-stat-num {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(140px, 18vw, 220px);
  line-height: 0.9;
  color: var(--accent-2);
  letter-spacing: -0.06em;
  font-feature-settings: 'tnum';
  /* The number is visual weight; suppress descender padding so it
     vertically centers with the comparison list. */
  margin: 0;
  padding: 0;
}
.hero-stat-compare {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.hero-stat-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.hero-stat-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-stat-row dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero-stat-row dd {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}
.hero-stat-row:first-child dt { color: var(--accent-2-deep); }
.hero-stat-row:first-child dd {
  font-weight: 600;
  color: var(--ink);
}
.hero-stat-row-peer dd {
  color: var(--ink-dim);
  font-size: 14px;
}
.hero-stat-source {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin: 0;
}

/* ── 31. TRIPTYCH (Summit / Liability / Transition) ──────────
   The standfirst card-buttons. Sit between the hero headline
   and the hero-stat-figure on variant A; sit between the
   portrait pair and the source citation on variant B. Each
   card anchor-scrolls to its matching <li id="demand-N"> in
   the demands-v2 section. Visual style matches
   .dv2-card-secondary (the demand cards they link to): light
   background, thin rule, 4px accent-2 left bar. Hover lifts
   the card (matches .vacuum-cta affordance). Win #3
   (2026-05-16) promoted from text rows to card-buttons.
   ========================================================= */
.triptych {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 24px 0 24px;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
@media (min-width: 640px) {
  .triptych {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}
.triptych > li { list-style: none; margin: 0; padding: 0; }
.triptych-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 16px 18px;
  /* Warm-paper card color (Win #3b, 2026-05-16). Replaced
     var(--bg-elev) (#FFFCF2, near-white) with a subtle vertical
     gradient that picks up the hero's cream palette instead of
     reading as a white slab against the page background. The
     bottom stop is a touch warmer to give a printed-page feel. */
  background: linear-gradient(180deg, #FCF6E1 0%, #F4ECCB 100%);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent-2);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.triptych-col:hover,
.triptych-col:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--accent);
  border-left-color: var(--accent-2);
  /* Slightly brighter on hover, so the card 'lifts' visually. */
  background: linear-gradient(180deg, #FEFAEC 0%, #F8F1D6 100%);
}
.triptych-col:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.triptych-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0;
  text-align: center;
}
.triptych-q {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  margin: 0;
  text-align: center;
}
.triptych-a {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.triptych-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-top: 4px;
}
.triptych-col:hover .triptych-cta,
.triptych-col:focus-visible .triptych-cta { color: var(--accent-2-deep); }

/* ── 31aa. HERO INLINE VOICE PANEL (Win #3d, 2026-05-16) ─────
   Inline expander shown directly under the .hero-portrait-pair
   when the visitor clicks "Hear Hinton on the warning" or
   "Hear Bengio on the IAEA model" inside the hero. Replaces
   the prior scroll-to-band behavior so the demand triptych
   below stays in view.
   ========================================================= */
.hero-portrait-stage { position: relative; }

.hero-voice-panel {
  margin: 14px 0 12px;
  padding: 14px 18px 16px;
  background: linear-gradient(180deg, #FCF6E1 0%, #F4ECCB 100%);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  position: relative;
  box-shadow: var(--shadow-card);
}

/* Desktop: overlay the panel ON TOP of the portrait pair instead of
   pushing the triptych below. The .hero-portrait-stage wrapper is the
   positioning context, so top:0 / left:0 / right:0 covers the pair. */
@media (min-width: 1024px) {
  .hero-voice-panel:not([hidden]) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 5;
    box-shadow: 0 18px 36px rgba(28, 38, 32, 0.18), 0 4px 10px rgba(28, 38, 32, 0.10);
    animation: hvp-overlay-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}
@keyframes hvp-overlay-in {
  0%   { opacity: 0; transform: scale(0.96) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.hvp-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.hvp-close:hover { color: var(--ink); background: rgba(0,0,0,0.04); }
.hvp-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hvp-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 28px 10px 0;
}
.hvp-portrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}
.hvp-meta-text { min-width: 0; }
.hvp-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.hvp-cred {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 2px 0 0;
}
.hvp-quote {
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 6px;
}
.hvp-source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin: 0 0 12px;
}
.hvp-audio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease;
}
.hvp-audio:hover { background: #1F4A2F; }
.hvp-audio:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.hvp-audio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #fff;
  line-height: 1;
  padding-left: 1px;
}
.hvp-audio-icon svg { display: block; }
.hvp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 4px;
}
.hvp-arrow {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 1;
  color: var(--accent-2-deep);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.hvp-arrow:hover:not(:disabled) {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}
.hvp-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hvp-arrow:disabled { opacity: 0.3; cursor: default; }
.hvp-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hvp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.hvp-dot:hover { transform: scale(1.2); }
.hvp-dot.is-active {
  background: var(--accent-2-deep);
  border-color: var(--accent-2-deep);
}
.hvp-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hvp-counter {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  margin: 0;
}

/* ── 31b. FULL-WIDTH TRIPTYCH (variant B only) + FOUNDING WAVE
       Win #3d, 2026-05-16. The triptych and the founding-wave
       counter both promoted from in-column elements to full-width
       grid rows that sit BELOW the .hero-copy / .hero-form row on
       desktop, spanning both columns. Variant A keeps its in-shell
       triptych above the figure; only variant B reveals the wide
       triptych. The founding wave is always present and always
       centered, on both variants.
   ========================================================= */
/* The ask header (2026-05-20). Frames the hero triptych. */
.hero-triptych-header {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 32px); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--accent-2-deep);
  margin: 36px auto 18px; max-width: 26ch;
  text-align: center; text-wrap: balance;
}
.hero-triptych-wide { display: block; }
.hero-triptych-wide .triptych {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.hero-proof {
  /* Override the in-column flex defaults from section 5 so the row
     centers on the page rather than pinning left. */
  width: 100%;
  text-align: center;
  justify-content: center;
}
.hero-proof .hero-counter,
.hero-proof .hero-counter-open {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  /* On desktop the hero is a 2-col grid (1fr | 440px). Span both
     columns so the three card-buttons + the founding wave block
     run the full width of the page wrap. */
  .hero-triptych-header,
  .hero-triptych-wide,
  .hero-proof {
    grid-column: 1 / -1;
  }
}

/* ── 31c. MP-PREVIEW HIDE ────────────────────────────────────
   The Godfathers hero already surfaces the next-action triptych
   at the bottom of the hero (full-width). The pre-sign "Step 2,
   also 60 seconds" card on the right column would duplicate that
   pitch, so hide it. The card is retained in markup for possible
   future variants.
   ========================================================= */
.mp-preview { display: none; }

/* ── 32. WIIFY-UP-FRONT BAR ─────────────────────────────────
   Six identity-affirming buttons immediately under the hero.
   Above-the-fold-or-just-below on desktop, below the form on
   mobile. Each routes to /for-{id} where the segment-specific
   proof and MP-email widget live.
   ========================================================= */
.wiify-bar {
  padding: 64px 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.wiify-bar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  margin: 0 0 14px;
}
.wiify-bar-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(217,119,66,.12);
}
.wiify-bar-headline {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 28ch;
}
.wiify-bar-sub {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 56ch;
}
.wiify-bar-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) {
  .wiify-bar-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 1024px) {
  .wiify-bar-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
.wiify-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 16px 16px;
  background: var(--bg);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, transform .15s, box-shadow .15s;
  min-height: 116px;
  height: 100%;
}
.wiify-bar-btn:hover,
.wiify-bar-btn:focus-visible {
  border-color: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  opacity: 1;
  outline: none;
}
.wiify-bar-btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}
.wiify-bar-btn-icon {
  width: 28px; height: 28px;
  color: var(--accent);
  margin-bottom: 4px;
}
.wiify-bar-btn-icon svg { width: 100%; height: 100%; }
.wiify-bar-btn-label {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.wiify-bar-btn-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.35;
}
.wiify-bar-more {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  margin: 0;
}
.wiify-bar-more a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.wiify-bar-more a:hover { color: var(--accent-2-deep); border-bottom-color: var(--accent-2); }

/* ── 33. DEFINED ENEMY BAND ─────────────────────────────────
   Five named companies on one tight row. The consistent
   antagonist. Anthropic is named on purpose.
   ========================================================= */
.enemy {
  padding: 48px 0 56px;
  background: var(--ink);
  color: var(--bg);
  position: relative;
}
.enemy::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(217,119,66,.10) 0%, transparent 60%),
    radial-gradient(circle at 88% 80%, rgba(46,93,63,.20) 0%, transparent 65%);
  pointer-events: none;
}
.enemy .wrap { position: relative; z-index: 1; }
.enemy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 14px;
}
.enemy-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(217,119,66,.18);
}
.enemy-headline {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--bg);
  margin: 0 0 22px;
  max-width: 24ch;
}
.enemy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.enemy-list li {
  padding: 8px 18px;
  border: 1.5px solid rgba(217,119,66,.45);
  border-radius: 999px;
  background: rgba(247,242,228,.04);
}
.enemy-name {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: var(--bg);
  letter-spacing: -0.01em;
}
.enemy-line {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  color: rgba(247,242,228,.85);
  margin: 0 0 14px;
  max-width: 60ch;
}
.enemy-line strong {
  color: var(--accent-2);
  font-weight: 700;
}
.enemy-line-cite {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(247,242,228,.55);
  letter-spacing: 0.03em;
  margin-top: 4px;
}
.enemy-cta { margin: 0; }
.enemy-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-decoration: none;
  padding: 10px 18px;
  border: 1.5px solid var(--accent-2);
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.enemy-cta-link:hover,
.enemy-cta-link:focus-visible {
  background: var(--accent-2);
  color: var(--ink);
  opacity: 1;
  outline: none;
}

/* ── 35. GODFATHERS' WARNING BAND ───────────────────────────
   Hinton + Bengio at the very top of the Voices section.
   Largest portraits on the page. Insulin parallel above. The
   ten secondary experts render below at standard portrait
   scale via the existing .portrait-grid markup.
   ========================================================= */
.gf-band {
  margin: 32px 0 48px;
  padding: 0;
  text-align: left;
}
/* Godfathers band preamble (2026-05-20). Three-tier typographic
   hierarchy: headline + lede + credits-list. */
.gf-band-headline {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.4vw, 38px); font-weight: 700;
  line-height: 1.14; letter-spacing: -0.015em; color: var(--ink);
  max-width: 22ch; margin: 0 auto 14px;
  text-align: center; text-wrap: balance;
}
.gf-band-lede {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px); line-height: 1.5;
  color: var(--ink-dim);
  max-width: 44ch; margin: 0 auto 28px; text-align: center;
}
.gf-band-credits {
  list-style: none; padding: 0; margin: 0 auto 36px;
  max-width: 720px; display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 720px) {
  .gf-band-credits { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.gf-band-credits li {
  font-family: var(--font-serif); font-size: 15.5px;
  line-height: 1.55; color: var(--ink);
  padding: 14px 18px; background: var(--bg-elev);
  border-left: 3px solid var(--accent-2-deep);
  border-radius: 0 6px 6px 0;
}
.gf-band-credits strong {
  display: block; font-weight: 700; font-size: 16.5px;
  color: var(--accent); margin-bottom: 4px; letter-spacing: -0.005em;
}
.gf-band-stake { font-family: var(--font-serif); font-size: clamp(17px, 1.95vw, 21px); line-height: 1.5; color: var(--ink); max-width: 56ch; margin: 0 auto 36px; padding: 18px 0 0; text-align: center; text-wrap: balance; border-top: 1px solid var(--rule); }
.gf-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  justify-items: center;
}
@media (min-width: 720px) {
  .gf-pair {
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
  }
}
.gf-portrait-well {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 360px;
  text-align: center;
  /* Stretch each well to fill its grid row so the auto-margin on .gf-cta
     below can push the CTA to a consistent baseline across Hinton + Bengio
     even when one institution string wraps to a second line on narrow
     viewports. Phase 8, 2026-05-16. */
  height: 100%;
}
.gf-portrait-wrap {
  width: clamp(160px, 44vw, 220px);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--accent);
  background: var(--bg-elev-2);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  transition: border-color .2s, transform .2s;
}
@media (min-width: 720px) {
  .gf-portrait-wrap {
    width: clamp(220px, 28vw, 360px);
  }
}
.gf-portrait-well:hover .gf-portrait-wrap,
.gf-portrait-well:focus-within .gf-portrait-wrap {
  border-color: var(--accent-2);
  transform: translateY(-2px);
}
.gf-portrait {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(40%);
  transition: filter .3s ease;
}
.gf-portrait-well:hover .gf-portrait,
.gf-portrait-well:focus-within .gf-portrait { filter: grayscale(0); }
.gf-name {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 4px;
}
.gf-institution {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 12px;
}
.gf-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.gf-badge {
  display: inline-block;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  background: rgba(217,119,66,.10);
  border: 1px solid var(--accent-2);
  border-radius: 999px;
}
.gf-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
  /* Pin CTA to the bottom of the .gf-portrait-well so Hinton + Bengio
     CTAs align horizontally across the pair even when one card has a
     longer institution string. Phase 8, 2026-05-16. */
  margin-top: auto;
}
.gf-cta:hover,
.gf-cta:focus-visible {
  background: var(--accent);
  color: var(--bg);
  opacity: 1;
  outline: none;
}
.gf-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gf-cta-icon svg { display: block; }
.gf-band-cite {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0 0 20px;
}
.gf-secondary-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  width: 100%;
  margin: 8px 0 18px;
}
/* The "ten" grid mirrors the legacy .portrait-grid 3-col layout on
   mobile and goes to 5x2 on desktop so it visually reads as the
   supporting cast, not the headliner. */
.portrait-grid.portrait-grid-ten {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 720px) {
  .portrait-grid.portrait-grid-ten {
    grid-template-columns: repeat(5, 1fr);
    max-width: 880px;
  }
}
@media (min-width: 1024px) {
  .portrait-grid.portrait-grid-ten {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* CONTINUOUS MARQUEE (2026-05-20, replaces drag-to-scroll).
   The inner .portrait-grid-ten is duplicated once at runtime, then
   animated from translateX(0) to translateX(-50%) for a seamless
   loop. Pauses on hover and focus-within. Respects reduced-motion. */
.portrait-scroller {
  margin: 24px -20px 28px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.portrait-scroller .portrait-grid.portrait-grid-ten {
  display: flex; grid-template-columns: none; gap: 16px;
  max-width: none; margin: 0; padding: 0; width: max-content;
}
.portrait-scroller .portrait-tile { flex: 0 0 140px; }
@media (min-width: 720px) { .portrait-scroller .portrait-tile { flex: 0 0 160px; } }
@media (min-width: 1024px) { .portrait-scroller .portrait-tile { flex: 0 0 180px; } }
.portrait-scroller .portrait-grid-ten.is-marquee {
  animation: marquee-slide 60s linear infinite;
  will-change: transform;
}
.portrait-scroller:hover .portrait-grid-ten.is-marquee,
.portrait-scroller:focus-within .portrait-grid-ten.is-marquee {
  animation-play-state: paused;
}
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-scroller .portrait-grid-ten.is-marquee { animation: none; }
  .portrait-scroller { overflow-x: auto; }
}

/* Marquee variant gates (A/B/C tweak, 2026-05-20 evening).
   data-marquee-variant is set by assets/marquee-experts.js at boot.
   - "both":   JS rAF auto-scroll, pointer drag, arrow buttons
   - "drag":   JS rAF auto-scroll, pointer drag, no arrows
   - "arrows": CSS keyframe (above) keeps running, arrow buttons nudge
               scroll position, drag = native scroll only.
   Reduced-motion fallback above wins over all three variants. */
.portrait-scroller[data-marquee-variant="both"],
.portrait-scroller[data-marquee-variant="drag"] {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-y;
}
.portrait-scroller[data-marquee-variant="both"]::-webkit-scrollbar,
.portrait-scroller[data-marquee-variant="drag"]::-webkit-scrollbar { display: none; }
.portrait-scroller[data-marquee-variant="both"] .portrait-grid-ten.is-marquee,
.portrait-scroller[data-marquee-variant="drag"] .portrait-grid-ten.is-marquee {
  animation: none;
  transform: none;
}
.portrait-scroller[data-marquee-variant="both"].is-dragging,
.portrait-scroller[data-marquee-variant="drag"].is-dragging {
  cursor: grabbing;
  user-select: none;
}
.portrait-scroller[data-marquee-variant="both"]:not(.is-dragging),
.portrait-scroller[data-marquee-variant="drag"]:not(.is-dragging) {
  cursor: grab;
}

.portrait-scroller .portrait-tile img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.portrait-scroller { position: relative; }

/* Tail graphic, links to the new /consensus-extended page. The viz wall
   (added 2026-05-20) sits between the eyebrow copy and the call-to-action
   pill so the 48-portrait scale lands before the click. */
.gf-tail {
  margin: 36px auto 0;
  padding: 28px 28px 24px;
  max-width: 720px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.gf-tail-copy {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
}
/* .gf-tail-link removed 2026-05-20: the .gf-tail-viz anchor above is
   now the single CTA to /consensus-extended. */

/* 48-portrait wall (2026-05-20). 8-col grayscale grid behind a
   centered overlay. Decorative; parent <a> names destination. */
.gf-tail-viz {
  position: relative; display: block; width: 100%; max-width: 560px;
  margin: 0 auto; padding: 8px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--rule);
  text-decoration: none; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gf-tail-viz:hover, .gf-tail-viz:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(28, 38, 32, 0.10); outline: none;
}
.gf-tail-wall {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  filter: grayscale(1) contrast(0.95); opacity: 0.45;
  mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.25) 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.25) 100%);
}
.gf-tail-viz:hover .gf-tail-wall { opacity: 0.6; }
.gf-tail-tile {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  object-position: center top; display: block; border-radius: 2px;
}
.gf-tail-overlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); text-align: center;
  padding: 14px 22px; background: rgba(255, 250, 235, 0.92);
  border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(28, 38, 32, 0.08); pointer-events: none;
}
.gf-tail-overlay-num {
  font-family: var(--font-serif); font-size: 36px; font-weight: 700;
  line-height: 1; color: var(--accent-2-deep); margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.gf-tail-overlay-label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 6px;
}
.gf-tail-overlay-cta {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
@media (min-width: 720px) { .gf-tail-overlay-num { font-size: 44px; } }

/* ── 36. DEMANDS COMPRESSED EXPAND/COLLAPSE ─────────────────
   Each dv2-card collapses its supporting figure into a
   <details>. Cuts ~600vh on the landing without losing the
   substance.
   ========================================================= */
.dv2-card-compressed { padding-bottom: 28px; }
.dv2-expand {
  margin: 18px 0 8px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.dv2-expand-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 160ms ease;
}
.dv2-expand-summary::-webkit-details-marker { display: none; }
.dv2-expand-summary::marker { content: ''; }
.dv2-expand-summary:hover,
.dv2-expand-summary:focus-visible {
  color: var(--accent-2);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Demand 1 sits on a dark-green primary card; brighten the rest-state so
   the affordance is legible against the deep background. */
.dv2-card-primary .dv2-expand-summary { color: #F5C9A9; }
.dv2-card-primary .dv2-expand-summary:hover,
.dv2-card-primary .dv2-expand-summary:focus-visible { color: #FFFFFF; }
.dv2-expand-chev {
  width: 10px; height: 10px;
  display: inline-block;
  position: relative;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.dv2-expand-chev::before,
.dv2-expand-chev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
}
.dv2-expand-chev::before { transform: translate(-50%, -50%) rotate(45deg); margin-left: -2.8px; }
.dv2-expand-chev::after  { transform: translate(-50%, -50%) rotate(-45deg); margin-left: 2.8px; }
.dv2-expand[open] .dv2-expand-chev { transform: rotate(180deg); }
.dv2-expand-body {
  padding: 16px 0 24px;
}

/* ── 37. CINEMA HATCH (90-second case, below the fold) ──────
   The pre-rebuild cinema video, relegated to a click-to-play
   reveal so the first paint stays prosecutorial.
   ========================================================= */
.cinema-hatch {
  margin: 40px auto 0;
  max-width: 520px;
  text-align: center;
}
.cinema-hatch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  transition: border-color .15s, color .15s;
}
.cinema-hatch-btn::-webkit-details-marker { display: none; }
.cinema-hatch-btn::marker { content: ''; }
.cinema-hatch-btn:hover,
.cinema-hatch-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}
.cinema-hatch-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.cinema-hatch-icon svg { display: block; }
.cinema-hatch-body {
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  box-shadow: var(--shadow-card);
}
.cinema-hatch-body video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
}

/* ── 38. STATS COMPRESSED (4 to 2) ──────────────────────────
   Phase 1E: only two evidence cards remain on landing
   (Plane + Wheel). The 2-card layout uses 2 columns on
   tablet+, single column on mobile.
   ========================================================= */
.stats-grid-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) {
  .stats-grid-two { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ── 39. DESKTOP HERO STAT TYPOGRAPHY ───────────────────────
   The hero stat number is the dominant visual on desktop.
   The h1 headline holds the prosecutorial line above it.
   ========================================================= */
@media (min-width: 1024px) {
  .hero-stat-headline { font-size: 44px; max-width: 22ch; }
  .hero-stat-num { font-size: clamp(180px, 14vw, 240px); }
  .hero-stat-figure { grid-template-columns: auto minmax(0, 1fr); }
}

/* ── 40. NARROW-VIEWPORT HERO STAT FALLBACK ─────────────────
   On phones, switch the stat-figure to a stacked layout so
   the "1" sits above the comparison rows instead of beside
   them.
   ========================================================= */
@media (max-width: 520px) {
  .hero-stat-figure {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  .hero-stat-num {
    font-size: clamp(120px, 38vw, 180px);
  }
  .hero-stat-compare { text-align: left; }
  .hero-stat-headline { font-size: clamp(24px, 7vw, 32px); }
}

/* ── 41. MOBILE STICKY "SIGN IN 30s" ─────────────────────────
   Phase 1A polish, 2026-05-11. Persistent bottom-of-viewport
   CTA on viewports < 1024px (where the petition form is no
   longer right-rail visible). The element is fixed below the
   viewport by default; data-hidden="false" set by motion.js
   when the user scrolls past the hero form (so it does not
   double-up while the form is in-frame); reverts to
   data-hidden="true" once the cta-final section is reached
   (so it does not double up at the bottom). Above 1024px the
   block is display:none because the right-rail form is always
   visible.
   ========================================================= */
.sticky-sign {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 60;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background:
    linear-gradient(to top, rgba(247,242,228,.96) 0%, rgba(247,242,228,.92) 75%, rgba(247,242,228,0) 100%);
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: transform .25s ease, opacity .2s ease;
  transform: translateY(0);
  opacity: 1;
}
.sticky-sign[data-hidden="true"] {
  transform: translateY(110%);
  opacity: 0;
}
.sticky-sign-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--bg-light);
  background: var(--accent-2);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(184,90,42,.28), 0 2px 8px rgba(28,38,32,.12);
  text-decoration: none;
  pointer-events: auto;
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}
.sticky-sign-btn:hover,
.sticky-sign-btn:focus-visible {
  background: var(--accent-2-deep);
  color: var(--bg-light);
  opacity: 1;
  outline: none;
}
.sticky-sign-glyph {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #E8B547 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, #2E5D3F 0%, #6B8E5A 40%, transparent 75%);
  box-shadow: 0 0 0 2px var(--bg-light);
}
.sticky-sign-label {
  font-feature-settings: 'tnum';
  letter-spacing: -0.005em;
}
.sticky-sign-arrow {
  font-size: 14px;
  font-weight: 700;
  margin-left: 2px;
}
@media (min-width: 1024px) {
  /* Desktop has the right-rail form always visible; the sticky
     would just be visual noise. Drop it entirely. */
  .sticky-sign { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-sign { transition: opacity .15s ease; transform: none; }
  .sticky-sign[data-hidden="true"] { display: none; }
}

/* ── 42. ENDORSEMENT BAND ───────────────────────────────────
   Phase 2 (Idempotent Phoenix, 2026-05-11). Slot for MPs and
   public figures who endorse the petition or the demands. The
   band is hidden via the [hidden] attribute when data.js
   endorsers[] is empty; the hydrator at the end of index.html
   removes hidden once it populates the grid.

   Party-chip palette uses the rep-templates colour grammar so
   the visual language matches the petition's MP-finder.
   ========================================================= */
.endorsement {
  padding: 64px 0;
  border-top: 1px solid var(--rule);
}
.endorsement[hidden] { display: none; }
.endorsement-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  margin: 0 0 14px;
}
.endorsement-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(217,119,66,.12);
}
.endorsement-headline {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 28ch;
}
.endorsement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 720px) {
  .endorsement-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (min-width: 1024px) {
  .endorsement-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
.endorser-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 22px 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.endorser-quote {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid var(--accent-2);
}
.endorser-attribution {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: auto;
}
.endorser-portrait {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  flex-shrink: 0;
  background: var(--bg-elev-2);
}
.endorser-portrait-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.endorser-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.endorser-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.endorser-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}
.endorser-party-chip {
  display: inline-block;
  margin-top: 6px;
  margin-right: 6px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--bg-elev-2);
  color: var(--ink-dim);
  border: 1px solid var(--rule);
}
.endorser-party-liberal      { background: rgba(212,79,71,.10);  color: #8B2C1B; border-color: rgba(212,79,71,.4); }
.endorser-party-conservative { background: rgba(28,67,127,.10); color: #1C437F; border-color: rgba(28,67,127,.4); }
.endorser-party-ndp,
.endorser-party-new-democratic { background: rgba(245,131,32,.10); color: #B45A0F; border-color: rgba(245,131,32,.4); }
.endorser-party-bloc,
.endorser-party-bloc-quebecois { background: rgba(13,128,206,.10); color: #0D80CE; border-color: rgba(13,128,206,.4); }
.endorser-party-green        { background: rgba(46,93,63,.10);  color: var(--accent); border-color: rgba(46,93,63,.4); }
.endorser-party-independent  { background: rgba(146,160,146,.10); color: var(--ink-dim); border-color: rgba(146,160,146,.4); }
.endorser-date {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}
.endorser-source {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  margin: 8px 0 0;
  line-height: 1.4;
}

/* ── 43. PRE-SIGN MP-EMAIL PREVIEW ──────────────────────────
   Phase 2D (2026-05-11). Shows the visitor that the second
   step is also 60 seconds so the ask is "30 + 60 seconds,"
   not "30 seconds + the unknown." Sits in the hero form
   column, immediately below the petition form, on desktop
   AND mobile.
   ========================================================= */
.mp-preview {
  margin-top: 18px;
  padding: 0;
}
.mp-preview-step {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.mp-preview-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1.5px dashed var(--rule);
  border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.mp-preview-card:hover {
  border-color: var(--accent);
  background: var(--bg-elev);
}
.mp-preview-icon {
  width: 28px; height: 28px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.mp-preview-icon svg { width: 100%; height: 100%; }
.mp-preview-body {
  flex: 1;
  min-width: 0;
}
.mp-preview-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 4px;
}
.mp-preview-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.45;
  margin: 0 0 8px;
}
.mp-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.mp-preview-link:hover {
  color: var(--accent-2-deep);
  border-bottom-color: var(--accent-2);
  opacity: 1;
}
/* MP-email preview now lives INSIDE #thank-you (Win #1, 2026-05-15).
   When the entire .mp-preview-card is an <a> tag (mp-preview-card-link),
   we want the same hover affordance to be the whole card lift, not just
   the inner link. */
.mp-preview-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}
.mp-preview-card-link:hover .mp-preview-link {
  color: var(--accent-2-deep);
  border-bottom-color: var(--accent-2);
}
.mp-preview-card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Slight breathing-room tweak when .mp-preview is nested inside a
   .post-sign confirmation block (more padding above to separate it
   from the share buttons). */
.post-sign .mp-preview { margin-top: 28px; text-align: left; }

/* ── 44. CONSENSUS EXTENDED PAGE (Phase 2E) ─────────────────
   Polish for /consensus-extended.html, the 50+ Extended Voices
   destination. Scoped under .ce-* to coexist cleanly with the
   landing's other component scopes. The page uses the
   extended-voices module verbatim; this CSS only owns the hero
   strip + nav + final-CTA.
   ========================================================= */
.ce-hero {
  padding: 64px 0 40px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.ce-hero .wrap { max-width: 880px; }
.ce-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  margin: 0 0 14px;
}
.ce-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(217,119,66,.12);
}
.ce-headline {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 24ch;
}
.ce-lede {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0 0 32px;
  max-width: 60ch;
}
.ce-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin: 0;
}
.ce-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s, color .15s;
}
.ce-nav-link:hover,
.ce-nav-link:focus-visible {
  color: var(--accent-2-deep);
  border-bottom-color: var(--accent-2);
  opacity: 1;
  outline: none;
}
.ce-nav-arrow {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.ce-extended {
  padding-top: 56px;
}

.ce-cta-final {
  padding: 80px 0 96px;
  background: var(--bg-elev);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.ce-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ce-cta-stat {
  font-family: var(--font-serif);
  font-size: clamp(72px, 12vw, 120px);
  font-weight: 800;
  color: var(--accent-2);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
}
.ce-cta-stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 4px 0 28px;
}
.ce-cta-headline {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.ce-cta-sub {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 0 28px;
}

/* ── 45. CONCEPT MAP (/concepts, Phase 3, 2026-05-11) ───────
   Auto-generated from dispensary/assets/taxonomy.json by
   build-site.mjs. Scoped under .cmap-* so the page can sit
   beside the landing without leaking styles. Five-axis
   Likert chips, tier filtering pills, sortable / explorable
   per-concept cards.
   ========================================================= */
.cmap-hero {
  padding: 56px 0 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.cmap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  margin: 0 0 14px;
}
.cmap-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(217,119,66,.12);
}
.cmap-headline {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 22ch;
}
.cmap-lede {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0 0 24px;
  max-width: 64ch;
}
.cmap-tier-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cmap-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--bg-elev);
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.cmap-filter span {
  font-size: 10px;
  background: var(--bg-elev-2);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ink-faint);
}
.cmap-filter:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cmap-filter[data-active="1"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.cmap-filter[data-active="1"] span {
  background: rgba(247,242,228,.2);
  color: var(--bg);
}

.cmap-grid-section { padding: 40px 0 80px; }
.cmap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 720px) {
  .cmap-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (min-width: 1100px) {
  .cmap-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.cmap-card[hidden] { display: none !important; }
.cmap-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 22px 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.cmap-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent);
}
.cmap-card-tier-1::before { background: var(--accent); }
.cmap-card-tier-2::before { background: var(--accent-2); }
.cmap-card-tier-3::before { background: var(--honey); }
.cmap-card-tier-4::before { background: var(--danger); }
.cmap-card-tier {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 4px;
}
.cmap-card-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}
.cmap-card-lead {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
}

.cmap-scales {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 0;
}
.cmap-scale { display: flex; align-items: center; gap: 8px; }
.cmap-scale dt {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  flex-shrink: 0;
  width: 78px;
}
.cmap-scale dd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex: 1;
}
.cmap-bar {
  display: inline-block;
  height: 8px;
  border-radius: 999px;
  background: var(--rule);
  position: relative;
  flex: 1;
  overflow: hidden;
}
.cmap-bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--accent);
  transition: width .3s ease;
}
.cmap-bar-1::after { width: 20%; }
.cmap-bar-2::after { width: 40%; }
.cmap-bar-3::after { width: 60%; }
.cmap-bar-4::after { width: 80%; }
.cmap-bar-5::after { width: 100%; }
.cmap-bar-polar.cmap-bar-1::after { background: var(--accent); }
.cmap-bar-polar.cmap-bar-2::after { background: var(--accent); }
.cmap-bar-polar.cmap-bar-3::after { background: var(--honey); }
.cmap-bar-polar.cmap-bar-4::after { background: var(--accent-2); }
.cmap-bar-polar.cmap-bar-5::after { background: var(--danger); }
.cmap-scale-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  font-feature-settings: 'tnum';
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

.cmap-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--rule);
  padding-top: 14px;
}
.cmap-meta-line {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}
.cmap-meta-line strong {
  display: inline-block;
  width: 76px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cmap-meta-line code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  color: var(--accent);
  margin-right: 2px;
}
.cmap-aud-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  margin-right: 4px;
}
.cmap-aud-chip-more {
  background: var(--bg-elev-2);
  color: var(--ink-faint);
}

.cmap-card-stat,
.cmap-card-notes {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  border-left: 2px solid var(--accent-2);
}
.cmap-card-notes {
  border-left-color: var(--ink-faint);
  font-style: italic;
}
.cmap-card-stat strong,
.cmap-card-notes strong {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2-deep);
  font-weight: 700;
  font-style: normal;
}

.cmap-method {
  padding: 64px 0 96px;
  background: var(--bg-elev);
  border-top: 1px solid var(--rule);
}
.cmap-method-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.cmap-method p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 16px;
}
.cmap-method-list {
  padding-left: 22px;
  margin: 0 0 24px;
}
.cmap-method-list li {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 10px;
  list-style: decimal;
}
.cmap-method code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  color: var(--accent);
}
.cmap-method-source {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}
.cmap-method-source a { color: var(--accent); font-weight: 600; }

/* =========================================================
   SECTION 30b. HERO PORTRAIT PAIR (Hinton + Bengio)
   Sits inside .hero-stat-shell. Smaller than the .gf-portrait
   pair lower on the page (260px max vs 360px) so the hero stays
   compact above the fold while the Godfathers band remains the
   high-resolution feature.
   ========================================================= */

.hero-stat-subline {
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-dim, #444);
  margin: 14px 0 20px;
  max-width: 56ch;
}

.hero-portrait-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 14px;
  list-style: none;
  padding: 0;
}
@media (max-width: 640px) {
  .hero-portrait-pair {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.hero-portrait-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Bumped from 4px to 6px (Phase 8, 2026-05-16) for more visual breathing
     room around the round-pill CTA introduced in Win #3d. */
  gap: 6px;
  padding: 10px 12px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}

.hero-portrait {
  width: 100%;
  max-width: clamp(160px, 22vw, 260px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  display: block;
}

.hero-portrait-meta {
  width: 100%;
}
.hero-portrait-name {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin: 4px 0 2px;
  color: var(--ink, #111);
}
.hero-portrait-institution {
  font-size: 14px;
  color: var(--ink-dim, #555);
  margin: 0 0 4px;
}

.hero-portrait-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 4px;
  list-style: none;
}
.hero-portrait-badge {
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 42, 31, 0.08);
  color: #0F2A1F;
  border: 1px solid rgba(15, 42, 31, 0.18);
  font-weight: 600;
}

.hero-portrait-quote {
  margin: 8px 0 0;
  padding: 0;
  border-left: 3px solid #E97B47;
  padding-left: 12px;
}
.hero-portrait-quote p {
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink, #222);
  margin: 0 0 6px;
}
.hero-portrait-quote cite {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-dim, #666);
  letter-spacing: 0.02em;
}

/* Hero portrait audio CTA, redesigned 2026-05-16 (Win #3d).
   Pill shape, large prominent circular orange (accent-2) play icon
   on the left so the button reads as "press play" at a glance. The
   button stays fully visible (opacity 1) regardless of motion-stagger;
   the prior .portrait-tile class on this element was removed from the
   HTML because voices-panel.js scopes to .voices and the hero CTAs
   are wired by a hero-scoped script instead. */
.hero-portrait-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0F2A1F;
  color: #fff;
  border: 0;
  padding: 8px 18px 8px 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(28,38,32,.10), 0 4px 12px rgba(28,38,32,.10);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  opacity: 1;
}
.hero-portrait-cta:hover {
  background: #16382A;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(28,38,32,.14), 0 8px 20px rgba(28,38,32,.14);
}
.hero-portrait-cta:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}
.hero-portrait-cta-icon {
  /* The play icon now sits in a prominent orange circle, sized big enough
     to read as the primary affordance even before the label is scanned. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #fff;
  line-height: 1;
  padding-left: 2px; /* subtle optical nudge so apex feels centered in the disk */
  flex-shrink: 0;
  transition: background 160ms ease;
}
.hero-portrait-cta-icon svg { display: block; }
.hero-portrait-cta.is-active .hero-portrait-cta-icon { background: var(--accent-2-deep); }
.hero-portrait-cta-label {
  /* Keep label visible by default. Tiny screens collapse to icon-first
     via media query if needed. */
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  .hero-portrait-cta { transition: none; }
}