/* ============================================================
   Soonr — Investor Deck v2 (US)
   Design system: "Clinical readout, human voice"
   · Surface: deep teal lab-dark ↔ warm paper ↔ full-bleed film
   · Display: Archivo · Body: Geist · Data/labels: IBM Plex Mono
   · Signature: the cycle rail — a hormone curve draws itself down
     the left edge as you advance; it peaks on Traction.
   v2 shifts the rhythm: image and film carry the argument,
   type gets out of the way, verbatim customer voice opens it.

   NOTE: class names here are namespaced on purpose. A bare `close`
   collided with a browser-extension rule (`.close { width: 24px }`)
   and collapsed the final slide to 219px — hence `deck-close`.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Geist:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ink:        #07161A;
  --ink-soft:   #0E2429;
  --teal:       #005767;
  --teal-deep:  #00323B;
  --teal-line:  rgba(157, 222, 172, .22);
  --orange:     #F1723A;
  --green:      #9DDEAC;
  --sand:       #FAE1B7;
  --paper:      #F7F5F1;
  --paper-3:    #E2DBD0;

  --on-dark:      #F4F2EE;
  --on-dark-mute: rgba(244, 242, 238, .62);
  --on-dark-faint:rgba(244, 242, 238, .52);
  --on-light:     #07161A;
  --on-light-mute:#5A6A6E;

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Geist', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --rail: clamp(56px, 6vw, 92px);
  --pad-x: clamp(22px, 4.6vw, 68px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- deck shell ---------- */

.deck { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; }
.deck::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  padding: clamp(44px, 6vh, 80px) var(--pad-x) clamp(50px, 7vh, 88px) calc(var(--rail) + var(--pad-x));
  overflow: hidden;
}
.slide__inner { width: 100%; max-width: 1560px; margin: 0 auto; position: relative; z-index: 2; }

.slide--dark  { background: var(--ink);      color: var(--on-dark); }
.slide--teal  { background: var(--teal-deep);color: var(--on-dark); }
.slide--paper { background: var(--paper);    color: var(--on-light); }
.slide--sand  { background: var(--sand);     color: var(--on-light); }

/* Tone inversion by token, not by component.
   Every component in this file reaches for --on-dark-*; redefining those three
   variables (plus the hairline) inside a light slide flips the whole slide at once,
   instead of needing a `.slide--paper .thing` twin for each of ~40 selectors. */
.slide--paper, .slide--sand {
  --on-dark:       var(--on-light);
  --on-dark-mute:  var(--on-light-mute);
  --on-dark-faint: rgba(7, 22, 26, .62);
  --teal-line:     var(--paper-3);
}
/* islands of dark inside a light slide have to flip back */
.slide--paper .card--lead, .slide--sand .card--lead,
.slide--paper .flow__step--last, .slide--sand .flow__step--last,
.slide--paper .rung--tam, .slide--sand .rung--tam,
.slide--paper .rung--sam, .slide--sand .rung--sam {
  --on-dark:       #F4F2EE;
  --on-dark-mute:  rgba(244, 242, 238, .68);
  --on-dark-faint: rgba(244, 242, 238, .58);
  --teal-line:     rgba(157, 222, 172, .22);
  color: #F4F2EE;
}
/* logos are knocked out to white for dark slides; on light they stay as drawn */
.slide--paper .logos--dark img, .slide--sand .logos--dark img,
.slide--paper .colab img, .slide--sand .colab img { filter: none; opacity: .9; }

/* ---------- the cycle rail (signature) ---------- */

.rail {
  position: fixed; left: 0; top: 0;
  width: var(--rail); height: 100vh;
  z-index: 40; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rail svg { width: 100%; height: 78vh; overflow: visible; }
.rail__base { fill: none; stroke: currentColor; stroke-width: 1.25; opacity: .2; }
.rail__live { fill: none; stroke: var(--orange); stroke-width: 2.25; stroke-linecap: round; }
.rail__dot {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 5px rgba(241,114,58,.18);
}
.rail__meta {
  position: absolute; bottom: clamp(18px, 3.4vh, 30px);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .16em;
  color: currentColor; opacity: .5;
}
.rail__meta b { font-weight: 600; opacity: 1; color: var(--orange); }
.rail[data-tone="dark"]  { color: var(--on-dark); }
.rail[data-tone="light"] { color: var(--on-light); }

/* ---------- icon system ----------
   One monoline set, drawn at 24px on a 1.6 stroke, inheriting currentColor so it
   reads correctly on all four slide tones and survives print. Emoji were the other
   option and were rejected: they render differently per OS and read as clip art in
   a room full of investors. */

.spr { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.16em;
}
/* the eyebrow's hairline rule and its icon do the same job, so only one shows */
.eyebrow--ico::before { display: none; }
.eyebrow .ico { width: 16px; height: 16px; stroke-width: 1.5; flex: none; }
.card__k .ico, .flow__k .ico, .tl__w .ico, .rung__k .ico {
  width: 14px; height: 14px; margin-right: 7px;
}
.alloc__t .ico { width: 15px; height: 15px; margin-right: 8px; color: var(--orange); vertical-align: -.2em; }
.stat__l .ico { width: 13px; height: 13px; margin-right: 6px; color: var(--orange); }
.cover__card figcaption b .ico { width: 13px; height: 13px; margin-right: 6px; }
.note .ico { width: 13px; height: 13px; margin-right: 5px; color: var(--orange); }
/* the partner who is not carrying it, drawn as an outline */
.ico--ghost { opacity: .45; }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: clamp(.68rem, .8vw, .76rem);
  font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 clamp(12px, 1.6vh, 20px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--orange); flex: none; }
.eyebrow span { color: inherit; opacity: .55; border-left: 1px solid currentColor; padding-left: 10px; }
/* the problem this slide answers. it was set as a faint secondary label at 55%
   opacity, which is exactly the wrong weight for the one word that ties the
   solution back to the problem — so it becomes a solid chip. */
