@charset "utf-8";
/* ==========================================================================
   page-demo-ai-receptionist.css
   Page-scoped styles for demos/ai-receptionist.html

   LIGHT-PRIMARY: hero, comparison, build and "explore" bands are light.
   The run stage stays dark — it is the product moment.

   Theme-variable only. Never a hardcoded hex for text.
   Order follows the document.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Page-local tokens
   -------------------------------------------------------------------------- */
.dhero,
.runx,
.governed,
.more,
.dcta {
  --plate: var(--bg-card);
  --plate-2: var(--bg-card-2);
  --hair: var(--line);
  --hair-soft: var(--line-soft);
}

/* ==========================================================================
   1. Demo hero — .dhero (LIGHT)
   ========================================================================== */

.dhero {
  position: relative;
  overflow: clip;
  padding-block-start: clamp(var(--s-8), 4.5vw, var(--s-12));
}

.dhero__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));
  position: relative;
  z-index: 1;
}

.dhero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  min-width: 0;
}

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

/* on light the headline accent inks DOWN into navy — never up into cyan */
.dhero__title-accent {
  display: block;
  color: var(--blue-deep);
}

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

.dhero__cta {
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-1);
}

/* what the offer actually is — the CTA wording is not self-explanatory */
.dhero__note {
  margin: 0;
  max-inline-size: 46ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

/* hero chips — a deliberate 2 × 2 block, never a ragged orphan line ------- */
.dhero__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--s-2);
}

.dhero__chips > li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  background: var(--plate);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.dhero__chips > li::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* the one chip the eye should land on: a person is in the loop.
   (Written as `> li.…` so it outranks the base chip rule above.) */
.dhero__chips > li.dhero__chips-human {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 48%, var(--hair));
}

.dhero__chips > li.dhero__chips-human::before {
  background: var(--amber);
}

/* hero figure ------------------------------------------------------------ */
.dhero__figure {
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  min-width: 0;
}

.tracks {
  position: relative;
  z-index: 1;
  display: block;
  inline-size: 100%;
  max-inline-size: 430px;
  margin-inline: auto;
  color: var(--muted);
  overflow: visible;
}

.tracks text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
}

/* Two cuts of the same figure. The wide one is drawn for a 470-unit box; the
   mobile one is a separate, narrower drawing — never the wide one scaled down
   until its labels fall under the legibility floor. */
svg.tracks--m {
  display: none;
  max-inline-size: 340px;
}

svg.tracks--m text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.8px;
}

.tracks__time,
.tracks__time text {
  fill: var(--muted);
}

.dhero__figure .dhero__figcap {
  position: relative;
  z-index: 1;
  margin: 0;
  max-inline-size: 44ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ==========================================================================
   2. The one disclosure — .demo-note
   Said once, in front of the first simulated record, in the page's normal
   voice. No amber: amber on this page means a person has to decide, and a
   demonstration running on invented data is not a caution — it is the point.
   ========================================================================== */

.demo-note {
  max-inline-size: 68ch;
  margin: 0 0 var(--s-6);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--hair);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* ==========================================================================
   3. The run player — .runx
   ========================================================================== */

.runx {
  display: grid;
  gap: var(--s-6);
  min-width: 0;
}

.runx > * {
  min-width: 0;
}

/* 3a. scenario facts ------------------------------------------------------ */
.scen {
  margin: 0 0 var(--s-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-1) var(--s-8);
  padding: var(--s-5) var(--s-8);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  background: var(--plate);
  box-shadow: var(--shadow-card);
}

.scen > * {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding-block: var(--s-3);
  min-width: 0;
}

.scen dt {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.scen dd {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* 3b. transport controls -------------------------------------------------- */
.runx__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  background: var(--plate-2);
  box-shadow: var(--shadow-card);
}

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

.runx__b {
  min-block-size: 44px;
  gap: var(--s-2);
}

.runx__b--main {
  min-inline-size: 116px;
  justify-content: center;
}

.runx__progress {
  flex: 1 1 220px;
  min-inline-size: 120px;
  block-size: 6px;
  border-radius: var(--r-pill);
  background: var(--hair);
  overflow: hidden;
}

.runx__progress > * {
  display: block;
  block-size: 100%;
  inline-size: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--link), var(--accent));
  transition: inline-size var(--d-3) var(--e-out), width var(--d-3) var(--e-out);
}

