/* ═══════════════════════════════════════════════════════════
   THE REFERRAL v2 — jaw-dropping cinematic experience
   Reflect and Restore · Culture is Infrastructure
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #0c0b10;
  --ink-soft: #1a1824;
  --cream: #fff8ef;
  --cream-dim: #f3ebe0;
  --paper: #f7f0e4;
  --stamp: #c41e3a;
  --amber: #f5a524;
  --orange: #f97316;
  --rose: #fb7185;
  --violet: #8b5cf6;
  --sky: #0ea5e9;
  --emerald: #10b981;
  --parent-cream: #fffbeb;
  --parent-amber: #d97706;
  --muted: rgba(255, 248, 239, 0.55);
  --glass: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 248, 239, 0.14);
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Outfit", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Themes the shared impact stage's CTA (pitch-shared/impact.css). */
  --impact-cta-a: #f97316;
  --impact-cta-b: #fb7185;
  --impact-cta-glow: rgba(249,115,22,0.38);
  --impact-cta-ring: rgba(249,115,22,0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.locked { overscroll-behavior: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ── Film grain canvas ─────────────────────────────────── */
#grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

/* ── Aurora meshes ─────────────────────────────────────── */
.aurora {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  opacity: 0.9;
  animation: auroraDrift 14s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

.aurora-gate {
  background:
    radial-gradient(ellipse 50% 40% at 30% 20%, rgba(249,115,22,0.35), transparent 60%),
    radial-gradient(ellipse 45% 35% at 80% 70%, rgba(251,113,133,0.22), transparent 55%);
}

.aurora-student {
  background:
    radial-gradient(ellipse 55% 45% at 15% 10%, rgba(139,92,246,0.45), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 85%, rgba(14,165,233,0.35), transparent 55%);
}

.aurora-teacher {
  background:
    radial-gradient(ellipse 55% 45% at 70% 0%, rgba(249,115,22,0.42), transparent 55%),
    radial-gradient(ellipse 45% 35% at 10% 90%, rgba(251,113,133,0.28), transparent 50%);
}

.aurora-admin {
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(16,185,129,0.28), transparent 55%),
    radial-gradient(ellipse 40% 35% at 100% 60%, rgba(14,165,233,0.18), transparent 50%),
    radial-gradient(ellipse 35% 30% at 0% 80%, rgba(245,165,36,0.12), transparent 50%);
}

.aurora-parent {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(251,191,36,0.35), transparent 55%),
    radial-gradient(ellipse 45% 40% at 20% 100%, rgba(251,113,133,0.12), transparent 50%);
  filter: blur(50px);
}

.aurora-close {
  background:
    radial-gradient(ellipse 55% 40% at 40% 0%, rgba(249,115,22,0.32), transparent 55%),
    radial-gradient(ellipse 45% 35% at 90% 90%, rgba(251,113,133,0.22), transparent 50%);
}

/* ── Stage ─────────────────────────────────────────────── */
#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.act {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.75s var(--ease-out), visibility 0.75s;
  padding: calc(52px + var(--safe-top)) 20px calc(28px + var(--safe-bot));
  /* clip, not hidden: focusing a field makes browsers auto-scroll the nearest
     clipped ancestor, which silently shoved the whole act up and clipped the
     Continue button. clip forbids that scroll — .reflect-inner and #act-close
     do their own scrolling. */
  overflow: hidden;
  overflow: clip;
}

.act.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.act.is-exit {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* ── Atmosphere ────────────────────────────────────────── */
.atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.atmosphere .vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 30%, rgba(0,0,0,0.45) 100%);
}

.atmosphere.soft .vignette { display: none; }

.atmosphere .dust {
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,248,239,0.4), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(245,165,36,0.3), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,248,239,0.22), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(251,113,133,0.25), transparent);
  animation: dustDrift 28s linear infinite;
  opacity: 0.75;
}

.atmosphere .dust.warm {
  background-image:
    radial-gradient(1.5px 1.5px at 25% 40%, rgba(217,119,6,0.35), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(180,83,9,0.25), transparent);
}

@keyframes dustDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-4%, -6%, 0); }
}

.atmosphere .scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px, rgba(0,0,0,0.035) 2px, rgba(0,0,0,0.035) 4px
  );
  opacity: 0.45;
}

/* ── Role + progress rails ─────────────────────────────── */
.role-rail {
  position: fixed;
  top: calc(18px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: none;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
}

.role-rail.is-on { display: flex; }

.role-rail span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  color: rgba(255,248,239,0.4);
  transition: all 0.35s var(--ease-out);
}

.role-rail span.is-active {
  color: #0c0b10;
  background: linear-gradient(135deg, #fff8ef, #fde68a);
  font-weight: 600;
}

.role-rail[data-active="teacher"] span.is-active {
  background: linear-gradient(135deg, #fdba74, #fb7185);
  color: #fff;
}

.role-rail[data-active="admin"] span.is-active {
  background: linear-gradient(135deg, #6ee7b7, #34d399);
  color: #064e3b;
}

.role-rail[data-active="parent"] span.is-active {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #78350f;
}

.progress-rail {
  position: absolute;
  top: calc(8px + var(--safe-top));
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.4s;
}

.progress-rail.is-on { opacity: 1; }

.progress-rail > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--sky), var(--orange), var(--amber));
  transition: width 0.55s var(--ease-out);
  box-shadow: 0 0 12px rgba(249,115,22,0.5);
}

/* ── Shared UI ─────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.display em {
  font-style: italic;
  background: linear-gradient(135deg, var(--emerald), #6ee7b7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 28ch;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 54px;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--rose));
  color: #fff;
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.01em;
  box-shadow:
    0 10px 40px rgba(249, 115, 22, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
}

.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.4; pointer-events: none; }

.btn-student {
  background: linear-gradient(135deg, var(--violet), var(--sky));
  box-shadow: 0 10px 40px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn-parent {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  box-shadow: 0 10px 40px rgba(217, 119, 6, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  color: #fff;
}

.btn-ghost {
  min-height: 48px;
  padding: 0 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(12px);
  font-weight: 550;
  color: var(--cream);
}

.btn-chip {
  min-height: 48px;
  padding: 0.7rem 1.05rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
  font-weight: 550;
  font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-spring), box-shadow 0.2s;
}

.btn-chip.is-selected {
  border-color: rgba(139, 92, 246, 0.85);
  background: linear-gradient(135deg, rgba(139,92,246,0.32), rgba(14,165,233,0.2));
  transform: scale(1.03);
  box-shadow: 0 0 24px rgba(139,92,246,0.25);
}

.field {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.28);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  color: var(--cream);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
  resize: none;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field:focus {
  border-color: rgba(139, 92, 246, 0.7);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

.field::placeholder { color: rgba(255,248,239,0.35); }

.glass-panel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.minutes {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.sound-toggle {
  position: fixed;
  top: calc(14px + var(--safe-top));
  right: 16px;
  z-index: 50;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  opacity: 0.7;
}

.sound-toggle svg { width: 18px; height: 18px; }

/* ── ACT 0: Gate ───────────────────────────────────────── */
#act-gate {
  background: var(--ink);
  align-items: stretch;
  justify-content: flex-end;
  padding-top: calc(20px + var(--safe-top));
}