.eyebrow .solves {
  opacity: 1; border-left: 0;
  background: var(--orange); color: #FFF8F4;
  padding: 4px 13px; border-radius: 999px;
  font-weight: 600; letter-spacing: .12em;
}

h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.3rem, 5.2vw, 4.7rem); line-height: .97; letter-spacing: -.035em; }
h2 { font-weight: 700; font-size: clamp(1.68rem, 3.4vw, 3.05rem); line-height: 1.03; letter-spacing: -.028em; max-width: 20ch; }
h2.wide { max-width: 30ch; }

.hi { color: var(--orange); }

.note {
  font-family: var(--body); font-size: .82rem; line-height: 1.55; font-weight: 400;
  letter-spacing: 0; color: var(--on-dark-mute);
  margin: clamp(16px, 2.4vh, 28px) 0 0;
}
.slide--paper .note, .slide--sand .note { color: rgba(7,22,26,.62); }

.kicker {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.02rem, 1.55vw, 1.38rem); line-height: 1.25; letter-spacing: -.02em;
  margin-top: clamp(18px, 2.6vh, 30px); padding-top: clamp(14px, 2.1vh, 22px);
  border-top: 1px solid var(--teal-line); max-width: 52ch;
}
.slide--paper .kicker, .slide--sand .kicker { border-top-color: var(--paper-3); }

/* ---------- full-bleed film / photo slides ---------- */

.bleed__media {
  position: absolute; inset: 0; z-index: 0;
  background: var(--ink);
}
.bleed__media img, .bleed__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* film sits on top of a still, so a video that never loads is invisible, not a black box */
.bleed__media video { z-index: 1; }
.bleed__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(7,22,26,.96) 0%, rgba(7,22,26,.92) 34%, rgba(7,22,26,.62) 58%, rgba(7,22,26,.30) 80%, rgba(7,22,26,.55) 100%);
}
.bleed__scrim--soft {
  background: linear-gradient(180deg, rgba(7,22,26,.72) 0%, rgba(7,22,26,.46) 45%, rgba(7,22,26,.88) 100%);
}
/* content runs the full width here, so the film has to sit further back */
.bleed__scrim--wash {
  background:
    linear-gradient(180deg, rgba(7,22,26,.90) 0%, rgba(7,22,26,.86) 60%, rgba(7,22,26,.94) 100%),
    linear-gradient(90deg, rgba(7,22,26,.55) 0%, rgba(7,22,26,0) 55%);
}
.panel { max-width: 46ch; }
.panel--wide { max-width: 54ch; }
/* on film slides the headline shares the frame with the image — hold it back a size */
.panel h1 { font-size: clamp(1.85rem, 3.5vw, 3.25rem); line-height: 1.0; }
.panel--wide h1 { font-size: clamp(2.1rem, 4.4vw, 4rem); }

.said {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.65rem); line-height: 1.25; letter-spacing: -.02em;
  margin: clamp(18px, 2.6vh, 30px) 0 0; max-width: 30ch;
}
.said em { font-style: normal; color: var(--orange); }
.said--wide { max-width: 52ch; }
.byline {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-faint); margin-top: 12px;
}
.body {
  font-size: clamp(.92rem, 1.15vw, 1.06rem); line-height: 1.55; font-weight: 300;
  color: var(--on-dark-mute); margin: clamp(14px, 2vh, 22px) 0 0;
}
.slide--paper .body, .slide--sand .body { color: var(--on-light-mute); }

/* ---------- cover ---------- */

.cover__mark {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.9rem); letter-spacing: -.05em; line-height: 1;
  margin: 0 0 clamp(20px, 3.4vh, 40px);
}
.cover__mark em { font-style: normal; color: var(--orange); }

/* names the room before the headline lands. the reader should not have to work
   out whether this deck is for them. */
.cover__for {
  font-family: var(--mono); font-size: clamp(.68rem, .84vw, .8rem);
  letter-spacing: .2em; text-transform: uppercase; color: var(--orange);
  margin: 0 0 clamp(12px, 1.8vh, 20px);
  display: flex; align-items: center; gap: 12px;
}
.cover__for::after {
  content: ""; flex: 0 1 clamp(40px, 8vw, 120px); height: 1px;
  background: linear-gradient(90deg, var(--orange), transparent);
}
.cover h1 { max-width: 24ch; }
.cover__sub {
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  font-size: clamp(.98rem, 1.28vw, 1.18rem); font-weight: 300; line-height: 1.5;
  color: var(--on-dark-mute); max-width: 46ch;
}
.cover__sub b { font-weight: 600; color: var(--on-dark); }
.cover__meta { margin-top: clamp(18px, 2.6vh, 32px); display: flex; flex-wrap: wrap; gap: 10px; }
/* the buyer panel carries a headline, a claim, four chips and three numbers.
   it needs more room than the investor cover did. */
/* px, not ch: `ch` here resolves against the panel's body font, which capped the
   63px headline at ~608px and pushed it to four lines. */
.cover .panel--wide { max-width: 980px; }
.cover .cover__sub { max-width: 54ch; }
.chip {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
  padding: 7px 12px; border: 1px solid var(--teal-line); border-radius: 2px;
  color: var(--on-dark-mute); backdrop-filter: blur(4px);
}
.chip--live { border-color: var(--green); color: var(--green); }
.chip--live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 8px; vertical-align: middle;
}
.cover__confid {
  position: absolute; left: calc(var(--rail) + var(--pad-x)); bottom: clamp(20px, 3.4vh, 36px);
  z-index: 2;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-faint);
}

/* the cost of the gap, stated in the buyer's own population.
   three numbers, sourced, sitting on the floor of the cover. */
