/* ============================================================
   GRAVITY — pitch deck stylesheet
   Editorial / scientific-publishing aesthetic, single-page deck.
   Warm off-white, near-black ink, one accent (Klein Blue).
   ============================================================ */

:root {
  --bg: #faf9f6;
  --bg-raised: #ffffff;
  --bg-sunk: #f2f0e9;
  --ink: #17160f;
  --ink-soft: #55534a;
  --ink-faint: #8b887b;
  --hairline: #ddd9cc;
  --hairline-strong: #c7c3b3;
  --accent: #1d3ebf;
  --accent-ink: #12297d;
  --accent-soft: #e7ebf9;
  --accent-soft-2: #eef1fb;
  --killed: #a8a496;
  --killed-bg: #f1efe7;

  /* one-hue ordinal ramp off the single accent — used for stacked/ordered data only */
  --ramp-1: #d7dcf3;
  --ramp-2: #adb9e8;
  --ramp-3: #8093db;
  --ramp-4: #4f68cd;
  --ramp-5: #1d3ebf; /* == --accent */
  --ramp-6: #12297d; /* == --accent-ink */

  /* 7-step ordinal ramp for the funnel — lightest (broadest) to darkest (rarest) */
  --funnel-1: #e4e8f8;
  --funnel-2: #c7d0f1;
  --funnel-3: #a3b0e6;
  --funnel-4: #7387db;
  --funnel-5: #4360c9;
  --funnel-6: #1d3ebf;
  --funnel-7: #12297d;

  --font-display: "Fraunces", "Newsreader", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "Menlo", monospace;

  --container: 1160px;
  --slide-pad: clamp(28px, 5vw, 64px);

  --shadow-card: 0 1px 2px rgba(23, 22, 15, 0.04), 0 8px 24px -12px rgba(23, 22, 15, 0.12);

  --ease: cubic-bezier(0.16, 0.6, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

img, svg {
  display: block;
  max-width: 100%;
}

.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  line-height: 1.05;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
}

a {
  color: inherit;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--slide-pad);
  width: 100%;
}

.hairline {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
}

.eyebrow.accent {
  color: var(--accent);
}

.icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink);
  flex-shrink: 0;
}

.icon.accent { color: var(--accent); }
.icon.soft { color: var(--ink-soft); }

/* ---------------------------------------------------------- */
/* Deck scroll container                                       */
/* ---------------------------------------------------------- */

.deck {
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

.slide {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}

.slide:nth-of-type(even) {
  background: var(--bg-sunk);
}

.slide:last-of-type {
  border-bottom: none;
}

.slide-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 40px 0;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.slide.in-view .slide-inner {
  opacity: 1;
  transform: translateY(0);
}

.slide-num {
  position: absolute;
  top: 28px;
  left: var(--slide-pad);
  z-index: 3;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0;
}

.slide-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.slide h2.deck-h {
  font-size: clamp(1.9rem, 3.6vw, 3.05rem);
  max-width: 18ch;
  letter-spacing: -0.01em;
}

.slide p.deck-lede {
  margin-top: 20px;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* stagger children fade-up, driven by parent .in-view */
[data-stagger] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.slide.in-view [data-stagger] {
  opacity: 1;
  transform: translateY(0);
}

.slide.in-view [data-stagger="1"] { transition-delay: 0.05s; }
.slide.in-view [data-stagger="2"] { transition-delay: 0.16s; }
.slide.in-view [data-stagger="3"] { transition-delay: 0.27s; }
.slide.in-view [data-stagger="4"] { transition-delay: 0.38s; }
.slide.in-view [data-stagger="5"] { transition-delay: 0.49s; }
.slide.in-view [data-stagger="6"] { transition-delay: 0.6s; }

/* ---------------------------------------------------------- */
/* Progress indicator                                           */
/* ---------------------------------------------------------- */

.deck-progress {
  position: fixed;
  right: 28px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--ink-faint);
  background: rgba(250, 249, 246, 0.82);
  backdrop-filter: saturate(140%) blur(6px);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
}

.deck-progress-count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}