.runx__pos {
  flex: none;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  min-inline-size: 10ch;
  text-align: right;
}

.runx__pos [data-run-position] {
  color: var(--ink);
  font-size: var(--t-sm);
}

/* ==========================================================================
   4. The scene track — every scene is a jump target
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--s-2);
  min-width: 0;
}

.step {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  align-content: start;
  gap: 2px;
  min-block-size: 78px;
  padding: var(--s-3) var(--s-3) var(--s-4);
  border: 1px solid var(--hair);
  border-block-start: 3px solid var(--hair);
  border-radius: var(--r-md);
  background: var(--plate);
  color: var(--muted);
  transition: background-color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out), transform var(--d-2) var(--e-out),
    box-shadow var(--d-2) var(--e-out), opacity var(--d-3) var(--e-out);
}

.step__n {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.step__t {
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--body);
}

.step__time {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.step:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--hair));
  background: var(--plate-2);
}

.step:hover .step__t {
  color: var(--ink);
}

/* played -------------------------------------------------------------- */
.step[data-run-state="past"] {
  border-block-start-color: color-mix(in srgb, var(--accent) 70%, transparent);
}

.step[data-run-state="past"] .step__n {
  color: var(--accent);
}

/* not yet — recessed, but never below legibility ----------------------- */
.step[data-run-state="future"] {
  opacity: 0.92;
  background: var(--plate);
}

/* the current scene — foregrounded, unmistakable ----------------------- */
.step[data-run-state="current"],
.runx[data-run-index="0"] .step[data-run-step="0"],
.runx[data-run-index="1"] .step[data-run-step="1"],
.runx[data-run-index="2"] .step[data-run-step="2"],
.runx[data-run-index="3"] .step[data-run-step="3"],
.runx[data-run-index="4"] .step[data-run-step="4"],
.runx[data-run-index="5"] .step[data-run-step="5"],
.runx[data-run-index="6"] .step[data-run-step="6"] {
  opacity: 1;
  background: var(--plate-2);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--hair));
  border-block-start-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-lift);
  transform: translateY(-2px);
}

.step[data-run-state="current"] .step__t,
.runx[data-run-index="0"] .step[data-run-step="0"] .step__t,
.runx[data-run-index="1"] .step[data-run-step="1"] .step__t,
.runx[data-run-index="2"] .step[data-run-step="2"] .step__t,
.runx[data-run-index="3"] .step[data-run-step="3"] .step__t,
.runx[data-run-index="4"] .step[data-run-step="4"] .step__t,
.runx[data-run-index="5"] .step[data-run-step="5"] .step__t,
.runx[data-run-index="6"] .step[data-run-step="6"] .step__t {
  color: var(--ink);
}

.step[data-run-state="current"] .step__n,
.runx[data-run-index="0"] .step[data-run-step="0"] .step__n,
.runx[data-run-index="1"] .step[data-run-step="1"] .step__n,
.runx[data-run-index="2"] .step[data-run-step="2"] .step__n,
.runx[data-run-index="3"] .step[data-run-step="3"] .step__n,
.runx[data-run-index="4"] .step[data-run-step="4"] .step__n,
.runx[data-run-index="5"] .step[data-run-step="5"] .step__n,
.runx[data-run-index="6"] .step[data-run-step="6"] .step__n {
  color: var(--accent);
}

/* the two scenes where a person is required stay amber-marked ---------- */
.step--human .step__n {
  color: var(--amber);
}

.step--human[data-run-state="past"] .step__n {
  color: var(--amber);
}

.step--human {
  border-block-start-style: dashed;
}

.runx[data-run-index="4"] .step--human[data-run-step="4"],
.runx[data-run-index="5"] .step--human[data-run-step="5"],
.step--human[data-run-state="current"] {
  border-color: color-mix(in srgb, var(--amber) 62%, var(--hair));
  border-block-start-color: var(--amber-bright, var(--amber));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 45%, transparent), var(--shadow-lift);
}

.runx[data-run-index="4"] .step--human[data-run-step="4"] .step__n,
.runx[data-run-index="5"] .step--human[data-run-step="5"] .step__n,
.step--human[data-run-state="current"] .step__n {
  color: var(--amber);
}

/* One rule decides every numeral: amber means a person decides here, in every
   state of the run. Nothing else in the track is ever amber. */
.runx[data-run-index] .steps .step--human .step__n {
  color: var(--amber);
}