.cover__band {
  margin-top: clamp(20px, 3vh, 34px);
  max-width: 900px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 24px);
}
.cover__band--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 860px; }
.cover__band--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.cover__stat {
  border-top: 1px solid rgba(244,242,238,.22);
  padding-top: clamp(9px, 1.3vh, 14px);
}
.cover__stat b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem); line-height: 1;
  letter-spacing: -.03em; color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.cover__stat span {
  display: block; margin-top: 6px; max-width: 30ch;
  font-size: clamp(.78rem, .9vw, .89rem); line-height: 1.42; font-weight: 300;
  color: var(--on-dark-mute);
}
.cover__stat i {
  display: block; margin-top: 6px; font-style: normal;
  font-family: var(--body); font-size: .78rem; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--on-dark-faint);
}
.cover__stat:first-child b { color: var(--orange); }

/* cover proof cards: who it is for, and what they buy */
.cover__proof {
  position: absolute; z-index: 3;
  right: var(--pad-x); bottom: clamp(20px, 3.4vh, 36px);
  display: flex; gap: clamp(8px, 1vw, 14px); align-items: flex-end;
}
.cover__card {
  margin: 0; width: clamp(128px, 13.5vw, 205px);
  border-radius: 4px; overflow: hidden;
  background: rgba(7,22,26,.55);
  border: 1px solid rgba(244,242,238,.16);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
}
.cover__card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.cover__card--kit img { object-fit: contain; background: #F4F2EE; }
.cover__card figcaption {
  padding: clamp(8px, 1.1vh, 12px) clamp(9px, .9vw, 13px);
  font-size: clamp(.66rem, .78vw, .76rem); line-height: 1.35; font-weight: 300;
  color: var(--on-dark-mute);
}
.cover__card figcaption b {
  display: block; margin-bottom: 3px;
  font-family: var(--mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}

/* the customer, in her own words. no photo competes with it. */
.bigquote { margin: 0; }
.bigquote p {
  margin: 0;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 3.2rem); line-height: 1.06; letter-spacing: -.032em;
  /* ch resolves against the display size here, not the inherited body size */
  max-width: 25ch; text-wrap: balance;
}

/* the second voice. the whole thesis of the company is that there are two of them,
   so the partner gets his own quote rather than a bullet inside hers. */
.echo {
  margin: clamp(15px, 2.2vh, 24px) 0 0;
  padding-left: clamp(15px, 1.5vw, 22px);
  border-left: 2px solid var(--orange);
  max-width: 62ch;
}
.echo p {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.42rem); line-height: 1.24; letter-spacing: -.02em;
  color: var(--on-dark-mute);
}
.echo footer {
  margin-top: 7px;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-faint);
}

/* the three things the interviews keep returning, named so a fast flip catches them */
.tags { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: clamp(15px, 2.2vh, 24px) 0 0; }
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid var(--teal-line); border-radius: 999px;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-dark-mute);
}
.tag .ico { width: 13px; height: 13px; color: var(--orange); }
.bigquote footer {
  margin-top: clamp(16px, 2.4vh, 26px);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-faint);
}

/* ---------- verbatim quotes ---------- */

.quotes { display: grid; gap: clamp(9px, 1.2vh, 14px); }
.quote {
  border-left: 2px solid var(--orange);
  padding: clamp(9px, 1.3vh, 14px) 0 clamp(9px, 1.3vh, 14px) clamp(14px, 1.6vw, 20px);
}
.quote p {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 1.55vw, 1.35rem); line-height: 1.2; letter-spacing: -.018em;
}
.quote span {
  display: block; margin-top: 7px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-faint);
}

/* ---------- stat grids ---------- */

.stats { display: grid; gap: 1px; background: var(--teal-line); border: 1px solid var(--teal-line); }
.stats--4 { grid-template-columns: repeat(4, 1fr); }
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stats--2 { grid-template-columns: repeat(2, 1fr); }
.stats--top { margin-top: clamp(18px, 3vh, 38px); }
.slide--paper .stats, .slide--sand .stats { background: var(--paper-3); border-color: var(--paper-3); }

.stat { background: var(--ink); padding: clamp(14px, 2.1vh, 24px) clamp(13px, 1.5vw, 22px); display: flex; flex-direction: column; gap: 5px; }
.slide--teal .stat { background: var(--teal-deep); }
.slide--paper .stat { background: var(--paper); }
.slide--sand .stat { background: var(--sand); }
.stat__n {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: .95; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.stat--accent .stat__n { color: var(--orange); }
.stat__l { font-size: clamp(.78rem, .92vw, .9rem); font-weight: 500; line-height: 1.35; }
/* the unit after a big number. the leading space in the markup collapses at this
   size, so the gap has to be a margin or the two run together. */
.stat__u { font-size: .42em; margin-left: .22em; letter-spacing: -.01em; }
.stat__s { font-family: var(--body); font-size: .8rem; font-weight: 400; line-height: 1.45; color: var(--on-dark-faint); margin-top: 3px; }
.slide--paper .stat__s, .slide--sand .stat__s { color: rgba(7,22,26,.45); }

/* ---------- layout splits ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.split--wide-left  { grid-template-columns: 1.25fr .75fr; }
.split--wide-right { grid-template-columns: .82fr 1.18fr; }
/* the stats block and the table beside it start at the same y, which reads as a
   collision against the headline above. drop the stats a notch so the two columns
   step rather than butt. */
#s6 .split--even-top > div:first-child { padding-top: clamp(10px, 1.8vh, 22px); }
.split--even-top { align-items: start; }

/* ---------- cards ---------- */

.cards { display: grid; gap: clamp(11px, 1.3vw, 17px); margin-top: clamp(16px, 2.6vh, 34px); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--1 { grid-template-columns: 1fr; margin-top: 0; }
.card {
  border: 1px solid var(--teal-line); border-radius: 3px;
  padding: clamp(14px, 2vh, 24px); display: flex; flex-direction: column; gap: 8px;
  background: rgba(255,255,255,.02);
}
.slide--paper .card, .slide--sand .card { border-color: var(--paper-3); background: rgba(255,255,255,.5); }
.card__k { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.card__t { font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.28rem); line-height: 1.15; letter-spacing: -.018em; }
.card__b { font-size: clamp(.82rem, .97vw, .93rem); line-height: 1.5; font-weight: 300; color: var(--on-dark-mute); }
.slide--paper .card__b, .slide--sand .card__b { color: var(--on-light-mute); }
.card--lead { background: var(--teal); border-color: transparent; }
.slide--paper .card--lead, .slide--sand .card--lead { background: var(--ink); border-color: transparent; color: var(--on-dark); }
.slide--paper .card--lead .card__b, .slide--sand .card--lead .card__b { color: var(--on-dark-mute); }

/* four-pillar micro strip inside a card */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: auto; padding-top: 9px; }
.pillars img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; display: block; }