.deck-progress-count .sep {
  color: var(--ink-faint);
  font-weight: 400;
  margin: 0 3px;
}

.deck-progress-dots {
  display: flex;
  gap: 6px;
}

.deck-progress-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--hairline-strong);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.deck-progress-dots .dot:hover {
  background: var(--ink-soft);
}

.deck-progress-dots .dot.active {
  background: var(--accent);
  transform: scale(1.35);
}

.deck-nav-hint {
  position: fixed;
  left: 28px;
  bottom: 24px;
  z-index: 50;
  font-size: 12px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}

.deck-nav-hint kbd {
  font-family: var(--font-body);
  font-size: 11px;
  border: 1px solid var(--hairline-strong);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--ink-soft);
  background: var(--bg-raised);
}

/* ---------------------------------------------------------- */
/* Scroll hint (slide 1 only)                                   */
/* ---------------------------------------------------------- */

.scroll-hint {
  position: absolute;
  bottom: 78px; /* clear of .title-footer at bottom: 30px */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 1s ease 1.4s;
  z-index: 2;
}

.slide.in-view .scroll-hint {
  opacity: 1;
}

.scroll-hint .icon {
  width: 16px;
  height: 16px;
  animation: hint-bob 1.8s ease-in-out infinite;
}

@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---------------------------------------------------------- */
/* Particle background (title + close slides)                   */
/* ---------------------------------------------------------- */

.particle-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ============================================================
   SLIDE 1 / 17 — TITLE & CLOSE
   ============================================================ */

.title-slide .slide-inner,
.close-slide .slide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  min-height: 60vh;
}

.wordmark-huge {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  font-size: clamp(4.4rem, 13vw, 9.5rem);
  letter-spacing: -0.01em;
  line-height: 0.86;
}

.wordmark-huge .dot {
  color: var(--accent);
}

.title-tagline {
  margin-top: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 26px);
  color: var(--accent);
}

.title-subline {
  margin-top: 18px;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-soft);
  max-width: 46ch;
}

.title-footer {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  z-index: 2;
}

.close-headline {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  max-width: 18ch;
  letter-spacing: -0.01em;
}

.close-sub {
  margin-top: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--accent);
  max-width: 32ch;
}

.close-contact {
  margin-top: 40px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.close-contact .work-tag {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

/* ============================================================
   SLIDE 2 — THE PROBLEM
   ============================================================ */

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 40px;
}

.stat-tile {
  background: var(--bg-raised);
  padding: 34px 30px;
  text-align: left;
}

.stat-tile .icon {
  margin-bottom: 18px;
}

.stat-tile-value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 600;
  color: var(--accent);
  min-height: 1.1em;
  letter-spacing: -0.01em;
}

.stat-tile-label {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 24ch;
}

.problem-italic-line {
  margin-top: 34px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--ink);
}

.problem-meanwhile {
  margin-top: 16px;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ============================================================
   SLIDE 3 — THE FOUNDING INSIGHT
   ============================================================ */

.insight-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 30px;
}

.insight-example {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.insight-example .icon {
  margin-top: 2px;
  width: 20px;
  height: 20px;
}

.insight-example p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 24ch;
}

.insight-example p .dim {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 13px;
}

.insight-turn {
  margin-top: 30px;
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  padding: 20px 26px;
  max-width: 82ch;
}

.insight-turn-lead {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.insight-turn-flow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 23px);
  color: var(--ink);
  line-height: 1.4;
}

.insight-turn-flow .arrow {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  margin: 0 4px;
}

.insight-turn-sub {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.insight-footer {
  margin-top: 24px;
}

.insight-stat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
  max-width: 74ch;
  line-height: 1.5;
}

.insight-stat .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.insight-close {
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
}

/* ============================================================
   SLIDE 4 — THE IDEA (problem card, reused component)
   ============================================================ */

