/* ============================================================================
   Tempo VC Deck — design system + per-slide layouts
   "Quiet Authority": refined minimalism × editorial-luxury-tech.
   ============================================================================ */

/* -------- 1. Tokens ------------------------------------------------------- */
:root {
  --bg: #08090A;
  --bg-elev: #0E0F11;
  --bg-elev-2: #16181C;
  --border: #1F2024;
  --border-soft: #14161A;
  --border-strong: #2A2C32;

  --text: #F4F5F8;
  --text-soft: #C9CCD3;
  --text-muted: #8A8F98;
  --text-dim: #5C6068;
  --text-faint: #3A3D44;

  --accent: #2547EB;
  --accent-soft: #5E6AD2;
  --accent-bright: #6E7BE6;
  --accent-glow: rgba(94, 106, 210, 0.35);

  --success: #4ADE80;
  --warn: #F59E0B;
  --danger: #EF4444;

  --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Instrument Serif', 'Times New Roman', serif;

  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.6, 0, 0.36, 1);
  --transition:  380ms var(--ease);

  /* Type scale */
  --t-11:  clamp(10px, 0.7vw,  11px);
  --t-12:  clamp(11px, 0.8vw,  12px);
  --t-13:  clamp(12px, 0.9vw,  13px);
  --t-15:  clamp(13px, 1.0vw,  15px);
  --t-17:  clamp(14px, 1.15vw, 17px);
  --t-20:  clamp(16px, 1.4vw,  20px);
  --t-24:  clamp(18px, 1.7vw,  24px);
  --t-32:  clamp(22px, 2.3vw,  32px);
  --t-40:  clamp(28px, 2.9vw,  40px);
  --t-56:  clamp(36px, 4.0vw,  56px);
  --t-72:  clamp(44px, 5.2vw,  72px);
  --t-96:  clamp(56px, 6.8vw,  96px);
  --t-128: clamp(72px, 9.0vw, 128px);

  --pad: clamp(40px, 5vw, 88px);
}

/* -------- 2. Reset + base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-15);
  line-height: 1.55;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "ss03";
  font-optical-sizing: auto;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--text); }

/* -------- 3. Ambient layers --------------------------------------------- */
/* Aurora previously held a corner-darkening vignette (rgba black 0.45 at the
   100% gradient stop), which combined with the dark --bg base made corners
   read as "missing" or empty. Now an empty layer kept for stacking-order
   compatibility — corners stay uniform with the rest of the canvas. */
.aurora {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Grain switched from `overlay` to `screen` so the white noise stays
   visible across dark areas (overlay attenuates against a near-black
   base). 100% viewport, edge-to-edge. */
.grain {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  mix-blend-mode: screen;
}

/* Continuous ambient caustics — a slow, blurred, grayscale shader driven by
   ambient-caustics.js. Sits with the other ambient layers (above .aurora,
   below #deck). Only visible while slide 7 is the active slide; fades in/out
   with the slide change. The shader keeps rendering in the background — the
   GPU cost is negligible and the fade stays smooth. */
.ambient-caustics {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  mix-blend-mode: screen;
  /* Fade-out (when leaving slide 7) is immediate-ish so it doesn't linger. */
  transition: opacity 400ms ease 0ms;
}
/* Fade-in starts at the same instant as the flip (1500ms) and ramps for 5s,
   so the caustics quietly build through the rotation and well past Tempo
   landing. The long ramp is what makes the fade actually perceptible at
   this very low peak opacity. The transition definition on the *target*
   state governs the change; leaving slide-7 reverts to the base transition
   above (no delay, quick fade-out). */
body:has(.slide.is-active.animate.slide-org-7) .ambient-caustics {
  opacity: 0.045;
  transition: opacity 5000ms linear 1500ms;
}

/* -------- 4. Slide host -------------------------------------------------- */
#deck {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}

.slide {
  position: absolute; inset: 0;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition:
    opacity 360ms var(--ease),
    transform 360ms var(--ease);
}
.slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 80ms;
}

/* Performance: CSS animations don't auto-pause when a slide is offscreen, so
   the org-chart pulses, slot-machine reveals, send-button glows etc. would
   otherwise keep burning GPU on every one of the 23 inactive slides. Pause
   everything inside an inactive slide; the active slide animates normally.
   Keyframed transforms/opacities resume from the same frame on re-activation,
   which matches the visual we want anyway. */
.slide:not(.is-active),
.slide:not(.is-active) * {
  animation-play-state: paused !important;
}

/* -------- 5. Chrome ------------------------------------------------------ */
.brand {
  position: fixed;
  top: clamp(20px, 2.4vw, 36px);
  right: clamp(20px, 2.4vw, 36px);
  z-index: 10;
  display: flex; align-items: center;
  transition: opacity 160ms ease-out;
}
body:has(.slide-cover.is-active) .brand { display: none; }
.brand-logo {
  height: clamp(32px, 3.6vw, 48px);
  width: auto;
  opacity: 0.75;
  transition: opacity 160ms ease-out;
}
.brand:hover .brand-logo { opacity: 1; }

.footer-meta {
  position: fixed;
  bottom: clamp(20px, 2.4vw, 36px);
  left: clamp(20px, 2.4vw, 36px);
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav {
  position: fixed;
  bottom: clamp(20px, 2.4vw, 36px);
  right: clamp(20px, 2.4vw, 36px);
  z-index: 10;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.16em;
}

.nav-btn {
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 160ms ease-out, background 160ms ease-out, border-color 160ms ease-out;
}
.nav-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.03);
  border-color: var(--border);
}
.nav-btn:disabled { opacity: 0.3; cursor: default; }
.nav-btn:disabled:hover { background: transparent; border-color: transparent; }

.counter {
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  user-select: none;
}
.counter-current { color: var(--text); }
.counter-sep { color: var(--text-faint); margin: 0 2px; }

.progress {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--border-soft);
  z-index: 10;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent-soft);
  transition: width 420ms var(--ease);
}

/* Help overlay */
.help {
  position: fixed; inset: 0;
  background: rgba(8, 9, 10, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
}
.help.is-visible { display: flex; }
.help-card {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  padding: 32px 36px;
  border-radius: 12px;
  min-width: 360px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.help-title { margin-bottom: 20px; color: var(--text); }
.help-list { display: grid; gap: 10px; margin: 0; }
.help-row {
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.help-row dt { color: var(--text-muted); }
.help-row dd { color: var(--text); margin: 0; }

/* -------- 6. Reusable building blocks ----------------------------------- */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.kicker-strong { color: var(--text-soft); }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
.mono  { font-family: var(--font-mono); }

.headline {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--text);
}

.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-20);
  line-height: 1.45;
  color: var(--text-soft);
  max-width: 56ch;
  letter-spacing: -0.005em;
}

.body-muted {
  color: var(--text-muted);
  font-size: var(--t-17);
  line-height: 1.55;
  max-width: 60ch;
}

.divider {
  height: 1px; border: none; margin: 0;
  background: var(--border);
}
.divider-soft { background: var(--border-soft); }

/* Reveal animations (auto-staggered for direct children with .reveal) */
.slide .reveal {
  opacity: 0;
  transform: translateY(10px);
}
.slide.is-active .reveal {
  animation: reveal 700ms var(--ease) both;
  animation-delay: calc(180ms + var(--reveal-i, 0) * 70ms);
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide-page break for print */
@media print {
  body { overflow: visible; }
  .aurora, .grain, .ambient-caustics, .nav, .progress, .help, .footer-meta, .brand { display: none !important; }
  #deck { height: auto; }
  .slide {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    page-break-after: always;
    width: 100vw;
    height: 100vh;
  }
}

/* ============================================================================
   PER-SLIDE LAYOUTS
   ============================================================================ */

/* -------- Slide 01: Cover ----------------------------------------------- */
.slide-cover {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}
.cover-bg {
  position: absolute; inset: 0;
  background: var(--bg);
  z-index: 0;
  overflow: hidden;
}
/* A single hairline rule across the canvas — Linear's product chrome */
.cover-rule {
  position: absolute;
  top: 78%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 14%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 86%,
    transparent 100%);
  opacity: 0;
  animation: rule-draw 1400ms var(--ease) 600ms both;
}
@keyframes rule-draw {
  0%   { opacity: 0; transform: scaleX(0.2); }
  100% { opacity: 1; transform: scaleX(1); }
}

/* Rings illustration — overlapping hairline ellipses around a central axis */
.cover-rings {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cover-rings svg,
.cover-rings-img {
  width: 100%;
  max-width: 620px;
  height: auto;
  opacity: 0;
  animation: rings-fade 1800ms var(--ease) 400ms forwards;
}
@keyframes rings-fade {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
.rings-group line.rings-axis-h,
.rings-group path.rings-axis-h {
  stroke: rgba(244,245,248,0.18);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.rings-group line.rings-axis-v {
  stroke: rgba(244,245,248,0.55);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.rings-ring {
  stroke: rgba(244,245,248,0.45);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.rings-ring-7 { stroke-opacity: 0.30; }
.rings-ring-8 { stroke-opacity: 0.20; }
.rings-ring-1 { stroke-opacity: 0.62; }
.cover-grid {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  padding: var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "mark     rings"
    "headline rings";
  align-items: center;
  align-content: center;
  gap: clamp(24px, 3vw, 64px);
}
.cover-mark     { grid-area: mark; }
.cover-rings    { grid-area: rings; }
.cover-headline { grid-area: headline; }
.cover-mark {
  display: flex; align-items: center;
  margin-bottom: clamp(48px, 7vw, 96px);
}
/* Mobile / narrow viewports: stack vertically with the rings sandwiched
   between the Tempo logo and the headline, per request. */
@media (max-width: 768px) and (orientation: portrait) {
  .cover-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mark"
      "rings"
      "headline";
    row-gap: clamp(20px, 5vw, 48px);
  }
  .cover-mark { margin-bottom: 0; justify-content: center; }
  .cover-rings { justify-self: center; }
  .cover-rings-img { max-width: min(360px, 70vw); }
  .cover-headline { text-align: center; max-width: none; }
}
.cover-logo {
  height: clamp(48px, 5vw, 72px);
  width: auto;
}
.cover-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.6vw, 104px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.96;
  color: var(--text);
  max-width: 14ch;
}
.cover-headline .line-1 {
  display: block;
  color: var(--text);
}
.cover-headline .line-2 {
  display: block;
  margin-top: 0.06em;
  color: var(--text-soft);
  font-weight: 300;
}
.cover-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  padding-right: 0.06em;
}
.cover-meta {
  margin-top: clamp(48px, 7vw, 88px);
  display: flex; align-items: center; gap: 14px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cover-meta-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: none;
}

/* -------- Slide 02: Team — title top-left, dossier cards below ------- */
/* Layout matches every other slide (flex column, content top-aligned).
   The title wrapper stretches naturally; the team grid has its own
   880px max-width so it stays centered below the full-width title. */
.slide-team {
  justify-content: flex-start;
  align-items: stretch;
  gap: clamp(28px, 3vw, 44px);
}
.team-headline {
  max-width: 50ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-24);
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 6px 0 0;
}
.team-headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text);
  font-weight: 400;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-content: center;
  justify-items: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex: 1;
}

/* Editorial-magazine layout — no card chrome, photos do the talking */
.founder-card {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.8vw, 24px);
  width: 100%;
  max-width: 360px;
}

.founder-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 5px 10px 5px 8px;
  border: 1px solid rgba(244,245,248,0.08);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
}
.founder-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.12);
}

.founder-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elev-2);
}
.founder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.95);
  display: block;
}

.founder-id {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.founder-name {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
  line-height: 1.04;
}

.founder-role {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--text-dim);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.founder-bio {
  font-family: var(--font-display);
  font-size: var(--t-13);
  color: var(--text-soft);
  line-height: 1.45;
  margin: 6px 0 0;
  letter-spacing: -0.005em;
  max-width: 36ch;
}

/* --- Stats row (Linear cycle-stat register) --- */
.founder-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 24px);
  padding-bottom: clamp(14px, 1.4vw, 18px);
  border-bottom: 1px solid rgba(244,245,248,0.06);
}
.founder-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.founder-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.founder-stat-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.founder-stat-value .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.founder-stat-value .unit {
  font-family: var(--font-display);
  font-size: var(--t-13);
  color: var(--text-muted);
  letter-spacing: -0.005em;
}

/* --- "Previously at" section with company chips --- */
.founder-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.founder-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.founder-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.founder-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid rgba(244,245,248,0.10);
  background: var(--bg-elev-2);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: var(--t-13);
  color: var(--text-soft);
  letter-spacing: -0.005em;
  font-weight: 500;
  line-height: 1.2;
}
.founder-chip-emph {
  background: rgba(94,106,210,0.16);
  color: #C0C8EE;
  border-color: rgba(94,106,210,0.28);
}
.founder-chip-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  padding-left: 6px;
}

/* Quick-read bullets — dim baseline, brand names pop white. Hairline above
   replaces the dropped card border, keeping the editorial divider. */
.founder-bullets {
  list-style: none;
  margin: 0;
  padding: clamp(14px, 1.4vw, 20px) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.founder-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: var(--t-15);
  color: var(--text-muted);
  line-height: 1.5;
}
.founder-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.founder-bullets strong {
  color: var(--text);
  font-weight: 500;
}

/* -------- Slide 03: Vision --------------------------------------------- */
.slide-vision {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vision-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 68px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text);
  max-width: 22ch;
  text-wrap: balance;
}
.vision-line-1,
.vision-line-2 {
  display: block;
}
.vision-line-2 {
  margin-top: 1em;
}
.vision-headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.vision-headline .accent-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  color: var(--text);
  padding-right: 0.04em;
}

/* -------- Slide 14: Close (future-state vision) ------------------------ */
.slide-close {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 3vw, 48px);
}
.close-kicker { color: var(--accent-bright); }
.close-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(38px, 5.2vw, 76px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
  max-width: 24ch;
}
.close-headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.04em;
  letter-spacing: -0.01em;
}
.close-headline .accent-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  color: var(--text);
  padding-right: 0.04em;
}
.close-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--text-soft);
  margin: 0;
  line-height: 1.3;
}
.vision-kicker {
  margin-bottom: clamp(40px, 5vw, 64px);
}

/* -------- Slide 04: Traction — Linear Cycle dashboard register --------- */
.slide-traction {
  justify-content: flex-start;
  overflow: hidden;
}
.traction-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-40);
  letter-spacing: -0.025em;
  line-height: 1.06;
  max-width: 24ch;
  color: var(--text);
  margin-top: 8px;
}
/* Two-column split: pilot impact | pipeline trajectory.
   Vertical hairline runs between them, big mono numbers drive the eye. */
.traction-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 112px);
  align-content: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  flex: 1;
}
.traction-split::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: var(--border);
}

.traction-side {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.6vw, 40px);
}

.traction-side-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: clamp(14px, 1.4vw, 18px);
  border-bottom: 1px solid var(--border-soft);
}

.traction-mark {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.traction-name {
  font-family: var(--font-display);
  font-size: var(--t-24);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  line-height: 1.04;
}

.traction-sub {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.traction-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.traction-num {
  font-family: var(--font-mono);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.traction-label {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.traction-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(94, 106, 210, 0.30);
  background: rgba(94, 106, 210, 0.10);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C0C8EE;
  align-self: flex-start;
}
.traction-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-bright);
  flex-shrink: 0;
}

/* Hero proof point — serif italic on the job title being made obsolete.
   Flex 1 + center so the hero block matches the chart column's vertical span. */
.traction-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.traction-hero-text {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--text);
}
.traction-hero-text .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.traction-hero-meta {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Supporting numbers under the hero — smaller, side-by-side. */
.traction-supporting {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 32px);
  padding-top: clamp(14px, 1.4vw, 20px);
  border-top: 1px solid var(--border-soft);
}
.traction-num-sm {
  font-size: clamp(26px, 2.6vw, 36px);
}

/* 4-month dual-metric chart: indigo bars (properties) + yellow line (ARR).
   Same visual idiom as the original — chunky bars below, smooth trajectory
   overlay on top, hatched future-pipeline zone to the right. */
