/* stoda.ai · motion: reveal-once, no scroll pinning · display: Literata */
/* Literata by TypeTogether for Google. SIL Open Font License 1.1; self-hosted
   variable webfonts (wght 200-900, opsz 7-72), latin + latin-ext subsets. */
@font-face { font-family: "Literata"; src: url("assets/fonts/Literata-Roman-latin.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; src: url("assets/fonts/Literata-Roman-latin-ext.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; src: url("assets/fonts/Literata-Italic-latin.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; src: url("assets/fonts/Literata-Italic-latin-ext.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Hallmark · genre: editorial · design-system: styles.css tokens (locked) · designed-as-app
 * subpages: security=audit-ledger · usecases=gallery+roster · about=manifesto-led
 * pre-emit critique: P4 H4 E4 S4 R5 V4 */

:root {
  --bg: #f5f0e7;
  --card: #ffffff;
  --video-bubble: #f0ebe2;
  --ink: #2e2e2e;
  --ink-soft: #4a4a4a;
  --muted: #6b6b6b;
  --line: #d2c7b5;
  --line-light: #ebe5dc;
  --input-bg: #f5f3f0;
  --chip-label: #c1b5a1;
  --quote-mark: #ddd8cf;
  --arc: #cfc8bc;
  --rust: #C04018;
  --rust-2: #A83815;
  --rust-soft: #eeddd3;
  --rust-faded: #cd8557;
  --black: #030303;
  --ok: #3d7a4a;
  --f-serif: "Literata", Georgia, serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --w: 1280px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 9999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--f-mono); }
.center { text-align: center; }
.center-p { text-align: center; margin-left: auto; margin-right: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 4px; }

/* ---------- white bubbles on cream ---------- */

.box {
  max-width: min(var(--w), calc(100% - 32px));
  margin: 16px auto 0;
  background: var(--card);
  border-radius: var(--r-2xl);
  padding: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(1.25rem, 3.5vw, 4rem);
}

/* ---------- nav ---------- */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px 16px 24px;
  background: linear-gradient(var(--bg) 60%, rgba(245,240,231,0));
  pointer-events: none;
}
.nav {
  max-width: min(var(--w), calc(100% - 32px));
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 14px rgba(0,0,0,0.07);
  padding: 12px clamp(16px, 2.5vw, 28px);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: auto;
}
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-link {
  font-size: 14px; font-weight: 500;
  color: var(--muted); text-decoration: none;
}
.nav-link:hover { color: var(--ink); text-decoration: underline; }

.wordmark {
  display: inline-flex; align-items: baseline;
  text-decoration: none;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wordmark i { font-style: italic; color: var(--rust); }
.wordmark-sm { font-size: 20px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-nav { background: var(--black); color: #fff; }
.btn-nav:hover { background: var(--ink); }
.btn-primary { background: var(--black); color: #fff; }
.btn-primary:hover { background: #1c1c1c; transform: translateY(-1px); }
.btn-big { font-size: 16.5px; padding: 15px 30px; }

/* ---------- hero ---------- */

.hero-row {
  max-width: min(var(--w), calc(100% - 32px));
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 16px;
  align-items: stretch;
}
.hero-row .box { max-width: none; margin: 0; }
/* a hero-row cell holding two stacked boxes that split the row's height.
   compact: card-scale type and padding, not section-scale */
.hero-col { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0; }
.hero-col > .box { padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.25rem, 2.5vw, 2.5rem); }
.hero-col > .box h2 { font-size: clamp(22px, 2.2vw, 27px); line-height: 1.25; margin-top: 10px; }
.hero-col > .box .section-sub { margin-top: 8px; font-size: 14.5px; }

.hero-card {
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(3rem, 5vw, 5.5rem);
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chip-label);
  margin-bottom: 34px;
}

.hero-card h1 {
  font-family: var(--f-serif);
  font-weight: 480;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  min-width: 0;
}
.hero-card h1 em { font-style: normal; color: var(--rust); }

.hero-card .sub {
  margin-top: 22px;
  font-family: var(--f-serif);
  font-style: normal;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.62;
  color: var(--muted);
  max-width: 34em;
}

.hero-foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line-light);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hero-foot-label {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-foot-clouds { display: inline-flex; align-items: center; gap: 16px; }
.hero-foot-clouds img { height: 20px; width: auto; opacity: 0.55; filter: grayscale(1); }

.hero-video {
  background: var(--video-bubble);
  border: 1px solid #ebe5dc;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.hero-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- join form ---------- */

.join { margin-top: 34px; }
#join { scroll-margin-top: 130px; }
#join2 { scroll-margin-top: 160px; }

.join input, .mlist input {
  font-family: var(--f-body);
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 10px 2px;
  width: 100%;
  transition: border-color 0.15s ease;
}
.join input:focus, .mlist input:focus { outline: none; border-bottom-color: var(--rust); }
.join input::placeholder, .mlist input::placeholder { color: var(--muted); }

.join-row, .mlist-row { display: flex; gap: 18px; align-items: flex-end; }
.join-row input, .mlist-row input { flex: 1; }

.join-cta {
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.join-cta:hover { color: var(--rust); }

.join-more { margin-top: 16px; }
.join-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.join-hint { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

.hp { position: absolute; left: -9999px; height: 1px; width: 1px; opacity: 0; }

.join-msg { margin-top: 10px; font-size: 14.5px; color: var(--ok); font-weight: 500; min-height: 1.2em; }
.join-msg.err { color: var(--rust); }
.join-switch { margin-top: 12px; font-size: 13px; color: var(--muted); }
.join-switch-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--f-body); font-size: 13px; color: var(--rust);
  text-decoration: none;
}
.join-switch-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- section labels + headings ---------- */

.section-label {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chip-label);
  margin-bottom: 16px;
}
.box h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 50px);
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--ink);
}
.section-sub { margin-top: 12px; color: var(--muted); max-width: 560px; }
.section-sub.center { margin-left: auto; margin-right: auto; }

/* ---------- proof · logos left (primary), quote right ---------- */

.proof-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.proof-logos-col { padding-right: clamp(0.5rem, 1vw, 1rem); }
.proof-strip-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chip-label);
  margin-bottom: 18px;
}
.proof-logos-row {
  display: flex; align-items: center;
  gap: clamp(20px, 3vw, 34px);
  flex-wrap: wrap;
}
.plogo { display: block; opacity: 0.9; filter: grayscale(1); }
.plogo-dealmaker { height: 27px; width: auto; }
.plogo-noble { height: 30px; width: auto; }
.proof-vb {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-light);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* the quote hangs off the same 2px sand rule the story beats use — the
   divider belongs to the content, not the row */
.proof-quote {
  position: relative;
  border-left: 2px solid var(--arc);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
.proof-quote blockquote {
  font-family: var(--f-serif);
  /* matches the manifesto's lighter serif; full-strength ink keeps the quote
     present next to the logos */
  font-weight: 350;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.5;
  color: var(--ink);
}
.proof-quote figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 720px) {
  .proof-cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .proof-logos-col { padding-right: 0; }
}

/* ---------- manifesto ---------- */

.manifesto {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4rem);
}
/* about: gradient is the CTA's signature; the manifesto sits plain */
.manifesto--plain, .manifesto:not(:has(.manifesto-bg)) { background: var(--bg); padding: 0; }
.manifesto:not(:has(.manifesto-bg)) .manifesto-inner { border: 1px solid var(--line-light); max-width: none; }
.manifesto-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.manifesto-inner {
  position: relative;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 3.5vw, 3.5rem);
  max-width: 880px;
  margin: 0 auto;
}