/* four pillars, full size, with labels */
.pillars--lg { grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 14px); margin-top: clamp(14px, 2.2vh, 26px); padding-top: 0; }
.pillars--lg figure { margin: 0; }
.pillars--lg img { aspect-ratio: 3 / 2; border-radius: 3px; }
.pillars--lg figcaption {
  margin-top: 7px;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
}
.pillars--lg figcaption span {
  display: block; margin-top: 4px;
  font-family: var(--body); font-size: clamp(.74rem, .88vw, .84rem); font-weight: 300;
  letter-spacing: 0; text-transform: none; color: var(--on-dark-mute); line-height: 1.4;
}
.slide--paper .pillars--lg figcaption span, .slide--sand .pillars--lg figcaption span { color: var(--on-light-mute); }

/* time-to-result comparison */
.bars { display: grid; gap: 7px; margin-top: auto; padding-top: clamp(10px, 1.5vh, 16px); }
.bar { display: grid; grid-template-columns: 62px minmax(0,1fr) 44px; align-items: center; gap: 9px; }
.bar__n, .bar__v { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--on-light-mute); }
.bar__v { text-align: right; }
.bar__t { height: 8px; border-radius: 2px; background: rgba(7,22,26,.10); overflow: hidden; }
.bar__t i { display: block; height: 100%; background: rgba(7,22,26,.32); }
.slide--dark .bar__t, .slide--teal .bar__t { background: rgba(244,242,238,.12); }
.slide--dark .bar__t i, .slide--teal .bar__t i { background: var(--on-dark-faint); }
.slide--dark .bar__n, .slide--dark .bar__v, .slide--teal .bar__n, .slide--teal .bar__v { color: var(--on-dark-mute); }
.card--lead .bar__t { background: rgba(244,242,238,.14); }
.card--lead .bar__t i { background: rgba(244,242,238,.4); }
.card--lead .bar__n, .card--lead .bar__v { color: var(--on-dark-mute); }
.bar--us .bar__n, .bar--us .bar__v { color: var(--orange); font-weight: 600; }
.bar--us .bar__t i, .card--lead .bar--us .bar__t i { background: var(--orange); }

/* ---------- video card ---------- */

/* the demo is a 1500x3248 phone screen recording. a 16/9 box with object-fit:cover
   was throwing away most of the frame, so the player matches the film's own shape
   and contains rather than crops. height-capped so a portrait video cannot run the
   slide off the page. */
.vplayer {
  position: relative; border-radius: 3px; overflow: hidden;
  background: var(--ink); aspect-ratio: 1500 / 3248;
  height: clamp(200px, 37vh, 380px); width: auto; margin-inline: auto;
}
.vplayer video, .vplayer img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vplayer__btn span { max-width: 9ch; }
.vplayer__btn {
  position: absolute; inset: 0; z-index: 2;
  /* the frame is portrait and narrow, so the label sits under the disc, not beside it */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 0 14px; line-height: 1.5;
  border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(0deg, rgba(7,22,26,.55), rgba(7,22,26,.18));
  font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  transition: background .25s ease;
}
.vplayer__btn { text-decoration: none; }
.vplayer__btn:hover { background: linear-gradient(0deg, rgba(7,22,26,.7), rgba(7,22,26,.3)); }
.vplayer__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }
.vplayer__btn i {
  width: 48px; height: 48px; border-radius: 50%; background: var(--orange);
  display: grid; place-items: center; flex: none;
}
.vplayer__btn i::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.vplayer.is-playing .vplayer__btn { display: none; }

/* ---------- market ladder ---------- */