.idea-layout {
  display: grid;
  grid-template-columns: minmax(0, 440px) 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 40px;
}

.problem-card {
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  padding: 36px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.problem-card .card-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-bottom: 16px;
}

.problem-card h3 {
  font-size: 24px;
  line-height: 1.16;
  margin-bottom: 20px;
  max-width: 24ch;
}

.problem-card .card-meta {
  display: flex;
  gap: 26px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.card-meta-item .val {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  display: block;
}

.card-meta-item .lbl {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.problem-card .funding-bar {
  margin-bottom: 22px;
}

.funding-bar-track {
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.funding-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 1.3s var(--ease);
}

.funding-bar-label {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
}

.problem-card .btn {
  align-self: flex-start;
}

.idea-explain {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.idea-explain .kicker-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.4;
}

.idea-explain .compare-line {
  font-size: 16.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}

.idea-explain .compare-line strong {
  color: var(--ink);
  font-weight: 600;
}

/* buttons (shared) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color .15s ease;
  letter-spacing: 0.01em;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

/* ============================================================
   SLIDE 5 — KILLER INTERACTION (impact receipt)
   ============================================================ */

.receipt-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 36px;
}

.receipt {
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  padding: 30px 32px;
}

.receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--hairline-strong);
  margin-bottom: 18px;
}

.receipt-head .amount {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--accent);
}

.receipt-head .label {
  font-size: 12px;
  color: var(--ink-faint);
  text-align: right;
}

.receipt-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.receipt-line.shown {
  opacity: 1;
  transform: translateX(0);
}

.receipt-line .rl-num {
  color: var(--accent);
  font-weight: 600;
  min-width: 2.6em;
  display: inline-block;
}

.receipt-line .rl-text {
  color: var(--ink-soft);
  flex: 1;
}

.receipt-finding {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.receipt-finding.shown {
  opacity: 1;
  transform: translateY(0);
}

.receipt-note {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.55;
  max-width: 40ch;
}

.receipt-note .icon {
  width: 17px;
  height: 17px;
  margin-top: 2px;
}

.receipt-explain {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ============================================================
   SLIDE 6 — THE ENGINE (tree + loop)
   ============================================================ */

.engine-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 34px;
}

.engine-panel {
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  padding: 22px;
}

.engine-panel .panel-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.tree-svg text,
.loop-svg text {
  font-family: var(--font-body);
}

/* labels sit outside the node circle by design — never hard-clip them
   at the viewBox edge; the panel's own padding contains any overrun */
.tree-svg,
.loop-svg {
  overflow: visible;
}

.tnode {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.tnode.shown { opacity: 1; }

.tnode rect {
  fill: var(--bg-raised);
  stroke: var(--hairline-strong);
  stroke-width: 1.4;
}

.tnode.root rect {
  fill: var(--ink);
  stroke: var(--ink);
}

.tnode.root text { fill: #fff; }

.tnode text {
  fill: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
}

.gcol-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  fill: var(--ink-faint);
}

.tedge {
  fill: none;
  stroke: var(--hairline-strong);
  stroke-width: 1.3;
}

.tjob {
  fill: var(--accent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tjob.shown { opacity: 0.85; }

.loop-node circle {
  fill: var(--bg-raised);
  stroke: var(--hairline-strong);
  stroke-width: 1.6;
  transition: fill 0.35s ease, stroke 0.35s ease;
}

.loop-node.lit circle {
  fill: var(--accent-soft);
  stroke: var(--accent);
}

.loop-node text {
  fill: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: fill 0.35s ease;
}

.loop-node.lit text { fill: var(--ink); }

.loop-path {
  fill: none;
  stroke: var(--hairline-strong);
  stroke-width: 1.6;
}

.loop-reveal {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
}

.loop-pulse {
  fill: var(--accent);
  opacity: 0;
}

.engine-caption {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 76ch;
}

.engine-caption strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   SLIDE 7 — THE FUNNEL
   ============================================================ */

.funnel-wrap {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.funnel-stage {
  display: grid;
  grid-template-columns: 190px 1fr 92px;
  align-items: center;
  gap: 16px;
}

.funnel-stage .fs-label {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: right;
}

.funnel-bar-track {
  height: 30px;
  display: flex;
  align-items: stretch;
}

.funnel-bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 1s var(--ease);
}

.funnel-stage .fs-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  text-align: left;
}

.funnel-caption {
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--ink-faint);
  max-width: 60ch;
}

/* ============================================================
   SLIDE 8 — VERIFICATION (evidence ladder, reused)
   ============================================================ */

.ladder-block {
  margin-top: 40px;
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  padding: 40px 44px;
}

.ladder-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.ladder-track::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 1px;
  background: var(--hairline-strong);
  z-index: 0;
}

.ladder-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ladder-dot {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 2px solid var(--hairline-strong);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.ladder-node.lit .ladder-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.ladder-node.current .ladder-dot {
  box-shadow: 0 0 0 6px var(--accent-soft);
}

.ladder-node-label {
  font-size: 12.5px;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0.05em;
  text-align: center;
  transition: color 0.35s ease;
}

.ladder-node.lit .ladder-node-label {
  color: var(--ink);
  font-weight: 600;
}

.verify-lines {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 68ch;
}

.verify-lines p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.verify-lines p.strong-line {
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
}

/* ============================================================
   SLIDE 9 — PROBLEM 001
   ============================================================ */

.p001-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 34px;
}

.p001-panel {
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  padding: 28px 30px;
}

.p001-panel .panel-eyebrow {
  margin-bottom: 14px;
}

.p001-panel p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.p001-panel .fact-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  align-items: flex-start;
}