#act-gate .gate-card {
  position: relative;
  z-index: 2;
  margin-top: auto;
  background: linear-gradient(180deg, rgba(255,250,242,0.98), rgba(243,235,224,0.99));
  color: #1c1917;
  border-radius: 28px 28px 22px 22px;
  padding: 1.6rem 1.4rem 1.5rem;
  box-shadow: 0 -20px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.4) inset;
  transform: translateY(12px);
  opacity: 0;
}

#act-gate.is-active .gate-card {
  animation: riseIn 0.9s var(--ease-out) 0.15s forwards;
}

@keyframes riseIn {
  to { transform: translateY(0); opacity: 1; }
}

.gate-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  border-radius: 4px;
  padding: 0.35rem 0.65rem;
  transform: rotate(-2deg);
  margin-bottom: 1rem;
  box-shadow: 0 0 0 4px rgba(196,30,58,0.08);
}

#act-gate h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 0.7rem;
  color: #1c1917;
}

#act-gate .gate-sub {
  color: #57534e;
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 1.4rem;
  max-width: 30ch;
}

#act-gate .btn-primary { width: 100%; }

.gate-fine {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.72rem;
  color: #a8a29e;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.gate-paper {
  position: absolute;
  inset: 8% 10% auto;
  height: 42%;
  z-index: 1;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.06);
  transform: rotate(-4deg) scale(0.96);
  opacity: 0;
}

#act-gate.is-active .gate-paper {
  animation: paperDrop 1.1s var(--ease-out) forwards;
}

@keyframes paperDrop {
  0% { transform: rotate(-12deg) translateY(-40%) scale(0.9); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: rotate(-4deg) translateY(0) scale(0.96); opacity: 1; }
}

.gate-paper .fake-lines {
  position: absolute;
  inset: 30% 12% 20%;
  background: repeating-linear-gradient(
    transparent, transparent 18px, rgba(28,25,23,0.08) 18px, rgba(28,25,23,0.08) 19px
  );
}

.gate-paper .paper-head {
  position: absolute;
  top: 10%; left: 8%; right: 8%;
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 2.4vw, 0.78rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28,25,23,0.55);
  border-bottom: 1px solid rgba(28,25,23,0.18);
  padding-bottom: 0.5em;
}

.gate-paper .paper-note {
  position: absolute;
  left: 8%; right: 32%; top: 46%;
  font-family: var(--font-mono), monospace;
  font-size: clamp(0.68rem, 2.8vw, 0.98rem);
  color: rgba(28,25,23,0.68);
  line-height: 1.45;
}

#act-gate .gate-sub em {
  font-style: italic;
  color: var(--orange, #f97316);
  font-weight: 600;
}

.gate-paper .red-x {
  position: absolute;
  right: 12%;
  top: 22%;
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--stamp);
  opacity: 0.85;
  transform: rotate(12deg);
  text-shadow: 0 4px 20px rgba(196,30,58,0.3);
}

/* ── ACT 1: Exile ──────────────────────────────────────── */
#act-exile {
  background: #07060a;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding-top: calc(20px + var(--safe-top));
}

#act-exile .exile-copy {
  position: relative;
  z-index: 2;
  max-width: 20rem;
}

#act-exile .exile-line {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 7.5vw, 2.6rem);
  margin: 0.35rem 0;
  opacity: 0;
  transform: translateY(16px);
}

#act-exile .exile-sub {
  font-size: 1.25rem !important;
  color: var(--muted);
  font-family: var(--font-ui) !important;
}

#act-exile .exile-line.is-in {
  animation: lineIn 0.8s var(--ease-out) forwards;
}

@keyframes lineIn {
  to { opacity: 1; transform: translateY(0); }
}

#act-exile .clock-wrap {
  margin: 1.8rem auto 0;
  opacity: 0;
}

#act-exile .clock-wrap.is-in {
  animation: lineIn 0.7s var(--ease-out) forwards;
}

#act-exile .clock {
  font-family: var(--font-mono);
  font-size: 3.4rem;
  font-weight: 500;
  color: var(--amber);
  text-shadow: 0 0 40px rgba(245,165,36,0.45), 0 0 80px rgba(245,165,36,0.2);
  letter-spacing: 0.06em;
}

#act-exile .clock-label {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,165,36,0.7);
}

#act-exile .stl-line {
  margin-top: 2.2rem;
  font-size: 1.05rem;
  color: var(--muted);
  opacity: 0;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

#act-exile .stl-line.is-in {
  animation: lineIn 0.9s var(--ease-out) forwards;
}

.hallway {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.75) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.75) 100%),
    linear-gradient(180deg, #12101a 0%, #1a1624 40%, #0d0b12 100%);
  z-index: 0;
}

.hallway::before,
.hallway::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  background: repeating-linear-gradient(
    180deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 48px
  );
  opacity: 0.5;
}

.hallway::before { left: 0; }
.hallway::after { right: 0; }

.locker-glow {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 120%;
  height: 40%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(245,165,36,0.1), transparent 65%);
  animation: pulseGlow 3.5s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── ACT 2: Reflect ────────────────────────────────────── */
#act-reflect { background: #0f0d18; }

/* Same guard as The Reach: a tall step (small phone, large type) must stay
   scrollable so its Continue button is always reachable. Auto margins center
   short steps; `justify-content: center` would clip the overflow instead. */
#act-reflect .reflect-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.1rem;
  max-width: 28rem;
  width: 100%;
  margin: 0 auto;
  padding-top: 0.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#act-reflect .reflect-inner > .eyebrow { margin-top: auto; }
#act-reflect .reflect-inner > .step.is-on { margin-bottom: auto; }

#act-reflect h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vw, 2.15rem);
  line-height: 1.1;
}