/* and the track says so in words, so no colour has to be guessed at */
.steps__legend {
  margin: calc(var(--s-2) * -1) 0 0;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  max-inline-size: 88ch;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--muted);
}

.steps__legend-mark {
  flex: none;
  inline-size: 22px;
  block-size: 0;
  margin-block-start: 0.62em;
  border-block-start: 3px dashed var(--amber-bright, var(--amber));
}

@media (prefers-reduced-motion: reduce) {
  .step {
    transition: none;
  }
  .step[data-run-state="current"],
  .step[data-run-state="past"],
  .step[data-run-state="future"] {
    transform: none;
  }
}

/* ==========================================================================
   5. Cause and effect — .beats
   what arrived → what the system did → what the record says → who owns it
   ========================================================================== */

.beats {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.beat {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) 0;
  padding: var(--s-5) var(--s-6) var(--s-6);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  background: var(--plate);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.beat::before {
  content: attr(data-scene);
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.beat__c {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-inline: var(--s-5);
  min-width: 0;
  position: relative;
}

.beat__c:first-of-type {
  padding-inline-start: 0;
}

.beat__c + .beat__c {
  border-inline-start: 1px solid var(--hair-soft);
}

/* the causal chevron between cells */
.beat__c + .beat__c::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  inset-block-start: 6px;
  inline-size: 9px;
  block-size: 9px;
  border-block-start: 1.5px solid var(--accent);
  border-inline-end: 1.5px solid var(--accent);
  transform: rotate(45deg);
  background: var(--plate);
  opacity: 0.85;
}

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

.beat__v {
  margin: 0;
  font-size: var(--t-base, 1rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* the scene where a person is required */
.beat--human {
  border-color: color-mix(in srgb, var(--amber) 40%, var(--hair));
}

.beat--human::before {
  color: var(--amber);
}

.beat--human .beat__c:last-child .beat__v {
  color: var(--amber);
}

/* one beat at a time when motion is welcome; all of them when it is not */
@media (prefers-reduced-motion: no-preference) {
  .beats {
    grid-template-areas: "beat";
  }

  .beats > .beat {
    grid-area: beat;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
  }

  .runx[data-run-index="0"] .beats > .beat[data-at="0"],
  .runx[data-run-index="1"] .beats > .beat[data-at="1"],
  .runx[data-run-index="2"] .beats > .beat[data-at="2"],
  .runx[data-run-index="3"] .beats > .beat[data-at="3"],
  .runx[data-run-index="4"] .beats > .beat[data-at="4"],
  .runx[data-run-index="5"] .beats > .beat[data-at="5"],
  .runx[data-run-index="6"] .beats > .beat[data-at="6"] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ==========================================================================
   6. Stage layout
   ========================================================================== */

.runx__body {
  display: grid;
  gap: clamp(var(--s-6), 2.4vw, var(--s-10));
  min-width: 0;
}

.runx__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 2.4vw, var(--s-10));
  align-items: start;
  min-width: 0;
}

/* ==========================================================================
   7. Conversation panel
   ========================================================================== */

.conv {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.conv__h {
  margin: 0;
}

.conv__panel {
  position: relative;
  min-width: 0;
}

.conv__pill {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-end: var(--s-4);
  padding: 2px var(--s-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-xs);
  background: var(--plate-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.conv__id {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6) var(--s-4);
  border-block-end: 1px solid var(--hair-soft);
  min-width: 0;
}

.conv__avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--bg-card-3, var(--plate-2));
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--ink);
}

.conv__id-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  min-width: 0;
  font-size: var(--t-sm);
  color: var(--ink);
}