.manifesto-body {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
}
.manifesto-body p {
  font-family: var(--f-serif);
  /* Fraunces is variable across 300..700, so 350 sits between the original
     400 and the lightest cut; the ink splits --ink and --ink-soft to match */
  font-weight: 350;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.55;
  color: #3c3c3c;
}
.manifesto-punch em {
  font-style: italic;
  color: var(--rust);
}
/* word-stagger reveal */
@media (prefers-reduced-motion: no-preference) {
  [data-stagger] .w {
    opacity: 0.08;
    transition: opacity var(--dur-long) var(--ease-out);
  }
  [data-stagger] .w.on { opacity: 1; }
}

/* same column as the text; the right padding keeps the drawing's edge
   inside the typical line endings so arcs and copy read as one width */
.manifesto-arcs { max-width: 760px; margin: 34px auto 12px; padding-right: 24px; }
.manifesto-arcs svg { display: block; width: 100%; height: auto; }

/* ---------- pillars ---------- */

.pillar-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1000px;
}
.pillar {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1rem + 2.5vw, 3.25rem) clamp(1.25rem, 2vw, 2.25rem);
  min-height: clamp(360px, 36vw, 460px);
  display: flex; flex-direction: column; align-items: center;
  gap: 1.4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  will-change: transform;
  background: var(--card);
}
.pillar-spot {
  position: absolute; inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(168,56,21,0.06), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.pillar:hover .pillar-spot,
.step:hover .pillar-spot { opacity: 1; }
.pillar-visual {
  min-height: 130px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 8px;
}
.pillar-visual img { opacity: 0.9; }
.pillar-title {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--f-serif);
  font-size: 28px;
}
.pillar-num { font-size: 12px; color: var(--chip-label); }
.pillar-title em { font-style: italic; color: var(--rust); }
.pillar p { font-size: 15px; color: var(--ink-soft); max-width: 30em; }

/* ---------- morph · principles scroll-transforms into the four steps ---------- */

/* ---------- the story stack · what -> how -> future, each covered by the next ---------- */

.stack {
  position: relative;
  max-width: min(var(--w), calc(100% - 32px));
  margin: 16px auto 0;
  timeline-scope: --cover-how, --cover-build, --cover-diff;
}
.stack .box { max-width: none; margin: 0; }
.stack-card + .stack-card { margin-top: 24px; }
.card-how { view-timeline-name: --cover-how; }
.card-build { view-timeline-name: --cover-build; }
.card-diff { view-timeline-name: --cover-diff; }

.morph-layer { position: static; display: block; }

.card-fit { z-index: 1; }
.card-how { z-index: 2; }
.card-build { z-index: 3; }
.card-diff { z-index: 4; }
.card-how, .card-build, .card-diff { box-shadow: 0 -18px 44px rgba(46, 46, 46, 0.10); }
/* every width: cards pin and get covered. desktop pins under the nav; on
   mobile, main.js sets a negative top per card (viewport - card height) so a
   tall card pins only once fully read, then the next slides up over it */
.stack-card { position: sticky; top: 92px; }

/* an opaque cream veil dims covered cards without letting lower layers ghost through */
.card-fit::after, .card-how::after, .card-build::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}

/* the covering card's timeline starts the moment its top edge appears at the
   bottom of the viewport, which is well before it reaches the pinned card. the
   two lengths below are set per card by main.js: --veil-from is the scroll
   distance until the cover is a third of the way over this card, --veil-to
   until the cover is complete. so the card holds while the new one takes the
   first third, then recedes and veils across the remaining two thirds. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* each card recedes as the next one covers it */
    .card-fit, .card-fit::after,
    .card-how, .card-how::after,
    .card-build, .card-build::after {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-range: entry var(--veil-from, 0px) entry var(--veil-to, 100%);
    }
    .card-fit { animation-name: card-recede; animation-timeline: --cover-how; }
    .card-fit::after { animation-name: card-veil; animation-timeline: --cover-how; }
    .card-how { animation-name: card-recede; animation-timeline: --cover-build; }
    .card-how::after { animation-name: card-veil; animation-timeline: --cover-build; }
    .card-build { animation-name: card-recede; animation-timeline: --cover-diff; }
    .card-build::after { animation-name: card-veil; animation-timeline: --cover-diff; }
  }
}
@keyframes card-recede {
  to { scale: 0.965; translate: 0 -14px; }
}
@keyframes card-veil {
  to { opacity: 0.82; }
}
.morph-layer .pillar-grid,
.morph-layer .steps { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.morph-layer .pillar { min-height: 0; }
.morph-layer .pillar-visual { min-height: 96px; }

/* step 0 · the one-time provision, then the repeating loop */
.step-zero {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  display: flex; align-items: center; gap: 18px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 22px;
}
.sz-num { font-family: var(--f-serif); font-size: 26px; color: var(--chip-label); }
.sz-body .step-name { font-family: var(--f-serif); font-size: 21px; display: inline-flex; align-items: center; gap: 10px; }
.sz-once {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rust); background: var(--rust-soft);
  border-radius: 4px; padding: 2px 7px;
}
.sz-body p { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.steps-caption {
  margin: 16px 0 0; text-align: center;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--chip-label);
}


/* ---------- how it works ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.step {
  counter-increment: step;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(20px, 2vw, 28px);
  position: relative;
  overflow: hidden;
}
.step::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rust-soft) 0%, transparent 70%);
  bottom: -130px; right: -110px;
  opacity: 0.55;
  pointer-events: none;
}
.step::before {
  content: "0" counter(step);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 26px;
  color: var(--rust);
  display: block;
  margin-bottom: 10px;
}
.step-name {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  display: block;
  min-height: 2.5em;
  margin-bottom: 8px;
}
.step p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); position: relative; min-height: 3em; }


/* ---------- tomorrow mocks ---------- */

.mock-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mock {
  background: var(--input-bg);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}
