@charset "utf-8";
/* ============================================================================
   page-demo-follow-up.css
   Page-scoped styles for /demos/follow-up.html
   Theme-variable only. Works on dark and light bands.
   Sections, in document order:
     1  Hero
     2  Run console shell
     3  Scenario strip
     4  Stage timeline (run states)
     5  Stage: scenes + chat panel
     6  Stage: result rail
     7  Controls
     8  Ledger + completion
     9  Case tabs
    10  Endings
    11  Stops
    12  Gate figure
    13  Rules / never
    14  Two ways
    15  More demos
    16  CTA
    17  Motion + responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Hero */

.fu-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.fu-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(var(--s-10), 5vw, var(--s-20));
}

.fu-hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--s-6);
  min-width: 0;
}

/* each span is its own line, so the navy accent never starts mid-line */
.fu-hero__title > span {
  display: block;
}

.fu-hero__title {
  margin: 0;
  max-width: 13ch;
  letter-spacing: -0.022em;
  line-height: 0.98;
  text-wrap: balance;
}

/* inks DOWN into navy on the light band — no clip-text gradient, because it
   breaks across a wrapped line and drops the second line to black */
.fu-hero__title-accent {
  color: var(--blue-deep);
}

.fu-hero__lead {
  margin: 0;
  max-width: 44ch;
  color: var(--body);
}

.fu-hero__cta {
  margin-top: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
}

/* plain-language category line: a cold visitor should not have to infer what
   is being sold from the vocabulary of the demo */
.fu-hero__what {
  margin: 0;
  max-width: 54ch;
  padding-left: var(--s-5);
  border-left: 2px solid var(--line-strong);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--body);
}

.fu-hero__what b {
  color: var(--ink);
  font-weight: 600;
}

/* The page carries exactly one synthetic-data notice, and it sits inside the
   run console with the invented customer — the first place a visitor could
   mistake this for a client record. It is a fact about the demonstration, not
   a warning, so it is set in the quiet neutral register. Amber on this page is
   reserved for one thing: the point where a person has to decide. */
.fu-run__note {
  margin: var(--s-1) 0 0;
  max-width: 66ch;
}

.fu-run .synthetic-note {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
}

/* .band--light .synthetic-note strong is what inks the lead-in amber; this has
   to out-specify it, on both band families */
.band .fu-run .synthetic-note > span > strong {
  color: var(--body);
}

/* figure ------------------------------------------------------------------ */

.fu-hero__figure {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  min-width: 0;
  margin: 0;
}

/* beats core's generic `main svg[viewBox]:not([width])` cap */
.fu-hero__figure .fu-seq[viewBox] {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 470px;
  height: auto;
  overflow: visible;
  color: var(--body);
}

/* two cuts of the same sequence, one shown at a time. The narrow cut is a
   redrawn figure, not a shrunk one: 300 units wide instead of 446, one column
   instead of two, and short labels — so nothing scales below the floor. */
.fu-hero__figure .fu-seq--narrow[viewBox] {
  display: none;
}

.fu-seq text {
  font-family: var(--font-ui);
}

/* the one label system shared by every diagram on this page */
.fu-seq__key,
.fu-gk {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  fill: var(--muted);
}

.fu-seq__key--amber,
.fu-gk--amber {
  fill: var(--amber);
}

.fu-seq__key--accent,
.fu-gk--accent {
  fill: var(--accent);
}

.fu-seq__t,
.fu-gt {
  font-size: 14px;
  font-weight: 600;
  fill: var(--ink);
}

.fu-seq__s,
.fu-gs {
  font-size: 12px;
  fill: var(--body);
}

/* the narrow cut renders at roughly 1:1, so these are close to their literal
   pixel sizes — key 11 and sub 12 clear the 9px legibility floor at 375 */
.fu-seq--narrow .fu-seq__key {
  font-size: 11px;
  letter-spacing: 1.05px;
}

.fu-seq--narrow .fu-seq__t {
  font-size: 14.5px;
}

.fu-seq--narrow .fu-seq__s {
  font-size: 12px;
}

.fu-hero__figcap {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
}

/* ------------------------------------------------- 2. Run console shell */