.conv__id-text > * + * {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* message list ------------------------------------------------------------ */
.conv__list {
  list-style: none;
  margin: 0;
  padding: var(--s-6);
  display: grid;
  align-content: start;
  gap: var(--s-5);
  min-width: 0;
  min-block-size: 118px;
}

/* the panel is finished at scene 1 too: it says what it is waiting to do */
.conv__foot,
.record__foot {
  margin: 0;
  padding: var(--s-4) var(--s-6);
  border-block-start: 1px solid var(--hair-soft);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* the record card carries its own inner padding — the foot only adds a rule */
.record__foot {
  margin-block-start: var(--s-4);
  padding-inline: 0;
  padding-block-end: 0;
}

.conv__msg {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  min-width: 0;
}

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

.conv__who-time {
  color: var(--muted);
  margin-inline-start: var(--s-1);
}

.conv__bubble {
  margin: 0;
  inline-size: fit-content;
  max-inline-size: min(100%, 46ch);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--plate-2);
  font-size: var(--t-base, 1rem);
  line-height: 1.55;
  color: var(--body);
  overflow-wrap: anywhere;
}

.conv__msg--out .conv__bubble {
  border-start-start-radius: var(--r-xs);
  border-color: color-mix(in srgb, var(--link) 30%, var(--hair));
  background: color-mix(in srgb, var(--link) 9%, var(--plate-2));
  color: var(--ink);
}

.conv__msg--in {
  justify-items: end;
  text-align: right;
}

.conv__msg--in .conv__bubble,
.conv__msg--in .conv__gloss {
  text-align: left;
}

.conv__msg--in .conv__bubble {
  border-start-end-radius: var(--r-xs);
  background: var(--plate);
}

/* translation gloss */
.conv__gloss {
  margin: 0;
  inline-size: fit-content;
  max-inline-size: min(100%, 46ch);
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding-inline-start: var(--s-3);
  border-inline-start: 1px solid var(--hair);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--muted);
}

.conv__msg--in .conv__gloss {
  padding-inline: 0 var(--s-3);
  border-inline: 0 1px solid var(--hair);
}

.conv__gloss-tag {
  flex: none;
  padding: 0 4px;
  border: 1px solid var(--hair);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
  transform: translateY(1px);
}

/* system events ----------------------------------------------------------- */
.conv__msg--evt {
  justify-items: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-inline-start: 2px solid var(--hair);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.conv__evt-time {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.conv__evt-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* the stop event — auto-booking paused */
.conv__msg--stop {
  border-inline-start-color: var(--amber);
  color: var(--amber);
}

.conv__msg--stop .conv__evt-time {
  color: var(--amber);
}

/* the human turn */
.conv__msg--human .conv__who {
  color: var(--amber);
}

.conv__msg--human .conv__who-time {
  color: var(--amber);
}

.conv__msg--human .conv__bubble {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--hair));
  background: color-mix(in srgb, var(--amber) 10%, var(--plate-2));
  border-start-start-radius: var(--r-xs);
  color: var(--ink);
}

/* ==========================================================================
   8. Side column — record + exception
   ========================================================================== */

.runx__side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-content: start;
  min-width: 0;
}

.runx__side > * {
  min-width: 0;
}

.runx__record {
  min-width: 0;
}

.runx__record .record__rows {
  min-block-size: 62px;
  align-content: start;
}

/* the record card is the most screenshot-able object on the page, so it keeps a
   marker of its own — quiet and neutral, not a second copy of the disclosure */
.record__head .badge.record__demo {
  border: 1px solid var(--hair);
  background: var(--plate-2);
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* exception plate --------------------------------------------------------- */
.exc {
  display: grid;
  align-content: start;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  background: var(--plate);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

/* before anyone is needed the plate still carries its argument: it names the
   three things that will stop the run and hand it to a person */
.exc__standing {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
}

.exc__empty {
  margin: 0;
  font-size: var(--t-base, 1rem);
  line-height: 1.5;
  color: var(--ink);
}

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

.exc__rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.exc__rules > li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.exc__rules > li::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 0;
  margin-block-start: 0.72em;
  border-block-start: 2px dashed color-mix(in srgb, var(--amber) 70%, transparent);
}

.exc__open {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
}

.exc__label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--amber);
}

.exc__rule {
  margin: 0;
  font-size: var(--t-base, 1rem);
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.exc__routed {
  margin: var(--s-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.exc__opts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: var(--s-2);
}

.exc__opts > li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-md);
  background: var(--plate-2);
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--body);
  min-width: 0;
}

.exc__opts > li::before {
  content: "";
  flex: none;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  border: 1px solid var(--line-strong, var(--hair));
}

.exc__opts > li:first-child {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--hair));
  color: var(--ink);
}

.exc__opts > li:first-child::before {
  border-color: var(--amber);
  background: var(--amber-bright, var(--amber));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent);
}

.exc__res {
  margin: var(--s-1) 0 0;
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--hair-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
  overflow-wrap: anywhere;
}

.exc__res-k {
  display: block;
  margin-block-end: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ok-hi, var(--ok));
}

/* ==========================================================================
   9. Activity ledger — full width under the stage
   ========================================================================== */

.runx__ledger {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.ledger {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--plate);
  min-width: 0;
}