.mock header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 14px;
}
.mock h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
}
.mock-tag {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  background: var(--rust-soft);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}
.mock-draw {
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
  display: grid;
  gap: 8px;
  height: 118px;
  align-content: start;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(46,46,46,0.035) 23px, rgba(46,46,46,0.035) 24px);
}
.md-line {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  min-width: 0;
}
.md-line > * { min-width: 0; }
.md-dim { color: var(--muted); }
.md-chip {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 7px;
  background: var(--card);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-ok { color: var(--ok); white-space: nowrap; }
.md-run { color: var(--rust); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.md-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rust-2);
  display: inline-block;
}
.md-num { font-weight: 500; color: var(--ink); }
.md-arrow { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .md-pulse { animation: pulse 1.6s ease-in-out infinite; }
  .md-tick { animation: tickup 3.2s ease-in-out infinite; }
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes tickup { 0%,88%,100% { color: var(--ink); } 92% { color: var(--ok); } }

.mock > p {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ---------- closing ---------- */

.closing { text-align: center; }
.closing .center-p { margin-top: 14px; max-width: 520px; color: var(--ink-soft); }
.join-closing { max-width: 560px; margin: 32px auto 0; text-align: left; }
.closing-row {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.closing-alt { font-size: 15px; color: var(--muted); }


/* ---------- closing · the ask gets the beliefs gradient, bookending the page ---------- */

.closing {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
}
.closing-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.closing-inner { position: relative; z-index: 1; }

/* ---------- footer ---------- */

.foot {
  max-width: min(var(--w), calc(100% - 32px));
  margin: 24px auto 0;
  padding: 24px 8px 44px;
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.foot-line { font-size: 13.5px; color: var(--muted); flex: 1; }
.foot-links { display: flex; gap: 18px; font-size: 13.5px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- building showcase · tabbed interactive mocks ---------- */

/*
   the tabs, then releases. Without JS it's a normal static section. */
.bx-driver { max-width: none; }

.building-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.building-sub { color: var(--muted); max-width: 380px; font-size: 15px; }

.bx {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
}
.bx-tabs { display: flex; flex-direction: column; gap: 5px; }
.bx-tab {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 11px 16px;
  cursor: pointer;
  font-family: var(--f-body);
  transition: background 0.2s ease, border-color 0.2s ease;
  display: grid; gap: 2px;
}
.bx-tab:hover { background: var(--input-bg); }
.bx-tab.is-on { background: var(--card); border-color: var(--line); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.bx-tag {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rust);
}
.bx-name { font-family: var(--f-serif); font-size: 21px; color: var(--ink); }
/* descriptions always visible: the option list never changes height */
.bx-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }

.bx-stage {
  position: relative;
  background: var(--input-bg);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-2xl);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  /* height comes from the option column (grid stretch): always identical */
  min-height: 0;
  overflow: hidden;
}
.bx-watermark {
  position: absolute; top: 14px; right: 16px;
  z-index: 2;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--line-2, #c7b894);
}
.bx-panel {
  position: absolute; inset: clamp(1.5rem, 2.5vw, 2.25rem);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
  pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: 16px; /* headroom under the MOCK watermark */
}
.bx-panel.is-on { opacity: 1; transform: none; pointer-events: auto; }

.bxp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.bxp-title { font-family: var(--f-serif); font-size: 22px; }
.bxp-timer, .bxp-ver { font-family: var(--f-mono); font-size: 13px; color: var(--rust); }

/* shared bits */
.t-dim { color: var(--muted); font-size: 0.85em; }
.t-ok { color: var(--ok); }
.t-run { color: var(--rust); }
.t-okc { color: var(--ok); }
.t-blockc { color: var(--rust); }

/* 0 · terminal */
.bxp-term {
  background: var(--ink);
  color: #efece4;
  border-radius: var(--r-lg);
  padding: 0 18px 18px;
  font-size: 12.5px;
  line-height: 1.95;
}
.bxp-term-bar { display: flex; gap: 6px; padding: 14px 0 8px; }
.bxp-term-bar span { width: 10px; height: 10px; border-radius: 50%; background: #4a4a4a; }
.bxp-term .t-prompt { color: var(--rust-soft); }
.bxp-term .t-dim { color: #8a877f; float: right; }

/* 1 · file tree */
.bxp-tree {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  font-size: 13px;
  line-height: 2;
  color: var(--ink-soft);
}
.bxp-tree-head { color: var(--ink); font-weight: 500; margin-bottom: 6px; }
.bxp-tree .t-dim, .bxp-tree .t-ok { float: right; font-size: 11.5px; }
.bxp-tree .t-indent { padding-left: 26px; }

/* 2 · dashboard */
.bxp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.bxp-stat {
  background: var(--card); border: 1px solid var(--line-light); border-radius: var(--r-lg);
  padding: 7px 12px; display: grid; gap: 0;
}
.bxp-stat-n { font-family: var(--f-serif); font-size: 21px; color: var(--ink); }
.bxp-stat-l { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chip-label); }
.bxp-table { display: grid; gap: 4px; }
.bxp-tr {
  display: grid; grid-template-columns: 1.5fr 0.9fr 0.7fr 0.9fr 0.6fr 0.8fr;
  gap: 8px; padding: 5px 12px; font-size: 12px; align-items: center;
  background: var(--card); border: 1px solid var(--line-light); border-radius: 8px;
}
.bxp-th { background: transparent; border: none; color: var(--chip-label); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 0; }
.bxp-tr span:nth-child(n+3) { font-family: var(--f-mono); color: var(--ink-soft); }

/* 3 · allow/block board */
.bxp-board { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.bxp-col {
  background: var(--card); border: 1px solid var(--line-light); border-radius: var(--r-lg);
  padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.bxp-col-h { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2px; }
.bxp-chip {
  font-size: 13px; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; background: var(--input-bg);
}
.bxp-chip-x { text-decoration: line-through; color: var(--muted); }

/* 4 · agent chat */
.bxp-chat { display: grid; gap: 10px; }
.bxp-msg {
  position: relative; max-width: 85%;
  border-radius: var(--r-lg); padding: 12px 14px 12px 14px;
  font-size: 13.5px; line-height: 1.5;
}
.bxp-who { display: block; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chip-label); margin-bottom: 3px; }
.bxp-msg-stoda { background: var(--rust-soft); justify-self: end; }
.bxp-msg-stoda .bxp-who { color: var(--rust); }
.bxp-msg-agent { background: var(--card); border: 1px solid var(--line-light); justify-self: start; }
.bxp-msg code { font-size: 12px; }
.bxp-msg .md-pulse { margin-left: 8px; }

/* 5 · search */
.bxp-search { display: grid; gap: 8px; }
.bxp-search-input {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 10px 18px; font-size: 14px; color: var(--ink);
}
.bxp-caret {
  display: inline-block; width: 1.5px; height: 1em; background: var(--rust);
  margin-left: 3px; vertical-align: text-bottom;
}
@media (prefers-reduced-motion: no-preference) { .bxp-caret { animation: pulse 1.1s steps(2) infinite; } }
.bxp-hit {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card); border: 1px solid var(--line-light); border-radius: var(--r-lg);
  padding: 9px 14px; font-size: 13.5px;
}
.bxp-match { color: var(--ok); font-size: 12px; }
.bxp-search-more { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chip-label); padding-left: 4px; }

/* 6 · fork graph */
.bxp-git { position: relative; display: grid; gap: 8px; padding-left: 10px; }
.bxp-git::before {
  content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px;
  width: 1.5px; background: var(--line);
}
.bxp-git-node {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line-light); border-radius: var(--r-lg);
  padding: 8px 14px 8px 32px; font-size: 13.5px;
}
.bxp-git-node .t-dim { margin-left: auto; }
.bxp-git-dot {
  position: absolute; left: 0; top: 50%; transform: translate(2px, -50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--rust);
}
.bxp-git-dot-fork { background: var(--paper, #f5f0e7); border: 2px solid var(--rust); }
.bxp-git-root { font-weight: 500; }
.bxp-git-node:not(.bxp-git-root) { margin-left: 26px; }

/* caption pinned bottom-left of the stage on every panel */
.bxp-foot { margin-top: auto; padding-top: 20px; font-size: 12.5px; color: var(--ink-soft); }

/* second terminal block right under a mock */
.bxp-term--follow { margin-top: 10px; padding-top: 14px; }
.t-dim-inline { color: #8a877f; }

/* fleet highlight flags */
.bxp-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bxp-flag {
  background: var(--card); border: 1px solid var(--line-light); border-radius: var(--r-pill);
  padding: 3px 10px; font-size: 11.5px; color: var(--ink-soft);
}
.bxp-flag--warn { border-color: var(--rust); color: var(--rust); }
.bxp-tr--stale > span:first-child { color: var(--muted); }
.bxp-stale { font-size: 9px; color: var(--rust); text-transform: uppercase; letter-spacing: 0.08em; }

/* connections: alert + default toggle */
.bxp-alert {
  background: var(--card); border: 1px solid var(--rust); border-radius: var(--r-lg);
  padding: 10px 14px; font-size: 13px; color: var(--ink-soft); margin-top: 12px;
}
.bxp-alert-mark { color: var(--rust); margin-right: 4px; }
.bxp-defaults { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.bxp-defaults .t-dim { color: var(--chip-label); }
.bxp-tgl {
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 3px 12px; color: var(--muted);
}
.bxp-tgl.is-active { background: var(--rust); border-color: var(--rust); color: #fff; }

/* discovery: forks nested inside the top hit */
.bxp-hit--main { display: block; }
.bxp-hit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bxp-forks {
  margin-top: 9px;
  padding: 8px 0 0 6px;
  border-top: 1px dashed var(--line-light);
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.bxp-forks p { display: flex; align-items: center; gap: 9px; }
.bxp-forks .t-dim { margin-left: auto; }
.bxp-fork-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 2px solid var(--rust);
  flex: none;
}

/* sequenced reveal · terminal lines come in over time when the panel shows */
@media (prefers-reduced-motion: no-preference) {
  .bx-panel.is-on .bxp-seq > p { opacity: 0; animation: seqin var(--dur-med, 360ms) var(--ease-out) forwards; }
  .bx-panel.is-on .bxp-seq > p:nth-of-type(1) { animation-delay: 0.15s; }
  .bx-panel.is-on .bxp-seq > p:nth-of-type(2) { animation-delay: 0.50s; }
  .bx-panel.is-on .bxp-seq > p:nth-of-type(3) { animation-delay: 0.85s; }
  .bx-panel.is-on .bxp-seq > p:nth-of-type(4) { animation-delay: 1.15s; }
  .bx-panel.is-on .bxp-seq > p:nth-of-type(5) { animation-delay: 1.50s; }
  .bx-panel.is-on .bxp-seq > p:nth-of-type(6) { animation-delay: 2.90s; }
  .bx-panel.is-on .bxp-seq > p:nth-of-type(7) { animation-delay: 3.40s; }
  .bx-panel.is-on .bxp-seq > p:nth-of-type(8) { animation-delay: 3.90s; }
  .bx-panel.is-on .bxp-seq > p:nth-of-type(9) { animation-delay: 4.40s; }
}
@keyframes seqin { to { opacity: 1; } }

/* per-demo vignettes · all gated on motion preference; restart on tab open */
@media (prefers-reduced-motion: no-preference) {
  /* 1 · provision run executes (fast cadence) */
  .bx-panel.is-on .bxp-seq--fast > p { opacity: 0; animation: seqin 0.3s ease forwards; }
  .bx-panel.is-on .bxp-seq--fast > p:nth-of-type(1) { animation-delay: 0.20s; }
  .bx-panel.is-on .bxp-seq--fast > p:nth-of-type(2) { animation-delay: 0.56s; }
  .bx-panel.is-on .bxp-seq--fast > p:nth-of-type(3) { animation-delay: 0.92s; }
  .bx-panel.is-on .bxp-seq--fast > p:nth-of-type(4) { animation-delay: 1.28s; }
  .bx-panel.is-on .bxp-seq--fast > p:nth-of-type(5) { animation-delay: 1.64s; }
  .bx-panel.is-on .bxp-seq--fast > p:nth-of-type(6) { animation-delay: 2.00s; }
  .bx-panel.is-on .bxp-seq--fast > p:nth-of-type(7) { animation-delay: 2.36s; }
  .bx-panel.is-on .bxp-seq--fast > p:nth-of-type(8) { animation-delay: 2.72s; }
  .bx-panel.is-on .bxp-seq--fast > p:nth-of-type(9) { animation-delay: 3.10s; }

  /* 2/3 · rows cascade in */
  .bx-panel.is-on .bxp-cascade > p,
  .bx-panel.is-on .bxp-cascade > .bxp-tr { opacity: 0; animation: casc 0.32s ease forwards; }
  .bx-panel.is-on .bxp-cascade > :nth-child(1) { animation-delay: 0.08s; }
  .bx-panel.is-on .bxp-cascade > :nth-child(2) { animation-delay: 0.16s; }
  .bx-panel.is-on .bxp-cascade > :nth-child(3) { animation-delay: 0.24s; }
  .bx-panel.is-on .bxp-cascade > :nth-child(4) { animation-delay: 0.32s; }
  .bx-panel.is-on .bxp-cascade > :nth-child(5) { animation-delay: 0.40s; }
  .bx-panel.is-on .bxp-cascade > :nth-child(6) { animation-delay: 0.48s; }
  .bx-panel.is-on .bxp-cascade > :nth-child(7) { animation-delay: 0.56s; }
  .bx-panel.is-on .bxp-cascade > :nth-child(8) { animation-delay: 0.64s; }
  .bx-panel.is-on .bxp-cascade > :nth-child(9) { animation-delay: 0.72s; }
  .bx-panel.is-on .bxp-cascade > :nth-child(10) { animation-delay: 0.80s; }

  /* 2 · a new pattern lands with a highlight */
  .bx-panel.is-on .bxp-newrow { opacity: 0; animation: newrow 0.5s ease forwards; animation-delay: 2.0s !important; }

  /* 3 · the stale alert raises late */
  .bx-panel.is-on .bxp-flag--late { opacity: 0; animation: flagpop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 1.7s; }

  /* 4 · a new block lands in place and gets struck; then the alert arrives */
  .bx-panel.is-on .bxp-chip--new {
    position: relative;
    text-decoration: none;
    opacity: 0;
    animation: flagpop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.1s;
  }
  .bx-panel.is-on .bxp-chip--new::after {
    content: "";
    position: absolute;
    left: 11px; right: 11px; top: 50%;
    height: 1.5px;
    background: var(--muted);
    transform: scaleX(0);
    transform-origin: left center;
    animation: strike 0.35s ease forwards;
    animation-delay: 1.8s;
  }
  .bx-panel.is-on .bxp-alert--late { opacity: 0; animation: alertin 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 2.4s; }

  /* 6 · the fork button arrives, presses itself, and the fork appears */
  .bx-panel.is-on .bxp-forkbtn { opacity: 0; animation: flagpop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards, forkpress 0.5s ease 3.0s; animation-delay: 2.5s, 3.0s; }
  .bx-panel.is-on .bxp-fork--you { opacity: 0; animation: newrow 0.6s ease forwards; animation-delay: 3.35s !important; }

  /* 6 · hits pop after the search types, forks unfold */
  .bx-panel.is-on .bxp-hit--main { opacity: 0; animation: casc 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 1.35s; }
  .bx-panel.is-on .bxp-hit:not(.bxp-hit--main) { opacity: 0; animation: casc 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 1.65s; }
  .bx-panel.is-on .bxp-forks { opacity: 0; animation: casc 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 2.0s; }
  .bx-panel.is-on .bxp-search-more { opacity: 0; animation: seqin 0.4s ease forwards; animation-delay: 2.35s; }
}

@keyframes casc { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes newrow {
  0% { opacity: 0; background: var(--rust-soft); }
  40% { opacity: 1; background: var(--rust-soft); }
  100% { opacity: 1; background: transparent; }
}
@keyframes flagpop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes forkpress { 0% { transform: none; } 35% { transform: scale(0.92); background: var(--rust); color: #fff; } 100% { transform: none; } }
@keyframes strike { to { transform: scaleX(1); } }
@keyframes alertin { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }

/* fleet: the +N-more summary row */
.bxp-tr--more { color: var(--chip-label); background: transparent; border-style: dashed; }
.bxp-tr--more span:first-child { font-style: normal; }

/* maturity legend */
.bx-legend { margin-top: 10px; font-size: 12px; color: var(--chip-label); }

/* discovery: the quieter join-first affordance */
.bxp-reqbtn {
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* connections: the review affordance inside the alert */
.bxp-approve {
  margin-left: 8px;
  border: 1px solid var(--rust);
  color: var(--rust);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* fleet: live tick flash */
.bxp-tick-flash { animation: rowflash 0.9s ease; }
@keyframes rowflash { 0% { background: var(--rust-soft); } 100% { background: var(--card); } }
.bxp-stat.bxp-tick-flash { animation: rowflash 0.9s ease; }

/* discovery: fork affordance */
.bxp-hit-side { display: inline-flex; align-items: center; gap: 12px; }
.bxp-forkbtn {
  border: 1px solid var(--rust);
  color: var(--rust);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bxp-fork--you .t-dim { color: var(--rust); }

/* the default toggle really flips */
.bxp-tgl { cursor: pointer; user-select: none; -webkit-user-select: none; }

/* there is nothing to swipe until the carousel exists below 860px */
.bx-swipe { display: none; }

@media (max-width: 860px) {
  /* mobile: horizontal chip strip with the mock right underneath */
  .bx { display: flex; flex-direction: column; gap: 12px; }
  .bx-tabs {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bx-tabs::-webkit-scrollbar { display: none; }
  .bx-tab {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid var(--line-light);
    border-radius: var(--r-pill);
    background: var(--card);
  }
  .bx-tab.is-on { border-color: var(--rust); box-shadow: none; }
  .bx-tab .bx-desc { display: none !important; }
  .bx-tab .bx-tag { display: none; }
  .bx-name { font-size: 15px; font-family: var(--f-body); font-weight: 500; }
  .bx-tab.is-on .bx-name { color: var(--rust); }
  /* mobile: the stage becomes a swipe carousel. the panels ride in .bx-track
     so the dashed frame and the MOCK watermark stay put while the content
     slides. scroll-snap means the platform's own momentum does the work.
     a phone has no width to spare, so the frame gives some padding back and
     each panel takes the whole of what is left. */
  .bx-stage { display: block; min-height: 0; padding: 14px; }
  .bx-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bx-track::-webkit-scrollbar { display: none; }
  .bx-panel {
    position: static;
    inset: auto;
    display: flex;
    flex: 0 0 100%;
    scroll-snap-align: start;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .bxp-tr { grid-template-columns: 1.5fr 0.9fr 0.7fr 0.8fr; }
  .bxp-tr span:nth-child(n+5) { display: none; }
  /* annotations stay inline on narrow screens so every note belongs to its line */
  .bxp-term .t-dim, .bxp-tree .t-dim, .bxp-tree .t-ok { float: none; font-size: 0.8em; }
  /* the peek does most of the work; this says it in words until the first swipe */
  .bx-swipe {
    display: block;
    text-align: center;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--chip-label);
    transition: opacity var(--dur-long) var(--ease-out);
  }
  .bx-swiped .bx-swipe { opacity: 0; }
  .bx-swipe-arrow { display: inline-block; }
}

@media (prefers-reduced-motion: no-preference) {
  .bx-swipe-arrow { animation: swipenudge 1.8s var(--ease-out) infinite; }
}
@keyframes swipenudge {
  0%, 55%, 100% { transform: translateX(0); }
  28% { transform: translateX(5px); }
}

/* ---------- scroll-synced handoff · where-it-fits recedes, the loop advances ----------
   animation-timeline: view() scrubs with the user's own scroll (stop = freeze,
   no hijack) and runs on the compositor. Firefox falls back to reveal-once. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* the scrub owns these; neutralize the IO reveal inside the morph area */
    .morph-layer .reveal { opacity: 1; transform: none; transition: none; }

    /* the four steps light up left-to-right as the seam crosses */
    .steps .step { animation: step-wave linear both; animation-timeline: view(); }
    .steps .step:nth-child(1) { animation-range: entry 0% entry 28%; }
    .steps .step:nth-child(2) { animation-range: entry 6% entry 34%; }
    .steps .step:nth-child(3) { animation-range: entry 12% entry 40%; }
    .steps .step:nth-child(4) { animation-range: entry 18% entry 46%; }

  }
}

@keyframes step-wave {
  from { opacity: 0; }
}

/* card 3 head centered to match cards 1 and 2 */
.card-build .building-head { display: block; text-align: center; }
.card-build .building-head .building-sub { margin: 12px auto 0; max-width: 560px; }


/* ---------- the loop bar · mirror of the 00 bar: once on top, forever below ---------- */

.loop-bar {
  margin-top: 18px;
  background: var(--rust-soft);
  border-radius: var(--r-xl);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.loop-bar-cycle {
  font-family: var(--f-serif);
  font-size: 30px;
  color: var(--rust);
  line-height: 1;
  flex: none;
}
.loop-bar-text { font-size: 14.5px; color: var(--ink-soft); }
.loop-bar-text strong { color: var(--rust); font-weight: 600; }

/* ---------- the difference · with & without, both visible at once ---------- */

.cmp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  margin-top: 34px;
  align-items: stretch;
}
.cmp-col ul { list-style: none; }
.cmp-col li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 6px;
  font-size: 15.5px;
  border-top: 1px solid var(--line-light);
}
.cmp-head { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; }
.cmp-wo { opacity: 0.75; }
.cmp-wo .cmp-head { color: var(--chip-label); }
.cmp-wo li { color: var(--muted); }
.cmp-x { color: var(--line-2, #c7b894); font-size: 13px; flex: none; }
.cmp-w {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  padding: 16px 22px;
  box-shadow: 0 4px 22px rgba(46, 46, 46, 0.06);
}
.cmp-w .cmp-head { color: var(--rust); }
.cmp-w li { color: var(--ink); font-weight: 500; }
.cmp-c { color: var(--rust); font-size: 14px; flex: none; }
/* narrow: the story reads top-down, so Without comes first, With resolves it */
@media (max-width: 700px) {
  .cmp { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- reveals ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal.in { opacity: 1; transform: none; }
}

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

@media (max-width: 1200px) {
  .mock-grid { grid-template-columns: 1fr 1fr; }
  .steps { gap: 10px; }
  .step { padding: 16px; }
}

@media (max-width: 980px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  /* the video stays BESIDE the hero down to phone width; type compresses
     so both columns fit */
  .hero-card h1 { font-size: clamp(24px, 4.2vw, 46px); }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar { min-height: 0; }
  /* steps read as one connected process: timeline rail + numbered cards */
  .morph-layer .steps {
    position: relative;
    padding-left: 26px;
  }
  .morph-layer .steps::before {
    content: "";
    position: absolute;
    left: 8px; top: 14px; bottom: 14px;
    width: 2px;
    background: var(--line-light);
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .join-row { flex-wrap: wrap; }
  .join-row input { flex: 1 1 220px; }
}

@media (max-width: 640px) {
  .box { padding: 1.75rem 1.25rem; margin-top: 12px; }
  .join-row, .mlist-row { flex-direction: column; align-items: stretch; }
  .join-grid { grid-template-columns: 1fr; }
  .mock-grid { grid-template-columns: 1fr; }
  .mock { min-height: 0; }
  .nav { top: 8px; flex-wrap: wrap; row-gap: 8px; }
  .nav-right { display: contents; }
  .nav-links { order: 2; width: 100%; display: flex; gap: 18px; padding-top: 8px; border-top: 1px solid var(--line-light); }
  .nav-link { display: inline-block; font-size: 13.5px; }
  .nav-right .btn-nav { order: 1; margin-left: auto; }
  .btn-nav { font-size: 13px; padding: 9px 14px; }
  .wordmark { font-size: 20px; }
  .step-name { min-height: 0; }
}

/* below ~850 the hero stacks: the two-column layout clips the text any
   narrower (measured at ~858px), so the video drops under the card */
@media (max-width: 850px) {
  .hero-row { grid-template-columns: 1fr; }
  .hero-card h1 { font-size: clamp(29px, 8vw, 44px); }
  /* full portrait video, never cropped: match the footage's aspect ratio */
  .hero-video {
    order: 2;
    height: auto;
    aspect-ratio: 1080 / 1308;
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
  }
}

/* ================= multi-page: nav, footer, subpages ================= */

.nav-link.on { color: var(--ink); }

.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a {
  font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none;
}
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

/* subpage intro card */
.page-head { padding-top: clamp(3rem, 5vw, 5rem); }
.page-head h1 {
  font-family: var(--f-serif);
  font-weight: 480;
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 18em;
}
.page-head h1 em { font-style: normal; color: var(--rust); }
.page-head .sub {
  margin-top: 20px;
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.62;
  color: var(--muted);
  max-width: 38em;
}

/* founders */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 2.2rem; }
.person {
  background: var(--card); border: 1px solid var(--line-light); border-radius: var(--r-xl);
  padding: 1.6rem 1.7rem;
}
.person-mark {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--rust-soft); color: var(--rust-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-size: 22px;
}
.person-photo { width: 96px; height: 96px; border-radius: 18px; object-fit: cover; display: block; }
/* the founder shots were taken in different rooms: one warm brick and mid-key,
   one white brick and high-key, so side by side they read as two sets. the mono
   base kills the orange-vs-blue clash; the per-photo pair below closes the
   exposure gap. the numbers are solved to a common mean luminance and standard
   deviation, so a new photo needs its own pair rather than these reused. */
.person-photo {
  filter: grayscale(1) sepia(0.25)
          contrast(var(--photo-contrast, 1)) brightness(var(--photo-brightness, 1));
}
.photo-warm { --photo-contrast: 1.02; --photo-brightness: 1.12; }
.photo-highkey { --photo-contrast: 0.87; --photo-brightness: 0.86; }
.person h3 { font-family: var(--f-serif); font-weight: 480; font-size: 23px; margin-top: 14px; color: var(--ink); }
.person .role { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rust); margin-top: 4px; }
.person p { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--muted); }

.stage-line { margin: 6px 0 1.4rem; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); max-width: 60ch; }

/* stat tiles (use cases) */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; margin-top: 2rem; }
.stat-tile { background: var(--card); border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: 1.05rem 1.15rem 0.95rem; }
.stat-tile .n { font-family: var(--f-serif); font-size: 2.1rem; line-height: 1; color: var(--ink); }
.stat-tile .n small { font-size: 1.1rem; color: var(--muted); }
.stat-tile .l { margin-top: 0.5rem; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }

/* use case cards */
.uc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; margin-top: 2rem; }
/* no orphan card in the 2-column band: a lone third card spans the row */
@media (min-width: 641px) and (max-width: 1040px) {
  .uc-grid > .uc-card:nth-child(3):last-child { grid-column: 1 / -1; }
}
.uc-card { background: var(--card); border: 1px solid var(--line-light); border-radius: var(--r-xl); padding: 1.5rem 1.6rem; display: flex; flex-direction: column; }
.uc-card .who { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip-label); }
.uc-card h3 { font-family: var(--f-serif); font-weight: 480; font-size: 23px; margin-top: 10px; color: var(--ink); }
.uc-card p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.uc-card .outcome {
  margin-top: auto; padding-top: 14px;
  font-family: var(--f-mono); font-size: 12px; color: var(--rust); line-height: 1.55;
}

/* security page */
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 2rem; }
.sec-card { background: var(--card); border: 1px solid var(--line-light); border-radius: var(--r-xl); padding: 1.5rem 1.6rem; }
.sec-card .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); }
.sec-card h3 { font-family: var(--f-serif); font-weight: 480; font-size: 23px; margin-top: 10px; color: var(--ink); }
.sec-card p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); }

@media (max-width: 900px) {
  .nav-link { font-size: 13px; }
  .nav-right { gap: 14px; }
}

/* prose blocks on subpages */
.prose { max-width: 62ch; }
.prose p { margin-top: 1em; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.prose p:first-child { margin-top: 1.4rem; }
/* obfuscated address: the no-JS fallback reads as words, script swaps in a link */
.mail i { font-style: italic; color: var(--muted); }

/* use-case carousel panels: demo first, story under it, caption anchored */
@media (min-width: 861px) {
  .bx--cases { align-items: stretch; }
  .bx--cases .bx-tabs { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
  .bx--cases .bx-panel { display: flex; flex-direction: column; }
  .bx--cases .bx-panel.is-on { display: flex; }
  .bx--cases .bxp-lede { margin: auto 0 0; padding-top: 16px; }
  .bx--cases .bxp-foot { padding-top: 14px; }
}
/* use-case carousel panels: lede beside the mock on wide screens */
.bxp-lede { font-size: 16px; line-height: 1.62; color: var(--ink-soft); max-width: 64ch; margin-bottom: 16px; }
@media (min-width: 861px) {
  .bx-panel.bxp-split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 10px 32px; align-items: center; }
  .bx-panel.bxp-split .bxp-lede { margin-bottom: 0; }
  .bx-panel.bxp-split .bxp-foot { grid-column: 1 / -1; }
}

/* security: commitments triad under the intro */
.triad { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-light); display: flex; flex-wrap: wrap; gap: 10px 30px; }
.triad span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.triad span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rust); margin-right: 9px; vertical-align: 1px; }

/* security: audit-ledger rows instead of a card grid */
.ledger { margin-top: 2.1rem; border-top: 1px solid var(--line); }
.ledger--tight { margin-top: 1.4rem; }
.ledger--tight .ledger-row { grid-template-columns: 118px minmax(0, 1fr); gap: 4px 18px; padding: 0.9rem 0 1rem; }
.ledger--tight .ledger-row .k { padding-top: 4px; }
.ledger--tight .ledger-row h3 { font-size: 20px; }
.ledger--tight .ledger-row p { font-size: 15px; margin-top: 5px; }
@media (max-width: 640px) { .ledger--tight .ledger-row { grid-template-columns: 1fr; } }
.ledger-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 30px; padding: 1.35rem 0 1.45rem; border-bottom: 1px solid var(--line-light); }
.ledger-row .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); padding-top: 6px; }
.ledger-row h3 { font-family: var(--f-serif); font-weight: 480; font-size: 20px; color: var(--ink); }
.ledger-row p { margin-top: 8px; font-size: 15.5px; line-height: 1.62; color: var(--muted); max-width: 58ch; }
@media (max-width: 640px) { .ledger-row { grid-template-columns: 1fr; padding: 1.1rem 0 1.2rem; } }