.fu-stage-band {
  position: relative;
}

.fu-run {
  display: grid;
  gap: clamp(var(--s-6), 2.4vw, var(--s-10));
  padding: clamp(var(--s-6), 2.6vw, var(--s-12));
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

/* run-player visibility: root carries data-run-index="0..4" ---------------- */

.fu-run [data-only] {
  display: none;
}

.fu-run[data-run-index="0"] [data-only="0"],
.fu-run[data-run-index="1"] [data-only="1"],
.fu-run[data-run-index="2"] [data-only="2"],
.fu-run[data-run-index="3"] [data-only="3"],
.fu-run[data-run-index="4"] [data-only="4"] {
  display: grid;
  animation: fu-rise var(--d-3) var(--e-out) both;
}

/* chat messages accumulate: hide anything later than the current step */
.fu-run[data-run-index="0"] [data-at="1"],
.fu-run[data-run-index="0"] [data-at="2"],
.fu-run[data-run-index="0"] [data-at="3"],
.fu-run[data-run-index="0"] [data-at="4"],
.fu-run[data-run-index="1"] [data-at="2"],
.fu-run[data-run-index="1"] [data-at="3"],
.fu-run[data-run-index="1"] [data-at="4"],
.fu-run[data-run-index="2"] [data-at="3"],
.fu-run[data-run-index="2"] [data-at="4"],
.fu-run[data-run-index="3"] [data-at="4"] {
  display: none;
}

/* ------------------------------------------------- 3. Scenario strip */

.fu-scenario {
  display: grid;
  gap: var(--s-5);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line-soft);
}

.fu-scenario__label {
  margin: 0;
}

.fu-scenario__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5) var(--s-8);
  margin: 0;
}

.fu-scenario__list > div {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.fu-scenario__list dt {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fu-scenario__list dd {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}

.fu-scenario__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
}

/* ------------------------------------------------- 3b. Transport / player */

.fu-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  padding: var(--s-4) clamp(var(--s-4), 1.6vw, var(--s-6));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card-2);
}

.fu-player__transport {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.fu-tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s-3);
  margin: 0;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--body);
  background: var(--bg-card-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition:
    background var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out);
}

.fu-tbtn:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--bg-card-2);
}

.fu-tbtn svg {
  flex: none;
  display: block;
}

/* the one primary control on this band */
.fu-tbtn--main {
  padding-inline: var(--s-5);
  font-weight: 600;
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.fu-tbtn--main:hover {
  color: #fff;
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.fu-player__meter {
  display: grid;
  gap: var(--s-2);
  flex: 1 1 220px;
  min-width: 0;
}

.fu-player__pos {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.fu-player__pos b {
  font-weight: 600;
  color: var(--ink);
}

.fu-player__track {
  display: block;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

.fu-player__fill {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--d-3) var(--e-out);
}

.fu-run[data-run-index="0"] .fu-player__fill { width: 20%; }
.fu-run[data-run-index="1"] .fu-player__fill { width: 40%; }
.fu-run[data-run-index="2"] .fu-player__fill { width: 60%; }
.fu-run[data-run-index="3"] .fu-player__fill { width: 80%; }
.fu-run[data-run-index="4"] .fu-player__fill { width: 100%; background: var(--amber); }

/* ------------------------------------------------- 4. Stage timeline */

.fu-tl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fu-tl__item {
  display: flex;
  min-width: 0;
  --fu-step: var(--line);
  --fu-step-bg: transparent;
}

.fu-tl__btn {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--s-4) var(--s-4) var(--s-5);
  text-align: left;
  font: inherit;
  color: var(--body);
  background: var(--fu-step-bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: inset 0 3px 0 0 var(--fu-step);
  cursor: pointer;
  transition:
    background var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out),
    box-shadow var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out);
}

.fu-tl__btn:hover {
  border-color: var(--line-strong);
  background: var(--bg-card-2);
}

.fu-tl__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 24px;
  height: 24px;
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}