.traction-chart {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
}
.traction-chart svg {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  max-height: clamp(200px, 26vh, 280px);
  display: block;
  overflow: visible;
}
.tr-axis {
  stroke: rgba(244, 245, 248, 0.18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.tr-divider {
  stroke: rgba(244, 245, 248, 0.14);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.tr-bar {
  fill: rgba(94, 106, 210, 0.36);
}
.tr-bar-current {
  fill: var(--accent);
  filter: drop-shadow(0 0 14px rgba(94, 106, 210, 0.45));
}
.tr-line {
  fill: none;
  stroke: #F5C455;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.tr-marker         { fill: #F5C455; }
.tr-marker-current { fill: #F5C455; }
.tr-marker-glow    { fill: #F5C455; opacity: 0.20; }
.tr-num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  fill: #F5C455;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.tr-num-strong {
  fill: #FFEAA0;
  font-size: 13px;
}
.tr-month {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  fill: var(--text-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tr-month-strong {
  fill: var(--text);
}
.tr-prop {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  fill: var(--text-dim);
  letter-spacing: 0.06em;
}
.tr-prop-strong {
  fill: var(--text-soft);
  font-weight: 500;
}
.tr-pipeline {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  fill: rgba(244, 245, 248, 0.32);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Projected zone — bars get a lighter fill + dashed outline; line goes dashed. */
.tr-bar-proj {
  fill: rgba(94, 106, 210, 0.18);
  stroke: rgba(94, 106, 210, 0.42);
  stroke-width: 1;
  stroke-dasharray: 2 2.5;
  vector-effect: non-scaling-stroke;
}
.tr-bar-end {
  fill: rgba(94, 106, 210, 0.45);
  stroke: rgba(94, 106, 210, 0.85);
  stroke-dasharray: none;
  filter: drop-shadow(0 0 12px rgba(94, 106, 210, 0.35));
}
.tr-line-proj {
  stroke: #F5C455;
  stroke-dasharray: 4 4;
  opacity: 0.85;
}
.tr-marker-proj {
  fill: var(--bg);
  stroke: #F5C455;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.tr-marker-end {
  fill: #F5C455;
  filter: drop-shadow(0 0 6px rgba(245, 196, 85, 0.6));
}
.tr-zone-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  fill: rgba(244, 245, 248, 0.36);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tr-zone-label-proj {
  fill: rgba(245, 196, 85, 0.55);
}

.traction-projections {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  padding-top: clamp(14px, 1.4vw, 20px);
  border-top: 1px solid var(--border-soft);
}
.cycle-tab.is-active .cycle-tab-count { color: var(--text-soft); }

/* -------- Slides 07-08: Traction v2 split — proof + pipeline ----------- */
/* Slide 07 (proof): the W Hollywood photo carries the slide. The right
   column is intentionally sparse — a kicker, the W mark, a claim, two
   stats — so the eye lands on the photo first and reads top-down on the
   right second. Whitespace is the design. */
.slide-traction-proof .proof-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 5vw, 80px);
  margin-top: clamp(24px, 3vh, 40px);
  padding-bottom: clamp(8px, 1.2vh, 18px);
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* Hero photo: rounded card filling the left column, with a subtle bottom
   gradient for a touch of cinematic depth. No competing content here. */
.slide-traction-proof .proof-media {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: var(--bg-elev);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.slide-traction-proof .proof-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.slide-traction-proof .proof-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 10, 0) 60%, rgba(8, 9, 10, 0.32) 100%);
}

/* Right column: vertical centering, generous breathing room between
   each beat (kicker → mark → claim → stats). */
.proof-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.6vh, 36px);
  min-width: 0;
  padding-right: clamp(8px, 1.2vw, 24px);
}
.proof-text .v2-section-label {
  margin-bottom: 0;
}
.proof-logo {
  display: block;
  align-self: flex-start;
  height: clamp(28px, 3.4vh, 42px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  margin-top: clamp(-4px, -0.4vh, 0px);
}

/* Claim is the punchline. Slightly lighter weight + serif italic accent
   keeps it editorial rather than salesy. */
.proof-claim {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--text);
  margin: 0;
  max-width: 18ch;
}
.proof-claim .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Body sits under the claim as elaboration — what "eliminated" actually
   means in practice. Soft, narrow, gives the eye a graceful step-down
   from the claim before it lands on the proof numbers. */
.proof-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 38ch;
  margin: 0;
}

/* Two stats, each smaller and quieter than before — they support the
   claim, they don't compete with it. A hairline vertical divider between
   them adds editorial structure without adding visual weight. */
/* Three stats in a row: number on top, short label below. No container,
   no pills — just clean stacked numerals letting the type carry it. */
.proof-stats {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 3.4vw, 56px);
  margin-top: clamp(8px, 1vh, 16px);
}
.proof-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.proof-stat-divider { display: none; }
.proof-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.proof-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Slide 08 (pipeline): chart on top, marquee on bottom — both full width
   so they breathe more than they did when stacked alongside the proof card. */
.slide-traction-pipeline .pipeline-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vh, 100px);
  margin-top: clamp(20px, 2.6vh, 32px);
  flex: 1;
  min-height: 0;
}
.pipeline-block {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 18px);
  min-height: 0;
  min-width: 0;
}
.pipeline-block--chart { flex: 3; }
/* Marquee block takes the remaining vertical space; the header (text)
   sits at its top, the marquee logos float centered in what's left so
   they end up at the midpoint between the text and the slide's nav. */
.pipeline-block--marquee {
  flex: 1;
  gap: 0;
}
.pipeline-block--marquee .pipeline-block-head {
  flex: 0 0 auto;
}
.pipeline-block--marquee .v2-marquee {
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: auto;
}
.pipeline-block-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: clamp(8px, 1vh, 14px);
  border-bottom: 1px solid var(--border);
}
/* Plain variant: a single all-white line + a small mono assumption note,
   used for the pipeline section so the marquee carries the weight. */
.pipeline-block-head--plain {
  border-bottom: none;
  padding-bottom: 0;
}
.pipeline-fine {
  margin-top: clamp(6px, 0.8vh, 12px);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
/* Matches the slide headline (.traction-v2-headline--single) exactly so
   the two display lines on this slide read as a matched pair. */
.pipeline-headline-plain {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.55vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #FFFFFF;
}

/* Twin growth charts: ARR on the left, properties on the right. The actual
   bars + axes are rendered by ApexCharts into .v2-chart-canvas; this layer
   just provides the title strip and the flex container that gives the
   library a bounded height to draw into. */
.v2-chart-pair {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  /* Narrower charts make the growth lines/bars read like a hockey
     stick — wide charts flatten the slope visually. */
  max-width: clamp(800px, 80vw, 1200px);
  width: 100%;
  margin: 0 auto;
}
.v2-chart-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.v2-chart-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 17px);
  letter-spacing: -0.005em;
  color: var(--text-soft);
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 0 clamp(4px, 0.6vh, 10px);
}
.v2-chart-title-meta {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.05vw, 17px);
  letter-spacing: 0.04em;
  color: #FFFFFF;
  text-transform: uppercase;
}
.v2-chart-title-sep {
  color: var(--text-dim);
  margin: 0 2px;
}
.v2-chart-title-meta-unit {
  color: var(--text-soft);
  opacity: 0.65;
}
.v2-chart-canvas {
  flex: 1;
  min-height: 0;
  min-width: 0;
}
/* Apex render tweaks — kill its default white tooltip flash, smooth grid. */
.apexcharts-tooltip { display: none !important; }
.apexcharts-gridline { stroke-opacity: 0.6; }
.apexcharts-text tspan { font-family: var(--font-mono) !important; }

/* -------- Slide 08: Traction v2 — validated playbook ------------------ */
/* Story sequence: hero (real role on indefinite leave + ROI proof) →
   signed contracts (momentum) → C-suite pipeline (scale of demand). */
.slide-traction-v2 {
  display: flex;
  flex-direction: column;
}
.traction-v2-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-40);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  margin-top: 8px;
}
.traction-v2-headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
/* Single-line variant: keep the title on one row even when it's long.
   Font size scales with viewport so the line fits without wrapping. */
.traction-v2-headline--single {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(16px, 1.55vw, 24px);
  letter-spacing: -0.015em;
}

/* Two-column split below the headline. Left = proof + signed momentum,
   right = growth curve + the pipeline visualized as logos. */
.v2-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: clamp(18px, 2.2vh, 28px);
  flex: 1;
  min-height: 0;
}
.v2-left,
.v2-right {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 26px);
  min-height: 0;
  min-width: 0;
}

/* Hero: the W Hollywood proof point. Bordered card with a faint accent
   bias so it reads as the slide's anchor before the eye drops to contracts. */
.v2-hero {
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(94, 106, 210, 0.06) 0%, rgba(94, 106, 210, 0) 60%),
    var(--bg-elev);
  padding: clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vh, 20px);
}
.v2-hero-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v2-hero-tag { color: var(--accent-bright); }
.v2-hero-tag-sep { color: var(--text-dim); }
.v2-hero-prop { color: var(--text-soft); }
.v2-hero-claim {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--text);
}
.v2-hero-claim .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.v2-hero-stats {
  display: flex;
  gap: clamp(28px, 3.6vw, 56px);
  align-items: baseline;
  margin-top: clamp(2px, 0.4vh, 8px);
}
.v2-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2-hero-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.v2-hero-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Case-study variant: hero now lives alone in the left column, so it has
   room for a short narrative body between the claim and the stat row.
   Stats pinned to the bottom so the card breathes evenly with the right
   column even when the chart + logos stack is taller than the prose. */
.v2-hero--case {
  flex: 1;
}
.v2-hero--case .v2-hero-stats {
  padding-top: clamp(4px, 0.6vh, 10px);
  padding-bottom: clamp(4px, 0.6vh, 10px);
}
.v2-hero-logo {
  display: block;
  align-self: flex-start;
  height: clamp(28px, 3.4vh, 44px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  margin-bottom: clamp(4px, 0.6vh, 10px);
}

/* Hero banner photo: a cropped strip of the property between the W Hotels
   logo and the rest of the case-study text. Anchors the card visually
   without crowding out the proof-point copy below. */
.v2-hero-banner {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  height: clamp(180px, 30vh, 280px);
  background: var(--bg-elev);
}
.v2-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.v2-hero-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 44ch;
  margin: 0;
}

.v2-col {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 18px);
  min-height: 0;
  min-width: 0;
}
.v2-col--chart,
.v2-col--logos { flex: 1; }
.v2-col-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: clamp(8px, 1vh, 14px);
  border-bottom: 1px solid var(--border);
}
.v2-col-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: -0.01em;
  color: var(--text);
}
.v2-col-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* Signed contracts list — month / property / ARR. */
.v2-contracts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
}
.v2-contract {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: baseline;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(10px, 1.2vh, 14px) clamp(14px, 1.4vw, 20px);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.v2-contract-mo {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.v2-contract-name {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--text);
}
.v2-contract-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-left: 4px;
}
.v2-contract-arr {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  color: var(--accent-bright);
}

/* Q1 growth chart — three bars (Jan, Feb, Mar) showing ARR ramp across
   the months tied to our signed contracts. Sits above the logo wall. */
.v2-chart {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  padding: clamp(8px, 1vh, 14px) clamp(8px, 1vw, 14px) 0;
}
.v2-chart svg {
  width: 100%;
  height: 100%;
}
.v2-q1-month {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  fill: var(--text-soft);
}
.v2-q1-props {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  fill: var(--text-dim);
}

/* Section labels — small accent-tinted kickers at the top of each of the
   three sections (proof, growth, pipeline). Consistent voice across the
   slide so the eye reads three discrete chapters. */
.v2-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: clamp(6px, 0.8vh, 12px);
}

/* Pipeline headline above the marquee — single declarative line replacing
   the old column-header / sub-header pair. */
.v2-pipeline-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 19px);
  letter-spacing: -0.01em;
  color: var(--text);
}
.v2-pipeline-num {
  color: var(--accent-bright);
  font-weight: 500;
}
.v2-pipeline-via {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.v2-pipeline-fine {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* Scrolling logo marquee — set in motion to make the wall of brand names
   feel alive, with edges fading to the slide background. The track holds
   the list duplicated so translateX(-50%) loops seamlessly. */
.v2-marquee {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.8vh, 22px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.v2-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 4.4vw, 68px);
  width: max-content;
  flex-shrink: 0;
  animation: v2-marquee-scroll 30s linear infinite;
  will-change: transform;
}
/* Bottom track scrolls slower and starts mid-cycle so the rows feel like
   independent layers rather than marching in lockstep. */
.v2-marquee-track--offset {
  animation-duration: 50s;
  animation-delay: -25s;
}
.v2-marquee-track img {
  display: block;
  height: clamp(22px, 2.6vh, 30px);
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.82;
}

/* Single-row variant: full-bleed slide gives us the room to lay every brand
   out on one line. Tuned smaller and slower than the two-row brick layout.
   We use margin-right (not flex `gap`) so each logo carries its own trailing
   space — that way the doubled track has identical-width halves and
   translateX(-50%) lines up exactly, no half-gap drift between cycles. */
.v2-marquee--single { flex-direction: row; gap: 0; }
.v2-marquee--single .v2-marquee-track {
  gap: 0;
  animation-duration: 70s;
}
.v2-marquee--single .v2-marquee-track img {
  height: clamp(24px, 3vh, 38px);
  margin-right: clamp(52px, 5.4vw, 88px);
}
@keyframes v2-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-marquee-track { animation: none; }
}

/* -------- Slide 05: Unique Insight — day-log + Tempo capability badges -- */
.slide-product {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  justify-content: flex-start;
}

.day-log {
  width: min(1200px, 100%);
  align-self: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.day-log-meta {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--t-13);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.day-log-meta-label { grid-column: 2 / 3; }
.day-log-meta-how  { grid-column: 4 / 5; }
.day-log-meta-tempo { color: var(--text); }
.day-log-meta-range { color: var(--text-dim); }
.day-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.day-log-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
  align-items: baseline;
  padding: clamp(16px, 1.6vw, 22px) 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--t-17);
  line-height: 1.35;
}
.day-log-row .t {
  font-family: var(--font-mono);
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-size: var(--t-13);
}
.day-log-row .m {
  color: var(--text);
  font-weight: 400;
}
.day-log-row .arrow {
  color: var(--text-soft);
  font-family: var(--font-mono);
  text-align: center;
}
.day-log-row .how {
  color: var(--text-soft);
  font-weight: 400;
}

/* Tempo capability badges — one per row, color-coded by capability. */
.day-log-tempo {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid;
  align-self: center;
}
.day-log-tempo.browser {
  background: rgba(94, 106, 210, 0.12);
  color: #C0C8EE;
  border-color: rgba(94, 106, 210, 0.30);
}
.day-log-tempo.orchestration {
  background: rgba(74, 222, 128, 0.10);
  color: #B5E8C5;
  border-color: rgba(74, 222, 128, 0.26);
}
.day-log-tempo.routing {
  background: rgba(245, 196, 85, 0.10);
  color: #F0DCA0;
  border-color: rgba(245, 196, 85, 0.26);
}
.day-log-tempo.awareness {
  background: rgba(196, 154, 246, 0.12);
  color: #DEC8F5;
  border-color: rgba(196, 154, 246, 0.28);
}

/* -------- Slide 06 + 07: Org Chart ------------------------------------- */
/* Title row spans both columns (matches slide 8's title-on-top pattern);
   row 2 is the 2-col grid: copy on the left, org chart on the right. */
.slide-org {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: clamp(20px, 2.5vw, 32px);
  align-items: center;
}
.slide-org > .slide-head { grid-column: 1 / -1; align-self: end; }
/* When the side copy is absent (slides 6 + 7), pin the title to the top and
   vertically center the chart within the remaining space. The flex variant
   overrides align-items so the title stretches to full width (otherwise the
   parent's grid `align-items: center` would horizontally centre each item). */
.slide-org:not(:has(.org-copy)) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Inherits row-gap from .slide-org, which adds asymmetric space above
     the auto-margined chart. Zero it out so the auto margins truly centre. */
  row-gap: 0;
}
.slide-org:not(:has(.org-copy)) > .slide-head {
  margin-bottom: 0;
  align-self: stretch;
}
.slide-org:not(:has(.org-copy)) > .org-chart {
  max-width: min(880px, 100%);
  align-self: center;
  margin: auto 0;
}
/* Long-form headline that needs to wrap (e.g., slide 7). Overrides the
   unified `white-space: nowrap` rule via higher specificity. */
.slide-head .headline.headline-wrap {
  white-space: normal;
  max-width: 64ch;
  line-height: 1.12;
  text-wrap: balance;
}

/* Slide-head headlines get a generic editorial-italic em accent. */
.slide-head .headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.org-copy { display: flex; flex-direction: column; gap: 20px; max-width: 38ch; }
.org-copy .stats {
  display: grid; gap: 14px;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.org-copy .stat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--t-12);
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.org-copy .stat-row .v { color: var(--text); }

.org-chart { width: 100%; height: auto; overflow: visible; }
.org-node rect {
  fill: var(--bg-elev);
  stroke: var(--border-strong);
  stroke-width: 1;
  rx: 22; ry: 22;
}
.org-node text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  fill: var(--text-soft);
  letter-spacing: 0.02em;
}
.org-node.is-target rect {
  fill: var(--accent);
  stroke: var(--accent-soft);
  filter: none;
  animation: pulse-glow 2.4s ease-in-out infinite;
}
.org-node.is-target text { fill: #FFFFFF; }
@keyframes pulse-glow {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 0 22px rgba(94, 106, 210, 0.6)); }
}
/* Tempo bar — same blue palette as the supervisor tier. Static drop-
   shadow (no animation) — the travelling pulse strokes already provide
   "alive" movement, and animating filter forced a full repaint per frame. */