/* rust-edged callout aside */
.callout { margin-top: 1.7rem; border-left: 2px solid var(--rust); padding: 6px 0 6px 22px; max-width: 60ch; }
.callout .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); }
.callout p { margin-top: 8px; font-size: 15px; line-height: 1.62; color: var(--ink-soft); }

/* use cases: one-line roster, a different voice from the cards */
.roster-kicker { margin-top: 2.4rem; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chip-label); }
.roster { margin-top: 0.9rem; list-style: none; border-top: 1px solid var(--line); }
.roster li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 13px 2px; border-bottom: 1px solid var(--line-light); }
.roster .r-what { font-family: var(--f-serif); font-size: 18px; color: var(--ink); }
.roster .r-who { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip-label); text-align: right; }

/* labs: hero copy variants */
.lab { position: relative; }
.lab-rec { border: 1.5px solid var(--rust); }
.lab-tag { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); margin-bottom: 26px; }
.lab-hero { max-width: 640px; }
.lab-hero .eyebrow { margin-bottom: 22px; }
.lab-h1 {
  font-family: var(--f-serif); font-weight: 480;
  font-size: clamp(30px, 3.2vw, 42px); line-height: 1.06;
  letter-spacing: -0.015em; color: var(--ink);
}
.lab-h1 em { font-style: normal; color: var(--rust); }
.lab-hero .lab-sub {
  margin-top: 18px; font-family: var(--f-serif);
  font-size: clamp(16px, 1.6vw, 18px); line-height: 1.62; color: var(--muted);
}
.lab-spec { margin-top: 18px; font-size: 11.5px; letter-spacing: 0.1em; color: var(--ink-soft); line-height: 1.8; }
.lab-note {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-light);
  font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 70ch;
}


