@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

:root {
  --bg: #F6F3EC;
  --ink: #1A1917;
  --g1: #5C5850;   /* secondary text */
  --g2: #8F8A80;   /* strokes, automated nodes */
  --g3: #DDD7CB;   /* rules, faint lines */
  --amber: #D4920F;     /* the owner's call: fills and strokes */
  --amber-ink: #7E5300; /* the owner's call: text */
  --row: 46px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --pad: 24px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

button, input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--amber-ink);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Header */
.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 22px;
  font-size: .9375rem;
}
.top-name { font-weight: 600; letter-spacing: -.01em; }
.top-cta {
  color: var(--g1);
  text-decoration: none;
  padding-block: 8px;
}
.top-cta:hover { color: var(--ink); }

/* Type */
.eyebrow {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g1);
  margin-bottom: 14px;
}

h1 {
  font-size: clamp(2.5rem, 8.4vw + .5rem, 5.25rem);
  line-height: 1.02;
  font-weight: 680;
  letter-spacing: -.035em;
  max-width: 11ch;
}
.h1-turn { color: var(--g1); }

h2 {
  font-size: clamp(1.75rem, 3.2vw + 1rem, 2.875rem);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.028em;
  max-width: 20ch;
}

h3 {
  font-size: 1.25rem;
  font-weight: 620;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.lede {
  margin-top: 22px;
  font-size: clamp(1.125rem, .6vw + 1rem, 1.3125rem);
  line-height: 1.45;
  color: var(--g1);
  max-width: 30ch;
}

.cta {
  display: inline-block;
  margin-top: 28px;
  padding-block: 6px;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
}
.cta span { display: inline-block; transition: transform .25s var(--ease); }
.cta:hover span { transform: translateX(4px); }

.caption {
  margin-top: 20px;
  color: var(--g1);
  font-size: .9375rem;
}

section { padding-block: clamp(72px, 11vw, 144px); }
section + section, .story-wrap + section { border-top: 1px solid var(--g3); }

/* Flow (shared by hero and decision) */
.flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.flow::before {
  content: "";
  position: absolute;
  left: 11.5px;
  top: calc(var(--row) / 2);
  bottom: calc(var(--row) / 2);
  width: 1px;
  background: var(--g3);
}
.step {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 16px;
  align-items: center;
  height: var(--row);
  white-space: nowrap;
}
.node {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--g2);
  transition: background-color .3s, border-color .3s;
}
.step .label {
  color: var(--g1);
  font-size: .9375rem;
}
.step.passed .node { background: var(--g2); }
.step--gate .node {
  width: 12px;
  height: 12px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--amber);
  border-color: var(--amber);
}
.step--gate .label {
  color: var(--amber-ink);
  font-weight: 620;
  font-size: 1rem;
}
.step--gate small {
  font-size: .8125rem;
  font-weight: 450;
  margin-left: 8px;
}
.flow--live .step--gate .node::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1.5px solid var(--amber);
  border-radius: 1px;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.token {
  position: absolute;
  left: 12px;
  top: 0;
  z-index: 2;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

/* 1. Hero */
.hero {
  display: grid;
  gap: 48px;
  padding-top: clamp(32px, 7vw, 96px);
}
.hero-flow { margin: 0; }
.legend {
  display: flex;
  gap: 22px;
  margin-top: 18px;
  font-size: .8125rem;
  color: var(--g1);
}
.legend span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  vertical-align: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--g2);
}
.legend .legend-gate::before {
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--amber);
  border-color: var(--amber);
}