.fu-tl__time {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* every chip carries the same three rows — number+time, title, status — and the
   title reserves two lines, so the status line lands on one baseline across all
   five and the chips read as one row rather than five different shapes */
.fu-tl__title {
  font-size: var(--t-sm);
  line-height: 1.35;
  min-height: 2.7em;
  color: var(--body);
  text-wrap: balance;
}

.fu-tl__gate {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--muted);
}

.fu-tl__gate::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint);
  transform: translateY(-2px);
}

/* run states — past recedes, future dims, current is unmistakable.
   Copy always stays real and readable; the ladder is surface + weight. */
.fu-tl__item[data-run-state="future"] .fu-tl__title {
  color: var(--muted);
}

.fu-tl__item[data-run-state="past"] {
  --fu-step: var(--line-strong);
}

.fu-tl__item[data-run-state="past"] .fu-tl__title {
  color: var(--muted);
}

.fu-tl__item[data-run-state="past"] .fu-tl__n {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--bg-card-3);
}

.fu-tl__item[data-run-state="current"] {
  --fu-step: var(--accent);
  --fu-step-bg: var(--bg-card-3);
}

.fu-tl__item[data-run-state="current"] .fu-tl__btn {
  border-color: var(--line-strong);
  box-shadow:
    inset 0 3px 0 0 var(--fu-step),
    0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
}

.fu-tl__item[data-run-state="current"] .fu-tl__title {
  color: var(--ink);
  font-weight: 600;
}

.fu-tl__item[data-run-state="current"] .fu-tl__time {
  color: var(--body);
}

/* the current chip sits one step up the surface ladder, and --muted only
   clears 4.38:1 against --bg-card-3 — so its status line steps up too */
.fu-tl__item[data-run-state="current"]:not(.fu-tl__item--human) .fu-tl__gate {
  color: var(--body);
}

.fu-tl__item[data-run-state="current"] .fu-tl__n {
  color: var(--void);
  border-color: var(--accent);
  background: var(--accent);
  font-weight: 600;
}

.fu-tl__item--human {
  --fu-step: color-mix(in srgb, var(--amber) 45%, var(--line));
}

.fu-tl__item--human[data-run-state="current"] {
  --fu-step: var(--amber);
}

.fu-tl__item--human[data-run-state="current"] .fu-tl__btn {
  box-shadow:
    inset 0 3px 0 0 var(--fu-step),
    0 0 0 2px color-mix(in srgb, var(--amber) 34%, transparent);
}

.fu-tl__item--human[data-run-state="current"] .fu-tl__n {
  color: var(--void);
  border-color: var(--amber-bright, var(--amber));
  background: var(--amber-bright, var(--amber));
}

.fu-tl__item--human .fu-tl__gate {
  color: var(--amber);
}

.fu-tl__item--human .fu-tl__gate::before {
  background: var(--amber);
}

/* ------------------------------------------------- 4b. Cause and effect */

.fu-flows {
  display: grid;
}

/* display is owned by the [data-only] visibility rules above — only the track
   shape is declared here, so a hidden flow stays hidden */
.fu-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

.fu-flow__cell {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--bg-card-2);
}

/* the chevron sits dead centre of the gap — hugging the previous cell made the
   four equal columns read as four unequal ones */
.fu-flow__cell + .fu-flow__cell::before {
  content: "";
  position: absolute;
  left: calc(-0.5 * var(--s-3) - 5px);
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  border-radius: 1px;
  transform: translateY(-50%) rotate(45deg);
}

.fu-flow__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fu-flow__v {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}

/* the last cell always names the holder — amber when it is a person.
   It sits one step up the surface ladder, so its label steps up to --body:
   --muted only clears 4.38:1 against --bg-card-3. */
.fu-flow__cell:last-child {
  border-color: var(--line);
  background: var(--bg-card-3);
}

.fu-flow__cell:last-child .fu-flow__k {
  color: var(--body);
}

.fu-flow--human .fu-flow__cell:last-child {
  border-color: color-mix(in srgb, var(--amber) 50%, var(--line));
  background: color-mix(in srgb, var(--amber) 9%, var(--bg-card-2));
}

.fu-flow--human .fu-flow__cell:last-child .fu-flow__k {
  color: var(--amber);
}

/* ------------------------------------------------- 5. Scenes + chat */