/* ================= v2 subpages · split layouts, index rows, standalone mocks, seq reveals ================= */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.split--top { align-items: start; }
.split h2 { max-width: 12em; }
.split .prose p:first-child { margin-top: 1rem; }

/* hero index card rows (use cases roster / security commitments) */
.dex-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chip-label); }
.dex { margin-top: 0.4rem; }
.dex-row { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 14px 2px 13px; border-bottom: 1px solid var(--line-light); }
.dex-row:last-child { border-bottom: none; }
.dex-what { display: flex; align-items: center; gap: 12px; font-family: var(--f-serif); font-size: clamp(18px, 1.8vw, 21px); color: var(--ink); }
.dex-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rust); flex: none; }
.dex-who { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chip-label); padding-left: 20px; }
.hero-index { display: flex; flex-direction: column; justify-content: center; }
.who-cloud { margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; text-align: center; gap: 2px 22px; padding: 10px 2px; }
.wc { font-family: var(--f-serif); color: var(--ink-soft); line-height: 1.4; position: relative; }
.wc-xl { font-size: clamp(30px, 3vw, 38px); color: var(--ink); font-weight: 470; }
.wc-lg { font-size: clamp(23px, 2.2vw, 28px); color: var(--ink); }
.wc-md { font-size: clamp(18px, 1.7vw, 21px); }
.wc-sm { font-size: clamp(13.5px, 1.2vw, 15.5px); color: var(--muted); }
.wc-rust { color: var(--rust); }
.wc-lt { font-weight: 360; }
.wc-hv { font-weight: 560; }
/* word-cloud scatter: baselines drift, spacing breathes unevenly */
.who-cloud .wc:nth-child(1) { transform: translateY(3px); }
.who-cloud .wc:nth-child(2) { transform: translateY(-5px); margin-right: 6px; }
.who-cloud .wc:nth-child(3) { transform: translateY(7px); margin-left: 10px; }
.who-cloud .wc:nth-child(4) { transform: translateY(-3px); }
.who-cloud .wc:nth-child(5) { transform: translateY(5px); margin-right: 14px; }
.who-cloud .wc:nth-child(6) { transform: translateY(-7px); }
.who-cloud .wc:nth-child(7) { transform: translateY(4px); margin-left: 8px; }
.who-cloud .wc:nth-child(8) { transform: translateY(-4px); margin-right: 6px; }
.who-cloud .wc:nth-child(9) { transform: translateY(6px); }
.who-cloud .wc:nth-child(10) { transform: translateY(-5px); margin-left: 12px; }
.hero-row .page-head { display: flex; flex-direction: column; justify-content: center; }