.ladder { display: flex; flex-direction: column; gap: clamp(7px, 1vh, 12px); margin-top: clamp(18px, 2.8vh, 32px); }
/* four rungs instead of three — tighten so the slide still breathes */
.ladder--tight { gap: clamp(5px, .8vh, 9px); }
.ladder--tight .rung { padding-top: clamp(9px, 1.3vh, 15px); padding-bottom: clamp(9px, 1.3vh, 15px); }
.rung {
  display: grid; grid-template-columns: 78px 132px minmax(0,1fr) auto;
  align-items: center; gap: clamp(12px, 1.8vw, 26px);
  padding: clamp(12px, 1.8vh, 20px) clamp(15px, 1.9vw, 25px);
  border-radius: 3px; background: rgba(255,255,255,.55); border: 1px solid var(--paper-3);
}
.rung--tam { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.rung--sam { background: var(--teal); border-color: var(--teal); color: var(--on-dark); }
.rung__k { font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .16em; }
.rung--tam .rung__k, .rung--sam .rung__k { color: var(--green); }
.rung--som .rung__k { color: var(--orange); }
/* the population, not the dollar figure, is what makes a market feel real. it leads
   each rung; the revenue number closes it. */
.rung__p {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 2.15rem); letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rung__p span {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; opacity: .58;
}
.rung--som .rung__p { color: var(--on-light); }
.rung__d { font-size: clamp(.8rem, .97vw, .93rem); line-height: 1.45; font-weight: 300; }
.rung--tam .rung__d, .rung--sam .rung__d { color: var(--on-dark-mute); }
.rung--som .rung__d { color: var(--on-light-mute); }
.rung__n {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.45rem, 2.8vw, 2.5rem); letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rung--som .rung__n { color: var(--orange); }

/* clinicians who signed off on the coaching. names and titles, because "built with
   doctors" is a claim and these are the doctors. */
.creds { display: grid; gap: 7px; margin-top: clamp(12px, 1.8vh, 18px); }
.cred {
  display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 4px 14px;
  padding-bottom: 7px; border-bottom: 1px solid var(--teal-line);
}
.cred b { font-weight: 600; font-size: clamp(.82rem, .97vw, .92rem); }
.cred span { font-size: clamp(.78rem, .92vw, .87rem); line-height: 1.4; font-weight: 300; color: var(--on-dark-mute); }

/* ---------- review wall ----------
   Real Amazon reviews, quoted verbatim. Every card carries its own provenance line
   because most of them are Vine, and an investor will check. */

/* the category scoreboard. counts are shown next to every score, because 23 ratings
   and 328 ratings are not the same claim and an investor will ask. */
.rates {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(9px, 1.1vw, 16px);
  margin-top: clamp(14px, 2.2vh, 24px);
}
.rate { padding: clamp(10px, 1.4vh, 15px) clamp(12px, 1.1vw, 16px); border: 1px solid var(--paper-3); border-radius: 4px; }
.rate--us { background: var(--ink); border-color: var(--ink); color: #F4F2EE; }
.rate__n {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1; letter-spacing: -.035em;
}
.rate__n span { font-size: .48em; margin-left: .16em; color: var(--orange); }
.rate--us .rate__n { color: #F4F2EE; }
.rate__w { margin-top: 8px; font-weight: 600; font-size: clamp(.8rem, .95vw, .9rem); }
.rate__c {
  margin-top: 4px; font-family: var(--body); font-size: .82rem; font-weight: 400; line-height: 1.4;
  color: var(--on-light-mute);
}
.rate--us .rate__c { color: rgba(244,242,238,.74); }

.revs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(16px, 2.4vh, 28px);
}
.revs--4 { grid-template-columns: repeat(4, 1fr); }
.rev {
  margin: 0; padding: clamp(11px, 1.4vh, 16px) clamp(13px, 1.2vw, 18px);
  background: #fff; border: 1px solid var(--paper-3); border-radius: 4px;
  display: flex; flex-direction: column; gap: 8px;
}
.rev__s { color: var(--orange); font-size: .82rem; letter-spacing: .12em; line-height: 1; }
.rev blockquote {
  margin: 0; font-size: clamp(.82rem, .98vw, .94rem); line-height: 1.45; font-weight: 400;
  color: var(--on-light);
}
.rev figcaption {
  margin-top: auto; padding-top: 4px;
  font-weight: 500; font-size: clamp(.78rem, .92vw, .87rem);
}
.rev figcaption span {
  display: block; margin-top: 3px;
  font-family: var(--body); font-size: .8rem; letter-spacing: 0;
  font-weight: 400; color: var(--on-light-mute);
}
/* the critical one. kept, and marked, rather than quietly dropped. */
.rev--crit { background: transparent; border-style: dashed; }

/* ---------- pricing flow ---------- */

.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(9px, 1.1vw, 15px); margin-top: clamp(18px, 2.8vh, 34px); }
.flow__step { border: 1px solid var(--paper-3); border-radius: 3px; padding: clamp(14px, 2vh, 24px); background: rgba(255,255,255,.55); position: relative; }
.flow__step + .flow__step::before {
  content: "\2192"; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  color: var(--orange); font-size: .9rem;
}
.flow__k { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-light-mute); }
.flow__n { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 2.9vw, 2.5rem); letter-spacing: -.035em; margin: 7px 0 5px; }
.flow__n small { font-size: .38em; font-weight: 600; letter-spacing: 0; color: var(--on-light-mute); }
.flow__b { font-size: clamp(.8rem, .95vw, .91rem); line-height: 1.45; font-weight: 300; color: var(--on-light-mute); }
.flow__step--last { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.flow__step--last .flow__k, .flow__step--last .flow__b, .flow__step--last .flow__n small { color: var(--on-dark-mute); }
.flow__step--last .flow__n { color: var(--orange); }

/* worded flow step, used for the screening pipeline */
.flow__t { font-family: var(--display); font-weight: 700; font-size: clamp(.98rem, 1.35vw, 1.22rem); line-height: 1.15; letter-spacing: -.018em; margin: 7px 0 6px; }

/* flow on a dark slide */
.flow--dark .flow__step { background: rgba(255,255,255,.03); border-color: var(--teal-line); color: var(--on-dark); }
.flow--dark .flow__k { color: var(--orange); }
.flow--dark .flow__b { color: var(--on-dark-mute); }
.flow--dark .flow__step--last { background: var(--teal); border-color: transparent; }

/* compact two-column table inside a card */
.vs--tight { margin-top: clamp(8px, 1.2vh, 12px); font-size: clamp(.75rem, .9vw, .86rem); }
.vs--tight th, .vs--tight td { padding: clamp(6px, .9vh, 10px) 0; }
.vs--tight tbody th { width: 44%; color: var(--on-dark); font-weight: 600; }
.vs--tight tr:last-child th, .vs--tight tr:last-child td { border-bottom: 0; }

/* ---------- competitor table ---------- */

.vs { width: 100%; border-collapse: collapse; font-size: clamp(.76rem, .92vw, .88rem); margin-top: clamp(14px, 2.2vh, 26px); }
.vs th, .vs td { text-align: left; padding: clamp(8px, 1.2vh, 13px) clamp(8px, .9vw, 14px); border-bottom: 1px solid var(--teal-line); vertical-align: top; }
/* four-column comparison: the row label needs less room than a three-column one */
.vs--3 th[scope="row"] { width: 24%; }
.vs thead th { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-faint); font-weight: 500; border-bottom-color: currentColor; }
.vs tbody th { font-weight: 500; color: var(--on-dark-mute); width: 26%; }
.vs td { font-weight: 300; color: var(--on-dark-mute); }
.vs .col-us { background: rgba(241,114,58,.09); }
.vs thead .col-us { color: var(--orange); font-weight: 600; }
.vs td.col-us { color: var(--on-dark); font-weight: 500; }