.ledger table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
}

.ledger th:first-child,
.ledger td:first-child {
  white-space: nowrap;
  color: var(--muted);
  inline-size: 9ch;
}

.ledger th:last-child,
.ledger td:last-child {
  inline-size: 26ch;
}

.ledger th,
.ledger td {
  padding: var(--s-3) var(--s-4);
  vertical-align: top;
  line-height: 1.5;
  text-align: left;
  border-block-end: 1px solid var(--hair-soft);
}

.ledger th {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  background: var(--plate-2);
}

.ledger thead th:first-child {
  border-start-start-radius: var(--r-lg);
}

.ledger thead th:last-child {
  border-start-end-radius: var(--r-lg);
}

.ledger td {
  color: var(--body);
}

.ledger tbody tr:last-child td {
  border-block-end: 0;
}

/* ==========================================================================
   10. Run wiring — data-at reveals and current-scene emphasis
   Everything here is inside prefers-reduced-motion: no-preference, so with
   reduced motion the whole run reads as static, complete content.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* not yet happened — the thread, the record and the ledger fill in */
  .runx[data-run-index="0"] :is([data-at="1"], [data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"], [data-at="6"]),
  .runx[data-run-index="1"] :is([data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"], [data-at="6"]),
  .runx[data-run-index="2"] :is([data-at="3"], [data-at="4"], [data-at="5"], [data-at="6"]),
  .runx[data-run-index="3"] :is([data-at="4"], [data-at="5"], [data-at="6"]),
  .runx[data-run-index="4"] :is([data-at="5"], [data-at="6"]),
  .runx[data-run-index="5"] [data-at="6"] {
    display: none;
  }

  /* the exception plate only names a person once one is actually required —
     until then it shows the rules that would summon one */
  .runx:is([data-run-index="4"], [data-run-index="5"], [data-run-index="6"]) .exc__standing {
    display: none;
  }

  /* the newest arrivals are foregrounded so nothing has to be hunted for */
  .runx[data-run-index="0"] .conv__msg[data-at="0"],
  .runx[data-run-index="1"] .conv__msg[data-at="1"],
  .runx[data-run-index="2"] .conv__msg[data-at="2"],
  .runx[data-run-index="3"] .conv__msg[data-at="3"],
  .runx[data-run-index="4"] .conv__msg[data-at="4"],
  .runx[data-run-index="5"] .conv__msg[data-at="5"],
  .runx[data-run-index="6"] .conv__msg[data-at="6"] {
    animation: runx-arrive var(--d-4) var(--e-out) both;
  }

  .runx[data-run-index="0"] .record__row[data-at="0"],
  .runx[data-run-index="1"] .record__row[data-at="1"],
  .runx[data-run-index="2"] .record__row[data-at="2"],
  .runx[data-run-index="3"] .record__row[data-at="3"],
  .runx[data-run-index="4"] .record__row[data-at="4"],
  .runx[data-run-index="5"] .record__row[data-at="5"],
  .runx[data-run-index="6"] .record__row[data-at="6"] {
    animation: runx-flag var(--d-5) var(--e-out) both;
  }

  .runx[data-run-index="0"] .ledger tr[data-at="0"] td,
  .runx[data-run-index="1"] .ledger tr[data-at="1"] td,
  .runx[data-run-index="2"] .ledger tr[data-at="2"] td,
  .runx[data-run-index="3"] .ledger tr[data-at="3"] td,
  .runx[data-run-index="4"] .ledger tr[data-at="4"] td,
  .runx[data-run-index="5"] .ledger tr[data-at="5"] td,
  .runx[data-run-index="6"] .ledger tr[data-at="6"] td {
    color: var(--ink);
  }
}

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

@keyframes runx-flag {
  from {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
  }
  to {
    background: transparent;
  }
}

/* the generic state hooks the run player writes ------------------------- */
[data-run-state] {
  transition: opacity var(--d-3) var(--e-out), background-color var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out);
}

@media (prefers-reduced-motion: reduce) {
  [data-run-state] {
    transition: none;
  }
}

/* ==========================================================================
   11. "Never automated" plate
   ========================================================================== */

.never {
  margin-block-start: var(--s-10);
  padding: var(--s-6) var(--s-8);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  background: var(--plate);
  display: grid;
  gap: var(--s-4);
}

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

.never__list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

/* These are the human-decision boundaries, so they carry the same amber as the
   human gate — the page never introduces a colour that means nothing else. */
.never__list > li::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: 0.35em;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--amber) 60%, var(--hair));
  background:
    linear-gradient(45deg, transparent 45%, var(--amber-bright, var(--amber)) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--amber-bright, var(--amber)) 45% 55%, transparent 55%);
}