/* standalone mock stage (bx-stage without the bx machinery) */
.mockwrap {
  position: relative;
  background: var(--input-bg);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-2xl);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.mockwrap .bxp-foot { margin-top: 14px; padding-top: 0; }

/* hover spotlight on subpage cards */
.uc-card, .sec-card, .person { position: relative; overflow: hidden; will-change: transform; }
.uc-card:hover .pillar-spot, .sec-card:hover .pillar-spot, .person:hover .pillar-spot { opacity: 1; }

/* story beats (about) */
.beats { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.beats--col { margin-top: 0; grid-template-columns: 1fr; gap: 10px; }
.beats--col .beat { padding-top: 0.8rem; }
.beats--col .beat h3 { font-size: 21px; }
.beats--col .beat p { font-size: 13.5px; margin-top: 6px; }
/* the intro row sizes to its own content: the grid already stretches both
   boxes to the taller one, so the autos below center the shorter box against
   it. a fixed floor here only bought cross-page height parity, and charged
   for it in dead space on the shorter intros. labels stay pinned top-left. */
@media (min-width: 851px) {
  .hero-row--head > .box { display: flex; flex-direction: column; justify-content: flex-start; }
  .hero-row--head .page-head h1 { margin-top: auto; }
  .hero-row--head .page-head .sub { margin-bottom: auto; }
  .hero-row--head .hero-index > .section-label { margin-bottom: 0; }
  .hero-row--head .hero-index > :nth-child(2) { margin-top: auto; margin-bottom: auto; }
}
.beat { position: relative; border-top: 2px solid var(--arc); padding: 1.1rem 0.2rem 0; }
/* the story warms toward now */
.beats .beat:nth-child(1) { border-top-color: var(--arc); }
.beats .beat:nth-child(1) .beat-when { color: var(--muted); }
.beats .beat:nth-child(2) { border-top-color: var(--rust-faded); }
.beats .beat:nth-child(2) .beat-when { color: var(--rust-faded); }
.beats .beat:nth-child(3) { border-top-color: var(--rust); }

.beat h3 { font-family: var(--f-serif); font-weight: 480; font-size: 23px; margin-top: 8px; color: var(--ink); }
.beat p { margin-top: 10px; font-size: 14.5px; line-height: 1.62; color: var(--muted); }


/* fleet mini (use cases · portfolio) */
.fleet { display: grid; gap: 9px; }
.fleet-row { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-soft); }
.fleet-row .fname { color: var(--ink); min-width: 12ch; }
.fleet-bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: #e6ddcf; overflow: hidden; }
.fleet-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--rust); }
.fleet-row .fstate { color: var(--muted); }
.fleet-row .fstate.warn { color: var(--rust); }
.fleet-cap { margin-top: 10px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chip-label); }