/* both columns run the full height of the stage so they terminate together —
   a short rail used to leave a ragged well of dead space beside the console */
.fu-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(var(--s-8), 3vw, var(--s-12));
  align-items: stretch;
}

.fu-stage__main {
  display: grid;
  align-content: start;
  gap: var(--s-8);
  min-width: 0;
}

.fu-scenes {
  display: grid;
  min-height: 8.5rem;
  align-content: start;
}

.fu-scene {
  gap: var(--s-3);
  align-content: start;
}

.fu-scene > :is(h2, h3, h4) {
  margin: 0;
}

.fu-scene__desc {
  margin: 0;
  max-width: 56ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}

/* chat panel -------------------------------------------------------------- */

.fu-chat {
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.fu-chat__title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
}

.fu-chat__body {
  display: flex;
  align-items: flex-end;
  min-height: 14rem;
  padding: clamp(var(--s-4), 1.6vw, var(--s-6));
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--bg-card-2) 70%, transparent) 0%, transparent 70%);
}

.fu-thread {
  display: grid;
  gap: var(--s-4);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fu-msg {
  display: grid;
  gap: var(--s-1);
  max-width: 33rem;
  padding: var(--s-3) var(--s-5) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card-2);
  animation: fu-rise var(--d-3) var(--e-out) both;
}

/* the console is the thing people read from a metre away: microlabels step up
   one tier and the message body sits at reading size, not at caption size */
.fu-msg__who {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.fu-msg__text {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

/* system notes: quiet, centred, not a bubble */
.fu-msg--sys {
  max-width: 100%;
  margin-inline: auto;
  padding-block: var(--s-2);
  justify-items: center;
  text-align: center;
  background: transparent;
  border-style: dashed;
  border-color: var(--line-soft);
}

.fu-msg--sys .fu-msg__text {
  font-size: var(--t-sm);
  color: var(--muted);
}

/* the sending gate */
.fu-msg--gate {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-card-2));
}

.fu-msg--gate .fu-msg__who {
  color: var(--accent);
}

/* assistant */
.fu-msg--ai {
  background: var(--bg-card-3);
  border-color: var(--line-strong);
}

.fu-msg--ai .fu-msg__text {
  color: var(--ink);
}

/* customer, answering back */
.fu-msg--cust {
  margin-inline-start: auto;
  border-color: color-mix(in srgb, var(--link) 42%, var(--line));
  background: color-mix(in srgb, var(--link) 10%, var(--bg-card-2));
}

.fu-msg--cust .fu-msg__who {
  color: var(--link);
}

.fu-msg--cust .fu-msg__text {
  color: var(--ink);
}

/* the named human */
.fu-msg--human {
  border-color: color-mix(in srgb, var(--amber) 48%, var(--line));
  background: color-mix(in srgb, var(--amber) 8%, var(--bg-card-2));
}

.fu-msg--human .fu-msg__who {
  color: var(--amber);
}

.fu-msg--human .fu-msg__text {
  color: var(--ink);
}

/* ------------------------------------------------- 6. Result rail */

/* flex, not grid: the closing note is pushed to the foot of the column, which
   is what makes the two columns finish on the same line */
.fu-rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
  height: 100%;
  padding-left: clamp(var(--s-6), 2vw, var(--s-8));
  border-left: 1px solid var(--line-soft);
}

.fu-rail__head {
  margin: 0;
}

/* the live record card — display is owned by the [data-only] rules */
.fu-rec {
  align-content: start;
}

.fu-rec--human .record {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
  background: color-mix(in srgb, var(--amber) 7%, var(--bg-card-2));
}

/* the owner key: the rail used to leave a tall well of empty black under the
   record, and the page never said out loud what its two colours mean */
.fu-rail__legend {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-2) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
}

.fu-rail__legend > div {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.fu-rail__legend dt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.fu-rail__legend dd {
  margin: 0;
  padding-left: calc(9px + var(--s-3));
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--muted);
}

.fu-key {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--faint);
}

.fu-key--ai {
  background: var(--accent);
}

.fu-key--human {
  background: var(--amber);
}