/* the table was built for the dark slides. on paper and sand every colour has to flip,
   or the whole comparison reads as a faint smudge. */
.slide--paper .vs th, .slide--paper .vs td,
.slide--sand  .vs th, .slide--sand  .vs td { border-bottom-color: var(--paper-3); }
.slide--paper .vs thead th, .slide--sand .vs thead th { color: var(--on-light-mute); border-bottom-color: currentColor; }
.slide--paper .vs tbody th, .slide--sand .vs tbody th { color: var(--on-light); }
.slide--paper .vs td, .slide--sand .vs td { color: var(--on-light-mute); }
.slide--paper .vs td.col-us, .slide--sand .vs td.col-us { color: var(--on-light); font-weight: 600; }
.slide--paper .vs--tight tbody th, .slide--sand .vs--tight tbody th { color: var(--on-light); }

/* ---------- positioning map ---------- */

.map {
  position: relative; aspect-ratio: 1 / .66; margin-top: clamp(6px, 1vh, 12px);
  border: 1px solid var(--teal-line); border-radius: 3px;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), var(--teal-line) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--teal-line) 50%, transparent calc(50% + .5px));
}
.map__q {
  position: absolute; right: 26px; top: 30px;
  width: calc(50% - 30px); height: calc(50% - 34px);
  background: rgba(241,114,58,.08); border: 1px dashed rgba(241,114,58,.45); border-radius: 2px;
}
.map__ax { position: absolute; font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-faint); }
.map__ax--b { bottom: 9px; left: 50%; transform: translateX(-50%); }
.map__ax--t { top: 9px; left: 50%; transform: translateX(-50%); color: var(--green); }
.map__ax--l { left: 8px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; rotate: 180deg; }
.map__ax--r { right: 8px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; color: var(--green); }
.dot { position: absolute; transform: translate(-50%, -50%); font-family: var(--mono); font-size: .76rem; color: var(--on-dark-mute); white-space: nowrap; }
.dot::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--on-dark-faint); margin: 0 auto 6px; }
.dot--us { color: var(--orange); font-family: var(--display); font-weight: 800; font-size: clamp(1.05rem, 1.8vw, 1.6rem); letter-spacing: -.03em; }
.dot--us::before { width: 11px; height: 11px; background: var(--orange); box-shadow: 0 0 0 6px rgba(241,114,58,.18); }

/* ---------- timeline ---------- */

.tl { display: grid; gap: clamp(9px, 1.1vw, 15px); grid-template-columns: repeat(3, 1fr); margin-top: clamp(18px, 2.8vh, 34px); }
.tl__col { border-top: 2px solid var(--teal-line); padding-top: clamp(12px, 1.8vh, 18px); display: flex; flex-direction: column; }
.tl__col--now { border-top-color: var(--orange); }
.tl__y { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.5vw, 2.1rem); letter-spacing: -.035em; }
/* the concept line for each year: this is the headline of the column, not a caption,
   so it is set in the display face at roughly double the old mono label */
.tl__w {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.96rem, 1.32vw, 1.18rem); line-height: 1.2; letter-spacing: -.018em;
  text-transform: none; color: var(--on-dark); margin-top: 6px;
  display: flex; align-items: flex-start; gap: 8px;
}
.tl__w .ico { width: 15px; height: 15px; margin-top: .18em; color: var(--orange); flex: none; }
/* Product / Business dividers inside a year */
.tl__k {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-faint); margin-top: clamp(11px, 1.7vh, 17px);
  padding-top: clamp(8px, 1.2vh, 12px); border-top: 1px solid var(--teal-line);
}
.tl__list { list-style: none; padding: 0; margin: clamp(7px, 1.1vh, 11px) 0 0; display: grid; gap: 7px; }
.tl__list li { font-size: clamp(.8rem, .96vw, .91rem); line-height: 1.45; font-weight: 300; color: var(--on-dark-mute); padding-left: 15px; position: relative; }
.tl__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--orange); }
.tl__arr { margin-top: auto; padding-top: clamp(12px, 1.8vh, 18px); font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 1.9rem); letter-spacing: -.035em; color: var(--orange); }
.tl__arr span { display: block; font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .16em; color: var(--on-dark-faint); margin-bottom: 3px; }

/* ---------- logo / credential strip ---------- */

.logos {
  display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px, 2.6vw, 40px);
  margin-top: clamp(14px, 2.2vh, 28px); padding-top: clamp(12px, 1.8vh, 22px);
  border-top: 1px solid var(--teal-line);
}
.logos img { height: clamp(20px, 2.3vw, 29px); width: auto; max-width: 124px; object-fit: contain; }
.logos--dark img { filter: brightness(0) invert(1); opacity: .8; }
.logos__label { font-family: var(--mono); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-faint); width: 100%; margin-bottom: -4px; }
.logos__word { font-family: var(--display); font-weight: 700; font-size: clamp(.88rem, 1.25vw, 1.1rem); letter-spacing: -.01em; opacity: .78; }