/* seq · children stagger in when their .reveal ancestor lands */
@media (prefers-reduced-motion: no-preference) {
  .seq > * { opacity: 0; }
  .reveal.in .seq > * { animation: seqin 0.38s var(--ease-out) forwards; }
  .reveal.in .seq > :nth-child(1) { animation-delay: 0.10s; }
  .reveal.in .seq > :nth-child(2) { animation-delay: 0.24s; }
  .reveal.in .seq > :nth-child(3) { animation-delay: 0.38s; }
  .reveal.in .seq > :nth-child(4) { animation-delay: 0.52s; }
  .reveal.in .seq > :nth-child(5) { animation-delay: 0.66s; }
  .reveal.in .seq > :nth-child(6) { animation-delay: 0.80s; }
  .reveal.in .seq > :nth-child(7) { animation-delay: 0.94s; }
  .reveal.in .seq > :nth-child(8) { animation-delay: 1.08s; }
  .reveal.in .seq > :nth-child(9) { animation-delay: 1.22s; }
  .reveal.in .seq > :nth-child(10) { animation-delay: 1.36s; }
  /* slower cadence for terminal playback */
  .reveal.in .seq--term > :nth-child(1) { animation-delay: 0.15s; }
  .reveal.in .seq--term > :nth-child(2) { animation-delay: 0.55s; }
  .reveal.in .seq--term > :nth-child(3) { animation-delay: 0.95s; }
  .reveal.in .seq--term > :nth-child(4) { animation-delay: 1.35s; }
  .reveal.in .seq--term > :nth-child(5) { animation-delay: 1.80s; }
  .reveal.in .seq--term > :nth-child(6) { animation-delay: 2.30s; }
  .reveal.in .seq--term > :nth-child(7) { animation-delay: 2.85s; }
  .reveal.in .seq--term > :nth-child(8) { animation-delay: 3.30s; }
}

@media (max-width: 850px) {
  .hero-row .hero-index { order: 2; }
}


/* ================= v3 · use-case showcase mocks + print ================= */

.split--flip > :first-child { order: 2; }
@media (max-width: 850px) { .split--flip > :first-child { order: 0; } }

.uc-outcome { margin-top: 18px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--rust); }

/* mini dashboard */
.dash { display: grid; gap: 8px; }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-tile { background: var(--card); border: 1px solid var(--line-light); border-radius: 12px; padding: 8px 12px; }
.dash-num { font-family: var(--f-serif); font-size: 21px; color: var(--ink); display: block; }
.dash-cap { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chip-label); }
.dash-rows { background: var(--card); border: 1px solid var(--line-light); border-radius: 12px; padding: 12px 14px; display: grid; gap: 9px; }
.dash-alert { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--rust); color: var(--rust); border-radius: 12px; padding: 8px 12px; font-size: 12px; }