.org-node.is-tempo rect {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
}
.org-link { stroke: var(--border-strong); stroke-width: 1; fill: none; }

/* Pulse overlay (slide 7) — subtle white pulse showing information flow.
   Velocity ~250 units/sec across all paths so dash size + speed stay consistent. */
.pulse-stroke {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 4;
  stroke-dasharray: 10 1500;
  stroke-dashoffset: 60;
  /* Two-layer drop-shadow only — dropped the upstream blur and one drop-
     shadow stop. 5 simultaneous paths × 4 filter passes was the slide's
     biggest perf hot loop; this halves the GPU work while keeping the
     tight-inner + ambient-corona character. */
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 1))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.55));
  pointer-events: none;
  opacity: 0;
}
.pulse-s1   { animation: pulse-s1 5s linear infinite; }
.pulse-s3   { animation: pulse-s3 5s linear infinite; }
.pulse-s4-1 { animation: pulse-s4-1 5s linear infinite; }
.pulse-s4-2 { animation: pulse-s4-2 5s linear infinite; }
.pulse-s4-3 { animation: pulse-s4-3 5s linear infinite; }

/* All pulse keyframes share this shape:
   - 0%: dash positioned at path start (offset = 10), opacity 0
   - fade-in: opacity 0 → 1 with no offset motion
   - travel: offset slides to -(path+10), revealing the dash crossing the path
   - fade-out: opacity 1 → 0 with the dash held at the end position (no glitch)
   - return: between fade-out and 100%, offset slides back to 10 invisibly
   - 100%: matches 0% (offset 10, opacity 0) — clean cycle wrap. */

/* Stage 1: Director → Tempo top (path 84) */
@keyframes pulse-s1 {
  0%        { stroke-dashoffset: 10;  opacity: 0; }
  0.5%      { stroke-dashoffset: 10;  opacity: 1; }
  7.7%      { stroke-dashoffset: -94; opacity: 1; }
  8.2%      { stroke-dashoffset: -94; opacity: 0; }
  100%      { stroke-dashoffset: 10;  opacity: 0; }
}
/* Stage 3: Pill pulses, two halves meeting at center bottom (path 790) */
@keyframes pulse-s3 {
  0%, 7.7%  { stroke-dashoffset: 10;   opacity: 0; }
  8.2%      { stroke-dashoffset: 10;   opacity: 1; }
  70.6%     { stroke-dashoffset: -800; opacity: 1; }
  71.1%     { stroke-dashoffset: -800; opacity: 0; }
  100%      { stroke-dashoffset: 10;   opacity: 0; }
}
/* Cascade tier 1: outermost staff (x=77.5 / 742.5) — fires when pill crosses (~43.3%) */
@keyframes pulse-s4-1 {
  0%, 42.8% { stroke-dashoffset: 10;  opacity: 0; }
  43.3%     { stroke-dashoffset: 10;  opacity: 1; }
  50%       { stroke-dashoffset: -94; opacity: 1; }
  50.5%     { stroke-dashoffset: -94; opacity: 0; }
  100%      { stroke-dashoffset: 10;  opacity: 0; }
}
/* Cascade tier 2: middle staff (x=210.5 / 609.5) — fires at ~53.7% */
@keyframes pulse-s4-2 {
  0%, 53.2% { stroke-dashoffset: 10;  opacity: 0; }
  53.7%     { stroke-dashoffset: 10;  opacity: 1; }
  60.4%     { stroke-dashoffset: -94; opacity: 1; }
  60.9%     { stroke-dashoffset: -94; opacity: 0; }
  100%      { stroke-dashoffset: 10;  opacity: 0; }
}
/* Cascade tier 3: inner staff (x=343.5 / 476.5) — fires at ~64% */
@keyframes pulse-s4-3 {
  0%, 63.5% { stroke-dashoffset: 10;  opacity: 0; }
  64%       { stroke-dashoffset: 10;  opacity: 1; }
  70.7%     { stroke-dashoffset: -94; opacity: 1; }
  71.2%     { stroke-dashoffset: -94; opacity: 0; }
  100%      { stroke-dashoffset: 10;  opacity: 0; }
}

/* -------- Slide 07: Converge-flip-and-reveal sequence -----------------------
   The slide opens in slide-6 layout and walks through a "flip the card to
   reveal Tempo" reveal. Static elements (Director, frontline, lines, pulses)
   live in the SVG. The five deprecated cards and the Tempo bar are rendered
   as HTML divs in an absolutely-positioned overlay — Chromium's SVG renderer
   doesn't reliably propagate CSS 3D perspective into SVG inner elements, but
   it does for HTML descendants. The HTML cards rotate with real perspective
   foreshortening (closer edge larger, far edge smaller).

     stage 0 (0–300ms):     reveal continues + brief recognition (slide-6
                            layout)
     stage 1 (300–900ms):   old connecting lines fade out
     stage 2 (800–1700ms):  four outer cards glide in a clockwise wave — left
                            supervisor → top-left AGM → top-right AGM → right
                            supervisor (100ms stagger, 600ms per card; each
                            card launches while the previous is mid-flight).
                            Centre supervisor anchors and fades text in place.
     stage 3 (1500–3500ms): synchronised 3D flip — deprecated stage rotates
                            -180° (poker-chip front), Tempo card rotates from
                            +180° to 0° (poker-chip back). Opacity steps at
                            the 50% edge-on moment so only one face is ever
                            rendered. 2000ms — snappy. Director slides down
                            in parallel (1500–2500ms, see below) so the top
                            of the chart re-paginates while the bar lands.
     stage 4 (3500–4500ms): AFTER the rotation lands — the new connecting
                            lines extend together: the trunk (Director→bar)
                            and all six legs (bar→each frontline node) appear
                            in unison once the bar is in place. Director is
                            already in position (shifted during stage 3) so
                            the trunk draws into a settled top node.
     stage 5 (4500ms+):     information-flow pulses begin (2.5s cycle)
*/


/* Outer 3D wrapper: owns perspective and aspect-ratio so the HTML cards align
   with the SVG viewBox coordinates regardless of viewport size. Aspect
   matches the SVG's 820×470 viewBox (which spans y=-90..380 to include the
   departments tier shared with slide 6). */
.slide-org-7 .org-chart-3d {
  position: relative;
  max-width: min(880px, 100%);
  align-self: center;
  margin: auto 0;
  width: 100%;
  aspect-ratio: 820 / 470;
  perspective: 500px;
  perspective-origin: 50% 50%;
}
.slide-org-7 .org-chart-3d > .org-chart-7 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  /* Lifted above the HTML overlay so the pulse paths along the bottom
     edge of the Tempo bar (y=224) aren't hidden by the card's fill. */
  z-index: 2;
}

/* HTML overlay shares the SVG coordinate space (percentages of stage
   width/height map to viewBox units) and sits BELOW the SVG so the
   pulse traces around the Tempo bar remain visible end-to-end. */
.slide-org-7 .org-chart-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  z-index: 1;
}

/* The dep-stage wraps all 5 cards and rotates as a unit, around the bar
   centre. (50%, 65.53%) corresponds to viewBox (410, 218) — bar centre —
   in the 820×470 (y=-90..380) viewBox. */
.slide-org-7 .dep-stage {
  position: absolute;
  inset: 0;
  transform-origin: 50% 65.53%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Each deprecated card. Sized as % of stage so it tracks the SVG viewBox. */
.slide-org-7 .dep-card {
  position: absolute;
  width: 15.8537%;       /* 130 / 820 */
  height: 7.6596%;       /* 36 / 470  */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 1px solid var(--accent-soft);
  border-radius: 9999px;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* Reuse the existing pulse-glow keyframes from slide 6 */
  animation: pulse-glow 2.4s ease-in-out infinite;
  will-change: transform, opacity;
}
.slide-org-7 .dep-card > span {
  display: block;
  transform: translateZ(0); /* keep text crisp inside a 3D context */
}

/* Per-card slide-6 starting positions (left/top in % of stage). The
   `--converge-x/y` vars define the translation that brings each card to the
   bar centre, expressed in percentages of the card's OWN size so they remain
   consistent regardless of how the chart is scaled. */
.slide-org-7 .dep-card.dep-ad-l  { left: 26.2195%; top: 42.5532%; --converge-x:  100%;    --converge-y: 250%; }
.slide-org-7 .dep-card.dep-ad-r  { left: 57.9268%; top: 42.5532%; --converge-x: -100%;    --converge-y: 250%; }
.slide-org-7 .dep-card.dep-sup-l { left: 11.5854%; top: 61.7021%; --converge-x:  192.31%; --converge-y: 0;    }
.slide-org-7 .dep-card.dep-sup-c { left: 42.0732%; top: 61.7021%; --converge-x:  0;       --converge-y: 0;    }
.slide-org-7 .dep-card.dep-sup-r { left: 72.5610%; top: 61.7021%; --converge-x: -192.31%; --converge-y: 0;    }

/* Tempo bar — back face of the flip. Geometrically full bar width, but starts
   rendered at scaleX(0.169) ≈ dep card width (130/770) and scales up to 1
   simultaneously with the rotation. Result: continuous growth from blue-card
   size into full Tempo bar, no size jump at the edge-on handoff.
   Transform order: rotateY THEN scaleX so scale applies in element-local
   space — clean foreshortening, no shear. */
.slide-org-7 .tempo-card {
  position: absolute;
  left: 3.0488%;         /* 25 / 820 */
  top: 61.7021%;         /* (200 - (-90)) / 470 */
  width: 93.9024%;       /* 770 / 820 */
  height: 7.6596%;       /* 36 / 470  */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  transform-origin: 50% 50%;
  transform: rotateY(180deg) scaleX(0.169);
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}
.slide-org-7 .tempo-card-logo {
  height: 50%;
  width: auto;
  opacity: 0;
}

/* Once the bar lands face-on, kick on the always-pulsing glow that signals
   the "magic Tempo layer" — same cadence as the original SVG version. */
@keyframes tempo-card-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 255, 255, 0.25); }
  50%      { box-shadow: 0 0 16px rgba(255, 255, 255, 0.7); }
}

/* Director begins at slide-6 position; shifts down 60px in stage 4. */
.slide-org-7 .org-node-director { transform: translateY(0); }

/* New connecting lines start fully dashed-off (invisible) and zero opacity. */
.slide-org-7 .org-link-new {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

/* Pulse overlay starts hidden — re-enabled with delay below. */
.slide-org-7 .pulse-stroke { animation: none; }

/* Active-state choreography. */
/* All 12 old links — Director→AGM (2), AGM→Sup (4), Sup→Frontline (6) — fade
   out together so the chart resets cleanly before the new wiring draws in. */
.slide.is-active.animate.slide-org-7 .org-link-old {
  animation: link-fade-out 600ms cubic-bezier(0.33, 1, 0.68, 1) 300ms forwards;
}
/* Each deprecated card glides to the bar centre via translate, in clockwise
   order around the dial: left supervisor → top-left AGM → top-right AGM →
   right supervisor (100ms stagger). The wave overlaps so each card launches
   while the previous is still in flight. The centre supervisor sits on the
   bar centre already, so its translate is a no-op; it just fades text
   alongside the first mover. The 3D flip rotation is applied to the parent
   .dep-stage so all 5 cards rotate as a unit around the same axis. */
.slide.is-active.animate.slide-org-7 .dep-card.dep-sup-l { animation: card-converge 900ms cubic-bezier(0.16, 1, 0.3, 1) 800ms forwards; }
.slide.is-active.animate.slide-org-7 .dep-card.dep-ad-l  { animation: card-converge 900ms cubic-bezier(0.16, 1, 0.3, 1) 900ms forwards; }
.slide.is-active.animate.slide-org-7 .dep-card.dep-ad-r  { animation: card-converge 900ms cubic-bezier(0.16, 1, 0.3, 1) 1000ms forwards; }
.slide.is-active.animate.slide-org-7 .dep-card.dep-sup-r { animation: card-converge 900ms cubic-bezier(0.16, 1, 0.3, 1) 1100ms forwards; }
.slide.is-active.animate.slide-org-7 .dep-card.dep-sup-c { animation: card-converge 900ms cubic-bezier(0.16, 1, 0.3, 1) 800ms forwards; }
.slide.is-active.animate.slide-org-7 .dep-card.dep-sup-l > span { animation: text-fade-out 400ms ease-out 800ms forwards; }
.slide.is-active.animate.slide-org-7 .dep-card.dep-ad-l  > span { animation: text-fade-out 400ms ease-out 900ms forwards; }
.slide.is-active.animate.slide-org-7 .dep-card.dep-ad-r  > span { animation: text-fade-out 400ms ease-out 1000ms forwards; }
.slide.is-active.animate.slide-org-7 .dep-card.dep-sup-r > span { animation: text-fade-out 400ms ease-out 1100ms forwards; }
.slide.is-active.animate.slide-org-7 .dep-card.dep-sup-c > span { animation: text-fade-out 400ms ease-out 800ms forwards; }
.slide.is-active.animate.slide-org-7 .dep-stage {
  animation:
    flip-out-rotate  2000ms cubic-bezier(0.65, 0, 0.35, 1) 1500ms forwards,
    flip-out-opacity 2000ms step-end                       1500ms forwards;
}
/* Tempo card: rotates from back to face-on with real 3D foreshortening, snaps
   visible at the edge-on midpoint so it cleanly takes over from the dep face.
   Once the bar lands face-on, the always-pulsing glow kicks in to signal the
   "magic Tempo layer" — synced to the 2.5s travelling-pulse cycle. */
.slide.is-active.animate.slide-org-7 .tempo-card {
  animation:
    tempo-reveal-rotate  2000ms cubic-bezier(0.65, 0, 0.35, 1) 1500ms forwards,
    tempo-reveal-opacity 2000ms step-end                       1500ms forwards;
}
/* Glow is now a pseudo-element with a STATIC peak box-shadow; we animate
   only its opacity (compositor-only) instead of animating box-shadow on
   the card itself (paint-trigger). Same visible cadence, ~no per-frame
   paint cost. */
.slide-org-7 .tempo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.7);
  opacity: 0;
}
.slide.is-active.animate.slide-org-7 .tempo-card::after {
  animation: tempo-card-glow-opacity 2.5s ease-in-out 3500ms infinite;
}
@keyframes tempo-card-glow-opacity {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.slide.is-active.animate.slide-org-7 .tempo-card-logo {
  animation: logo-fade-in 600ms ease-out 2900ms forwards;
}
/* Director re-positions IN PARALLEL with the rotation, paced to match the
   flip's full 2000ms duration AND its ease curve so the top node and the bar
   arrive at their resting state at the same perceived moment. The flip uses
   ease-in-out (slow ends, fast middle); a strong ease-out on the director
   would make it arrive too early and just sit there. */
.slide.is-active.animate.slide-org-7 .org-node-director {
  animation: director-shift 2000ms cubic-bezier(0.65, 0, 0.35, 1) 1500ms forwards;
}
/* New connecting lines extend AFTER the rotation lands — director is already
   in place from stage 3, bar is face-on, then all 7 lines (trunk Director→bar
   plus 6 legs bar→each frontline node) reach out together in unison. */
.slide.is-active.animate.slide-org-7 .org-link-new {
  animation: link-draw 1000ms cubic-bezier(0.33, 1, 0.68, 1) 3500ms forwards;
}
/* Travelling info-flow pulses — point of light extending along each line.
   2.5s cycle (2x faster than the original 5s) so the data-flow story reads
   more energetically. All five pulse keyframes share the same total cycle so
   the cascade timing percentages stay valid. */
.slide.is-active.animate.slide-org-7 .pulse-s1   { animation: pulse-s1   2.5s linear 4500ms infinite; }
.slide.is-active.animate.slide-org-7 .pulse-s3   { animation: pulse-s3   2.5s linear 4500ms infinite; }
.slide.is-active.animate.slide-org-7 .pulse-s4-1 { animation: pulse-s4-1 2.5s linear 4500ms infinite; }
.slide.is-active.animate.slide-org-7 .pulse-s4-2 { animation: pulse-s4-2 2.5s linear 4500ms infinite; }
.slide.is-active.animate.slide-org-7 .pulse-s4-3 { animation: pulse-s4-3 2.5s linear 4500ms infinite; }

@keyframes link-fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
/* Glide each deprecated card to the bar centre. Translation is in % of the
   card's own size so it scales with the chart. */
@keyframes card-converge {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(var(--converge-x, 0), var(--converge-y, 0)); }
}
/* Per-segment easing tuned so the rotation flies THROUGH edge-on without a
   perceived pause:
   - 0–50% (visible front face): ease-in — slow start, accelerating into the
     edge-on handoff so dep rotates quickly into invisibility
   - 50–100% (back face, invisible): doesn't matter visually
   This pairs with tempo-reveal-rotate's ease-out on its second segment, which
   accelerates Tempo OUT of edge-on. Both halves move fast through 50%. */