.p001-panel .fact-row:first-of-type { border-top: none; padding-top: 4px; }

.p001-panel .fact-row .icon {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--accent);
}

.p001-panel .fact-row span {
  color: var(--ink-soft);
  line-height: 1.5;
}

.p001-panel .fact-row strong {
  color: var(--ink);
  font-weight: 600;
}

.experiment-compare {
  margin-top: 20px;
}

.compare-row {
  display: grid;
  grid-template-columns: 150px 1fr 64px;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.compare-row .cr-label {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: right;
}

.compare-track {
  height: 22px;
  background: var(--bg-sunk);
  border-radius: 2px;
  overflow: hidden;
}

.compare-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 1.1s var(--ease);
}

.compare-fill.coordinated { background: var(--accent); }
.compare-fill.midline { background: var(--ramp-3); }
.compare-fill.baseline { background: var(--hairline-strong); }

.compare-row .cr-val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.experiment-caption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}

.experiment-cite {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ============================================================
   SLIDE 10 — THE LADDER (tier cost diagram)
   ============================================================ */

.tier-ladder {
  margin-top: 34px;
  display: flex;
  gap: 22px;
  align-items: stretch;
}

.tier-rail {
  width: 26px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.tier-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--hairline-strong);
  transform: translateX(-50%);
}

.tier-rail::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--accent);
}

.tier-rail-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 2px solid var(--hairline-strong);
}