.step { display: none; flex-direction: column; gap: 1rem; animation: stepIn 0.55s var(--ease-out); }
.step.is-on { display: flex; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.emotion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.name-row { display: flex; gap: 0.65rem; align-items: center; }
.name-row .field { flex: 1; min-height: 52px; }

.char-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255,248,239,0.4);
  text-align: right;
}

.reflect-actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.reflect-actions .btn-primary { flex: 1; }

.soft-note {
  font-size: 0.78rem;
  color: rgba(255,248,239,0.4);
  line-height: 1.4;
}

/* ── ACT 6: Lead magnet close ──────────────────────────── */
#act-close {
  background: var(--ink);
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.close-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 28rem;
  margin: auto 0 0;
  padding-bottom: 0.25rem;
}

.logo-mark {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 8px 24px rgba(249,115,22,0.35));
}

#act-close h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 7vw, 2.45rem);
  line-height: 1.02;
  margin-bottom: 0.55rem;
}

.close-lead {
  color: rgba(255,248,239,0.7);
  max-width: 34ch;
  margin-bottom: 1.1rem;
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

/* The card-leave panel. "Back this mission" above it is the loud one, so this
   read as fine print at the bottom of a long close and got scrolled past.
   Its own lit panel with a slow breathing glow pulls the eye back down
   without shouting over the primary CTA. */
.lead-capture {
  position: relative;
  margin-top: 1.35rem;
  padding: 0.35rem 1.05rem 1rem;
  border-radius: 18px;
  border: 1.5px solid rgba(249,115,22,0.4);
  background: linear-gradient(160deg, rgba(249,115,22,0.1), rgba(251,113,133,0.05) 62%, transparent);
  animation: leadGlow 3.6s ease-in-out infinite;
}
@keyframes leadGlow {
  0%, 100% {
    border-color: rgba(249,115,22,0.38);
    box-shadow: 0 0 0 0 rgba(249,115,22,0), 0 10px 30px rgba(249,115,22,0.1);
  }
  50% {
    border-color: rgba(251,146,60,0.78);
    box-shadow: 0 0 0 5px rgba(249,115,22,0.06), 0 14px 38px rgba(249,115,22,0.22);
  }
}
.lead-capture .lead-divide { margin-top: 0.55rem; }
.lead-capture .close-lead {
  color: rgba(255,248,239,0.94);
  font-weight: 600;
  max-width: none;
}
@media (prefers-reduced-motion: reduce) {
  .lead-capture {
    animation: none;
    border-color: rgba(251,146,60,0.7);
    box-shadow: 0 12px 34px rgba(249,115,22,0.18);
  }
}

.lead-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lead-field > span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,248,239,0.5);
}

.lead-field > span em {
  font-style: normal;
  opacity: 0.65;
  letter-spacing: 0.08em;
  text-transform: none;
}

.lead-field input,
.lead-field textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  backdrop-filter: blur(12px);
}

.lead-field textarea { resize: none; line-height: 1.4; }

.lead-field input:focus,
.lead-field textarea:focus {
  border-color: rgba(249,115,22,0.75);
  box-shadow: 0 0 0 4px rgba(249,115,22,0.15);
  background: rgba(255,255,255,0.09);
}

.lead-field input::placeholder,
.lead-field textarea::placeholder { color: rgba(255,248,239,0.32); }

.lead-field.is-invalid input,
.lead-field.is-invalid textarea {
  border-color: rgba(251,113,133,0.8);
  box-shadow: 0 0 0 4px rgba(251,113,133,0.12);
}

.lead-error {
  font-size: 0.85rem;
  color: #fda4af;
  line-height: 1.35;
}

#btn-lead-submit {
  width: 100%;
  margin-top: 0.25rem;
  min-height: 56px;
  font-size: 1.05rem;
}

#btn-lead-submit.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.close-secondary {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.close-secondary .btn-ghost,
.close-secondary .btn-primary { width: 100%; }

.role-recap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.2rem 0 1.1rem;
}

.role-recap span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(249,115,22,0.35);
  color: rgba(255,248,239,0.65);
  background: rgba(249,115,22,0.08);
}

.lead-success {
  text-align: left;
  animation: riseIn 0.7s var(--ease-out);
}

.success-burst {
  font-size: 2rem;
  color: var(--amber);
  text-shadow: 0 0 30px rgba(245,165,36,0.55);
  margin-bottom: 0.5rem;
  animation: burstSpin 1.2s var(--ease-spring);
}

@keyframes burstSpin {
  from { transform: scale(0.4) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

.confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

.confetti.is-on { opacity: 1; }

.stl-badge {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,248,239,0.45);
  text-align: center;
}

.price-whisper {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,248,239,0.5);
  line-height: 1.4;
}

/* External CTA to the live platform — a distinct card, not another ghost link */
.platform-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(249,115,22,0.28);
  background: linear-gradient(135deg, rgba(249,115,22,0.1), rgba(251,113,133,0.06));
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s var(--ease-spring), box-shadow 0.2s;
}

.platform-card:hover,
.platform-card:focus-visible {
  border-color: rgba(249,115,22,0.55);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(249,115,22,0.16);
}

.platform-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--orange), var(--rose));
  color: #fff;
}

.platform-card-icon svg { width: 20px; height: 20px; }

.platform-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.platform-card-text strong {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--cream);
  line-height: 1.25;
}

.platform-card-text span {
  font-size: 0.76rem;
  color: rgba(255,248,239,0.55);
  line-height: 1.3;
}

.platform-card-arrow {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--orange);
}

/* Interactive parent CTA */
.parent-card .try-btn {
  margin-top: 0.65rem;
  width: 100%;
  min-height: 42px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: #fff;
  font-weight: 650;
  font-size: 0.88rem;
  box-shadow: 0 6px 18px rgba(217,119,6,0.25);
}

.parent-card .try-btn.is-done {
  background: #065f46;
  box-shadow: none;
}

/* Ripple on chips */
.btn-chip { position: relative; overflow: hidden; }
.btn-chip .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple 0.55s ease-out;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(3); opacity: 0; }
}

/* ── Tier upgrades ─────────────────────────────────────── */
/* #4 — the student's typed words sweep-highlight as the brief flips in */
.quote-typed { position: relative; overflow: hidden; }
.quote-typed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 18%, rgba(251,113,133,0.42), transparent 82%);
  transform: translateX(-120%);
}
.flip-card.is-flipped .quote-typed::after { animation: quoteSweep 1.15s cubic-bezier(0.22,1,0.36,1) 0.5s 1; }
@keyframes quoteSweep { to { transform: translateX(120%); } }