@keyframes flip-out-rotate {
  0%   { transform: rotateY(0deg);    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  50%  { transform: rotateY(-90deg);  animation-timing-function: linear; }
  100% { transform: rotateY(-180deg); }
}
@keyframes flip-out-opacity {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes text-fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
/* Three-stop keyframe so scale only grows during the SECOND half of the
   rotation. From 0–50% the back face rotates in but stays at blue-card
   size (scaleX 0.169) so it lands at the same size the blue pill vanished
   at. From 50–100% it rotates the rest of the way AND scales up to full bar
   simultaneously. Per-keyframe animation-timing-function: the 50% keyframe
   uses ease-out-quint for the second segment so rotation accelerates past
   edge-on (no perceived pause) and decelerates into face-on. */
@keyframes tempo-reveal-rotate {
  /* The bar also drifts up by 12px during the rotation so that, after the
     director shifts down 36px, the three vertical gaps (departments→director,
     director→Tempo, Tempo→frontline) all land equal at ~96 SVG units. */
  0%   { transform: translateY(0)     rotateY(180deg) scaleX(0.169); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  50%  { transform: translateY(-6px)  rotateY(90deg)  scaleX(0.169); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  100% { transform: translateY(-12px) rotateY(0deg)   scaleX(1);     }
}
@keyframes tempo-reveal-opacity {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes logo-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes director-shift {
  /* 36px (was 60px) — paired with the Tempo bar's -12px drift so all three
     vertical gaps in the rewired chart end up equal. */
  0%   { transform: translateY(0); }
  100% { transform: translateY(36px); }
}
@keyframes link-draw {
  0%   { stroke-dashoffset: 100; opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 1; }
}

.org-arrow {
  stroke: var(--text-muted);
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: round;
}

/* -------- Slide 08: Product Flow — Linear command-plate register ------ */
.slide-flow {
  align-items: stretch;
  justify-content: flex-start;
}
.slide-flow .kicker { align-self: flex-start; }
.flow-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-40);
  letter-spacing: -0.025em;
  line-height: 1.08;
  max-width: 28ch;
  color: var(--text);
  margin-top: 8px;
}
/* This slide's title runs longer than the others — allow wrapping. */
.slide-flow .flow-headline {
  white-space: normal;
  max-width: 64ch;
  line-height: 1.1;
}
.slide-flow .flow-headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.flow-stage {
  position: relative;
  flex: 1;
  width: min(1100px, 100%);
  margin: clamp(12px, 1.6vw, 20px) auto 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* No gap here — rows use margin-top instead so hidden rows collapse cleanly. */
  /* Anchor the latest revealed row near the vertical centre of the page.
     The stack hangs from the bottom; padding-bottom lifts the bottom edge
     so the most-recent (bottom-most) row reads as centered. Static — older
     rows extend upward into the mask fade as the chain recedes. */
  justify-content: flex-end;
  /* Was clamp(160px, 36vh, 320px) — tightened so the first modal sits close
     to the running-totals meter at the bottom rather than floating mid-slide
     while the meter is the focal point. */
  padding-bottom: clamp(110px, 22vh, 220px);
  /* As older rows move up toward the title, fade them to the slide's
     (black) background via a top mask — the chain reads as infinite,
     each new modal pushing the predecessors quietly into darkness. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 32%, black 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 32%, black 100%);
  overflow: hidden;
}
.flow-row + .flow-row {
  margin-top: clamp(10px, 1.2vw, 18px);
}

/* Row: full cmd-plate (left) → branch SVG → rich task stack (right) */
.flow-row {
  display: grid;
  grid-template-columns: 1fr clamp(72px, 8vw, 110px) 1fr;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  /* Keep their natural size — never let flexbox squeeze the modals when
     space runs out. Older rows just overflow upward into the mask fade. */
  flex-shrink: 0;
}

/* Override the original cmd-plate centered/max-width when used inside flow-row.
   Tighter padding so 4 plates can fit vertically. */
.flow-row .cmd-plate {
  max-width: none;
  align-self: center;
  width: 100%;
  padding: 10px 10px 8px 12px;
}
.flow-row .cmd-row {
  font-size: var(--t-13);
  padding: 0 4px 8px;
  line-height: 1.4;
}
.flow-row .cmd-actions { padding-top: 6px; }
.flow-row .cmd-icon { width: 22px; height: 22px; }
.flow-row .cmd-icon svg { width: 12px; height: 12px; }
.flow-row .cmd-send { padding: 0 3px 0 7px; height: 22px; }
.flow-row .cmd-send svg { width: 12px; height: 12px; }
.flow-row .cmd-send-chevron svg { width: 10px; height: 10px; }

/* Branch SVG fills the middle column, stretches to row height. */
.flow-branch {
  width: 100%;
  height: 100%;
  align-self: stretch;
  min-height: 80px;
}
.flow-branch path {
  fill: none;
  stroke: rgba(244, 245, 248, 0.20);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Task stack — rich cmd-task cards from the original committed pass,
   stacked vertically with tightened padding so 2-3 fit per row. */
.flow-tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flow-tasks .cmd-task {
  padding: 7px 12px 8px;
  gap: 3px;
}
.flow-tasks .cmd-task-header {
  padding-bottom: 0;
  border-bottom: 0;
}
.flow-tasks .cmd-task-msg {
  font-size: var(--t-13);
  line-height: 1.32;
}
.flow-tasks .cmd-task-meta {
  font-size: 9px;
}

/* -----------------------------------------------------------------------
   Sequence animation — rows reveal one at a time as the user clicks send.
   States:  hidden → awaiting (plate fades in, send pulses) →
            dispatching (branch draws, tasks fade in) → complete (static)
   ---------------------------------------------------------------------- */
/* Rows stay in the flex layout at all states — hidden ones collapse their
   height, margin, and opacity so the next row reveals with a smooth slide-up
   rather than a layout jump. */
.flow-row {
  transition:
    max-height 480ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 480ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 600ms ease-out;
  overflow: hidden;
}
.flow-row[data-state="hidden"] {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.flow-row[data-state="hidden"] + .flow-row,
.flow-row + .flow-row[data-state="hidden"] {
  margin-top: 0;
}
.flow-row[data-state="awaiting"],
.flow-row[data-state="dispatching"],
.flow-row[data-state="complete"] {
  max-height: 360px;
}
/* Prior rows recede when a newer row takes over: opacity drops so the
   eye stays on the active row but the history is still legible. JS
   adds `.is-dimmed` to rows[0..i-1] the moment the user hits send on
   row i. */
.flow-row.is-dimmed {
  opacity: 0.32;
  transition: opacity 600ms ease-out;
}
.flow-row.is-dimmed .cmd-plate,
.flow-row.is-dimmed .flow-tasks { filter: saturate(0.6); }

/* Awaiting: plate visible, send button pulsing. Branch + tasks not yet shown. */
.flow-row[data-state="awaiting"] .cmd-plate {
  opacity: 0;
  animation: flow-plate-in 480ms ease-out forwards;
}
.flow-row[data-state="awaiting"] .flow-branch,
.flow-row[data-state="awaiting"] .flow-tasks {
  opacity: 0;
  pointer-events: none;
}
.flow-row[data-state="awaiting"] .cmd-send {
  position: relative;
  animation: flow-send-pulse 1.5s ease-in-out infinite;
}

/* Dispatching: pulse off, branch path draws in, tasks stagger-fade in. */
.flow-row[data-state="dispatching"] .cmd-plate { opacity: 1; }
.flow-row[data-state="dispatching"] .cmd-send {
  animation: none;
  box-shadow: none;
}
.flow-row[data-state="dispatching"] .flow-branch {
  opacity: 1;
  transition: opacity 200ms ease-out;
}
.flow-row[data-state="dispatching"] .flow-branch path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: flow-branch-draw 600ms ease-out forwards;
}
.flow-row[data-state="dispatching"] .flow-tasks {
  opacity: 1;
}
.flow-row[data-state="dispatching"] .flow-tasks .cmd-task {
  opacity: 0;
  transform: translateX(-12px);
  animation: flow-task-in 380ms ease-out forwards;
}
.flow-row[data-state="dispatching"] .flow-tasks .cmd-task:nth-child(1) { animation-delay: 380ms; }
.flow-row[data-state="dispatching"] .flow-tasks .cmd-task:nth-child(2) { animation-delay: 560ms; }
.flow-row[data-state="dispatching"] .flow-tasks .cmd-task:nth-child(3) { animation-delay: 740ms; }

/* Complete: everything visible, no animation. */
.flow-row[data-state="complete"] .cmd-plate { opacity: 1; }
.flow-row[data-state="complete"] .cmd-send {
  animation: none;
  box-shadow: none;
}
.flow-row[data-state="complete"] .flow-branch { opacity: 1; }
.flow-row[data-state="complete"] .flow-branch path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.flow-row[data-state="complete"] .flow-tasks { opacity: 1; }
.flow-row[data-state="complete"] .flow-tasks .cmd-task {
  opacity: 1;
  transform: none;
}

@keyframes flow-plate-in {
  to { opacity: 1; }
}
@keyframes flow-send-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94, 106, 210, 0.55); }
  50%      { box-shadow: 0 0 0 14px rgba(94, 106, 210, 0); }
}
@keyframes flow-branch-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes flow-task-in {
  to { opacity: 1; transform: translateX(0); }
}

/* Command plate — recreates Linear's chat-input UI */
.cmd-plate {
  align-self: center;
  width: 100%;
  max-width: 560px;
  background: var(--bg-elev);
  border: 1px solid rgba(244,245,248,0.10);
  border-radius: 14px;
  padding: 16px 16px 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 40px rgba(0,0,0,0.28);
}
.cmd-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 6px 14px;
  font-family: var(--font-display);
  font-size: var(--t-17);
  color: var(--text);
  flex-wrap: wrap;
  line-height: 1.45;
}
.cmd-mention {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px 2px;
  background: rgba(94,106,210,0.18);
  color: #B0BBEC;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.94em;
  letter-spacing: -0.005em;
}
.cmd-text { color: var(--text-soft); }
.cmd-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(244,245,248,0.06);
}
.cmd-icons { display: flex; align-items: center; gap: 2px; }
.cmd-icon {
  width: 30px; height: 30px;
  background: transparent; border: none;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background 160ms ease-out, color 160ms ease-out;
}
.cmd-icon:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.cmd-icon svg { width: 14px; height: 14px; }
.cmd-send {
  display: inline-flex; align-items: center;
  background: var(--accent-soft);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 4px 0 10px; height: 28px;
  cursor: pointer;
  transition: background 160ms ease-out;
}
.cmd-send:hover { background: var(--accent-bright); }
.cmd-send svg { width: 14px; height: 14px; }
.cmd-send-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,0.18);
  height: 16px;
}
.cmd-send-chevron svg { width: 12px; height: 12px; }

/* Hairline branch from plate to task cards */
.cmd-branch {
  width: 100%;
  height: clamp(36px, 6vh, 56px);
  margin: 0 auto;
  display: block;
  align-self: center;
  max-width: 720px;
}
.cmd-branch path {
  fill: none;
  stroke: rgba(244,245,248,0.18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Dispatched task cards — Linear "issue card" register */
.cmd-outputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.cmd-task {
  background: var(--bg-elev);
  border: 1px solid rgba(244,245,248,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 40px rgba(0,0,0,0.28);
}
.cmd-task-header {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.cmd-task-id { color: var(--text-muted); }
.cmd-task-status {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.cmd-task-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint);
}
.cmd-task-status.status-active .dot  { background: #4ADE80; }
.cmd-task-status.status-pending .dot { background: var(--accent-soft); }
.cmd-task-status.status-done .dot    { background: var(--text-dim); }
.cmd-task-msg {
  font-family: var(--font-display);
  font-size: var(--t-13);
  color: var(--text);
  line-height: 1.45;
  margin: 0;
}
.cmd-task-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* -------- Slide 08: running-totals meter ------------------------------- */
/* Anchored to the bottom of the slide, sits BELOW .flow-stage's mask gradient
   (stage's padding-bottom keeps the bottom row floating ~36vh up, leaving
   room here for the three-cell meter without overlap). */
.flow-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(40px, 5.5vh, 76px);
  margin-inline: auto;
  width: min(760px, 88%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  z-index: 2;
}
/* Flat stat: number on top, mono uppercase label below. No card, no
   backdrop blur — same logic as the slide-7 / slide-9 stat blocks. */
.meter-cell {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.meter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.meter-value {
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  height: 1em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Slot machine — each char is a fixed cell. Digit cells contain a stacked
   column of 0–9 (×3 cycles) that translates Y to land on the new digit. The
   3-cycle stack means a "spin" of one full turn never reveals the column's
   ends: rest at middle cycle, animate down through the third cycle, snap
   back to middle. */
.slot-cell {
  display: inline-block;
  height: 1em;
  line-height: 1;
  text-align: center;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}
.slot-cell--digit { width: 1ch; }
.slot-col {
  display: block;
  will-change: transform;
  transform: translateY(calc(-1em * var(--offset, 0)));
}
.slot-d {
  display: block;
  height: 1em;
  line-height: 1;
}

/* Fine-print row spans all three meter columns; tiny mono caption that
   surfaces the wage / cadence / subscription assumptions behind the totals. */
.meter-fine {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  text-align: center;
}

/* -------- Slide 09: US Market ------------------------------------------ */
.slide-us {
  display: flex; flex-direction: column;
  gap: 32px;
}
.us-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-32);
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 30ch;
}
.us-headline .em { font-family: var(--font-mono); font-size: 0.85em; color: var(--accent-bright); padding: 0 0.04em; }
/* Stats laid out flat — number on top, mono uppercase label below.
   Same logic as slide 7 (proof): no container, the type carries it. */
.us-stats {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 3.4vw, 56px);
  margin-top: clamp(8px, 1vh, 16px);
}
.us-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.us-stat .v {
  font-family: var(--font-mono);
  font-size: var(--t-32);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.us-stat .l {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.us-map-wrap {
  flex: 1;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  align-self: center;
  display: flex; align-items: center; justify-content: center;
}
.us-map { display: block; width: 100%; height: auto; max-height: 64vh; margin: 0 auto; }
.us-map .state {
  fill: var(--bg-elev-2);
  stroke: var(--border-strong);
  stroke-width: 0.7;
}
.us-map .dot {
  fill: var(--accent-bright);
  filter: none;
  /* Per-dot stagger: --dot-delay is set by main.js based on each circle's
     cx so the wave reads left → right when the slide first activates. */
  opacity: 0;
}
.slide-us .us-map .dot {
  transform-box: fill-box;
  transform-origin: center;
}
.slide-us.is-active.animate .us-map .dot {
  animation: us-dot-fade 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--dot-delay, 0s) forwards;
}
/* Three-phase animation: appear small + dim, peak with a brief glow at
   ~50%, then settle back to the resting state. drop-shadow returns to
   0/0 alpha so once the sweep completes there's no lingering filter
   cost. animation-fill-mode: forwards locks the final no-glow state. */
@keyframes us-dot-fade {
  0% {
    opacity: 0;
    transform: scale(0.55);
    filter: drop-shadow(0 0 0 rgba(110, 123, 230, 0));
  }
  55% {
    opacity: 1;
    transform: scale(1.55);
    filter: drop-shadow(0 0 5px rgba(110, 123, 230, 0.9));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(110, 123, 230, 0));
  }
}
@media (prefers-reduced-motion: reduce) {
  .slide-us.is-active.animate .us-map .dot { animation: none; opacity: 1; }
}

/* -------- Slide 10: Global Market -------------------------------------- */
.slide-global {
  display: flex; flex-direction: column;
  gap: 24px;
}
.global-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-32);
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 32ch;
}
.global-headline .em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
/* Title group must sit above the opaque orbs, which sweep into the upper
   portion of the slide. */
.slide-global > .reveal {
  position: relative;
  z-index: 10;
}
.global-stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(20px, 2vw, 40px);
  align-items: end;
  padding: clamp(24px, 4vw, 48px) 0;
  overflow: visible;
}
.global-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
}
/* Smallest orb on top, largest in back — bubble z-index drives the stacking
   because each bubble forms its own scope for the orb inside it. */
.global-bubble:nth-child(1) { z-index: 3; }
.global-bubble:nth-child(2) { z-index: 2; }
.global-bubble:nth-child(3) { z-index: 1; }
/* Orbs are absolute-positioned so they don't push the bubble height past
   the viewport. Each orb's BOTTOM sits 16px above the bubble's top — so all
   three orb bottoms land on the same horizontal "ground line" above the
   $stat numbers. Sizes scale dramatically; the largest extends way above
   the slide top arc and gets clipped naturally by the viewport. */
.global-orb {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  /* Opaque canvas-colored disc so larger orb borders + coronas can't bleed
     through smaller orbs. Stacking: smallest on top, largest in back. */
  background: var(--bg);
  border: 1px solid rgba(244, 245, 248, 0.24);
  box-shadow:
    0 0 28px rgba(255, 255, 255, 0.10),
    0 0 80px rgba(255, 255, 255, 0.06),
    0 0 160px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}