.tier-rail-dot-1 {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.tier-rows {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tier-row {
  position: relative;
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  padding: 18px 26px;
  display: grid;
  grid-template-columns: 230px 1fr 220px;
  gap: 22px;
  align-items: center;
}

.tier-row.tier-launch {
  border-color: var(--accent);
  background: var(--accent-soft-2);
  padding-top: 26px;
}

.launch-badge {
  position: absolute;
  top: -11px;
  right: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 11px;
  border-radius: 999px;
}

.tier-tag {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.tier-tag .icon {
  width: 19px;
  height: 19px;
  margin-top: 2px;
}

.tier-tag > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tier-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.tier-row.tier-launch .tier-num {
  color: var(--accent);
}

.tier-what {
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.4;
}

.tier-mid {
  min-width: 0;
}

.tier-examples {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
}

.tier-note {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.45;
}

.tier-cost {
  text-align: right;
}

.cost-figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.tier-row.tier-launch .cost-figure {
  color: var(--accent);
}

.cost-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.4;
  max-width: 23ch;
  margin-left: auto;
}

.ladder-closer {
  margin-top: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}

/* ============================================================
   SLIDE 11 — GOVERNANCE (role cards)
   ============================================================ */

.gov-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 30px;
}

.gov-card {
  position: relative;
  background: var(--bg-raised);
  padding: 22px 26px;
}

.gov-card.gov-highlight {
  background: var(--accent-soft-2);
}

.gov-badge {
  position: absolute;
  top: -11px;
  right: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 11px;
  border-radius: 999px;
}

.gov-card .icon {
  margin-bottom: 10px;
}

.gov-role {
  font-size: 18px;
  margin-bottom: 6px;
}

.gov-card.gov-highlight .gov-role {
  color: var(--accent);
}

.gov-what {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}

.gov-how {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.gov-card.gov-highlight .gov-how {
  border-top-color: var(--hairline-strong);
}

.gov-how-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

.gov-footer {
  margin-top: 22px;
}

.gov-footer-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  max-width: 74ch;
}

.gov-footer-sub {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-faint);
  max-width: 74ch;
  line-height: 1.5;
}

/* ============================================================
   SLIDE 12 — NO GPU CLUSTER (phase timeline)
   ============================================================ */

.phase-timeline {
  position: relative;
  margin-top: 46px;
}

.phase-line {
  position: absolute;
  top: 27px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: var(--hairline);
  z-index: 0;
}

.phase-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 1.6s var(--ease);
}

.phase-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.phase-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.phase-marker {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg-sunk);
  border: 2px solid var(--hairline-strong);
  transition: background 0.4s ease, border-color 0.4s ease;
}

.phase-item.lit .phase-marker {
  background: var(--accent);
  border-color: var(--accent);
}

.phase-item .phase-tag {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

.phase-item h4 {
  font-size: 18px;
  margin-top: 2px;
}

.phase-item p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.compute-caption {
  margin-top: 40px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
}

/* ============================================================
   SLIDE 13 — BUSINESS MODEL
   ============================================================ */

.biz-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 44px;
  margin-top: 30px;
  align-items: start;
}

.revenue-chart {
  display: flex;
  gap: 22px;
  height: 220px;
  border-bottom: 1px solid var(--hairline-strong);
}

.revenue-col {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.revenue-bar-stack {
  width: 100%;
  max-width: 58px;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
}

.revenue-seg {
  width: 100%;
  height: 0px;
  transition: height 1s var(--ease);
  border-bottom: 2px solid var(--bg);
}
.slide:nth-of-type(even) .revenue-seg { border-bottom-color: var(--bg-sunk); }

.revenue-seg:last-child { border-bottom: none; }

.revenue-labels {
  display: flex;
  gap: 22px;
  margin-top: 10px;
}

.revenue-label-col {
  flex: 1;
  text-align: center;
}

.revenue-col-total {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}

.revenue-col-year {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-faint);
}

.revenue-key {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.revenue-key-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-soft);
}

.revenue-key-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.stream-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stream-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 0;
  border-top: 1px solid var(--hairline);
}

.stream-row:first-child { border-top: none; padding-top: 0; }

.stream-row .icon {
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--accent);
}

.stream-row .stream-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.stream-row .stream-detail {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.biz-caution {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 76ch;
}

.biz-caution strong { color: var(--ink); }

/* ============================================================
   SLIDE 14 — THE MOAT (network loop)
   ============================================================ */

.moat-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: center;
  margin-top: 34px;
}

.moat-text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.moat-text strong { color: var(--ink); font-weight: 600; }