.fu-rail__note {
  margin: auto 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  max-width: 42ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

/* ------------------------------------------------- 8. Ledger + completion */

/* the completion card only exists on the last step — auto-fit lets the ledger
   take the full width until it arrives, instead of leaving a dead column */
.fu-out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(var(--s-6), 2.4vw, var(--s-10));
  align-items: start;
  padding-top: clamp(var(--s-6), 2vw, var(--s-8));
  border-top: 1px solid var(--line-soft);
}

/* at the closing stage the summary becomes the full-width conclusion beneath
   the ledger: side by side it either left a rag or a void inside the card */
.fu-run[data-run-index="4"] .fu-out {
  grid-template-columns: minmax(0, 1fr);
}

.fu-ledger {
  min-width: 0;
  padding: var(--s-5) var(--s-6) var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-card-2);
}

.fu-led {
  width: 100%;
  /* keeps EVENT and OWNER scannable together once the ledger runs full width */
  max-width: 60rem;
  border-collapse: collapse;
  font-size: var(--t-body);
  text-align: left;
}

.fu-led caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fu-led th {
  padding: var(--s-2) var(--s-4) var(--s-3) 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.fu-led td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  color: var(--body);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.fu-led :is(th, td):last-child {
  padding-right: 0;
}

.fu-led tbody tr:last-child td {
  border-bottom: 0;
}

.fu-led td:first-child {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--muted);
  white-space: nowrap;
}

/* the ledger keeps its five slots from the first stage: a TIME/EVENT/OWNER
   header over a single row read as a table that had failed to load */
.fu-run [data-wait] {
  display: none;
}

.fu-run[data-run-index="0"] [data-wait="1"],
.fu-run[data-run-index="0"] [data-wait="2"],
.fu-run[data-run-index="0"] [data-wait="3"],
.fu-run[data-run-index="0"] [data-wait="4"],
.fu-run[data-run-index="1"] [data-wait="2"],
.fu-run[data-run-index="1"] [data-wait="3"],
.fu-run[data-run-index="1"] [data-wait="4"],
.fu-run[data-run-index="2"] [data-wait="3"],
.fu-run[data-run-index="2"] [data-wait="4"],
.fu-run[data-run-index="3"] [data-wait="4"] {
  display: table-row;
}

.fu-led__wait td,
.fu-led__wait td:first-child {
  color: var(--muted);
}

.fu-led__wait td:nth-child(2) {
  font-style: italic;
}

.fu-done {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: clamp(var(--s-5), 2vw, var(--s-8));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card-3);
  box-shadow: var(--shadow-lift);
}

.fu-done__head {
  margin: 0;
}

.fu-done__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.fu-done__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4) var(--s-6);
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}

.fu-done__grid > div {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.fu-done__grid dt {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fu-done__grid dd {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink);
}

/* ------------------------------------------------- 9. Case tabs */

.fu-cases {
  display: grid;
  gap: var(--s-6);
}

.fu-cases__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.fu-cases__tab {
  position: relative;
  display: grid;
  gap: var(--s-1);
  flex: 1 1 220px;
  min-height: 44px;
  margin: 0;
  padding: var(--s-4) var(--s-5);
  text-align: left;
  font: inherit;
  color: var(--body);
  background: transparent;
  border: 1px solid var(--line-soft);
  /* reserved at 2px on every tab so selecting one never shifts the row */
  border-top: 2px solid var(--line-soft);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition:
    background var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out);
}

.fu-cases__tab:hover {
  border-color: var(--line-strong);
  background: var(--bg-card-2);
}

.fu-cases__tab[aria-selected="true"] {
  background: var(--bg-card-2);
  border-color: var(--line-strong);
  border-top-color: var(--accent);
}

.fu-cases__tab-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fu-cases__tab-title {
  font-size: var(--t-body);
  line-height: 1.3;
  color: var(--body);
}

.fu-cases__tab[aria-selected="true"] .fu-cases__tab-title {
  color: var(--ink);
  font-weight: 600;
}

.fu-case {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--s-6), 2.6vw, var(--s-12));
  padding: clamp(var(--s-6), 2.4vw, var(--s-10));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card);
}

.fu-case[hidden] {
  display: none;
}

.fu-case__col {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  min-width: 0;
}