.global-orb.size-sm {
  width: clamp(180px, 18vw, 260px);
  aspect-ratio: 1;
  z-index: 3;
}
.global-orb.size-md {
  width: clamp(560px, 58vw, 820px);
  aspect-ratio: 1;
  z-index: 2;
  box-shadow:
    0 0 80px rgba(255, 255, 255, 0.07),
    0 0 220px rgba(255, 255, 255, 0.04),
    0 0 440px rgba(255, 255, 255, 0.02);
}
.global-orb.size-lg {
  width: clamp(1400px, 145vw, 2200px);
  aspect-ratio: 1;
  z-index: 1;
  box-shadow:
    0 0 140px rgba(255, 255, 255, 0.05),
    0 0 360px rgba(255, 255, 255, 0.025),
    0 0 720px rgba(255, 255, 255, 0.012);
}
.global-num {
  font-family: var(--font-mono);
  font-size: var(--t-32);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.global-label {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  color: var(--text-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.3;
}
.global-label span { white-space: nowrap; }
.global-label .global-label-title { color: var(--text); }

/* -------- Slide 11 + 19: Three-row text slides ------------------------- */
.slide-tri {
  display: flex; flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  justify-content: center;
}
.tri-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-40);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  max-width: 38ch;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.tri-headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.tri-list { display: grid; gap: 28px; }

/* Slide 5 (Why Now) — three-force squeeze + verdict line.
   Title pins to top-left; verdict is pushed to the bottom of the slide. */
.slide-tri:has(.crisis-forces) {
  justify-content: flex-start;
}
.crisis-forces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 56px);
  width: 100%;
  max-width: 1100px;
  margin: auto auto 0;
}
.crisis-force {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2vw, 28px) 0;
  border-top: 1px solid var(--border-soft);
  position: relative;
}
.crisis-force::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: clamp(28px, 3vw, 40px);
  height: 1px;
  background: var(--accent-bright);
}
.crisis-num {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.22em;
  color: var(--text-dim);
}
.crisis-stat {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1vw, 14px);
  margin: clamp(6px, 1vw, 12px) 0 clamp(4px, 0.6vw, 8px);
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.crisis-stat.is-up   { color: #FFFFFF; }
.crisis-stat.is-down { color: var(--accent-bright); }
.crisis-stat-arrow {
  width: clamp(28px, 2.8vw, 40px);
  height: clamp(28px, 2.8vw, 40px);
  flex: none;
  align-self: center;
  color: currentColor;
}
.crisis-stat-num {
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 300;
  letter-spacing: -0.045em;
  color: currentColor;
  /* Slot-machine container: tabular-nums keeps proportional-font digit cells
     aligned (1ch is the width of "0" — without tabular figures, slimmer
     digits like "1" look squeezed in their cells). */
  display: inline-flex;
  align-items: center;
  height: 1em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.crisis-label {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  line-height: 1.05;
}
.crisis-cap {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}

.crisis-verdict {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-40);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  text-align: center;
  /* Sit on a single line if the viewport allows; wrap balanced
     when it doesn't. Auto top + bottom margin centers the verdict
     vertically between the stat row above and the slide bottom. */
  max-width: 100%;
  margin: auto auto;
  text-wrap: balance;
}
.crisis-verdict .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* Slide 11: two-pillar split — Demand + Implementation. Each panel has a
   small kicker, a punchy title, a hero (quote or stat), and a footing line. */
.why-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-content: center;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.why-split::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: var(--border);
}
.why-split.is-single {
  grid-template-columns: 1fr;
  max-width: 720px;
}
.why-split.is-single::before { display: none; }
.why-side {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.6vw, 36px);
}
.why-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: clamp(14px, 1.4vw, 18px);
  border-bottom: 1px solid var(--border-soft);
}
.why-mark {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.why-title {
  font-family: var(--font-display);
  font-size: var(--t-24);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  line-height: 1.04;
}

.why-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: flex-start;
  padding-top: clamp(24px, 3vw, 48px);
}
.why-quote {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}
.why-quote .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.005em;
}
.why-attribution {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
.why-stat {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.4vw, 20px);
  flex-wrap: wrap;
}
.why-stat-old {
  font-family: var(--font-mono);
  font-size: clamp(28px, 2.8vw, 40px);
  color: var(--text-dim);
  letter-spacing: -0.02em;
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
}
.why-stat-arrow {
  font-family: var(--font-mono);
  font-size: var(--t-24);
  color: var(--text-faint);
}
.why-stat-new {
  font-family: var(--font-mono);
  font-size: clamp(40px, 4.4vw, 60px);
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.why-foot {
  font-family: var(--font-display);
  font-size: var(--t-15);
  color: var(--text-soft);
  line-height: 1.5;
  padding-top: clamp(14px, 1.4vw, 20px);
  border-top: 1px solid var(--border-soft);
}
.why-foot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.why-foot-list li {
  position: relative;
  padding-left: 14px;
}
.why-foot-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-faint);
}
.tri-row {
  display: grid;
  grid-template-columns: clamp(140px, 16vw, 220px) 1fr;
  gap: clamp(24px, 3vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.tri-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-20);
  color: var(--text);
  letter-spacing: -0.01em;
}
.tri-body {
  font-size: var(--t-15);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 64ch;
}
.tri-body strong { color: var(--text); font-weight: 500; }
.tri-body .em { color: var(--text); font-family: var(--font-serif); font-style: italic; }

/* -------- Slide 12: Risks --------------------------------------------- */
.slide-risks { display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.risks-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-32);
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 16px;
}
.risks-list { display: grid; gap: 22px; }
.risk-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 2vw, 32px);
  padding-top: 22px;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.risk-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-56);
  color: var(--text-faint);
  line-height: 0.9;
  user-select: none;
  font-weight: 400;
}
.risk-content { display: grid; gap: 8px; }
.risk-objection {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-20);
  color: var(--text);
  letter-spacing: -0.01em;
}
.risk-rebuttal {
  font-size: var(--t-15);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 110ch;
}

/* -------- Admin analytics (admin.html) --------------------------------- */
.admin-body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  padding: clamp(24px, 4vw, 48px);
}
.admin {
  max-width: 1100px;
  margin: 0 auto;
}
.admin-head { margin-bottom: 32px; }
.admin-logo { height: 32px; width: auto; opacity: 0.75; margin-bottom: 16px; display: block; }
.admin-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-32);
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 6px;
}
.admin-sub {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--text-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.admin-form { display: flex; gap: 10px; margin: 24px 0; max-width: 500px; }
.admin-form input {
  flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; color: var(--text);
  font-family: var(--font-display); font-size: var(--t-15); outline: none;
}
.admin-form input:focus { border-color: var(--accent-bright); }
.admin-form button {
  background: var(--accent-soft); color: #fff; border: 1px solid var(--accent-bright);
  border-radius: 8px; padding: 12px 18px; font-family: var(--font-display);
  font-weight: 500; font-size: var(--t-15); cursor: pointer;
}
.admin-form button:hover { background: var(--accent-bright); }
.admin-meta {
  font-family: var(--font-mono); font-size: var(--t-11); color: var(--text-dim);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px;
}
.admin-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-display); font-size: var(--t-15);
}
.admin-table thead th {
  text-align: left; padding: 12px 12px; font-family: var(--font-mono);
  font-size: var(--t-11); color: var(--text-soft); letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--border);
}
.admin-table thead th.num { text-align: right; }
.admin-table tbody td {
  padding: 12px 12px; border-top: 1px solid var(--border-soft);
  color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.admin-table tbody td.num { text-align: right; }
.admin-row { cursor: pointer; transition: background 120ms ease-out; }
.admin-row:hover { background: rgba(255,255,255,0.03); }
.admin-row.open { background: rgba(94,106,210,0.06); color: var(--text); }
.admin-row .toggle { width: 20px; color: var(--text-faint); font-family: var(--font-mono); }
.admin-row .viewer { color: var(--text); }
.admin-detail td {
  background: rgba(0,0,0,0.25); border-top: none; padding: 0;
}
.per-slide { padding: 16px 16px 22px 40px; }
.per-slide-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 32px; font-family: var(--font-mono); font-size: var(--t-13);
}
.per-slide-row {
  display: grid; grid-template-columns: 30px 1fr auto auto;
  gap: 12px; align-items: baseline; padding: 4px 0;
  border-bottom: 1px dotted var(--border-soft);
}
.ps-num { color: var(--text-faint); }
.ps-name { color: var(--text); font-family: var(--font-display); }
.ps-visits { color: var(--text-dim); font-size: var(--t-11); }
.ps-time { color: var(--text); font-variant-numeric: tabular-nums; }
.admin-error {
  margin-top: 16px; padding: 12px 14px; border: 1px solid #ef4444;
  border-radius: 8px; background: rgba(239,68,68,0.08); color: #fca5a5;
  font-family: var(--font-mono); font-size: var(--t-13);
}

/* -------- Email gate (gate.html) --------------------------------------- */
.gate-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
}
.gate {
  position: relative;
  z-index: 2;
  width: min(92%, 520px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 28px);
  padding: clamp(24px, 4vw, 48px);
}
.gate-logo {
  height: clamp(36px, 4vw, 56px);
  width: auto;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.gate-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
  margin: 0;
}
.gate-title .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.gate-sub {
  font-family: var(--font-display);
  font-size: var(--t-17);
  color: var(--text-soft);
  margin: 0;
  line-height: 1.4;
}
.gate-form {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.gate-form input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--t-15);
  outline: none;
  transition: border-color 160ms ease-out, background 160ms ease-out;
}
.gate-form input:focus {
  border-color: var(--accent-bright);
  background: rgba(255, 255, 255, 0.06);
}
.gate-form input::placeholder {
  color: var(--text-faint);
}
.gate-form button {
  background: var(--accent-soft);
  color: #fff;
  border: 1px solid var(--accent-bright);
  border-radius: 8px;
  padding: 14px 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-15);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 160ms ease-out;
  white-space: nowrap;
}
.gate-form button:hover {
  background: var(--accent-bright);
}
.gate-foot {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--text-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: clamp(12px, 1.6vw, 24px) 0 0;
}

/* -------- Slide 14: Pro forma ------------------------------------------ */
.slide-proforma {
  display: flex; flex-direction: column;
  gap: clamp(20px, 2.6vw, 32px);
  justify-content: center;
}
.proforma-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.proforma-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--t-13);
  font-variant-numeric: tabular-nums;
}
.proforma-table thead th {
  text-align: right;
  padding: 12px 10px;
  background: rgba(255,255,255,0.02);
  color: var(--text-soft);
  font-weight: 500;
  font-size: var(--t-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.proforma-table thead th.pf-label,
.proforma-table tbody td.pf-label {
  text-align: left;
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--text);
  font-weight: 400;
  font-size: var(--t-13);
}
.proforma-table tbody td {
  padding: 10px 10px;
  text-align: right;
  color: var(--text-soft);
  border-top: 1px solid var(--border-soft);
}
.proforma-table tbody tr.pf-row-strong td {
  color: var(--text);
  background: rgba(255,255,255,0.025);
  font-weight: 500;
}
.proforma-table tbody tr.pf-row-cash td {
  color: var(--text);
  background: rgba(94, 106, 210, 0.08);
  font-weight: 500;
}
.proforma-foot {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin: 0;
  text-align: center;
}

/* -------- Slide 15: Moat (was 14, now 15) ----------------------------- */
.slide-moat {
  display: flex; flex-direction: column;
  gap: clamp(20px, 2.6vw, 36px);
  justify-content: center;
}
.moat-lede {
  font-family: var(--font-display);
  font-size: var(--t-20);
  color: var(--text-soft);
  max-width: 80ch;
  line-height: 1.4;
  margin: 0;
}
.moat-list { display: grid; gap: clamp(20px, 2vw, 28px); }
.moat-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 2vw, 32px);
  padding-top: 22px;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.moat-num {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  color: var(--text-faint);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}
.moat-content { display: grid; gap: 8px; }
.moat-claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-20);
  color: var(--text);
  letter-spacing: -0.01em;
}
.moat-body {
  font-size: var(--t-15);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 110ch;
  margin: 0;
  /* Avoids a single word landing alone on the last line. */
  text-wrap: pretty;
}

/* -------- Slide 13: GTM ------------------------------------------------ */
.slide-gtm {
  display: flex; flex-direction: column;
  gap: 24px;
}
.gtm-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-32);
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 36ch;
}
.gtm-headline .arrow {
  font-family: var(--font-mono);
  color: #FFFFFF;
  padding: 0 0.18em;
  font-weight: 400;
}
.gtm-stage {
  flex: 1;
  display: grid;
  /* Equal columns + matching horizontal padding so the captions
     ($21k / $105k / $6.3m) align with the TAM stats on slide 11. */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
  align-content: center;
  padding: clamp(20px, 3vw, 40px) 0;
}
.gtm-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.gtm-fig-img-wrap {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gtm-fig-img {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}
.gtm-fig:nth-child(3) .gtm-fig-img { max-width: 460px; }

.gtm-caption {
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(244,245,248,0.06);
  width: 78%;
  max-width: 260px;
}
.gtm-caption-acv {
  font-family: var(--font-mono);
  font-size: var(--t-32);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.gtm-caption-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-15);
  color: var(--text);
  letter-spacing: -0.005em;
}
.gtm-caption-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.gtm-assumptions {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  margin: clamp(12px, 1.6vw, 20px) auto 0;
}

/* -------- Slide 14: Roadmap ------------------------------------------- */
.slide-roadmap {
  display: flex; flex-direction: column;
  gap: 24px;
}
.roadmap-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-32);
  letter-spacing: -0.02em;
  color: var(--text);
}
.roadmap-headline .accent {
  font-family: var(--font-mono);
  color: var(--accent-bright);
  letter-spacing: -0.04em;
}
.roadmap {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: stretch;
  margin-top: clamp(24px, 3vw, 40px);
  padding: 0 24px;
}
.roadmap-line {
  position: relative;
  height: 1px;
  background: linear-gradient(to right, var(--border-strong) 0 86%, transparent 86% 100%);
  align-self: center;
  overflow: visible;
}
/* Travelling glow that races down the line into SEED. Sits at z-index 0
   so the spend pills and final SEED pill (z-index 2) eclipse it as it
   passes — the pulse looks like it's running underneath them. */
.roadmap-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  /* Solid white pill — the bloom comes entirely from the layered filter
     below. Same recipe as the slide-6 pulse-stroke so they read as the
     same kind of soft glowing dot. */
  width: 14px;
  height: 5px;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  border-radius: 999px;
  filter:
    blur(1.5px)
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 26px rgba(255, 255, 255, 0.34));
  pointer-events: none;
  z-index: 0;
  /* Ease-in: starts slow, accelerates the whole way down the line, hits
     SEED at peak velocity — no deceleration in the final stretch. */
  animation: roadmap-pulse-travel 3.2s cubic-bezier(0.42, 0, 1, 1) infinite;
}
@keyframes roadmap-pulse-travel {
  0%   { left: 0%;  opacity: 0; }
  6%   {            opacity: 1; }
  85%  { left: 86%; opacity: 1; }
  92%  { left: 86%; opacity: 0.6; }
  100% { left: 86%; opacity: 0; }
}
.roadmap-spend {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 2;
}
/* SEED: black pill, white wordmark, with a corona that idles low and
   blooms when the pulse arrives (synced via shared 4.8s cycle). */
.roadmap-final {
  position: absolute;
  top: 50%; left: 86%; transform: translate(-50%, -50%);
  background: #000;
  color: #FFFFFF;
  padding: 9px 22px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Glow cycle synced with the travelling pulse — same 3.2s ease-in
     timing so the bloom builds in lockstep with the accelerating dot. */
  animation: roadmap-final-glow 3.2s cubic-bezier(0.42, 0, 1, 1) infinite;
}
/* SEED stays dark until the pulse arrives — no idle glow. The bloom
   only fires in the last ~20% of the cycle, peaks at 88% (when the
   accelerating pulse reaches the pill), then fades back to dark before
   the loop wraps so the next cycle starts cold again. */