/* a single partner lockup, for when one name carries the slide */
.colab { display: flex; align-items: center; gap: clamp(11px, 1.1vw, 16px); margin: clamp(13px, 1.9vh, 20px) 0 0; }
.colab__k { font-family: var(--mono); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-faint); }
.colab img { height: clamp(19px, 2.4vh, 26px); width: auto; filter: brightness(0) invert(1); opacity: .88; }
/* the Mayo mark is a square stacked lockup, so it needs real height to stay legible.
   parked in the slide's free top-right corner where it costs no vertical space. */
.colab--badge {
  position: absolute; z-index: 2;
  top: clamp(34px, 5.4vh, 56px); right: clamp(40px, 3.8vw, 72px);
  margin: 0; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right;
}
/* sized to the largest square that clears the headline's right edge and the top of
   the right-hand column. measured at 1440x731: free corner is 334 x 195. */
.colab--badge img { height: clamp(64px, 19vh, 150px); }

/* ---------- team ---------- */

.people { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.3vw, 18px); margin-top: clamp(16px, 2.4vh, 28px); }
/* faces read as portraits, not as tiles: circular, and narrower than the column so
   the row of five has air between them */
.person__ph {
  aspect-ratio: 1 / 1; max-height: 20vh; width: min(100%, 150px);
  border-radius: 50%; overflow: hidden; background: var(--ink-soft); margin-bottom: 12px;
}
.person__ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.person__r { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.person__n { font-family: var(--display); font-weight: 700; font-size: clamp(.93rem, 1.2vw, 1.1rem); letter-spacing: -.018em; margin-top: 4px; }
.person__b { font-size: clamp(.74rem, .9vw, .84rem); line-height: 1.42; font-weight: 300; color: var(--on-dark-mute); margin-top: 5px; }

.advisors { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.3vw, 18px); margin-top: clamp(14px, 2.2vh, 24px); padding-top: clamp(12px, 2vh, 20px); border-top: 1px solid var(--teal-line); }
.adv__n { font-weight: 500; font-size: clamp(.82rem, .98vw, .93rem); }
.adv__b { font-size: clamp(.72rem, .88vw, .82rem); line-height: 1.4; font-weight: 300; color: var(--on-dark-mute); margin-top: 3px; }

/* ---------- ask ---------- */

.ask { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.ask__n { font-family: var(--display); font-weight: 800; font-size: clamp(4.6rem, 12vw, 10.5rem); line-height: .8; letter-spacing: -.055em; color: var(--orange); }
.ask__k { font-family: var(--mono); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-faint); }
.ask__sub { font-family: var(--display); font-weight: 700; font-size: clamp(1.02rem, 1.65vw, 1.45rem); letter-spacing: -.02em; margin-top: 13px; }
/* the three facts an investor checks before reading the allocation */
.terms { margin: clamp(14px, 2vh, 20px) 0 0; display: grid; gap: 9px; }
.terms > div { display: grid; grid-template-columns: minmax(0, 12.5em) minmax(0, 1fr); gap: 14px; align-items: baseline; padding-bottom: 9px; border-bottom: 1px solid var(--teal-line); }
.terms dt { font-family: var(--mono); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--on-dark-faint); }
.terms dd { margin: 0; font-weight: 500; font-size: clamp(.88rem, 1.05vw, 1rem); }
.terms dd b { font-family: var(--display); font-weight: 800; font-size: 1.28em; letter-spacing: -.03em; color: var(--orange); margin-right: .15em; }

.alloc { display: grid; gap: clamp(16px, 2.6vh, 28px); }
.alloc__row { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 8px 16px; align-items: baseline; }
.alloc__p { font-family: var(--display); font-weight: 800; font-size: clamp(1.12rem, 1.75vw, 1.55rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.alloc__t { font-weight: 500; font-size: clamp(.86rem, 1.02vw, .98rem); }
.alloc__d { font-size: clamp(.76rem, .92vw, .86rem); font-weight: 300; line-height: 1.45; color: var(--on-dark-mute); margin-top: 3px; }
.alloc__bar { grid-column: 1 / -1; height: 3px; background: var(--teal-line); border-radius: 2px; overflow: hidden; }
.alloc__bar i { display: block; height: 100%; background: var(--orange); }

/* ---------- closing slide (namespaced: a bare `.close` collides with extension CSS) ---------- */

.deck-close h1 { max-width: 15ch; }
.deck-close__contact { margin-top: clamp(24px, 4vh, 46px); display: grid; gap: 7px; }
.deck-close__name { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.9vw, 1.6rem); letter-spacing: -.022em; }
.deck-close__role { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.deck-close__link { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--teal-line); padding-bottom: 2px; width: fit-content; font-size: clamp(.88rem, 1.08vw, .98rem); }
.deck-close__link:hover { border-bottom-color: var(--orange); color: var(--orange); }
.deck-close__link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.deck-close__mark {
  position: absolute; right: var(--pad-x); bottom: clamp(26px, 4.6vh, 50px); z-index: 2;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem); letter-spacing: -.05em; line-height: 1;
  text-align: right; opacity: .92;
}
.deck-close__mark em { font-style: normal; color: var(--orange); }
.deck-close__mark span { display: block; font-family: var(--mono); font-size: .76rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-faint); margin-top: 11px; }

/* ---------- author placeholder ---------- */

.todo {
  border: 1px dashed rgba(241,114,58,.6); background: rgba(241,114,58,.07); border-radius: 3px;
  padding: clamp(10px, 1.6vh, 16px) clamp(12px, 1.5vw, 18px);
  font-family: var(--mono); font-size: .76rem; line-height: 1.55; color: var(--orange);
}

/* ---------- media helper ---------- */