.never__note {
  margin: 0;
  max-inline-size: 78ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

/* ==========================================================================
   12. Now / next comparison
   ========================================================================== */

.ways {
  align-items: stretch;
}

/* on light, cards need a firmer edge than the default hairline or the band
   reads empty at a glance */
.way,
.shape,
.input {
  border-color: var(--line-strong, var(--line));
  box-shadow: var(--shadow-card);
}

.way {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  position: relative;
  overflow: clip;
}

.way::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
}

.way--now::before {
  background: linear-gradient(90deg, var(--amber-bright, var(--amber)), transparent 78%);
}

.way--next::before {
  background: linear-gradient(90deg, var(--accent), transparent 78%);
}

.way__k {
  margin: 0;
}

.way--now .way__k {
  color: var(--amber);
}

.way--next .way__k {
  color: var(--accent);
}

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

.way__list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.way__list > li::before {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: 0.55em;
  border-radius: 50%;
  background: var(--muted);
}

.way--now .way__list > li::before {
  background: var(--amber-bright, var(--amber));
}

.way--next .way__list > li::before {
  background: var(--accent);
}

/* ==========================================================================
   13. Shapes this takes
   ========================================================================== */

.shapes {
  display: grid;
  gap: var(--s-8);
  margin-block-start: var(--s-16);
}

.shapes__head {
  margin-block-end: 0;
}

.shape {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  min-width: 0;
}

.shape__rows {
  margin: var(--s-1) 0 0;
  display: grid;
  min-width: 0;
}

.shape__rows > * {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--hair-soft);
  min-width: 0;
}

.shape__rows > *:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

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

.shape__rows dd {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.shapes__note {
  margin: 0;
  max-inline-size: 76ch;
  color: var(--muted);
}

/* ==========================================================================
   14. What it needs from you
   ========================================================================== */

.inputs {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--s-6);
  align-items: stretch;
}

/* ==========================================================================
   15. Governed section
   ========================================================================== */

.governed {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(var(--s-8), 4vw, var(--s-16));
  margin-block-start: var(--s-16);
}

.governed__fig {
  margin: 0;
  min-width: 0;
}

.governed .governed__fig > svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 100%;
  margin-inline: 0;
  color: var(--muted);
}

.gv__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
}

/* the same two-cut rule as the hero figure: a separate narrow drawing for small
   screens, not the 900-unit board squeezed into a phone */
.governed__fig > svg.gv--m {
  display: none;
}

.governed__fig > svg.gv--m .gv__label {
  font-size: 12px;
  letter-spacing: 0.8px;
}

/* diagram plates — the shared kit geometry: 10px corners, hairline, no fill weight */
.gv__plate {
  fill: var(--bg-card);
  stroke: var(--line);
  stroke-width: 1;
}

.gv__plate--human {
  stroke: color-mix(in srgb, var(--amber) 45%, var(--line));
}

/* amber is never decorative: this branch means a person is required */
.gv__human {
  stroke: var(--amber-bright, var(--amber));
}

.gv__human-dot {
  fill: var(--amber-bright, var(--amber));
}

.governed__ring {
  fill: none;
  stroke: var(--rf-ring);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: governed-ring 14s linear infinite;
}

@keyframes governed-ring {
  to {
    transform: rotate(360deg);
  }
}

.governed__keep {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  min-width: 0;
}

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

.ticks > li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.ticks > li::before {
  content: "";
  flex: none;
  inline-size: 7px;
  block-size: 12px;
  margin: 0.3em var(--s-2) 0 var(--s-1);
  border: solid var(--ok);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.governed__price {
  margin: var(--s-2) 0 0;
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--hair-soft);
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .governed__ring {
    animation: none;
  }
}

/* ==========================================================================
   16. More demos nav
   ========================================================================== */

.more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

.more__item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  align-items: baseline;
  align-content: start;
  padding: var(--s-5);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--plate);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}