/* 2. Story */
.story-wrap { padding-bottom: 0; }
.story {
  display: grid;
  margin-top: 8px;
}
.story-fig {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 calc(var(--pad) * -1);
  padding: 12px var(--pad) 8px;
  background: var(--bg);
  height: 54vh;
  height: 54svh;
  border-bottom: 1px solid var(--g3);
}
.story-fig svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.story-steps { padding-bottom: 20vh; }
.story-step {
  min-height: 52vh;
  padding-top: 8vh;
  max-width: 26rem;
}
.step-num {
  font-size: .8125rem;
  color: var(--g1);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.story-step h3 { font-size: clamp(1.375rem, 1.4vw + 1rem, 1.75rem); }
.story-step p:last-child {
  margin-top: 8px;
  color: var(--g1);
  font-size: 1.0625rem;
}

/* SVG figure states */
.story-fig svg text {
  font-size: 13px;
  fill: var(--ink);
  transition: fill .6s;
}
.p-messy, .p-loop, .p-straight {
  fill: none;
  stroke: var(--g2);
  stroke-width: 1.2;
  transition: opacity .7s var(--ease);
}
.p-loop { stroke-dasharray: 3 4; }
.p-straight { stroke: var(--g3); opacity: 0; }
.t-note {
  font-size: 11px !important;
  fill: var(--g1) !important;
  transition: opacity .5s !important;
}
.s {
  transform: translateX(var(--dx));
  transition: transform .9s var(--ease);
}
.s .n {
  fill: var(--bg);
  stroke: var(--ink);
  stroke-width: 1.5;
  transition: fill .6s, stroke .6s;
}
.who {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  transition: opacity .6s, stroke .6s;
}
.t-edge {
  font-size: 12px !important;
  fill: var(--amber-ink) !important;
  opacity: 0;
  transition: opacity .6s .2s !important;
}
.svg-token {
  fill: var(--ink);
  opacity: 0;
}

[data-state="b"] .s, [data-state="c"] .s { transform: none; }
[data-state="b"] .p-messy, [data-state="c"] .p-messy,
[data-state="b"] .p-loop, [data-state="c"] .p-loop,
[data-state="b"] .t-note, [data-state="c"] .t-note { opacity: 0; }
[data-state="b"] .p-straight, [data-state="c"] .p-straight { opacity: 1; }
[data-state="b"] .s:not(.gate) .who, [data-state="c"] .s:not(.gate) .who { opacity: 0; }
[data-state="b"] .s:not(.gate) .n, [data-state="c"] .s:not(.gate) .n { stroke: var(--g2); }
[data-state="b"] .s:not(.gate) text, [data-state="c"] .s:not(.gate) text { fill: var(--g1); }
[data-state="b"] .svg-token, [data-state="c"] .svg-token {
  animation: drip 3.6s var(--ease) infinite;
}
[data-state="b"] .svg-token--2, [data-state="c"] .svg-token--2 { animation-delay: -1.8s; }
[data-state="c"] .gate .n { fill: var(--amber); stroke: var(--amber); }
[data-state="c"] .gate text { fill: var(--amber-ink); font-weight: 620; }
[data-state="c"] .gate .who { stroke: var(--amber-ink); }
[data-state="c"] .t-edge { opacity: 1; }
@keyframes drip {
  0%   { transform: translateY(0);     opacity: 0; }
  10%  { opacity: 1; }
  80%  { transform: translateY(214px); opacity: 1; }
  100% { transform: translateY(214px); opacity: 0; }
}

/* 3. Decision */
.decide-grid {
  display: grid;
  gap: 40px;
  margin-top: 48px;
}
.stage { display: grid; }
.stage > div {
  grid-area: 1 / 1;
  transition: opacity .4s var(--ease), visibility 0s;
}
.js .stage-ask, .js .stage-done { visibility: hidden; opacity: 0; }
.js .stage-wait { visibility: visible; opacity: 1; }
.no-js .stage-wait, .no-js .stage-done { display: none; }
.decide.is-asking .stage-wait,
.decide.is-done .stage-wait { visibility: hidden; opacity: 0; }
.decide.is-asking .stage-ask { visibility: visible; opacity: 1; }
.decide.is-done .stage-done { visibility: visible; opacity: 1; }
.stage-wait p {
  color: var(--g1);
  padding-top: 4px;
}
.ask-q {
  font-size: clamp(1.375rem, 1.6vw + 1rem, 1.875rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.02em;
  padding-left: 18px;
  border-left: 2px solid var(--amber);
  max-width: 26ch;
}
.ask-q:focus { outline: none; }
.options {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--g3);
}
.options li { border-bottom: 1px solid var(--g3); }
.opt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
}
.opt::after {
  content: "→";
  color: var(--amber-ink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s, transform .2s var(--ease);
}
.opt:hover::after, .opt:focus-visible::after { opacity: 1; transform: none; }
.opt:hover { color: var(--amber-ink); }
.own { margin-top: 22px; }
.own label {
  display: block;
  font-size: .875rem;
  color: var(--g1);
  margin-bottom: 4px;
}
.own-row {
  display: flex;
  gap: 16px;
  align-items: center;
  border-bottom: 1.5px solid var(--ink);
}
.own input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font-size: 1.0625rem;
}
.own input::placeholder { color: var(--g1); }
.own input:focus { outline: none; }
.own-row:focus-within { border-bottom-color: var(--amber-ink); }
.own button {
  padding: 10px 0;
  background: none;
  border: 0;
  font-weight: 600;
  cursor: pointer;
}
.own button:hover { color: var(--amber-ink); }
.stage-done:focus { outline: none; }
.done-line {
  font-size: clamp(1.375rem, 1.6vw + 1rem, 1.875rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.02em;
  max-width: 26ch;
}
.done-sub { margin-top: 10px; color: var(--g1); }
.replay {
  margin-top: 24px;
  padding: 6px 0;
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  font-weight: 600;
  cursor: pointer;
}
.flow.flash .step--gate .node { animation: flash .5s var(--ease) 3; }
@keyframes flash {
  50% { transform: rotate(45deg) scale(1.7); }
}

/* 3b. Leverage */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.lev-beat {
  display: grid;
  gap: 40px;
}
.lev-beat + .lev-beat { margin-top: clamp(80px, 10vw, 128px); }
.lev-copy .caption { max-width: 36ch; }
.week, .runs { margin: 0; }
.week-label {
  font-size: .8125rem;
  color: var(--g1);
  margin-bottom: 14px;
}
.week-grid {
  display: grid;
  grid-template-columns: 38px repeat(8, 1fr);
  gap: 6px;
  max-width: 460px;
}
.week-day {
  align-self: center;
  font-size: .8125rem;
  color: var(--g1);
}
.cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--g1);
  border: 1.5px solid var(--g1);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
  transition-delay: calc(var(--i) * 48ms);
}
.week[data-stage="2"] .cell { background: transparent; border-color: var(--g2); }
.week[data-stage="2"] .cell--you { background: var(--amber); border-color: var(--amber); transition-delay: 0s; }
.week.is-reset .cell,
.week.is-reset .back-bar,
.week.is-reset .week-back > p { transition: none; }
.week-back {
  max-width: 460px;
  margin-top: 28px;
}
.back-label {
  font-size: .9375rem;
  font-weight: 650;
  color: var(--ink);
}
.back-track {
  display: block;
  height: 10px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--g3);
  overflow: hidden;
}
.back-bar {
  display: block;
  height: 100%;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 2.3s linear;
}
.week-back .caption { margin-top: 10px; max-width: 36ch; }
.week-back > p { transition: opacity .5s var(--ease) 1.8s; }
.week[data-stage="0"] .back-bar { transform: scaleX(0); }
.week[data-stage="0"] .week-back > p { opacity: 0; }
.week-key {
  display: grid;
  margin-top: 18px;
  font-size: .875rem;
  color: var(--g1);
}
.key-before, .key-after {
  grid-area: 1 / 1;
  transition: opacity .4s var(--ease);
}
.key-after {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.key-after li { transition: opacity .4s var(--ease); }
.week[data-stage="0"] .key-after,
.week:not([data-stage="0"]) .key-before { opacity: 0; }
.k-you { color: var(--amber-ink); font-weight: 600; }
.sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  vertical-align: -1px;
  border-radius: 2px;
  border: 1.5px solid var(--g1);
  background: var(--g1);
}
.sw--auto { background: transparent; border-color: var(--g2); }
.sw--you { background: var(--amber); border-color: var(--amber); }
.lev-btn {
  margin-top: 22px;
  padding: 6px 0;
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  font-weight: 600;
  cursor: pointer;
}
.runs {
  display: grid;
  gap: 32px;
}
.runs-flow { position: relative; }
.run-token {
  position: absolute;
  left: 12px;
  top: calc(var(--row) / 2);
  z-index: 2;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--g1);
  opacity: 0;
  pointer-events: none;
  animation: run 4s linear infinite paused;
}
.run-token:nth-of-type(2) { animation-delay: -1.6s; }
.run-token:nth-of-type(3) { animation-delay: -3.2s; }
.runs.is-on .run-token { animation-play-state: running; }
/* Each token rests on a node, then hops to the next one. */
@keyframes run {
  0%   { transform: translateY(0); opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  4%   { transform: translateY(0); opacity: 1; }
  15%  { transform: translateY(0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  20%  { transform: translateY(var(--row)); }
  35%  { transform: translateY(var(--row)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  40%  { transform: translateY(calc(var(--row) * 2)); }
  55%  { transform: translateY(calc(var(--row) * 2)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  60%  { transform: translateY(calc(var(--row) * 3)); }
  75%  { transform: translateY(calc(var(--row) * 3)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  80%  { transform: translateY(calc(var(--row) * 4)); opacity: 1; }
  96%  { transform: translateY(calc(var(--row) * 4)); opacity: 0; }
  100% { transform: translateY(calc(var(--row) * 4)); opacity: 0; }
}
.night {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  color: var(--g1);
  font-variant-numeric: tabular-nums;
}
.night svg { fill: currentColor; }
.count {
  margin-top: 6px;
  font-size: clamp(2rem, 2.4vw + 1.2rem, 2.75rem);
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.count-n { display: inline-block; min-width: 5ch; }
@media (min-width: 768px) {
  .count { white-space: nowrap; font-size: clamp(2rem, .6vw + 1.5rem, 2.25rem); }
}
.bar-row {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  font-size: .875rem;
  color: var(--g1);
}
.bar {
  display: block;
  height: 6px;
  transform-origin: left center;
}
.bar--jobs {
  background: var(--g2);
  transform: scaleX(calc(.04 + var(--p, 1) * .96));
}
.bar--you { background: var(--ink); width: 18%; }
.lev-line {
  margin-top: clamp(80px, 10vw, 128px);
  padding-top: 28px;
  border-top: 1px solid var(--ink);
  font-size: clamp(1.5rem, 1.8vw + 1rem, 2.25rem);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.15;
  max-width: 24ch;
}

/* 4. Owner view */
.lanes {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  border-bottom: 1px solid var(--g3);
}
.lane {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name stat" "track track";
  align-items: center;
  gap: 12px 16px;
  padding: 18px 0;
  border-top: 1px solid var(--g3);
}
.lane-name { grid-area: name; font-weight: 550; }
.lane-stat {
  grid-area: stat;
  color: var(--g1);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.track {
  grid-area: track;
  position: relative;
  height: 14px;
  overflow: hidden;
}
.track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--g3);
}
.mover {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  animation: move var(--t) linear infinite;
  animation-delay: var(--d);
}
.mover::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--g2);
}
@keyframes move {
  from { transform: translateX(-8px); }
  to   { transform: translateX(100%); }
}
.lane--stuck .mover { width: 58%; animation-name: move-stop; }
@keyframes move-stop {
  0%   { transform: translateX(0);    opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.queue {
  position: absolute;
  left: 58%;
  top: 50%;
  display: flex;
  gap: 3px;
  transform: translateY(-50%);
}
.queue i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g2);
}
.lane-gate {
  position: absolute;
  left: calc(58% + 46px);
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 1px;
  background: var(--amber);
  transform: rotate(45deg);
}
.lane--stuck .track::after {
  content: "";
  position: absolute;
  left: calc(58% + 62px);
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--bg);
  border-top: 1px dashed var(--g3);
}
.lane--stuck .lane-name { color: var(--ink); }
.lane-stat.stuck {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--amber-ink);
  font-weight: 620;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.lane-stat.stuck span { display: inline-block; transition: transform .25s var(--ease); }
.lane-stat.stuck:hover span { transform: translateX(4px); }

/* 5. How it works */
.how-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: 40px;
}
.how-list li { border-top: 1px solid var(--ink); padding-top: 18px; }
.how-n {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--g1);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.how-list h3 { font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem); letter-spacing: -.025em; }
.how-list p { margin-top: 10px; color: var(--g1); max-width: 30ch; }
.how-list .how-time { color: var(--ink); font-weight: 550; }

/* 6. Founding */
.founding h2 { max-width: 18ch; }
.founding-offer {
  margin-top: 22px;
  font-size: clamp(1.125rem, .6vw + 1rem, 1.3125rem);
  font-weight: 550;
}
.founding-note { margin-top: 6px; color: var(--g1); }

/* 7. Footer */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 32px 48px;
  border-top: 1px solid var(--g3);
  font-size: .9375rem;
  color: var(--g1);
}
.foot a { color: var(--ink); text-underline-offset: 4px; }

/* Desktop */
@media (min-width: 900px) {
  :root { --pad: 48px; --row: 50px; }
  .hero {
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: 64px;
    min-height: min(82vh, 760px);
  }
  .step .label { font-size: 1rem; }
  .story {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .story-fig {
    order: 2;
    top: 8vh;
    height: 84vh;
    max-height: 640px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .story-steps { order: 1; padding-bottom: 30vh; }
  .story-step {
    min-height: 74vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
  }
  .decide-grid {
    grid-template-columns: 320px 1fr;
    gap: 80px;
    align-items: start;
  }
  .stage { padding-top: 8px; }
  .lev-beat {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .runs { grid-template-columns: auto 1fr; gap: 48px; }
  .lane {
    grid-template-columns: 180px 1fr 240px;
    grid-template-areas: "name track stat";
    gap: 32px;
    padding: 22px 0;
  }
  .how-list { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

/* Reduced motion: every animation lands on its end state. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .flow--live .step--gate .node::after { animation: none; opacity: 0; }
  .svg-token { animation: none !important; opacity: 0 !important; }
  .mover { animation-play-state: paused; }
  .flow.flash .step--gate .node { animation: none; }
  .run-token { animation: none; opacity: 0; }
  .cta:hover span, .lane-stat.stuck:hover span { transform: none; }
}