@keyframes roadmap-final-glow {
  0%, 72% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0.18);
  }
  88% {
    box-shadow:
      0 0 6px rgba(255, 255, 255, 1),
      0 0 18px rgba(255, 255, 255, 0.82),
      0 0 48px rgba(255, 255, 255, 0.46),
      0 0 96px rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.95);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .roadmap-pulse { animation: none; opacity: 0; }
  .roadmap-final { animation: none; }
}
.roadmap-row { position: relative; z-index: 2; }
.roadmap-row, .roadmap-line { transform: translateX(7%); }
.roadmap-line { z-index: 1; }
.roadmap-milestone {
  position: absolute;
  width: 1px;
  background: var(--border);
}
.roadmap-row.top .roadmap-milestone { bottom: 0; height: 60%; }
.roadmap-row.bottom .roadmap-milestone { top: 0; height: 60%; }
.roadmap-milestone .dot {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: none;
  z-index: 2;
}
.roadmap-row.top .roadmap-milestone .dot { bottom: -3px; left: -3px; }
.roadmap-row.bottom .roadmap-milestone .dot { top: -3px; left: -3px; }
.roadmap-milestone .content {
  position: absolute;
  left: 16px;
  display: grid; gap: 6px;
  width: clamp(160px, 16vw, 230px);
}
.roadmap-row.top .roadmap-milestone .content { top: 0; }
.roadmap-row.bottom .roadmap-milestone .content { bottom: 0; }
.roadmap-milestone .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.roadmap-milestone .what {
  font-family: var(--font-display);
  font-size: var(--t-17);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.roadmap-milestone .detail {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-15);
  color: var(--text-soft);
  line-height: 1.45;
}

/* -------- Slide 15: Appendix divider ----------------------------------- */
.slide-appendix {
  align-items: center;
  justify-content: center;
}
.appendix-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-40);
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--text);
}

/* -------- Slide 16 + 17: Stat list slides ------------------------------ */
.slide-stats {
  display: flex; flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  justify-content: center;
}
.stats-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-32);
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 56ch;
  line-height: 1.2;
}
.stats-headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.stats-list { display: grid; gap: 22px; }
.stat-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 2vw, 32px);
  padding-top: 22px;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.stat-marker {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--text-faint);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
.stat-content { display: grid; gap: 8px; }
.stat-claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-20);
  color: var(--text);
  letter-spacing: -0.01em;
}
.stat-body {
  font-size: var(--t-15);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 110ch;
  margin: 0;
  text-wrap: pretty;
}
.stat-content strong { color: var(--text); font-weight: 500; }
.stat-content .num {
  font-family: var(--font-mono);
  color: var(--accent-bright);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.stat-content .ref {
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--text-faint);
  vertical-align: super;
  padding-left: 2px;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.stat-content .ref:hover { color: var(--accent-bright); }

.citations {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 24px;
}
.citations li {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.citations li::before { content: '— '; color: var(--text-faint); }

/* -------- Slide 18: Competition table ---------------------------------- */
.slide-comp {
  display: flex; flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  justify-content: center;
}
.comp-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-32);
  letter-spacing: -0.02em;
  color: var(--text);
}
.comp-headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.comp-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elev);
}
.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: var(--t-13);
}
.comp-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 18px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
}
.comp-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-soft);
  vertical-align: top;
  line-height: 1.5;
}
.comp-table tbody tr:last-child td { border-bottom: none; }
.comp-table tbody tr:hover td { background: rgba(255,255,255,0.012); }
.comp-table .col-cat { color: var(--text); font-weight: 500; }
.comp-table .col-players { color: var(--text-soft); font-family: var(--font-mono); font-size: 12px; }
.comp-table .col-funding { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.comp-table .threat {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}
.threat.high      { color: var(--danger);  border-color: rgba(239, 68, 68, 0.3);  background: rgba(239, 68, 68, 0.06); }
.threat.med-high  { color: var(--warn);    border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.06); }
.threat.med       { color: var(--warn);    border-color: rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.04); }
.threat.med-low   { color: #C5E8B7;        border-color: rgba(74, 222, 128, 0.25); background: rgba(74, 222, 128, 0.05); }
.threat.low       { color: var(--success); border-color: rgba(74, 222, 128, 0.3);  background: rgba(74, 222, 128, 0.06); }

/* -------- Unified slide title ------------------------------------------- */
/* Every slide's H2 matches slide 8 (.flow-headline). Stays on one line at
   desktop widths; if the viewport is too narrow only the words that don't
   fit overflow to the next line (standard wrap, not balanced). Declared at
   end of file so it wins source order over the per-slide classes above. */
.team-headline,
.traction-headline,
.flow-headline,
.us-headline,
.global-headline,
.tri-headline,
.risks-headline,
.gtm-headline,
.roadmap-headline,
.stats-headline,
.comp-headline,
.slide-head .headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-40);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  max-width: none;
  white-space: normal;
  text-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 0;
}


/* Traction headline carries italic emphasis on a single line. */
.traction-headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* -------- Slides 21 & 22: Style guide ---------------------------------
   These two slides are designed AS specimens — every type sample is
   rendered in its production style, every color tile is the actual hue
   in the actual size it lives at. The goal: a designer should be able
   to recognise the system on sight and reproduce it from this page. */

.slide-style {
  display: flex;
  flex-direction: column;
}
.slide-style .headline {
  max-width: none;
}
.slide-style .headline .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ============================ Slide 21: Color =========================== */
/* Hero row of four large color tiles, then a single text-tier strip below.
   Generous breathing room — the tiles are the slide. */
.slide-style-color .color-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: clamp(28px, 3.4vh, 48px);
  flex: 1;
  min-height: 0;
}
.slide-style-color .color-tile {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}
.slide-style-color .color-tile-fill {
  height: clamp(120px, 18vh, 200px);
  flex-shrink: 0;
  position: relative;
}
.slide-style-color .color-tile-fill--energy {
  background: radial-gradient(ellipse 65% 60% at 50% 50%,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.4) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.02) 75%,
    transparent 100%);
}
.slide-style-color .color-tile-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
  padding: clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 30px);
  flex: 1;
  min-height: 0;
}
.slide-style-color .color-tile-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.slide-style-color .color-tile-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.slide-style-color .color-tile-rule {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-13);
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
  flex: 1;
}
.slide-style-color .color-tile-rule code,
.slide-style-color .color-tile-rule em {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-style: normal;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  padding: 0 5px;
  border-radius: 3px;
}
.slide-style-color .color-tile-rule em {
  background: transparent;
  font-family: var(--font-serif);
  font-style: italic;
}
.slide-style-color .color-tile-tokens {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: clamp(6px, 0.8vh, 12px);
  margin-top: auto;
  border-top: 1px solid var(--border);
}
.slide-style-color .color-tile-tokens code {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--accent-bright);
  letter-spacing: 0;
  background: none;
  padding: 0;
}
.slide-style-color .color-tile-hex {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* Text-tier strip below the color tiles — the real grays in real type. */
.color-text-tiers {
  margin-top: clamp(20px, 2.6vh, 36px);
  padding-top: clamp(14px, 1.6vh, 22px);
  border-top: 1px solid var(--border);
}
.color-tier-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: clamp(10px, 1.2vh, 14px);
}
.color-tier-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.8vw, 28px);
}
.color-tier {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.color-tier-sample {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.015em;
}
.color-tier code {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--text-soft);
}
.color-tier-hex {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* ============================ Slide 22: Type ============================ */
/* Three voices in a manifesto strip, then specimen rows where the LEFT
   shows the actual style at production size and the RIGHT names it. */
.slide-style-type .type-voices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: clamp(16px, 2.2vh, 28px);
  padding: clamp(14px, 1.8vh, 22px) clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
}
.slide-style-type .type-voice {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.slide-style-type .type-voice-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.slide-style-type .type-voice-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
}
.slide-style-type .type-voice-role {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Spec rows: left rail = the actual sample in actual style, right rail =
   the spec line + designer note. The dashed rule between rows reads as
   spec-sheet, not as a list. */
.slide-style-type .type-specs {
  list-style: none;
  margin: clamp(14px, 1.8vh, 24px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.slide-style-type .type-spec-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: baseline;
  padding: clamp(6px, 0.9vh, 12px) 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.slide-style-type .type-spec-row:last-child { border-bottom: none; }
.slide-style-type .type-spec-row--stat { align-items: center; }

.slide-style-type .type-spec-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.slide-style-type .type-spec-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.slide-style-type .type-spec-line {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.slide-style-type .type-spec-line code {
  color: var(--text-soft);
  background: rgba(255,255,255,0.05);
  padding: 0 5px;
  border-radius: 3px;
}
.slide-style-type .type-spec-rule {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-13);
  line-height: 1.5;
  color: var(--text-dim);
}
.slide-style-type .type-spec-rule em,
.slide-style-type .type-spec-rule code {
  font-style: normal;
  color: var(--text-soft);
}
.slide-style-type .type-spec-rule code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(255,255,255,0.05);
  padding: 0 4px;
  border-radius: 3px;
}

/* The actual production styles, rendered as samples. */
.type-sample--kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.type-sample--headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
}
.type-sample--claim {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--text);
}
.type-sample--claim em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.type-sample--stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.type-sample--stat .stat-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}
.type-sample--stat .stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.type-sample--body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-15);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 48ch;
}
.type-sample--inprose {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
.type-sample--inprose .ip-em {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent-bright);
  padding: 0 0.04em;
}
.type-sample--fine {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}


/* =================================================================
   MOBILE PORTRAIT  (≤ 768px wide AND portrait orientation)
   -----------------------------------------------------------------
   Each slide is a fixed full-viewport page. Touch swipe up/down
   advances/retreats one slide via the same go(n) used by desktop;
   the active slide gets .is-active and runs its choreography.
   No page-level scroll — slides that need more room get an inner
   `.slide-scroll` container that scrolls within the slide.

   Landscape phones get desktop content layout but the same mobile
   architecture (fixed slides + swipe), defined in its own block at
   the bottom of this file. The orientation:portrait clause keeps
   the portrait single-column overrides from leaking into a small
   landscape phone (which also has max-width < 768).
   ================================================================= */