a.more__item:hover,
a.more__item:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hair));
  background: var(--plate-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.more__n {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.more__t {
  font-family: var(--font-display);
  font-size: var(--t-title-3);
  line-height: 1.25;
  color: var(--ink);
}

.more__d {
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--muted);
}

.more__item--current {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hair));
  background: var(--plate-2);
  cursor: default;
}

.more__item--current .more__n,
.more__item--current .more__d {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .more__item {
    transition: none;
  }
  a.more__item:hover,
  a.more__item:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   17. Closing CTA
   ========================================================================== */

.dcta {
  position: relative;
  overflow: clip;
  text-align: center;
}

.dcta__fine {
  margin: var(--s-6) auto 0;
  max-inline-size: 56ch;
  line-height: 1.6;
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media (max-width: 1240px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .runx__stage {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .beat__c:nth-of-type(odd) {
    padding-inline-start: 0;
  }

  .beat__c:nth-of-type(odd) {
    border-inline-start: 0;
  }

  .beat__c:nth-of-type(odd)::before {
    display: none;
  }

  .conv__list {
    min-block-size: 0;
  }

  .runx__record .record__rows {
    min-block-size: 0;
  }

  .exc,
  .ledger {
    min-block-size: 0;
  }

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

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

  .dhero__copy {
    max-inline-size: 42rem;
  }

  .dhero__figure {
    max-inline-size: 520px;
    margin-inline: auto;
    inline-size: 100%;
  }

  .governed {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-10);
  }
}

@media (max-width: 880px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .scen {
    padding: var(--s-5) var(--s-6);
  }
}

/* the wide governance diagram carries fixed-size labels — below this width it
   keeps a legible scale and scrolls inside its own figure instead of squashing */
@media (max-width: 760px) {
  .governed__fig {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block-end: var(--s-2);
  }

  .governed .governed__fig > svg {
    min-inline-size: 680px;
  }
}

@media (max-width: 768px) {
  .more {
    grid-template-columns: minmax(0, 1fr);
  }

  .dhero__title {
    max-inline-size: 100%;
  }

  .never {
    padding: var(--s-5) var(--s-6);
  }

  .shape__rows dd {
    text-align: left;
  }
}

@media (max-width: 620px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .beat__c,
  .beat__c:nth-of-type(odd),
  .beat__c + .beat__c {
    padding-inline: 0 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--hair-soft);
    padding-block-start: var(--s-4);
  }

  .beat__c:first-of-type {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .beat__c::before,
  .beat__c + .beat__c::before {
    display: none;
  }
}

@media (max-width: 560px) {
  .dhero__inner {
    gap: var(--s-10);
  }

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

  .dhero__chips > li {
    font-size: 11.5px;
    padding: var(--s-2) var(--s-3);
    white-space: normal;
  }

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

  .runx__controls {
    border-radius: var(--r-xl);
    padding: var(--s-4);
    gap: var(--s-3);
  }

  .runx__buttons {
    inline-size: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: var(--s-2);
  }

  .runx__b {
    flex: 0 1 auto;
  }

  .runx__b--main {
    min-inline-size: 104px;
  }

  .runx__progress {
    flex: 1 1 auto;
  }

  .runx__pos {
    text-align: left;
  }

  .conv__pill {
    inset-block-start: var(--s-4);
    inset-inline-end: var(--s-4);
  }

  .conv__id {
    padding-inline-end: 3.6rem;
  }

  .conv__list {
    padding: var(--s-5) var(--s-4);
  }

  .conv__bubble,
  .conv__gloss {
    max-inline-size: 100%;
  }

  .exc,
  .never {
    padding: var(--s-4) var(--s-5);
  }

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

  .scen > * + * {
    border-block-start: 1px solid var(--hair-soft);
  }

  .shape__rows > * {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-1);
  }

  .more__item {
    padding: var(--s-4);
  }

  .ledger th,
  .ledger td {
    padding: var(--s-2) var(--s-3);
  }

  .ledger th:last-child,
  .ledger td:last-child {
    inline-size: auto;
  }

  /* swap both figures to their mobile cuts */
  svg.tracks--wide {
    display: none;
  }

  svg.tracks--m {
    display: block;
    max-inline-size: 340px;
  }

  .governed__fig > svg.gv--wide {
    display: none;
  }

  .governed__fig > svg.gv--m {
    display: block;
    min-inline-size: 0;
    max-inline-size: 340px;
    margin-inline: auto;
  }

  /* the narrow cut fits — nothing left to scroll sideways */
  .governed__fig {
    overflow-x: visible;
  }
}