.fu-case__col--out {
  gap: var(--s-4);
  padding-left: clamp(var(--s-6), 2.4vw, var(--s-10));
  border-left: 1px solid var(--line-soft);
}

.fu-case__col--out > :is(h2, h3, h4, p.eyebrow) {
  margin: 0;
}

.fu-case__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fu-case__quote {
  margin: 0 0 var(--s-3);
  max-width: 44ch;
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  border-top-left-radius: var(--r-xs);
}

.fu-case__quote--in {
  margin-left: auto;
  margin-bottom: 0;
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-xs);
  border-color: color-mix(in srgb, var(--link) 40%, var(--line));
  background: color-mix(in srgb, var(--link) 9%, var(--bg-card-2));
}

.fu-case__why {
  margin: 0;
  max-width: 42ch;
  padding-left: var(--s-5);
  border-left: 2px solid color-mix(in srgb, var(--amber) 65%, transparent);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--body);
}

/* ------------------------------------------------- 10. Endings */

.fu-ends {
  align-items: stretch;
}

/* mark / heading / copy / state — the 1fr row lets the state line
   sit on a common baseline across all three cards */
.fu-end {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s-4);
  height: 100%;
}

.fu-end > :is(h2, h3, h4) {
  margin: 0;
}

.fu-end > p {
  margin: 0;
}

.fu-end__mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  color: var(--accent);
}

.fu-end__mark svg {
  width: 20px;
  height: 20px;
  display: block;
}

.fu-end--human .fu-end__mark {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  background: color-mix(in srgb, var(--amber) 10%, var(--bg-card-2));
}

.fu-end__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  color: var(--ink);
}

.fu-end__state .mono {
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.15em 0.55em;
}

/* ------------------------------------------------- 11. Stops */

.fu-stops {
  display: grid;
  gap: var(--s-6);
  padding: clamp(var(--s-6), 2.4vw, var(--s-10));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card);
}

.fu-stops__head {
  display: grid;
  gap: var(--s-3);
}

.fu-stops__head > :is(h2, h3, h4) {
  margin: 0;
}

.fu-stops__lead {
  margin: 0;
  max-width: 62ch;
  color: var(--body);
}

.fu-stops__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fu-stops__list > li {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--bg-card-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.fu-stops__state {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-card-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.15em 0.6em;
  white-space: nowrap;
}

/* ------------------------------------------------- 12. Gate figure */

.fu-gatefig {
  margin-block: clamp(var(--s-8), 3vw, var(--s-12));
}

/* beats core's generic `main svg[viewBox]:not([width])` cap */
.fu-gatefig .fu-gate-svg[viewBox] {
  display: block;
  width: 100%;
  min-width: 620px;
  max-width: 880px;
  height: auto;
  margin-inline: auto;
  color: var(--body);
}

.fu-gate-svg text {
  font-family: var(--font-ui);
}

/* stacked mobile twin of the gate figure — same vocabulary, no scrolling */
.fu-gatestack {
  display: none;
  gap: var(--s-3);
}

.fu-gatestack__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fu-gatestack__in,
.fu-gatestack__out {
  display: grid;
  gap: var(--s-2);
}

.fu-gatestack__cell {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
}

.fu-gatestack__cell--pass {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-card-2));
}

.fu-gatestack__cell--fail {
  border-color: color-mix(in srgb, var(--amber-bright, var(--amber)) 55%, var(--line));
  background: color-mix(in srgb, var(--amber-bright, var(--amber)) 12%, var(--bg-card-2));
}

.fu-gatestack__gate {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--amber-bright, var(--amber)) 55%, var(--line));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--amber-bright, var(--amber)) 12%, var(--bg-card-2));
}

.fu-gatestack__gate > span:last-child {
  display: grid;
  gap: var(--s-1);
}

.fu-gatestack__node {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--void);
  background: var(--amber-bright, #e7a63a);
}

.fu-gk-l {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fu-gk-l--amber {
  color: var(--amber);
}

.fu-gk-v {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink);
}

@media (max-width: 760px) {
  .fu-gatefig__wide {
    display: none;
  }

  .fu-gatestack {
    display: grid;
  }
}