.moat-dataset-line {
  margin-top: 8px;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.moat-dataset-line .arrow { color: var(--accent); font-weight: 700; }

/* ============================================================
   SLIDE 15 — THE $1B PATH
   ============================================================ */

.path-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 36px;
}

.path-col {
  background: var(--bg-raised);
  padding: 36px 34px;
}

.path-col .path-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-bottom: 16px;
}

.path-col h3 {
  font-size: 22px;
  margin-bottom: 16px;
  max-width: 20ch;
}

.path-col p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}

.path-col .path-figure {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--ink);
  margin-bottom: 10px;
}

.path-col .path-meta {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 14px;
  letter-spacing: 0.02em;
}

.path-closer {
  margin-top: 30px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  text-align: center;
}

/* ============================================================
   SLIDE 16 — ROADMAP
   ============================================================ */

.roadmap-timeline {
  position: relative;
  margin-top: 54px;
}

.roadmap-line {
  position: absolute;
  top: 8px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: var(--hairline);
}

.roadmap-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 1.8s var(--ease);
}

.roadmap-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.roadmap-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.roadmap-marker-wrap {
  position: relative;
  width: 18px;
  height: 18px;
}

.roadmap-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--hairline-strong);
  transition: background 0.4s ease, border-color 0.4s ease;
}

.slide:nth-of-type(even) .roadmap-marker { background: var(--bg-sunk); }

.roadmap-item.lit .roadmap-marker {
  background: var(--accent);
  border-color: var(--accent);
}

.roadmap-here {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.roadmap-here.show {
  opacity: 1;
}

.roadmap-item .rm-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0;
  text-transform: none;
}

.roadmap-item h4 {
  font-size: 17px;
  margin-top: 2px;
  max-width: 18ch;
}

.roadmap-item p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------------------------------------------------------- */
/* Reduced motion                                                */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------- */
/* Responsive floor (deck is designed for desktop presentation) */
/* ---------------------------------------------------------- */

@media (max-width: 980px) {
  .idea-layout, .receipt-layout, .engine-layout, .biz-layout, .moat-layout {
    grid-template-columns: 1fr;
  }
  .p001-layout, .path-columns, .gov-grid {
    grid-template-columns: 1fr;
  }
  .stat-tiles, .phase-row, .roadmap-row, .insight-examples {
    grid-template-columns: repeat(2, 1fr);
  }
  .funnel-stage {
    grid-template-columns: 120px 1fr 70px;
  }
  .tier-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tier-cost {
    text-align: left;
  }
  .cost-note {
    margin-left: 0;
    max-width: none;
  }
}

/* ---------------------------------------------------------- */
/* Mobile (~≤740px): tall slides scroll instead of clipping,    */
/* chrome shrinks, and SVG diagrams hold a legible native scale */
/* inside a scrollable panel rather than squashing their labels */
/* ---------------------------------------------------------- */