/* #2 — KPI sparklines draw in, making the cockpit read as live */
.kpi .spark { display: block; margin-top: 0.45rem; width: 100%; height: 22px; overflow: visible; }
.kpi .spark-line { stroke-dasharray: 150; stroke-dashoffset: 150; animation: sparkDraw 1.2s ease 0.35s forwards; }
.kpi .spark-dot { opacity: 0; animation: sparkDot 0.01s linear 1.35s forwards; }
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }
@keyframes sparkDot { to { opacity: 1; } }
.admin-action.is-on { animation: recPulse 2.6s ease-in-out infinite; }
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 28px rgba(16,185,129,0.15); }
  50% { box-shadow: 0 0 38px rgba(16,185,129,0.3); }
}

/* #8 — emotion chips get a per-feeling color dot + tinted selection */
.btn-chip[data-emotion] { padding-left: 2.15rem; }
.btn-chip[data-emotion]::before {
  content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--chip, #a78bfa); box-shadow: 0 0 10px var(--chip, #a78bfa);
  transition: transform 0.2s var(--ease-spring);
}
.btn-chip[data-emotion].is-selected {
  border-color: var(--chip, #a78bfa) !important;
  box-shadow: 0 0 24px -2px var(--chip, #a78bfa) !important;
}
.btn-chip[data-emotion].is-selected::before { transform: translateY(-50%) scale(1.45); }

/* #9 — hero line words rise in, staggered */
.rw-word { display: inline-block; opacity: 0; transform: translateY(0.55em); animation: rwUp 0.6s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes rwUp { to { opacity: 1; transform: translateY(0); } }

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .aurora { animation: none; }
  .flip-card { transition: none; }
  .flip-card.is-flipped { transform: none; }
  .flip-back { position: relative; transform: none; }
  .flip-front { display: none; }
}

@media (max-height: 700px) {
  .act { padding-top: calc(44px + var(--safe-top)); }
  .phone-screen { min-height: 240px; }
  .flip-card { min-height: min(55vh, 420px); }
}

/* ── National close: founder note, primary CTA, role chips ── */

/* Exile zoom-out: the personal clock becomes the country's number */
#act-exile .stl-line { max-width: 30ch; }

.natl-kicker {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--cream);
  margin-bottom: 0.5rem;
}

.natl-line {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.55;
}

.natl-line b {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: 0.02em;
  display: inline-block;
  min-width: 10ch; /* number counts up in place without reflow */
  text-align: center;
}

.natl-source {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,248,239,0.35);
}

.founder-note {
  margin: 0.95rem 0 0.2rem;
  padding: 0.95rem 1.1rem;
  border-left: 2px solid var(--orange);
  border-radius: 0 14px 14px 0;
  background: rgba(255,255,255,0.045);
  text-align: left;
}

.founder-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cream-dim);
}

.founder-sign {
  margin-top: 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cream);
}

.founder-sign span {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,248,239,0.4);
}

.platform-card.is-primary {
  margin-top: 1.05rem;
  padding: 1.05rem 1.1rem;
  border-width: 1.5px;
  border-color: rgba(249,115,22,0.6);
  background: linear-gradient(135deg, rgba(249,115,22,0.2), rgba(251,113,133,0.12));
  box-shadow: 0 12px 34px rgba(249,115,22,0.16);
}

.platform-card.is-primary .platform-card-icon { width: 46px; height: 46px; }
.platform-card.is-primary .platform-card-text strong { font-size: 1.02rem; }
.platform-card.is-primary .platform-card-text span { font-size: 0.8rem; }

.lead-divide {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.35rem 0 0.5rem;
}

.lead-divide::before,
.lead-divide::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.lead-divide span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,248,239,0.4);
  white-space: nowrap;
}

.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.role-chip {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 550;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s var(--ease-spring);
}

.role-chip:active { transform: scale(0.96); }

.role-chip.is-on {
  border-color: rgba(249,115,22,0.65);
  background: rgba(249,115,22,0.16);
  color: var(--cream);
}

/* Safety-path recommended card: urgent rose ring, not the routine green */
.admin-action.is-on.is-safety-rec {
  border-color: rgba(251,113,133,0.6);
  background: linear-gradient(135deg, rgba(251,113,133,0.16), rgba(196,30,58,0.08));
  box-shadow: 0 0 28px rgba(251,113,133,0.16);
}