/* slack thread */
.slk { background: var(--card); border: 1px solid var(--line-light); border-radius: 12px; padding: 12px 16px 16px; }
.slk-head { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip-label); padding: 4px 0 10px; border-bottom: 1px solid var(--line-light); margin-bottom: 4px; }
.slk-msg { display: flex; gap: 10px; align-items: flex-start; padding-top: 12px; }
.slk-av { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--f-serif); font-size: 13px; color: #fff; background: var(--ink); }
.slk-av.bot { background: var(--rust); }
.slk-body { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.slk-name { font-weight: 600; font-size: 12.5px; color: var(--ink); margin-right: 6px; }
.slk-time { font-family: var(--f-mono); font-size: 10px; color: var(--chip-label); }
.slk-card { display: block; margin-top: 7px; border: 1px solid var(--line-light); border-left: 3px solid var(--rust); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; background: var(--input-bg); color: var(--ink-soft); }

/* onboarding checklist */
.chk { background: var(--card); border: 1px solid var(--line-light); border-radius: 12px; padding: 12px 16px 14px; }
.chk-head { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip-label); padding: 4px 0 10px; border-bottom: 1px solid var(--line-light); }
.chk-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px dashed var(--line-light); font-size: 13.5px; color: var(--ink-soft); }
.chk-row .t { flex: 1; }
.chk-row .w { font-family: var(--f-mono); font-size: 10.5px; color: var(--chip-label); }
.chk-mark { width: 18px; height: 18px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.chk-mark.done { background: var(--rust); color: #fff; }
.chk-mark.todo { border: 1.5px solid var(--line); }
.chk-prog { height: 6px; border-radius: var(--r-pill); background: #e6ddcf; margin-top: 12px; overflow: hidden; }
.chk-prog i { display: block; height: 100%; background: var(--rust); border-radius: var(--r-pill); }
.chk-meta { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chip-label); margin-top: 8px; }

/* print · pages read as documents: no chrome, no pinned cards, everything visible */
@media print {
  .nav-wrap, .closing, .foot, .bx-watermark { display: none !important; }
  .stack-card { position: static !important; box-shadow: none !important; animation: none !important; }
  .card-fit::after, .card-how::after, .card-build::after { display: none !important; }
  .reveal, .seq > *, [data-stagger] span { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .box { break-inside: avoid; }
}


/* ================= v4 · story kickers, security architecture diagram ================= */

.beat-when { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rust); }

.label-rust { color: var(--rust); }
@media (min-width: 851px) { .hero-row--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sec-card--wide { grid-column: 1 / -1; }
@media (min-width: 941px) { .sec-card--wide { grid-column: span 2; } }
.sec-card, #gate { scroll-margin-top: 110px; }

/* chips are labels, not controls: hover ties them to their card, nothing clicks */
.arch-chip:hover { border-color: var(--rust); color: var(--rust); }
/* hover ties: relatives light up together */
[data-tie] { transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out); }
.arch-chip.tie-hot { border-color: var(--rust-faded); color: var(--rust-faded); background: var(--card); }
.sec-card.tie-hot { border-color: var(--rust-faded); }
.arch-link.tie-hot .arch-arrow, .arch-link.tie-hot p { color: var(--rust-faded); }
.arch-zone.tie-hot { border-color: var(--rust-faded); }
#gate.tie-hot { outline: 1px solid var(--rust-faded); outline-offset: -1px; }
.sec-card:hover { border-color: var(--rust); }
.sec-card--wide p { max-width: 72ch; }
.sec-asterisk { font-family: var(--f-body); font-size: 13.5px; color: var(--muted); margin: 12px 0 2px; }
.h2-sm { font-size: clamp(26px, 2.8vw, 32px); }
.box--center { display: flex; flex-direction: column; justify-content: center; }

/* boundary diagram · your cloud vs stoda, one revocable role between */
.arch { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr); gap: 14px; align-items: stretch; margin: 1.9rem 0 2.2rem; }
.arch-zone { border-radius: var(--r-xl); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.arch-you { border: 1.5px solid var(--ink); background: var(--card); }
.arch-stoda { border: 1.5px dashed var(--line); background: var(--input-bg); }
.arch-label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chip-label); display: flex; justify-content: space-between; gap: 10px; }
.arch-label b { font-weight: 500; color: var(--ink-soft); }
.arch-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.arch-chip { font-size: 12.5px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px; background: var(--input-bg); color: var(--ink-soft); }
.arch-you .arch-chip { background: var(--card); }
.arch-chip .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--rust); margin-right: 7px; vertical-align: 1px; }
.arch-foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line-light); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.arch-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 0 4px; min-width: 140px; }
.arch-arrow { font-size: 22px; line-height: 1; color: var(--rust); }
.arch-link p { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.7; }
@media (max-width: 850px) {
  .arch { grid-template-columns: 1fr; }
  .arch-arrow { transform: rotate(90deg); }
}

@media print {
  .card-diff::after { display: none !important; }
  .arch-you { border-color: #000; }
}

/* Compact nav. Five links need ~312px and the full CTA another ~200px, which
   stops fitting one row somewhere around 760px. Below that the links collapse
   behind a menu button and the CTA drops to its short label. .nav-right stays
   display:contents so the panel is a flex item of .nav itself and can drop to
   its own full-width row. */
.nav-toggle { display: none; }
.nav-cta-short { display: none; }

/* Measured: the full bar needs a 741px viewport with the long CTA but only
   678px with the short one, so shortening the label first keeps all five links
   visible ~60px further down before anything has to hide. */
@media (max-width: 900px) {
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }
}

@media (max-width: 720px) {
  .nav { flex-wrap: wrap; row-gap: 10px; column-gap: 10px; justify-content: flex-start; }
  .nav-right { display: contents; }
  .nav-right .btn-nav { order: 1; margin-left: auto; }
  .nav-toggle {
    order: 2; display: flex; flex-direction: column; justify-content: center; gap: 4.5px;
    width: 38px; height: 38px; padding: 0 8px; flex: 0 0 auto;
    background: transparent; border: 0; border-radius: 10px; cursor: pointer;
  }
  .nav-toggle span {
    display: block; width: 100%; height: 1.5px; border-radius: 2px;
    background: var(--ink); transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-links { display: none; }
  /* The closed bar is a pill, but that radius turns the open panel into an
     ellipse once the card grows tall, so square it off while open. */
  .nav.open { border-radius: 24px; }
  .nav.open .nav-links {
    order: 3; width: 100%; display: flex; flex-direction: column;
    align-items: flex-start; gap: 14px; text-align: left;
    padding-top: 12px; padding-bottom: 4px;
    border-top: 1px solid var(--line-light);
  }
  .nav.open .nav-link { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}

/* ---------- blog ---------- */

/* listing rows: mono date + serif title + one-paragraph excerpt, hairline
   rules. Same skeleton as the ledger but a reading voice, not an audit one. */
.post-list { margin-top: 2.4rem; }
.post-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 28px;
  padding: 28px 0;
  border-top: 1px solid var(--line-light);
  text-decoration: none;
  color: inherit;
}
.post-row:last-child { border-bottom: 1px solid var(--line-light); }
.post-date {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chip-label);
  padding-top: 5px;
}
.post-row h3 {
  font-family: var(--f-serif);
  font-weight: 480;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color var(--dur-short) var(--ease-out);
}
.post-row:hover h3 { color: var(--rust); }
.post-excerpt { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 58ch; }
.post-read {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rust);
}
@media (max-width: 640px) {
  .post-row { grid-template-columns: 1fr; gap: 4px; }
  .post-date { padding-top: 0; }
}

/* post: page-head is the article head; byline closes it with a hairline */
.post-byline {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 66ch;
}
.post-body { max-width: 66ch; }
.post-body p {
  margin-top: 1.15em;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.post-body p:first-child { margin-top: 1.6rem; }
/* article subheads are prose structure, not page sections: serif, no labels,
   and smaller than the .box h2 scale they'd otherwise inherit */
.post-body h2 {
  margin-top: 2.4em;
  font-family: var(--f-serif);
  font-weight: 480;
  font-size: clamp(24px, 2.4vw, 29px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.post-body a { color: var(--rust); text-decoration-color: var(--rust-faded); }