@media (max-width: 740px) {
  .deck {
    scroll-snap-type: y proximity;
  }

  .slide {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    scroll-snap-stop: normal;
  }

  .slide-inner {
    /* .container's own `padding: 0 var(--slide-pad)` is clobbered by this
       element's base `padding: 40px 0` shorthand (equal specificity, later
       source order) at every viewport — invisible at 1440px only because
       max-width:1160px + auto margins happen to fake a side gutter there.
       Restoring it globally would shift the verified 1440px baseline by
       var(--slide-pad), so re-apply it as mobile-only longhands instead. */
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: var(--slide-pad);
    padding-right: var(--slide-pad);
  }

  /* large display type: keep it from overrunning a narrow viewport */
  .wordmark-huge {
    font-size: clamp(2.5rem, 15vw, 9.5rem);
    overflow-wrap: break-word;
  }

  .close-headline {
    font-size: clamp(1.7rem, 8.5vw, 4.2rem);
    overflow-wrap: break-word;
  }

  .deck-nav-hint {
    display: none;
  }

  .deck-progress {
    right: 14px;
    bottom: 14px;
    gap: 10px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .deck-progress-dots .dot {
    width: 5px;
    height: 5px;
  }

  /* tree / loop SVGs: forcing container-width would shrink their
     text past legibility, so hold them near native scale and let
     the panel scroll horizontally instead — with the title pinned
     in place and a generated hint so the affordance is obvious */
  .engine-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }

  .engine-panel .panel-title {
    position: sticky;
    left: 0;
  }

  .engine-panel .panel-title::after {
    content: "— scroll to see full diagram \2192";
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink-faint);
  }

  .tree-svg { width: 520px; max-width: none; flex-shrink: 0; }
  .loop-svg { width: 420px; max-width: none; flex-shrink: 0; }

  .stat-tile { padding: 24px 20px; }

  .gov-grid { margin-top: 22px; }
  .gov-card { padding: 18px 20px; }
  .gov-badge { right: 18px; }

  /* tier ladder: the rail's dots can't track stacked, uneven-height
     rows once .tier-row collapses to one column, so drop it — the
     accent border + "we launch here" badge already read as a start point */
  .tier-ladder { gap: 0; }
  .tier-rail { display: none; }
  .tier-row {
    grid-template-columns: 1fr;
    padding: 16px 18px;
    gap: 12px;
  }
  .tier-row.tier-launch { padding-top: 26px; }
  .launch-badge { right: 18px; }
  .tier-what { max-width: none; }
  .tier-examples, .tier-note { font-size: 12.5px; }
  .cost-figure { font-size: 17px; }

  .funnel-stage {
    grid-template-columns: 96px 1fr 56px;
    gap: 10px;
  }
  .funnel-stage .fs-label { font-size: 11.5px; }
  .funnel-stage .fs-value { font-size: 14px; }

  .revenue-chart { gap: 10px; height: 180px; }
  .revenue-labels { gap: 10px; }
  .revenue-col-total { font-size: 11px; }
  .revenue-col-year { font-size: 10px; }

  .p001-panel { padding: 22px 20px; }
  .compare-row { grid-template-columns: 90px 1fr 50px; gap: 10px; }

  .path-col { padding: 26px 22px; }

  .ladder-block { padding: 26px 20px; }
  .ladder-track { column-gap: 4px; }
  /* grid items default to a content-based min-width, and a column-direction
     flex child with align-items:center sizes to its own content rather than
     the grid track — so a long unbreakable word (REPRODUCED, CHALLENGED)
     ignores its 1fr share and runs into its neighbour. Cap it explicitly. */
  .ladder-node { min-width: 0; }
  .ladder-node-label { font-size: 9.5px; letter-spacing: 0; max-width: 100%; overflow-wrap: anywhere; }
  .ladder-dot { width: 16px; height: 16px; }
}

/* ---------------------------------------------------------- */
/* Mobile (~≤420px): fine tuning for small phones               */
/* ---------------------------------------------------------- */

@media (max-width: 420px) {
  .wordmark-huge {
    font-size: clamp(2.1rem, 16vw, 9.5rem);
  }

  .stat-tiles, .phase-row, .roadmap-row, .insight-examples {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* the decorative connecting line assumes a single horizontal row;
     once items stack it no longer lines up, so drop it */
  .phase-line, .roadmap-line {
    display: none;
  }

  .phase-row, .roadmap-row {
    gap: 28px;
  }

  .funnel-stage {
    grid-template-columns: 82px 1fr 46px;
    gap: 8px;
  }
  .funnel-stage .fs-label { font-size: 10.5px; }
  .funnel-stage .fs-value { font-size: 13px; }

  .ladder-node-label { font-size: 9px; letter-spacing: 0.02em; }

  .tier-row { padding: 14px 16px; }
  .tier-num { font-size: 14px; }
  .launch-badge { font-size: 9px; padding: 3px 9px; }

  .gov-role { font-size: 16.5px; }
  .gov-badge { font-size: 9px; padding: 3px 9px; }
}