.admin-action.is-on.is-safety-rec .aa-kicker { color: #fda4af; }

/* Safety-recommended cards pulse rose, not the routine green */
.admin-action.is-on.is-safety-rec { animation: recPulseSafety 2.6s ease-in-out infinite; }

@keyframes recPulseSafety {
  0%, 100% { box-shadow: 0 0 28px rgba(251,113,133,0.16); }
  50% { box-shadow: 0 0 38px rgba(251,113,133,0.32); }
}

/* One honest whisper at the close: the walk is the trailer, not the product */
.taste-line {
  margin: 0.4rem 0 0.15rem;
  font-size: 0.82rem;
  color: rgba(255,248,239,0.55);
  line-height: 1.5;
}


/* ── Borrowed chrome ────────────────────────────────────── */
.dash-dots { display: flex; gap: 5px; }
.dash-dots i { width: 8px; height: 8px; border-radius: 50%; background: #475569; display: block; }
.dash-dots i:first-child { background: #f87171; }
.dash-dots i:nth-child(2) { background: #fbbf24; }
.dash-dots i:nth-child(3) { background: #34d399; }
.close-scroll { position: relative; z-index: 2; width: 100%; max-width: 28rem; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════
   THE FORK — trajectory acts
   The other three walks put you in a seat. This one puts you
   above two timelines and lets them come apart.

   The palette carries the argument: the WITHOUT column is
   desaturated slate and loses what little colour it has as the
   years pass; the WITH column is the trilogy's indigo and
   physically accumulates a record beside it.
   ═══════════════════════════════════════════════════════════ */

:root {
  --indigo: #6366f1;
  --without: #64748b;
  --without-dim: rgba(148, 163, 184, 0.55);
  --with-glow: rgba(99, 102, 241, 0.4);
  --cite: #f8a67e;

  --impact-cta-a: #6366f1;
  --impact-cta-b: #8b5cf6;
  --impact-cta-glow: rgba(99, 102, 241, 0.38);
  --impact-cta-ring: rgba(99, 102, 241, 0.12);
}

.btn-primary {
  background: linear-gradient(135deg, var(--indigo), #8b5cf6);
  box-shadow:
    0 10px 40px rgba(99, 102, 241, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.aurora-fork {
  background:
    radial-gradient(55% 40% at 22% 14%, rgba(100, 116, 139, 0.30), transparent 70%),
    radial-gradient(55% 40% at 80% 20%, rgba(99, 102, 241, 0.32), transparent 70%),
    radial-gradient(70% 50% at 50% 96%, rgba(139, 92, 246, 0.18), transparent 70%);
  transition: filter 0.8s ease, opacity 0.8s ease, transform 1.2s ease;
}
#act-split.is-scoring .aurora-fork {
  opacity: calc(0.88 + 0.28 * var(--traj-heat, 0));
  filter: blur(40px) saturate(calc(1 + 0.55 * var(--traj-heat, 0)));
  transform: scale(calc(1 + 0.04 * var(--traj-heat, 0)));
}
.aurora-pick {
  background:
    radial-gradient(60% 45% at 50% 10%, rgba(99, 102, 241, 0.26), transparent 72%),
    radial-gradient(50% 40% at 15% 80%, rgba(16, 185, 129, 0.14), transparent 70%);
}
.aurora-moment {
  background:
    radial-gradient(60% 45% at 50% 40%, rgba(251, 191, 36, 0.18), transparent 72%),
    radial-gradient(60% 50% at 50% 95%, rgba(99, 102, 241, 0.20), transparent 70%);
}

/* ── ACT 0: Gate ────────────────────────────────────────── */
#act-gate { background: linear-gradient(180deg, #0a0912 0%, #101026 55%, #0a0912 100%); }

/* Two lines leaving one point — the whole demo as a mark. */
.fork-mark {
  position: absolute;
  top: 13vh;
  left: 50%;
  transform: translateX(-50%);
  width: 12rem;
  height: 9rem;
  pointer-events: none;
}
.fork-mark svg { width: 100%; height: 100%; overflow: visible; }
.fork-mark .fm-stem { stroke: rgba(255, 248, 239, 0.5); }
.fork-mark .fm-down { stroke: var(--without); }
.fork-mark .fm-up { stroke: var(--indigo); filter: drop-shadow(0 0 8px var(--with-glow)); }
.fork-mark path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: forkDraw 1.6s var(--ease-out) forwards;
}
.fork-mark .fm-down { animation-delay: 0.9s; }
.fork-mark .fm-up { animation-delay: 1.1s; }
@keyframes forkDraw { to { stroke-dashoffset: 0; } }
.fork-mark .fm-dot {
  fill: var(--cream);
  opacity: 0;
  animation: forkDot 0.5s var(--ease-spring) 0.85s forwards;
}
@keyframes forkDot { to { opacity: 1; } }

/* ── ACT 1: Pick a student ──────────────────────────────── */
#act-pick {
  background: linear-gradient(180deg, #0a0d1c 0%, #131a35 55%, #0a0d1c 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pick-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
  padding: 7.75rem 1.25rem 2.5rem;
}

.pick-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6.4vw, 2.1rem);
  line-height: 1.16;
  color: var(--cream);
  margin-bottom: 0.5rem;
}
.pick-note {
  font-size: 0.84rem;
  color: rgba(255, 248, 239, 0.55);
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

.scards { display: flex; flex-direction: column; gap: 0.85rem; }

.scard {
  position: relative;
  width: 100%;
  text-align: left;
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 248, 239, 0.13);
  color: var(--cream);
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), border-color 0.35s, background 0.35s, box-shadow 0.35s;
  opacity: 0;
  transform: translateY(14px);
}
.scard.is-in { opacity: 1; transform: none; }
.scard:hover { border-color: rgba(129, 140, 248, 0.5); background: rgba(99, 102, 241, 0.1); }
.scard.is-picked {
  border-color: var(--indigo);
  background: rgba(99, 102, 241, 0.16);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 14px 34px rgba(67, 56, 202, 0.3);
}
.scard.is-dimmed { opacity: 0.4; }

.sc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.sc-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
.sc-grade { font-size: 0.74rem; color: rgba(255, 248, 239, 0.5); }

/* Who they are BEFORE what happened to them. The order is the point, so
   both lines are block-level — inline spans ran the human sentence and the
   situation together and lost the beat between them. */
.sc-human {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.4;
  color: #c7d2fe;
  margin-top: 0.45rem;
}
.sc-situation {
  display: block;
  font-size: 0.79rem;
  line-height: 1.5;
  color: rgba(255, 248, 239, 0.62);
  margin-top: 0.4rem;
}
.sc-mech {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.62rem;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 248, 239, 0.07);
  border: 1px solid rgba(255, 248, 239, 0.12);
  color: rgba(255, 248, 239, 0.62);
}

/* ── ACT 2: The fork moment ─────────────────────────────── */
#act-moment {
  background: linear-gradient(180deg, #0a0912 0%, #1c1608 45%, #0a0912 100%);
}

.moment-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}

.moment-when {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--risk-warm, #fbbf24);
  margin-bottom: 0.8rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.moment-line {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.6vw, 1.85rem);
  line-height: 1.28;
  color: var(--cream);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.moment-when.is-in, .moment-line.is-in { opacity: 1; transform: none; }
.moment-line em { font-style: italic; color: #fcd34d; }

.moment-split {
  margin-top: 1.6rem;
  font-size: 0.88rem;
  color: rgba(255, 248, 239, 0.6);
  line-height: 1.55;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.moment-split.is-in { opacity: 1; }

/* ── ACT 3: The split timeline ──────────────────────────── */
#act-split {
  background: linear-gradient(180deg, #080a14 0%, #0d1226 50%, #080a14 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  --traj-heat: 0;
}

.split-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 7rem 1rem 2.5rem;
}

.split-head { text-align: center; margin-bottom: 1.1rem; }
.split-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5.2vw, 1.7rem);
  color: var(--cream);
  line-height: 1.2;
}
.split-head p {
  font-size: 0.8rem;
  color: rgba(255, 248, 239, 0.5);
  margin-top: 0.35rem;
  line-height: 1.5;
}

/* Sticky column headers so you never lose which side you're reading. */
.split-labels {
  position: sticky;
  top: calc(4.6rem + var(--safe-top));
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  backdrop-filter: blur(10px);
}
.split-label {
  border-radius: 0.7rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255, 248, 239, 0.12);
  background: rgba(8, 10, 20, 0.86);
}
.split-label strong {
  display: block;
  font-size: 0.82rem;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.split-label span {
  display: block;
  font-size: 0.64rem;
  color: rgba(255, 248, 239, 0.45);
  margin-top: 0.05rem;
  line-height: 1.35;
}
.split-label.is-without { border-color: rgba(148, 163, 184, 0.28); }
.split-label.is-without strong { color: #cbd5e1; }
.split-label.is-with { border-color: rgba(99, 102, 241, 0.42); background: rgba(30, 27, 75, 0.8); }
.split-label.is-with strong { color: #c7d2fe; }

.tl-rows { display: flex; flex-direction: column; gap: 0.55rem; }

.tl-row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.tl-row.is-in { opacity: 1; transform: none; }

.tl-when {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 248, 239, 0.38);
  text-align: center;
  margin: 0.5rem 0 0.4rem;
}

.tl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: stretch; }

.tl-cell {
  border-radius: 0.8rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(255, 248, 239, 0.1);
  font-size: 0.79rem;
  line-height: 1.5;
}
.tl-cell.is-without {
  background: rgba(148, 163, 184, 0.055);
  color: var(--without-dim);
  border-color: rgba(148, 163, 184, 0.16);
}
.tl-cell.is-with {
  background: rgba(99, 102, 241, 0.1);
  color: rgba(255, 248, 239, 0.9);
  border-color: rgba(99, 102, 241, 0.3);
}
.tl-cell em { font-style: italic; color: #c7d2fe; }
.tl-cell.is-without em { color: #b6c2d2; }
.tl-cell b { font-weight: 650; color: var(--cream); }

/* The empty cell is an argument, not an oversight — say so out loud. */
.tl-cell.is-silent {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.4);
  background: repeating-linear-gradient(
    -45deg,
    rgba(148, 163, 184, 0.05) 0 6px,
    transparent 6px 12px
  );
}

/* Block, not inline: as an inline-block the chip tucked itself onto the end of
   whatever the last text line was on some rows and dropped below on others,
   so the citation column read as ragged. It always sits under the sentence. */
.tl-chip {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.5rem;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  line-height: 1.35;
  padding: 0.2rem 0.42rem;
  border-radius: 0.35rem;
}
/* Left chips cite a source. Right chips name a shipped surface. Nothing on
   this page asserts an outcome we invented. */
.tl-chip.is-src {
  background: rgba(248, 166, 126, 0.1);
  border: 1px solid rgba(248, 166, 126, 0.26);
  color: var(--cite);
}
.tl-chip.is-feat {
  background: rgba(56, 189, 248, 0.11);
  border: 1px solid rgba(56, 189, 248, 0.26);
  color: #7dd3fc;
}

/* The record the right-hand side builds and the left never does. */
.tl-record {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.rec-pill {
  font-size: 0.58rem;
  font-family: var(--font-mono);
  padding: 0.16rem 0.38rem;
  border-radius: 0.3rem;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #6ee7b7;
}

/* ── The tally ──────────────────────────────────────────── */
.tally {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.tally-col {
  border-radius: 0.9rem;
  padding: 0.9rem;
  border: 1px solid rgba(255, 248, 239, 0.12);
}
.tally-col.is-without { background: rgba(148, 163, 184, 0.055); border-color: rgba(148, 163, 184, 0.2); }
.tally-col.is-with { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.32); }
.tally-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; }
.tally-row + .tally-row { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid rgba(255, 248, 239, 0.08); }
.tally-row span { font-size: 0.66rem; color: rgba(255, 248, 239, 0.5); line-height: 1.3; }
.tally-row b {
  font-size: 1.15rem;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.tally-col.is-without b { color: #94a3b8; }
.tally-col.is-with b { color: #a5b4fc; }

/* ── The honest close of the story ──────────────────────── */
.refuse {
  margin-top: 1.3rem;
  border-radius: 1rem;
  padding: 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 248, 239, 0.14);
  text-align: center;
}
.refuse p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  line-height: 1.35;
  color: var(--cream);
}
.refuse span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.79rem;
  line-height: 1.55;
  color: rgba(255, 248, 239, 0.6);
}
.refuse b { color: #a5b4fc; font-weight: 600; }

.other-two {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255, 248, 239, 0.55);
  line-height: 1.5;
}
.other-btns { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.other-btns .btn-ghost { flex: 1; font-size: 0.82rem; }

/* ── Mobile: rotate the axis, never drop the comparison ──
   Two 160px columns can't hold a sentence. Each time-marker
   becomes one card with both sides stacked inside it, so the
   two paths still sit side by side in the reader's attention. */
@media (max-width: 640px) {
  .split-inner { padding-left: 0.9rem; padding-right: 0.9rem; }
  .split-labels { display: none; }
  .tl-pair {
    grid-template-columns: 1fr;
    gap: 0;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid rgba(255, 248, 239, 0.1);
  }
  .tl-cell { border-radius: 0; border: 0; }
  .tl-cell.is-without { border-bottom: 1px solid rgba(255, 248, 239, 0.1); }
  /* Without the sticky header, each cell has to say which path it is. */
  .tl-cell::before {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
  }
  .tl-cell.is-without::before { content: "Without"; color: rgba(148, 163, 184, 0.6); }
  .tl-cell.is-with::before { content: "With Reflect and Restore"; color: #818cf8; }
  /* The silent cell centres its text as a flex row on desktop; on mobile the
     injected "Without" label became a sibling in that row and sat on top of
     it. Stack them. */
  .tl-cell.is-silent {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
  .tally { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fork-mark path, .fork-mark .fm-dot { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
}

.tally-head {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 248, 239, 0.1);
}
.tally-col.is-without .tally-head { color: rgba(148, 163, 184, 0.7); }
.tally-col.is-with .tally-head { color: #818cf8; }

/* ── The divergence chart ───────────────────────────────
   One picture that says what the columns say in words. It sits above the
   sticky labels and fills in as rows come into view. */
.diverge {
  position: relative;
  height: 6rem;
  margin: 0 0 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 248, 239, 0.1);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.diverge svg { width: 100%; height: 100%; display: block; }
.dv-line {
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 0.7s var(--ease-out);
}
.dv-without { stroke: #64748b; }
.dv-with { stroke: #818cf8; filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.5)); }
.dv-dot { transition: opacity 0.4s; }
.dv-without-dot { fill: #94a3b8; }
.dv-with-dot { fill: #a5b4fc; }
.dv-cap {
  position: absolute;
  right: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.dv-cap-with { top: 0.5rem; color: #a5b4fc; }
.dv-cap-without { bottom: 0.5rem; color: rgba(148, 163, 184, 0.75); }

/* ═══════════════════════════════════════════════════════════
   THE TRAJECTORY PLAYER
   The scrolling list of paired paragraphs was the honest version of this
   act and the wrong one — the visitor had nothing to do, in the one walk
   built to convince funders. Time is now the control: they drag four
   years forward and watch the gap open. Only the current beat is on
   screen, so sixteen cells of reading became two.
   ═══════════════════════════════════════════════════════════ */

.traj-chart {
  position: relative;
  /* Deliberately short. At 42vh the chart pushed both beat cards below the
     fold on a phone, so the visitor saw a graph and no comparison — losing
     the one thing this act exists to show. Chart, marker and both paths must
     fit one screen together. */
  height: 24vh;
  min-height: 8.5rem;
  max-height: 13rem;
  margin-bottom: 0.35rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 248, 239, 0.1);
  background:
    linear-gradient(180deg, rgba(99, 102, 241, 0.05), transparent 60%),
    rgba(255, 255, 255, 0.025);
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(99, 102, 241, calc(0.06 + 0.38 * var(--traj-heat, 0)));
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}
#act-split.is-playing .traj-chart {
  border-color: rgba(129, 140, 248, calc(0.18 + 0.4 * var(--traj-heat, 0)));
}
.traj-chart svg { width: 100%; height: 100%; display: block; }

.tj-line {
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.tj-ghost {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}
.tj-ghost-o { stroke: rgba(100, 116, 139, 0.35); }
.tj-ghost-w { stroke: rgba(129, 140, 248, 0.28); }

.tj-line-without { stroke: #64748b; }
.tj-line-with { stroke: #818cf8; filter: drop-shadow(0 0 7px rgba(99, 102, 241, 0.55)); }
#act-split.is-playing .tj-line-with {
  filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.85));
}

.tj-head-line {
  stroke: rgba(255, 248, 239, 0.22);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.tj-dot { vector-effect: non-scaling-stroke; }
.tj-dot-o { fill: #cbd5e1; }
.tj-dot-w { fill: #c7d2fe; filter: drop-shadow(0 0 6px rgba(129, 140, 248, 0.8)); }

.tj-cap {
  position: absolute;
  left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.tj-cap-with { top: 0.6rem; color: #a5b4fc; }
.tj-cap-without { bottom: 0.6rem; color: rgba(148, 163, 184, 0.8); }

/* The one live number: how much record exists on each side. Honest, because
   it counts artefacts the walkthrough actually produced. */
.tj-gapnote {
  position: absolute;
  right: 0.75rem;
  top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: rgba(255, 248, 239, 0.55);
  text-align: right;
  pointer-events: none;
}

/* ── The control ────────────────────────────────────────── */
.traj-scrub {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.15rem 0.1rem;
}

.tj-play {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--indigo), #8b5cf6);
  color: #fff;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
  transition: transform 0.2s var(--ease-spring);
}
.tj-play:active { transform: scale(0.92); }
.tj-play.is-on {
  animation: playPulse 1.8s ease-in-out infinite;
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 8px 34px rgba(129, 140, 248, 0.85); }
}

/* A real range input: drag, keyboard and screen-reader support for free,
   which hand-rolled pointer handling would have had to reinvent badly. */
.tj-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 2.4rem;
  background: transparent;
  cursor: grab;
}
.tj-range:active { cursor: grabbing; }
.tj-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #818cf8 var(--fill, 0%), rgba(255, 248, 239, 0.12) var(--fill, 0%));
}
.tj-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 248, 239, 0.12);
}
.tj-range::-moz-range-progress { height: 6px; border-radius: 999px; background: #818cf8; }
.tj-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--indigo);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}
.tj-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--indigo);
}

.tj-hint {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 248, 239, 0.38);
  margin-bottom: 0.9rem;
  transition: opacity 0.5s;
}
.tj-hint.is-done { opacity: 0; }

/* ── The current beat ───────────────────────────────────── */
.tj-when {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cite);
  text-align: center;
  margin-bottom: 0.55rem;
}
.tj-when.is-hit { animation: whenHit 0.7s var(--ease-out); }
@keyframes whenHit {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

.tj-beats { display: flex; flex-direction: column; gap: 0.5rem; }

.tj-cell {
  border-radius: 0.9rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(255, 248, 239, 0.1);
  font-size: 0.86rem;
  line-height: 1.5;
  min-height: 4.2rem;
}
.tj-cell.is-fresh { animation: cellIn 0.4s ease; }
@keyframes cellIn {
  from { opacity: 0.45; }
  to { opacity: 1; }
}
.tj-cell.is-without {
  background: rgba(148, 163, 184, 0.06);
  color: var(--without-dim);
  border-color: rgba(148, 163, 184, 0.18);
}
.tj-cell.is-with {
  background: rgba(99, 102, 241, 0.12);
  color: rgba(255, 248, 239, 0.92);
  border-color: rgba(99, 102, 241, 0.34);
}
.tj-cell em { font-style: italic; color: #c7d2fe; }
.tj-cell.is-without em { color: #b6c2d2; }
.tj-cell b { font-weight: 650; color: var(--cream); }
.tj-cell.is-without b { color: #cbd5e1; }

.tj-cell::before {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.tj-cell.is-without::before { content: "Without"; color: rgba(148, 163, 184, 0.65); }
.tj-cell.is-with::before { content: "With Reflect and Restore"; color: #818cf8; }

.tj-cell .tl-chip { margin-top: 0.5rem; }

.tj-silent {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.45);
}

/* Live artefact counts — the asymmetry, as a number that moves. */
.tj-counters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.tj-count {
  border-radius: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(255, 248, 239, 0.1);
  text-align: center;
}
.tj-count.is-without { background: rgba(148, 163, 184, 0.05); }
.tj-count.is-with { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.3); }
.tj-count b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1.1;
}
.tj-count.is-without b { color: #94a3b8; }
.tj-count.is-with b { color: #a5b4fc; }
.tj-count span {
  display: block;
  font-size: 0.62rem;
  color: rgba(255, 248, 239, 0.5);
  margin-top: 0.2rem;
  line-height: 1.3;
}

/* Everything past the player stays out of the way until they've watched it. */
.traj-after {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.6s var(--ease-out), max-height 0.7s var(--ease-out);
}
.traj-after.is-on { opacity: 1; max-height: 120rem; }

@media (min-width: 641px) {
  .tj-beats { flex-direction: row; }
  .tj-beats .tj-cell { flex: 1; }
  .traj-chart { height: 30vh; max-height: 16rem; }
}

/* This act leads with its own title, so it needs less clearance than the
   picker does — the two beat cards have to make it above the fold. */
#act-split .split-inner { padding-top: 5.75rem; }
#act-split .split-head { margin-bottom: 0.7rem; }
#act-split .split-head h2 { font-size: clamp(1.2rem, 4.8vw, 1.5rem); }

/* ── The child's own hand ────────────────────────────────
   Paper amid the dark UI, on purpose. The whole walk is cool indigo and
   slate; when the kid speaks, the texture changes and you look. It lands
   opposite the hatched "nothing written down" cell every time — an empty
   box on one side, a twelve-year-old's notebook on the other. */
.voice-card {
  border-radius: 0.9rem;
  padding: 0.85rem 0.9rem 0.75rem;
  background: linear-gradient(168deg, #f8f4ea, #efe7d6);
  border: 1px solid rgba(255, 248, 239, 0.22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  animation: voiceIn 0.55s var(--ease-spring);
}
@keyframes voiceIn {
  from { opacity: 0; transform: translateY(10px) rotate(-0.6deg); }
  to { opacity: 1; transform: none; }
}

.voice-card::before {
  content: "The record";
  display: block;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a89578;
  margin-bottom: 0.5rem;
}

.art-frame {
  border-radius: 0.5rem;
  background: #fffdf7;
  border: 1px solid rgba(60, 50, 35, 0.12);
  padding: 0.3rem;
  margin-bottom: 0.6rem;
}
.art-img { width: 100%; height: auto; display: block; border-radius: 0.35rem; }
/* Printed rules stay machine-straight and unfiltered on purpose. */
.art-rule path { stroke: #b9cfe0; stroke-width: 1; fill: none; }
.art-margin { stroke: #e3a7a7; stroke-width: 1; fill: none; }
.art-ink {
  stroke: #2b3f7a;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Slightly transparent so retraced strokes visibly double up where the
     hand went over the same line twice — that overlap is most of what
     reads as "drawn by a person". */
  opacity: 0.88;
}
.art-ink circle, .art-ink rect { fill: none; }
.art-crayon-dark {
  stroke: #6b4f8f;
  stroke-width: 4.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.62;
}
.art-crayon-rose {
  stroke: #d97f8e;
  stroke-width: 3.5;
  fill: none;
  stroke-linecap: round;
  opacity: 0.8;
}

.voice-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.42;
  color: #2a2622;
}
.voice-caption {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: #8c7f68;
}

/* ── The peak ────────────────────────────────────────────
   Full scrub is the emotional maximum and it used to hand the viewer a
   tally. One kid becomes a country here, then the arithmetic gets said
   out loud — while the feeling is still hot, not two screens later. */
.peak {
  border-radius: 1rem;
  padding: 1.3rem 1.1rem 1.1rem;
  margin-bottom: 0.9rem;
  text-align: center;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(99, 102, 241, 0.18), transparent 70%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(129, 140, 248, 0.3);
}
.peak-turn {
  font-size: 0.82rem;
  color: rgba(255, 248, 239, 0.6);
  margin-bottom: 0.7rem;
}
.peak-count {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 9vw, 2.8rem);
  line-height: 1.05;
  color: var(--cream);
  letter-spacing: -0.02em;
  text-shadow: 0 0 30px rgba(129, 140, 248, 0.35);
}
.peak-unit {
  font-size: 0.78rem;
  color: rgba(255, 248, 239, 0.55);
  line-height: 1.45;
  margin-top: 0.3rem;
}
.peak-line {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 4.6vw, 1.28rem);
  line-height: 1.35;
  color: #c7d2fe;
  margin-top: 0.9rem;
}
.peak-line b { color: var(--cream); font-weight: 700; }
.peak-src {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: rgba(255, 248, 239, 0.35);
  margin-top: 0.5rem;
}

.peak-ask {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 248, 239, 0.12);
}
.peak-five {
  font-family: var(--font-display);
  font-size: clamp(3rem, 15vw, 4.2rem);
  line-height: 1;
  font-weight: 700;
  background: linear-gradient(135deg, #a5b4fc, #f0abfc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.peak-ask-line {
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 248, 239, 0.75);
  margin-top: 0.35rem;
}

/* The record header — reads like the product rendering a real entry. */
.rec-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid rgba(60, 50, 35, 0.15);
}
.rec-kind {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  color: #2a2622;
}
.rec-meta {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  color: #8c7f68;
}

/* Ana's drawing is genuinely not here — the platform never uploads it.
   Saying so is truer than faking one, and it proves the privacy claim. */
.withheld {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  border-radius: 0.5rem;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.7rem;
  background: rgba(43, 63, 122, 0.06);
  border: 1px dashed rgba(43, 63, 122, 0.3);
  font-size: 0.72rem;
  line-height: 1.45;
  color: #5b5343;
}
.withheld-mark { color: #2b3f7a; flex-shrink: 0; font-size: 0.9rem; line-height: 1.2; }

/* ── Making the chart legible ────────────────────────────
   It had two lines, no axis and no key, so the viewer had to guess what
   the vertical dimension meant. These say it outright. The legend also
   states that the curve SHAPE is illustrative — the beats underneath are
   the sourced part, and that distinction has to be visible, not implied. */
.tj-axis {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  text-align: right;
}
.tj-axis-top { top: 0.55rem; color: rgba(165, 180, 252, 0.75); }
.tj-axis-bot { bottom: 0.55rem; color: rgba(148, 163, 184, 0.6); }

/* The caps move to the left so they don't collide with the axis labels. */
.tj-cap-with, .tj-cap-without { display: none; }
.tj-gapnote { top: auto; bottom: 0.5rem; right: 0.75rem; }

.tj-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin: 0 0.1rem 0.5rem;
  font-size: 0.66rem;
  color: rgba(255, 248, 239, 0.6);
}
.lg-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.lg-swatch { width: 1.1rem; height: 0; border-radius: 2px; display: inline-block; }
.lg-with { border-top: 3px solid #818cf8; }
.lg-without { border-top: 3px dashed #64748b; }
.lg-note {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: rgba(255, 248, 239, 0.38);
  line-height: 1.4;
}

/* Dashed without-line, so the two are told apart at a glance and by shape
   rather than by colour alone. */
.tj-line-without { stroke-dasharray: 7 5; }

/* A dot per beat, so the line reads as a sequence of moments. */
.tj-mark { vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.35s ease; }
.tj-mark.is-on { opacity: 1; }
.tj-mark-o { fill: #94a3b8; }
.tj-mark-w { fill: #a5b4fc; }

/* The in-chart record count collided with the bottom axis label, and the
   counter cards below already say it larger and clearer. Gone. */
.tj-gapnote { display: none; }