@media (max-width: 768px) and (orientation: portrait) {

  /* Lock the page — no body scroll. The deck sizes the viewport. */
  html, body {
    overflow: hidden;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
  }
  body {
    font-size: 15px;
  }

  /* Deck IS the viewport. Slides absolute-position over each other,
     identical to desktop — only the .is-active slide is visible. */
  #deck {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 2;
  }

  .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* Tight top: brand logo is ~36px including its 14px top offset.
       The headline can sit just below it. Bottom padding is small —
       there's no nav chrome on mobile. */
    padding: 30px clamp(16px, 4vw, 24px) 20px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 4vw, 22px);
    /* Slide visibility is driven by .is-active (set by go() in main.js).
       Inactive slides are display:none so they don't intercept taps. */
  }

  .slide:not(.is-active) {
    display: none !important;
  }

  .slide.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
  }

  /* Reveal staging is moot — every visible slide is "settled". */
  .slide .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Hide kickers entirely on portrait mobile — title gets the space. */
  .slide .kicker { display: none !important; }

  /* Pause expensive infinite animations on inactive slides only.
     The base "pause on inactive" rule still works; on mobile, slides
     are flagged is-active by IntersectionObserver as they enter view. */

  /* ---- Chrome -------------------------------------------------- */
  .nav,
  .progress,
  .help,
  .footer-meta { display: none !important; }

  .brand {
    top: 14px;
    right: 14px;
    z-index: 10;
  }
  .brand-logo { height: 22px; }

  /* ---- Headlines ----------------------------------------------- */
  .traction-v2-headline,
  .traction-v2-headline--single,
  .pipeline-headline-plain,
  .us-headline,
  .crisis-verdict,
  .crisis-headline,
  .tri-headline,
  .roadmap-headline,
  .stats-headline,
  .comp-headline,
  .moat-headline,
  .gtm-headline,
  .flow-headline,
  .global-headline,
  .traction-headline,
  .what-headline,
  .insight-headline,
  .why-headline,
  .risks-headline,
  .pro-forma-headline,
  .why-full-headline,
  .close-headline,
  .headline {
    white-space: normal !important;
    max-width: 100% !important;
    text-wrap: balance;
    font-size: clamp(22px, 6.6vw, 30px);
    line-height: 1.18;
  }

  .slide-cover .cover-headline,
  .slide-cover h1.headline {
    font-size: clamp(34px, 9vw, 48px);
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* ---- Multi-col grids → 1 col --------------------------------- */
  .v2-split,
  .proof-split,
  .v2-chart-pair,
  .pipeline-stack,
  .traction-split,
  .crisis-forces,
  .why-split,
  .team-grid,
  .global-stage,
  .day-log-row,
  .v2-grid,
  .style-grid,
  .color-tiles,
  .type-voices,
  .color-tier-row,
  .tri-row,
  .moat-grid,
  .insight-stack,
  .insight-cols,
  .traction-projections,
  .traction-supporting {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: clamp(14px, 4vw, 22px) !important;
  }

  .slide-style-type .type-spec-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ---- Slide 4 (Why now / crisis): compact so 3 stats + verdict all
     fit within 100svh on phones. Numbers shrink, gaps tighten. */
  .slide-tri .crisis-forces {
    gap: 14px !important;
  }
  .slide-tri .crisis-force {
    padding: 14px 0 0 !important;
    gap: 4px !important;
  }
  .slide-tri .crisis-stat {
    margin: 2px 0 !important;
  }
  .slide-tri .crisis-stat-num {
    font-size: 44px !important;
  }
  .slide-tri .crisis-stat-arrow {
    width: 22px !important;
    height: 22px !important;
  }
  .slide-tri .crisis-label {
    font-size: 18px !important;
  }
  .slide-tri .crisis-verdict {
    font-size: clamp(16px, 4.4vw, 20px) !important;
    margin-top: 14px !important;
    line-height: 1.3 !important;
  }

  /* ---- Slide 8 (Pipeline): smaller pipeline headline, less gap
     between traction-headline and ARR chart. */
  .slide-traction-pipeline .traction-v2-headline {
    margin-bottom: 4px !important;
  }
  .slide-traction-pipeline .pipeline-stack {
    gap: 14px !important;
  }
  .slide-traction-pipeline .pipeline-block + .pipeline-block { margin-top: 0; }
  .slide-traction-pipeline .pipeline-headline-plain {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }
  .slide-traction-pipeline .pipeline-fine {
    display: none !important;
  }
  .slide-traction-pipeline .pipeline-block-head {
    gap: 4px !important;
  }

  /* ---- Slide 16 (Risks & rebuttals): tighter body so 3 long
     objections fit within 100svh. */
  .slide-risks .risks-list { gap: 8px !important; }
  .slide-risks .risk-row {
    padding-top: 8px !important;
    gap: 0 !important;
    grid-template-columns: 1fr !important;
  }
  .slide-risks .risk-quote { display: none !important; }
  .slide-risks .risk-objection {
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }
  .slide-risks .risk-rebuttal {
    font-size: 11.5px !important;
    line-height: 1.32 !important;
  }
  .slide-risks .risk-content { gap: 3px !important; }
  .slide-risks .risks-headline {
    margin-bottom: 8px !important;
  }

  /* ---- Slide 18 (Stats): tighten body + citations so 3 long stats
     fit. */
  .slide-stats .stats-list { gap: 10px !important; }
  .slide-stats .stat-row,
  .slide-stats .stat-item { padding: 8px 0 !important; gap: 8px !important; }
  .slide-stats .stat-body,
  .slide-stats p { font-size: 12.5px !important; line-height: 1.4 !important; }
  .slide-stats .citations {
    font-size: 9px !important;
    line-height: 1.4 !important;
    padding-top: 8px !important;
  }
  .slide-stats .stats-headline {
    margin-bottom: 6px !important;
  }

  /* ---- Slide 12 (Land and expand): keep three isometric figures in a
     row on mobile (compressed) instead of stacking — stacking made the
     slide ~3× viewport tall. */
  .slide-gtm .gtm-stage {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    align-items: end;
    align-content: center;
    padding: 4px 0 !important;
  }
  .slide-gtm .gtm-fig { gap: 8px !important; }
  .slide-gtm .gtm-fig-img,
  .slide-gtm .gtm-fig:nth-child(3) .gtm-fig-img {
    max-width: 100% !important;
    width: 100% !important;
  }
  .slide-gtm .gtm-caption {
    width: 100%;
    max-width: none;
    padding-top: 8px;
  }
  .slide-gtm .gtm-caption-acv { font-size: 18px !important; }
  .slide-gtm .gtm-caption-label { font-size: 12px !important; }
  .slide-gtm .gtm-caption-sub {
    font-size: 8.5px !important;
    letter-spacing: 0.06em !important;
  }
  /* Stack the two fragments on separate lines and hide the dot
     separator on mobile, so all three columns share the same height. */
  .slide-gtm .gtm-caption-sub {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px;
    align-items: center;
  }
  .slide-gtm .gtm-caption-sub > span { white-space: nowrap; }
  .slide-gtm .gtm-caption-sub > .sep { display: none !important; }
  .slide-gtm .gtm-assumptions {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
  }

  /* ---- Slide 9 (Tempo Automates / flow): make the flow-stage flex-grow
     into the slide (instead of forcing 100% min-height that pushed the
     meter off-screen). Slide is fixed 100svh; stage takes whatever's
     left after headline + meter. */
  .slide-flow .flow-stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  .slide-flow .flow-meter {
    flex: 0 0 auto !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--border-soft);
  }
  .slide-flow .meter-fine {
    display: none !important;
  }

  /* ---- W Hotels proof slide: full-bleed image with logo + claim
     overlaid on it. Stats sit underneath. */
  .slide-traction-proof .proof-split {
    position: relative !important;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: 0;
  }
  /* Image fills the space below the headline; logo + claim overlay it. */
  .slide-traction-proof .proof-media {
    position: relative !important;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 14px;
    overflow: hidden;
  }
  /* Fade ramps from clear at the top to nearly opaque at the bottom so
     the claim sits on a deep, legible background. Starts higher (8%)
     and ramps faster so the lower third is fully dark. */
  .slide-traction-proof .proof-media::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg,
        rgba(8, 9, 10, 0) 8%,
        rgba(8, 9, 10, 0.55) 46%,
        rgba(8, 9, 10, 0.96) 100%);
  }
  /* proof-text overlays the image area only (matches proof-media bounds
     by being absolutely-positioned to its sibling via the proof-split
     containing block — see grid-area reset below). */
  .slide-traction-proof .proof-text {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    padding: 16px 18px 22px !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto auto !important;
    z-index: 2;
    gap: 0 !important;
    pointer-events: none;
  }
  .slide-traction-proof .proof-text > * { pointer-events: auto; }
  .slide-traction-proof .proof-text > .proof-logo { display: none !important; }
  .slide-traction-proof .proof-text > .proof-stats { grid-row: 3; }
  .slide-traction-proof .proof-text > .proof-claim { grid-row: 4; align-self: end; padding-top: 12px; }
  .slide-traction-proof .proof-logo {
    height: 28px !important;
    align-self: flex-start;
    margin: 0 !important;
    filter: brightness(0) invert(1);
    opacity: 1;
  }
  .slide-traction-proof .proof-claim {
    font-size: clamp(26px, 7.6vw, 38px) !important;
    line-height: 1.08 !important;
    max-width: 14ch !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }
  .slide-traction-proof .proof-body {
    display: none;
  }
  .slide-traction-proof .proof-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
    align-self: end;
  }
  .slide-traction-proof .proof-stat { gap: 0; }
  .slide-traction-proof .proof-stat-divider { display: none !important; }
  .slide-traction-proof .proof-num {
    font-size: clamp(18px, 5.4vw, 24px) !important;
    color: #FFFFFF !important;
    line-height: 1.05;
  }
  .slide-traction-proof .proof-lbl {
    font-size: 9.5px !important;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72) !important;
    letter-spacing: 0.08em;
  }

  /* ---- Touch targets ------------------------------------------- */
  .cmd-icon { width: 36px !important; height: 36px !important; }
  .cmd-send { height: 36px !important; padding: 0 8px !important; }
  .flow-row .cmd-icon { width: 30px !important; height: 30px !important; }
  .flow-row .cmd-send { height: 30px !important; }

  /* ---- Wide tables get horizontal scroll ----------------------- */
  .comp-table-wrap,
  .proforma-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Wider so "How Tempo wins" body text doesn't wrap line-by-line and
     make every row absurdly tall. The table scrolls horizontally on
     mobile anyway, so trading a wider table for shorter rows is fine. */
  .comp-table { min-width: 1020px; }
  .comp-table tbody td:nth-child(5),
  .comp-table thead th:nth-child(5) { width: 420px; min-width: 420px; }
  .proforma-table { min-width: 600px; }

  /* ---- Slide 9 product flow: chat-style. The first prompt sits roughly
     centered in the viewport. Tapping send dispatches the row's task
     cards, which appear below the plate and push it up. The next prompt
     appears below the completed cards. The slide grows tall and the
     user free-scrolls within it. */
  /* Slide is a fixed-height swipe page. The chat scrolls within it.
     Old rows fade out behind a top mask as new ones come in. */
  .slide-flow .flow-stage {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end; /* anchor newest row to bottom */
    gap: 18px;
    min-height: 100%;
    padding: 0 0 16px;
    width: 100%;
    /* Top fade so old rows pushed up disappear behind the page bg. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.15) 8%, black 24%, black 100%);
            mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.15) 8%, black 24%, black 100%);
  }
  .slide-flow .flow-row {
    position: relative !important;
    inset: auto !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 400ms ease, transform 400ms ease;
  }
  /* Hidden rows collapse + fade + drop down by 16px so the awaiting
     row visibly slides UP into view rather than popping. */
  .slide-flow .flow-row {
    transition:
      max-height 480ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 320ms ease-out,
      transform 480ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .slide-flow .flow-row[data-state="hidden"] {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(16px);
    margin-top: 0 !important;
  }
  .slide-flow .flow-row[data-state="awaiting"],
  .slide-flow .flow-row[data-state="dispatching"],
  .slide-flow .flow-row[data-state="complete"] {
    transform: translateY(0);
  }
  /* Once a row is dimmed (a newer row has taken over), fade it out
     entirely so it disappears behind the top gradient mask. The mask
     does the rest as it scrolls upward. */
  .slide-flow .flow-row.is-dimmed {
    opacity: 0.32 !important;
  }
  .slide-flow .cmd-branch,
  .slide-flow .flow-branch { display: none !important; }
  .slide-flow .cmd-outputs {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .slide-flow .cmd-plate { max-width: none !important; }
  .slide-flow .cmd-task { padding: 10px 12px !important; }
  .slide-flow .flow-meter {
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 24px;
  }
  .slide-flow .meter-fine {
    grid-column: 1 / -1;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  /* ---- Style guide slides are internal design refs, not deck content. */
  .slide-style { display: none !important; }

  /* ---- Slide 13 roadmap: vertical timeline. Single continuous left
     line with a pulse traveling top→bottom, dots at each milestone,
     SEED pill at the end that lights up when the pulse arrives. */
  .slide-roadmap .roadmap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 0 56px 0 !important;
    margin-top: 8px;
    position: relative;
    grid-template-rows: none !important;
    flex: 1 1 auto;
  }
  .slide-roadmap .roadmap-milestone {
    padding: 2px 0 2px 22px !important;
  }
  .slide-roadmap .roadmap-milestone .when {
    font-size: 10px !important;
    letter-spacing: 0.12em;
  }
  .slide-roadmap .roadmap-milestone .what {
    font-size: 13.5px !important;
    line-height: 1.2;
  }
  .slide-roadmap .roadmap-milestone .detail {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .slide-roadmap .roadmap-row {
    display: contents;
    transform: none !important;
  }
  /* Repurpose the desktop center-line container as a vertical line on
     the left, anchored to the roadmap container. Pulse + SEED stay as
     children so their existing animations carry over. */
  .slide-roadmap .roadmap-line {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px;
    bottom: 36px; /* ends where SEED begins so the pulse lands on it */
    width: 1px !important;
    height: auto !important;
    background: var(--border-strong) !important;
    align-self: auto !important;
    transform: none !important;
    overflow: visible !important;
    margin: 0 !important;
    z-index: 1;
  }
  /* Pulse runs along the vertical line (top → bottom). */
  .slide-roadmap .roadmap-pulse {
    position: absolute !important;
    left: 0 !important;
    top: 0;
    width: 8px !important;
    height: 14px !important;
    transform: translate(-50%, 0) !important;
    animation: roadmap-pulse-vertical 3.2s cubic-bezier(0.42, 0, 1, 1) infinite !important;
  }
  /* Spend pills along the desktop track don't translate vertically;
     hide them on mobile to keep the chrome quiet. */
  .slide-roadmap .roadmap-spend { display: none !important; }
  /* SEED pill anchored at the bottom of the timeline, centered against
     the full slide width. (main.js moves it out of .roadmap-line on
     mobile so its absolute positioning is relative to .roadmap.) */
  /* SEED pill is left-justified so its left edge sits on the vertical
     line. The line bottom matches the pill's top edge so the travelling
     pulse arrives directly at the pill. */
  .slide-roadmap .roadmap-final {
    position: absolute !important;
    left: 0 !important;
    transform: none !important;
    top: auto !important;
    bottom: 0 !important;
  }
  /* Milestones stack to the right of the line. Top + bottom rows
     interleave chronologically via `order`. */
  .slide-roadmap .roadmap-milestone {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    background: none !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    padding: 4px 0 4px 22px;
    border-left: none;
  }
  .slide-roadmap .roadmap-milestone .content {
    position: relative !important;
    left: 0 !important;
    width: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    gap: 4px;
  }
  .slide-roadmap .roadmap-milestone .dot {
    position: absolute !important;
    top: 10px !important;
    bottom: auto !important;
    left: -4px !important;
    width: 8px !important;
    height: 8px !important;
    z-index: 2;
  }
  /* Chronological interleave: top1, bottom1, top2, bottom2, … */
  .slide-roadmap .roadmap-row.top    .roadmap-milestone:nth-child(1) { order: 1; }
  .slide-roadmap .roadmap-row.bottom .roadmap-milestone:nth-child(1) { order: 2; }
  .slide-roadmap .roadmap-row.top    .roadmap-milestone:nth-child(2) { order: 3; }
  .slide-roadmap .roadmap-row.bottom .roadmap-milestone:nth-child(2) { order: 4; }
  .slide-roadmap .roadmap-row.top    .roadmap-milestone:nth-child(3) { order: 5; }
  .slide-roadmap .roadmap-row.bottom .roadmap-milestone:nth-child(3) { order: 6; }
  .slide-roadmap .roadmap-row.top    .roadmap-milestone:nth-child(4) { order: 7; }

  /* ---- Slide 11 global market: TAM-SAM-SOM circles tangent at the
     bottom (same ground line). The largest extends OFF the top of the
     viewport — same dramatic proportion as the desktop view. */
  .slide-global .global-stage {
    position: relative;
    display: block !important;
    width: 100%;
    height: 70svh;
    min-height: 480px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    flex: none !important;
    overflow: visible !important;
    grid-template-columns: none !important;
  }
  .slide-global .global-bubble {
    position: absolute;
    inset: 0;
    display: block;
  }
  /* All three orbs share the same bottom-tangent point — one ground line. */
  .slide-global .global-orb {
    position: absolute !important;
    left: 50% !important;
    bottom: -2% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
    box-shadow: 0 0 36px rgba(110, 123, 230, 0.18) !important;
    border: 1px solid rgba(110, 123, 230, 0.42) !important;
  }
  /* Same proportions as desktop: largest is ~8× smallest. Largest blows
     past the top of the viewport on purpose. */
  .slide-global .global-orb.size-sm {
    width: 22vw !important;
    aspect-ratio: 1 !important;
    height: auto !important;
  }
  .slide-global .global-orb.size-md {
    width: 70vw !important;
    aspect-ratio: 1 !important;
    height: auto !important;
  }
  .slide-global .global-orb.size-lg {
    width: 175vw !important;
    aspect-ratio: 1 !important;
    height: auto !important;
  }
  /* Each $-figure + label sits inside its ring near the top of the ring
     (above the ring beneath it), all centered horizontally. */
  .slide-global .global-bubble > .global-num,
  .slide-global .global-bubble > .global-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
  }
  /* US Hotels — centered within the visible portion of the small ring. */
  .slide-global .global-bubble:nth-child(1) > .global-num   { bottom: 8%; font-size: 15px !important; }
  .slide-global .global-bubble:nth-child(1) > .global-label { bottom: 3%; font-size: 9px !important; }
  /* Global Hotels — vertically centered between the top of the small
     ring (~16% from stage bottom) and the top of the medium ring
     (~58% from stage bottom). */
  .slide-global .global-bubble:nth-child(2) > .global-num   { bottom: 33%; font-size: 17px !important; }
  .slide-global .global-bubble:nth-child(2) > .global-label { bottom: 28%; font-size: 9px !important; }
  /* Global Retail/CRE/Hotels — visible portion of the large ring,
     above the medium ring's top. */
  .slide-global .global-bubble:nth-child(3) > .global-num   { bottom: 84%; font-size: 18px !important; }
  .slide-global .global-bubble:nth-child(3) > .global-label { bottom: 79%; font-size: 9px !important; white-space: normal; max-width: 70%; line-height: 1.2; }
  .slide-global .global-num,
  .slide-global .global-label {
    z-index: 5;
  }

  /* Vertical pulse-travel keyframes for the mobile roadmap. Mirrors
     the desktop horizontal animation but on the y-axis. */
  @keyframes roadmap-pulse-vertical {
    0%   { top: 0%;    opacity: 0; }
    6%   { opacity: 1; }
    85%  { top: 100%; opacity: 1; }
    92%  { top: 100%; opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
  }

  /* ---- Slide 6 (A New Capability): mobile font matching.
     The supervisor pills on slide 5 are SVG text — they scale with the
     SVG viewBox so they shrink with the chart. The dep-cards here are
     HTML, so by default they keep CSS px size and look comparatively
     huge / bold next to the previous slide. Match the SVG scaling by
     sizing font as a fraction of the dep-stage (container) width:
     11 / 820 ≈ 1.34cqw — same ratio used by .org-node text on slide 5.
     Force pill shape — webkit on iOS sometimes loses border-radius on
     children inside `transform-style: preserve-3d` parents. */
  .slide-org-7 .dep-stage {
    container-type: inline-size;
  }
  .slide-org-7 .dep-card {
    font-size: 1.34cqw !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-radius: 9999px !important;
  }
  .slide-org-7 .tempo-card {
    border-radius: 9999px !important;
  }
  .slide-org-7 .dep-card > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  /* SVG node text (slide 5 + 6 frontline rows) — also scale down. */
  .slide-org .org-node text,
  .slide-org-7 .org-node text {
    font-size: clamp(5px, 1.3vw, 9px);
  }

  /* ---- Team slide: keep two founders side-by-side as compact
     cards so both fit in one viewport. */
  .team-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(12px, 3vw, 18px) !important;
    align-items: start;
  }
  .founder-card {
    max-width: none !important;
    gap: 10px !important;
  }
  .founder-status { font-size: 9px; padding: 4px 8px; }
  .founder-status-dot { width: 5px; height: 5px; }
  .founder-name { font-size: clamp(16px, 4.4vw, 20px) !important; }
  .founder-role { font-size: 9px; letter-spacing: 0.18em; }
  .founder-bio { font-size: 12px; max-width: none; }
  .founder-photo-wrap { aspect-ratio: 4/5; }
}


/* =================================================================
   MOBILE LANDSCAPE  (≤ 500px tall, landscape orientation)
   -----------------------------------------------------------------
   Landscape phones reuse the DESKTOP content layout — the desktop
   deck is already a landscape canvas and translates naturally — but
   wrap it in the mobile architecture (each slide is a fixed
   100svh page, touch-swipe to navigate, no page-level scroll, no
   chrome). Per-slide content sizes are scaled down via vh/vw clamps
   that already exist in the desktop CSS.
   ================================================================= */
@media (max-height: 500px) and (orientation: landscape) {

  /* Scale type tokens down for the short viewport. Desktop tokens
     have a min via clamp(); landscape lowers that min so headlines
     and big stats fit alongside their content. */
  :root {
    --t-11:  clamp( 9px, 0.7vw, 11px);
    --t-12:  clamp(10px, 0.8vw, 12px);
    --t-13:  clamp(11px, 0.9vw, 13px);
    --t-15:  clamp(12px, 1.0vw, 15px);
    --t-17:  clamp(13px, 1.15vw, 17px);
    --t-20:  clamp(14px, 1.4vw, 20px);
    --t-24:  clamp(16px, 1.7vw, 22px);
    --t-32:  clamp(18px, 2.0vw, 26px);
    --t-40:  clamp(20px, 2.4vw, 30px);
    --t-56:  clamp(26px, 3.2vw, 40px);
    --t-72:  clamp(32px, 4.0vw, 52px);
    --t-96:  clamp(40px, 5.0vw, 70px);
    --t-128: clamp(54px, 7.0vw, 100px);
    --pad: clamp(20px, 3vw, 36px);
  }

  /* Lock the page — no body scroll. The deck sizes the viewport. */
  html, body {
    overflow: hidden;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
  }

  /* Deck IS the viewport. Slides absolute-position over each other —
     only the .is-active slide is visible (same as desktop, but every
     slide's reveal is forced settled and inner scroll is allowed). */
  #deck {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 2;
  }

  .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* Tighter padding than desktop — there's no nav chrome on
       landscape mobile and the screen is small. */
    padding: 10px clamp(20px, 3vw, 32px) 12px;
    /* No scroll on landscape — every slide fits the viewport via
       clamp()-based sizing on its content. */
    overflow: hidden;
    /* Many desktop slides set gap: 32-48px between hero + content;
       compress for landscape. */
    gap: clamp(6px, 1.4vh, 12px);
  }

  .slide:not(.is-active) {
    display: none !important;
  }

  .slide.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
  }

  .slide .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Hide desktop chrome — swipe IS navigation. */
  .nav,
  .progress,
  .help,
  .footer-meta { display: none !important; }

  /* Brand mark stays but smaller. */
  .brand {
    top: 10px !important;
    right: 12px !important;
    z-index: 10;
  }
  .brand-logo { height: 18px !important; }

  /* Hide kickers entirely on mobile — title gets the space. */
  .slide .kicker { display: none !important; }

  /* Normalize all H2 slide headlines to the smaller size — the
     unified rule at the bottom of styles.css sets font-size: var(--t-40)
     which is 20-30px on landscape. Override to the more compact
     size used by risks/stats/team/comp so every slide reads at the
     same scale. */
  .team-headline,
  .traction-headline,
  .traction-v2-headline,
  .flow-headline,
  .us-headline,
  .global-headline,
  .tri-headline,
  .risks-headline,
  .gtm-headline,
  .roadmap-headline,
  .stats-headline,
  .comp-headline,
  .slide-head .headline {
    font-size: clamp(15px, 2.2vw, 20px) !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
  }

  /* ---- Slide 1 (Cover): the desktop margin-bottom on .cover-mark
     (clamp 48-96px) pushes the TEMPO wordmark above a 430px-tall
     viewport. Tighten the grid spacing for landscape. Headline
     shrinks so "AI Orchestration" stays on a single line. */
  .slide-cover .cover-grid {
    padding: 14px clamp(20px, 3vw, 32px) !important;
    gap: clamp(12px, 2vw, 24px) !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
  }
  .slide-cover .cover-mark {
    margin-bottom: 0 !important;
  }
  .slide-cover .cover-rings-img {
    max-width: clamp(200px, 26vw, 280px) !important;
  }
  .slide-cover .cover-headline {
    font-size: clamp(30px, 4.8vw, 56px) !important;
    line-height: 1.02 !important;
    text-wrap: balance;
  }

  /* ---- Slide 2 (Team): vertical founder cards (photo on top, name +
     role + bio below) — matches the desktop hierarchy but compressed
     for the short viewport. Photos go wider so the row of two
     founders fills the slide; names stay on a single line. */
  .slide-team .team-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    max-width: clamp(560px, 76vw, 720px);
    margin: clamp(14px, 4vh, 28px) auto 0;
    align-content: start;
  }
  .slide-team .founder-card {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(8px, 1.4vh, 12px);
    max-width: none;
    width: 100%;
  }
  .slide-team .founder-photo-wrap {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Cap photo height so name + role + bio still fit within slide. */
    max-height: clamp(120px, 38vh, 180px);
  }
  .slide-team .founder-photo-wrap > img,
  .slide-team .founder-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor the crop near the top so heads + hair stay in frame. */
    object-position: center top;
  }
  /* Maso's photo is framed lower — pull the crop down a touch so his
     neck/shoulders aren't clipped. */
  .slide-team .founder-card:nth-child(2) .founder-photo {
    object-position: center 25% !important;
  }
  .slide-team .founder-id {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .slide-team .founder-status {
    font-size: 9px !important;
    padding: 3px 8px !important;
    align-self: flex-start;
    margin-bottom: 4px;
  }
  .slide-team .founder-name {
    font-size: clamp(18px, 2.6vw, 24px) !important;
    line-height: 1.05;
    white-space: nowrap; /* keep name on a single line */
  }
  .slide-team .founder-role {
    font-size: 9px !important;
    letter-spacing: 0.18em;
  }
  .slide-team .founder-bio {
    font-size: 11px !important;
    line-height: 1.35;
    margin-top: 4px !important;
  }
  .slide-team .founder-bullets {
    gap: 4px !important;
    padding-top: 8px !important;
  }
  .slide-team .founder-bullets li {
    font-size: 11px !important;
    line-height: 1.3 !important;
    padding-left: 14px !important;
  }
  .slide-team .founder-bullets li::before {
    width: 4px !important;
    height: 4px !important;
    top: 7px !important;
    left: 2px !important;
  }
  .slide-team .team-headline {
    font-size: clamp(14px, 2.2vw, 20px) !important;
    margin-bottom: 6px;
  }

  /* ---- Slides 5/6 (Org charts): cap chart size by viewport height,
     not just width. Aspect-ratio is 820/470 ≈ 1.745, so max-width is
     derived from the height budget so the chart never overflows
     vertically while preserving aspect. */
  .slide-org > .org-chart,
  .slide-org-7 .org-chart-3d {
    width: 100%;
    max-width: min(880px, calc((100svh - 110px) * 820 / 470)) !important;
    aspect-ratio: 820 / 470;
    height: auto !important;
    align-self: center;
  }
  /* Slide 6: dep-card pill text scales with the SVG container so
     "Assistant Director" / "Supervisor" don't overrun their pills.
     Same 1.34cqw ratio (11/820) used by the SVG <text> on slide 5. */
  .slide-org-7 .dep-stage { container-type: inline-size; }
  .slide-org-7 .dep-card {
    font-size: 1.34cqw !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
  }
  .slide-org .org-headline,
  .slide-org-7 .org-headline {
    font-size: clamp(14px, 2.2vw, 20px) !important;
    line-height: 1.2;
    margin-bottom: 6px !important;
  }
  .slide-head { gap: 6px !important; }

  /* ---- Slide 8 (Pipeline): tighten the chart-pair stack and give
     the logo marquee more vertical room so the brand strip doesn't
     feel squeezed. Hide the fine print — it's a footnote that
     belongs only on the desktop / portrait view. */
  .slide-traction-pipeline .traction-v2-headline {
    font-size: clamp(15px, 2.2vw, 20px) !important;
    margin-bottom: 4px !important;
    line-height: 1.18 !important;
  }
  /* Chart is the hero — let it take all the available height. The
     marquee block sizes itself to its content (single-row logo strip
     + headline). */
  .slide-traction-pipeline .pipeline-stack {
    gap: 14px !important;
  }
  .slide-traction-pipeline .pipeline-block--chart {
    flex: 1 1 auto !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .slide-traction-pipeline .pipeline-stack {
    gap: 14px !important;
  }
  /* Shift the logo strip UP visually by ~half the empty space below
     the chart canvas (the canvas was pulled up via -24px margin). The
     transform is purely visual — flex layout / chart size unchanged. */
  .slide-traction-pipeline .pipeline-block--marquee {
    flex: 0 0 auto !important;
    transform: translateY(-13px);
  }
  .slide-traction-pipeline .v2-chart-pair {
    gap: clamp(16px, 2vw, 28px) !important;
    flex: 1 1 auto;
    /* Narrower chart cards make the growth lines/bars look steeper. */
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }
  .slide-traction-pipeline .v2-chart-title {
    font-size: 11px !important;
    padding-bottom: 2px !important;
  }
  /* ApexCharts adds internal whitespace above the y-axis (label line-
     height + chart top margin). Pull the canvas up so the visible
     chart elements sit close to the title. */
  .slide-traction-pipeline .v2-chart-canvas {
    margin-top: -24px !important;
  }
  .slide-traction-pipeline .v2-chart-title-meta {
    font-size: 11px !important;
  }
  .slide-traction-pipeline .pipeline-headline-plain {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .slide-traction-pipeline .pipeline-fine {
    display: none !important;
  }
  .slide-traction-pipeline .v2-marquee--single .v2-marquee-track img {
    height: 22px !important;
    margin-right: clamp(40px, 5vw, 68px) !important;
  }

  /* ---- Slide 7 (W Hotels proof): claim shrinks, less vertical gap. */
  .slide-traction-proof .proof-claim {
    font-size: clamp(20px, 3.4vw, 32px) !important;
    line-height: 1.06 !important;
  }
  .slide-traction-proof .proof-body {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .slide-traction-proof .proof-text { gap: 10px !important; }
  /* Three stat columns evenly distributed across the right column. */
  .slide-traction-proof .proof-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0 !important;
    width: 100%;
    margin-top: 6px !important;
  }
  .slide-traction-proof .proof-stat { gap: 4px; }
  .slide-traction-proof .proof-stat-divider { display: none !important; }
  /* Stats sized to keep "30 days" on a single line in each column. */
  .slide-traction-proof .proof-num {
    font-size: clamp(16px, 2.2vw, 22px) !important;
    white-space: nowrap;
  }
  .slide-traction-proof .proof-lbl { font-size: 9px !important; }

  /* ---- Slide 11 (Global): orbs scale down for the short viewport so
     the largest doesn't extend half a viewport off-screen. */
  .slide-global .global-orb.size-sm {
    width: clamp(110px, 14vw, 150px);
  }
  .slide-global .global-orb.size-md {
    width: clamp(360px, 44vw, 540px);
  }
  .slide-global .global-orb.size-lg {
    width: clamp(900px, 105vw, 1200px);
  }
  .slide-global .global-num { font-size: clamp(18px, 2.4vw, 26px) !important; }
  .slide-global .global-label { font-size: 10px !important; }

  /* ---- Slide 12 (Land and expand): smaller iso boxes + tighter
     captions so the row doesn't push past the headline + assumptions. */
  .slide-gtm .gtm-fig-img,
  .slide-gtm .gtm-fig:nth-child(3) .gtm-fig-img {
    max-width: clamp(140px, 22vw, 220px);
  }
  .slide-gtm .gtm-fig { gap: 8px; }
  .slide-gtm .gtm-stage { padding: 6px 0; gap: clamp(8px, 1.5vw, 16px); }
  .slide-gtm .gtm-caption-acv { font-size: clamp(16px, 2.2vw, 22px) !important; }
  .slide-gtm .gtm-caption-label { font-size: clamp(11px, 1.3vw, 13px) !important; }
  .slide-gtm .gtm-caption-sub { font-size: 9px !important; }
  .slide-gtm .gtm-headline { font-size: clamp(16px, 2.4vw, 22px) !important; }
  .slide-gtm .gtm-assumptions { font-size: 9px !important; margin-top: 6px !important; }

  /* ---- Slide 13 (Roadmap): horizontal timeline already fits, just
     tighten typography. The desktop translateX(7%) on the line +
     rows looks off-center on a phone — remove it so the timeline
     spans the slide evenly. */
  .slide-roadmap .roadmap-headline { font-size: clamp(16px, 2.4vw, 22px) !important; margin-bottom: 6px; }
  .slide-roadmap .roadmap-row,
  .slide-roadmap .roadmap-line {
    transform: translateX(3.5%) !important;
  }
  /* Each milestone content column is tighter so the detail text
     doesn't wrap into a tall block that bleeds into the next
     milestone vertically. */
  .slide-roadmap .roadmap-milestone .content {
    width: clamp(110px, 14vw, 150px) !important;
    gap: 2px !important;
  }
  .slide-roadmap .roadmap-milestone .when { font-size: 9px !important; letter-spacing: 0.1em !important; }
  .slide-roadmap .roadmap-milestone .what { font-size: 11px !important; line-height: 1.15; }
  .slide-roadmap .roadmap-milestone .detail {
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    /* Cap detail to 2 lines so vertical spillover doesn't bleed
       into the spend pills below or the row above. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---- Slide 16 (Risks): tighter body, narrower quote column. */
  .slide-risks .risks-headline { font-size: clamp(15px, 2.2vw, 20px) !important; margin-bottom: 6px !important; }
  .slide-risks .risks-list { gap: 8px !important; }
  .slide-risks .risk-row {
    grid-template-columns: 22px 1fr !important;
    gap: 10px !important;
    padding-top: 8px !important;
  }
  .slide-risks .risk-quote { font-size: 26px !important; line-height: 0.9; }
  .slide-risks .risk-objection { font-size: 12px !important; line-height: 1.2 !important; }
  .slide-risks .risk-rebuttal { font-size: 10.5px !important; line-height: 1.35 !important; }
  .slide-risks .risk-content { gap: 3px !important; }

  /* Landscape-only: the next prompt waits for a tap on the row. The
     row gets a faint pulse and a "Tap to continue →" hint so the
     viewer knows what to do. */
  .slide-flow .flow-row.flow-row-await-tap {
    cursor: pointer;
    position: relative;
    /* Kill iOS Safari's default tap highlight + text-selection drag
       overlay that shows up when you tap the row. */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .slide-flow .flow-row.flow-row-await-tap::after {
    content: "Tap to continue →";
    position: absolute;
    right: 0;
    bottom: -22px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    opacity: 0;
    animation: flow-tap-hint 1.6s ease-in-out 200ms infinite;
    pointer-events: none;
  }
  @keyframes flow-tap-hint {
    0%, 100% { opacity: 0; transform: translateX(-4px); }
    50%      { opacity: 0.9; transform: translateX(0); }
  }

  /* ---- Slide 9 (Tempo automates / flow): hide the fine print so
     the three meter numbers can breathe; UI modal scales down so it
     doesn't dominate. */
  .slide-flow .meter-fine {
    display: none !important;
  }
  .slide-flow .flow-meter {
    bottom: clamp(16px, 3.5vh, 28px);
    gap: 0;
    width: min(440px, 70%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .slide-flow .meter-value {
    font-size: clamp(20px, 2.4vw, 26px) !important;
  }
  .slide-flow .meter-label {
    font-size: 10px !important;
    letter-spacing: 0.1em;
  }
  .slide-flow .meter-cell { gap: 4px; }
  /* Anchor flow rows to the bottom of the stage so they sit just
     above the meter (stats) — newest at the bottom, older rows
     slide up and fade behind a top mask. */
  .slide-flow .flow-stage {
    justify-content: flex-end;
    padding-bottom: clamp(60px, 12vh, 100px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.2) 8%, black 24%, black 100%);
            mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.2) 8%, black 24%, black 100%);
  }
  .slide-flow .flow-row {
    transition:
      max-height 480ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 320ms ease-out,
      transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .slide-flow .flow-row[data-state="hidden"] {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(16px);
    pointer-events: none;
    margin-top: 0 !important;
  }
  .slide-flow .flow-row[data-state="awaiting"],
  .slide-flow .flow-row[data-state="dispatching"],
  .slide-flow .flow-row[data-state="complete"] {
    transform: translateY(0);
  }
  /* Compact UI modal — narrower plate, smaller buttons, smaller body
     so it sits comfortably above the stat row. */
  .slide-flow .flow-row .cmd-plate {
    max-width: clamp(360px, 56vw, 540px);
    margin-inline: auto;
  }
  .slide-flow .cmd-prompt,
  .slide-flow .flow-row .cmd-prompt {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .slide-flow .flow-row .cmd-icon { width: 22px !important; height: 22px !important; }
  .slide-flow .flow-row .cmd-icon svg { width: 11px !important; height: 11px !important; }
  .slide-flow .flow-row .cmd-send { height: 22px !important; padding: 0 3px 0 7px !important; }
  .slide-flow .flow-row .cmd-send svg { width: 11px !important; height: 11px !important; }
  .slide-flow .flow-tasks .cmd-task { padding: 8px 12px !important; }

  /* ---- Slide 19 (Competition): make the table scrollable in both
     directions on landscape — desktop locks `overflow: hidden` on the
     wrap, but the comp table is wider AND taller than the small
     viewport, so scrolling has to be allowed inside it. */
  .slide-comp .comp-table-wrap {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100svh - 80px);
  }
  .slide-comp .comp-table {
    min-width: 1020px;
    font-size: 11px !important;
  }
  .slide-comp .comp-table thead th {
    font-size: 9.5px !important;
  }
  .slide-comp .comp-headline {
    font-size: clamp(15px, 2.2vw, 20px) !important;
  }

  /* ---- Slide 21 (Moat): typography scales with viewport height,
     and the moat-list grows to fill remaining space — rows are
     distributed evenly between headline and bottom edge so no
     empty band sits below them. */
  .slide-moat {
    justify-content: flex-start !important;
    gap: clamp(4px, 1.4vh, 14px) !important;
  }
  .slide-moat .moat-lede {
    font-size: clamp(10px, 3vh, 18px) !important;
    line-height: 1.35 !important;
  }
  .slide-moat .moat-list {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0 !important;
  }
  .slide-moat .moat-row {
    padding-top: clamp(6px, 2vh, 18px) !important;
    gap: clamp(10px, 2vw, 22px) !important;
  }
  .slide-moat .moat-num {
    font-size: clamp(8px, 2.1vh, 12px) !important;
    letter-spacing: 0.12em !important;
  }
  .slide-moat .moat-content { gap: 2px !important; }
  .slide-moat .moat-claim {
    font-size: clamp(11px, 3.4vh, 20px) !important;
    line-height: 1.18 !important;
  }
  .slide-moat .moat-body {
    font-size: clamp(9.5px, 2.7vh, 16px) !important;
    line-height: 1.4 !important;
  }

  /* ---- Slide 18 (Stats): tighter copy + citation. */
  .slide-stats .stats-headline { font-size: clamp(15px, 2.2vw, 20px) !important; margin-bottom: 4px !important; }
  .slide-stats .stats-list { gap: 6px !important; }
  .slide-stats .stats-list > * { padding: 6px 0 !important; }
  .slide-stats p,
  .slide-stats .stat-body { font-size: 10.5px !important; line-height: 1.32 !important; }
  .slide-stats .citations {
    font-size: 8.5px !important;
    line-height: 1.3 !important;
    padding-top: 6px !important;
    /* All 5 citations on one row. */
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px 10px !important;
  }
  .slide-stats .citations li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}