/* ------------------------------------------------- 13. Rules / never */

.fu-rules {
  align-items: stretch;
}

.fu-rule {
  display: grid;
  align-content: start;
  gap: var(--s-3);
}

.fu-rule > :is(h2, h3, h4) {
  margin: 0;
}

.fu-rule > p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--body);
}

.fu-rule > .eyebrow {
  margin: 0;
}

.fu-never {
  display: grid;
  gap: var(--s-5);
  margin-top: clamp(var(--s-8), 3vw, var(--s-12));
  padding: clamp(var(--s-6), 2.2vw, var(--s-8));
  border: 1px dashed var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card);
}

.fu-never > :is(h2, h3, h4, p) {
  margin: 0;
}

.fu-never__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3) var(--s-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fu-never__list > li {
  position: relative;
  padding-left: var(--s-8);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.fu-never__list > li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--t-body);
  line-height: 1.35;
  color: var(--err);
}

/* ------------------------------------------------- 14. Two ways */

.fu-two__em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.fu-two {
  align-items: stretch;
}

.fu-two__card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-5);
  height: 100%;
}

.fu-two__card > :is(h2, h3, h4) {
  margin: 0;
}

/* "now" stays the plain surface with a neutral top rule; "next" is one step up
   the surface ladder with the accent rule. A thickened top border follows the
   card's radius exactly — --shadow-* is `none` on dark, so it can never be
   combined into a box-shadow list. */
.fu-two__card--now {
  background: var(--bg-card);
  border-top: 2px solid var(--line-strong);
}

.fu-two__card--next {
  background: var(--bg-card-2);
  border-top: 2px solid var(--accent);
}

.fu-two__list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fu-two__list > li {
  position: relative;
  padding-left: var(--s-8);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.fu-two__list > li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--t-body);
  line-height: 1.35;
}

.fu-two__list--now > li::before {
  content: "\2014";
  color: var(--muted);
}

.fu-two__list--next > li::before {
  content: "\2713";
  color: var(--ok);
}

.fu-two__foot {
  margin: var(--s-2) 0 0;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line-soft);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
}

/* ------------------------------------------------- 15. More demos */

.fu-more {
  align-items: stretch;
}

.fu-more__card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--s-2);
  height: 100%;
  text-decoration: none;
}

.fu-more__card :is(h2, h3, h4, p, span) {
  text-decoration: none;
}

.fu-more__card > :is(h2, h3, h4) {
  margin: 0;
  font-size: var(--t-title-3);
}

.fu-more__card > p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

.fu-more__card > .eyebrow {
  margin: 0;
}

.fu-more__card--here {
  border-style: dashed;
  background: var(--bg-card-2);
  cursor: default;
}

.fu-more__card--here > :is(h2, h3, h4) {
  color: var(--muted);
}

/* ------------------------------------------------- 16. CTA */

.fu-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ------------------------------------------------- 17. Motion */

@keyframes fu-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fu-msg,
  .fu-run[data-run-index] [data-only] {
    animation: none !important;
  }

  .fu-tl__btn,
  .fu-cases__tab,
  .fu-player__fill {
    transition: none;
  }

  /* the run player marks EVERY stage "past" in this mode. That means "all
     stages are finished, static content" — not "all stages have receded", so
     the recession is undone and every stage label reads at full strength. */
  .fu-tl__item[data-run-state="past"] .fu-tl__title {
    color: var(--ink);
  }

  .fu-tl__item[data-run-state="past"] .fu-tl__time {
    color: var(--body);
  }

  /* and the whole transcript is readable without playing anything: the thread
     and the ledger already accumulate to this full set at the last stage. */
  .fu-run[data-run-index] .fu-thread > [data-at] {
    display: grid;
  }

  .fu-run[data-run-index] .fu-led tbody > [data-at] {
    display: table-row;
  }

  /* the full ledger is already on screen in this mode — no slot is waiting */
  .fu-run[data-run-index] .fu-led tbody > [data-wait] {
    display: none;
  }
}

/* ------------------------------------------------- 17b. Responsive */

@media (max-width: 1200px) {
  .fu-stage {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr);
  }
}