.media { border-radius: 3px; overflow: hidden; background: var(--ink-soft); aspect-ratio: 4 / 3; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 3 / 4; }
.media--contain { background: transparent; }
.media--contain img { object-fit: contain; }
.media--wide { aspect-ratio: 5 / 4; }

/* small portrait inside a card, so a name reads as a person not a line of text */
.card__ph { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; }
.card__ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }

/* photo at the head of a card, when the claim is a physical thing */
.card__img { margin: 0 0 2px; border-radius: 3px; overflow: hidden; aspect-ratio: 16 / 3.6; }
.card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__img--tall { aspect-ratio: 16 / 4; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .stats--4, .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: repeat(3, 1fr); }
  .advisors { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .deck { scroll-snap-type: none; height: auto; overflow: visible; }
  .slide { min-height: auto; padding: 60px var(--pad-x) 64px; display: block; }
  .split, .split--wide-left, .split--wide-right, .ask { grid-template-columns: 1fr; }
  .cards--4, .cards--3, .cards--2, .flow, .tl, .stats--3, .stats--4, .stats--2 { grid-template-columns: 1fr; }
  .pillars--lg { grid-template-columns: repeat(2, 1fr); }
  .flow__step + .flow__step::before { content: "\2193"; left: 50%; top: -14px; transform: translateX(-50%); }
  .people { grid-template-columns: repeat(2, 1fr); }
  .rung { grid-template-columns: 1fr; gap: 8px; }
  .revs { grid-template-columns: 1fr; }
  .rates { grid-template-columns: repeat(2, 1fr); }
  /* backstop: any multi-column grid still standing at this width goes to one column,
     so a new component cannot silently push content off a phone screen */
  .cards, .stats, .split, .flow, .tl, .people, .advisors, .pillars, .creds, .cover__band,
  .terms > div, .cred { grid-template-columns: 1fr !important; }
  .vplayer { height: auto; width: 100%; max-width: 300px; }
  .rung__n { font-size: 2rem; }
  .cover__confid { position: static; margin-top: 28px; display: block; }
  .cover__proof { position: static; margin-top: 28px; }
  .cover__card { width: 50%; }
  .cover__band {
    position: static; margin-top: 30px; left: auto; right: auto; bottom: auto;
    grid-template-columns: 1fr; gap: 14px;
  }
  .cover__stat span { max-width: none; }
  .deck-close__mark { position: static; text-align: left; margin-top: 40px; }
  /* A four-column comparison cannot fit a phone. Rather than scroll it sideways —
     which hid the Soonr column entirely — each row becomes a labelled card, with the
     column name pulled from data-c. */
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto; white-space: normal; }
  .vs thead { display: none; }
  .vs { margin-top: 16px; }
  .vs tbody tr {
    border: 1px solid var(--paper-3); border-radius: 4px;
    padding: 11px 13px; margin-bottom: 9px;
  }
  .vs tbody th {
    padding: 0 0 8px; border: 0; width: auto;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--on-light-mute); font-weight: 500;
  }
  .vs tbody td {
    padding: 5px 0; border: 0;
    display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; align-items: baseline;
  }
  .vs tbody td::before {
    content: attr(data-c);
    font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--on-light-mute);
  }
  .vs tbody td.col-us { margin: 4px -7px; padding: 7px; border-radius: 3px; }
  .slide--dark .vs tbody tr, .slide--teal .vs tbody tr { border-color: var(--teal-line); }
  .bleed__scrim { background: linear-gradient(180deg, rgba(7,22,26,.55) 0%, rgba(7,22,26,.9) 55%); }
  .panel, .panel--wide { max-width: none; }
  .map { aspect-ratio: 1 / 1; }

  /* Type on a phone. The desktop scale leans on vw terms that collapse to their
     floor at this width, which left the mono labels around 9px. Nothing here is
     under ~11.5px, and body copy sits at 15px. */
  .eyebrow { font-size: .8rem; }
  .card__k, .flow__k, .tl__w, .rung__k, .logos__label, .stat__s, .person__r,
  .byline, .echo footer, .tag, .terms dt, .bigquote footer, .ask__k, .cover__card figcaption b {
    font-size: .78rem;
  }
  .card__b, .flow__b, .stat__l, .rung__d, .tl__list li, .person__b, .alloc__d,
  .adv__b, .adv__n, .body, .note, .kicker, .cover__sub, .cover__card figcaption, .vs {
    font-size: .98rem; line-height: 1.55;
  }
  .card__t { font-size: 1.14rem; }
  .alloc__t { font-size: 1.02rem; }
  .said { font-size: 1.3rem; }
  .echo p { font-size: 1.16rem; }
  .terms dd { font-size: 1rem; }
  .terms > div { grid-template-columns: 1fr; gap: 3px; }
  .stat__n { font-size: 2.3rem; }
  .flow__n { font-size: 2.2rem; }
  .card__img { aspect-ratio: 16 / 8; }
  .bigquote p { font-size: 1.95rem; max-width: none; }
  .colab--badge { position: static; flex-direction: row; align-items: center; margin: 20px 0 0; text-align: left; }
}

/* ---------- print → PDF (16:9) ---------- */

@page { size: 1600px 900px; margin: 0; }

@media print {
  :root { --rail: 44px; }
  html, body { background: #fff; }
  .deck { height: auto; overflow: visible; scroll-snap-type: none; }
  .rail { display: none; }
  .slide { min-height: auto; height: 900px; width: 1600px; page-break-after: always; break-after: page; padding: 30px 54px; display: flex; }
  /* on screen the inner column is capped at 1240px so long lines stay readable at any
     window size. a PDF page is a fixed 1600px, so that cap just leaves dead margin. */
  .slide__inner { max-width: none; }
  /* the play control stays visible in the export: it is the link annotation that
     carries the reader to the film. */
  .vplayer__btn { display: flex; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}