@media (max-width: 1024px) {
  .fu-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-10);
  }

  .fu-hero__title {
    max-width: 16ch;
  }

  .fu-seq {
    max-width: 420px;
  }

  .fu-tl {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }

  /* one compact row per stage: number | time | title, gate note underneath */
  .fu-tl__btn {
    grid-template-columns: 24px 7rem minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s-4);
    row-gap: var(--s-1);
    padding: var(--s-3) var(--s-4);
    box-shadow: inset 4px 0 0 0 var(--fu-step);
  }

  .fu-tl__item[data-run-state="current"] .fu-tl__btn,
  .fu-tl__item--human[data-run-state="current"] .fu-tl__btn {
    box-shadow:
      inset 4px 0 0 0 var(--fu-step),
      0 0 0 2px color-mix(in srgb, var(--fu-step) 32%, transparent);
  }

  .fu-tl__n {
    grid-column: 1;
    grid-row: 1;
  }

  .fu-tl__time {
    grid-column: 2;
    grid-row: 1;
  }

  /* the chips are single rows here, so the reserved second title line that
     aligns the five status lines on desktop is not needed */
  .fu-tl__title {
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
  }

  .fu-tl__gate {
    grid-column: 3;
    grid-row: 2;
  }

  .fu-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* the connector arrow only reads on a single row */
  .fu-flow__cell + .fu-flow__cell::before,
  .fu-flow__cell + .fu-flow__cell::after {
    content: none;
  }

  .fu-stage,
  .fu-out,
  .fu-case {
    grid-template-columns: minmax(0, 1fr);
  }

  .fu-rail {
    min-height: 0;
    height: auto;
    padding-top: var(--s-6);
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .fu-rail__note {
    margin-top: 0;
  }

  .fu-case__col--out {
    padding-left: 0;
    padding-top: var(--s-6);
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
}

@media (max-width: 768px) {
  .fu-scenes {
    min-height: 0;
  }

  .fu-scene__desc {
    font-size: var(--t-body);
  }

  .fu-chat__body {
    min-height: 0;
  }

  .fu-msg {
    max-width: 100%;
  }

  .fu-msg--cust {
    margin-inline-start: 0;
  }

  .fu-ledger {
    padding-inline: var(--s-4);
  }

  .fu-case__quote--in {
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .fu-run {
    padding: var(--s-5) var(--s-4);
    border-radius: var(--r-xl);
  }

  .fu-hero__title {
    max-width: none;
  }

  .fu-scenario__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }

  .fu-tl__btn {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: var(--s-3);
    row-gap: var(--s-2);
  }

  .fu-tl__n {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .fu-tl__time {
    grid-column: 2;
    grid-row: 1;
  }

  .fu-tl__title {
    grid-column: 2;
    grid-row: 2;
  }

  .fu-tl__gate {
    grid-column: 2;
    grid-row: 3;
  }

  .fu-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }

  .fu-player {
    gap: var(--s-4);
  }

  /* play goes full width on its own row; the three step controls share the
     next one — the label must never wrap to three lines */
  .fu-player__transport {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .fu-tbtn {
    flex: 1 1 0;
  }

  .fu-tbtn--main {
    order: -1;
    flex: 1 0 100%;
    white-space: nowrap;
  }

  .fu-msg {
    padding-inline: var(--s-4);
  }

  .fu-chat__title {
    font-size: var(--t-micro);
  }

  .fu-cases__tab {
    flex: 1 1 100%;
  }

  .fu-never__list,
  .fu-stops__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .fu-gate-svg {
    min-width: 560px;
  }
}

/* ---- the mobile cut of the hero sequence ------------------------------- */

@media (max-width: 560px) {
  .fu-hero__figure .fu-seq--wide[viewBox] {
    display: none;
  }

  .fu-hero__figure .fu-seq--narrow[viewBox] {
    display: block;
    /* capped so the redrawn figure never inflates past its drawn size on the
       wide edge of this range — it is meant to read at about 1:1 */
    max-width: 340px;
  }
}

/* the initials chip on the record card rendered at 10px — under the floor.
   Size only; the colour pairing is untouched. */
.record .owner__avatar {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
}