/* ==========================================================================
   Lucky Systems — demo: operations reporting & exception dashboard
   Light-primary page; the run stage is the single dark product moment.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------ Hero ------------------------------ */

/* ------------------------- Figure cuts (wide / narrow) -------------------------
   Every diagram on this page ships two drawings: the desktop cut, and a phone
   cut with a narrower viewBox, fewer marks and shorter labels. Below 560px we
   swap the drawing rather than scaling the desktop one down — a scaled-down
   diagram is what pushes label text under the legibility floor. */

svg.fig-narrow { display: none; }

@media (max-width: 560px) {
  .hero__fig svg.fig-wide,
  .charts__card svg.fig-wide { display: none; }

  .hero__fig svg.fig-narrow,
  .charts__card svg.fig-narrow { display: block; }
}

.hero { overflow: hidden; }

.hero__grid { align-items: center; }

/* Give the hero figure real presence — it is the page's argument in one image. */
@media (min-width: 1025px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--s-12);
  }
  .hero .display-2 { font-size: clamp(40px, 4.1vw, 62px); }
}

.hero__accent {
  background: linear-gradient(100deg, var(--blue) 10%, var(--blue-deep) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__cta { flex-wrap: wrap; }

/* --- Hero figure: 3 sources → rules → 2,400 records → 1 exception → 1 person --- */

.hero__fig {
  box-shadow: var(--shadow-lift);
  display: grid;
  gap: var(--s-4);
}

.hero__fig svg { max-width: 100%; width: 100%; }

.hero__fig-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.hero__fig-id {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--muted);
}

/* Kit primitives, restated at the light-band geometry contract so the
   figure can never render invisible if a token is missing. */
.hero__fig .dg-channel path {
  fill: none;
  stroke: var(--rf-ch-1, #2F9AA8);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.hero__fig .dg-port circle { fill: var(--rf-port, #0B4F8A); }
.hero__fig .dg-node {
  fill: var(--rf-node-1, #1077D7);
  stroke: var(--paper-card, #fff);
  stroke-width: 2;
}
.hero__fig .dg-ring {
  fill: none;
  stroke: var(--rf-ring, rgba(16, 119, 215, .22));
  stroke-width: 1.5;
}
.hero__fig .dg-output {
  fill: none;
  stroke: var(--rf-out, #0B4F8A);
  stroke-width: 3;
  stroke-linecap: round;
}
.hero__fig .dg-human {
  fill: none;
  stroke: var(--rf-amber, #E7A63A);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}
.hero__fig .dg-human-dot { fill: var(--rf-amber, #E7A63A); }
.hero__fig .dg-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  fill: var(--muted);
}
.hero__fig .dg-label--accent { fill: var(--blue-deep, #0B4F8A); }
.hero__fig .dg-label--human { fill: #8A5D05; font-weight: 600; }
.hero__fig .dg-plate {
  fill: var(--paper-card, #fff);
  stroke: var(--line, rgba(11, 34, 64, .14));
  stroke-width: 1.5;
}
.hero__fig .dg-plate--human {
  fill: #FDF7EA;
  stroke: rgba(231, 166, 58, .55);
}

.hero__fig-src {
  font-family: var(--font-ui);
  font-size: 11.5px;
  fill: var(--body);
}

.hero__ticks rect { fill: rgba(11, 79, 138, .22); }

.hero__tick-exc {
  fill: var(--amber-bright, #E7A63A);
  stroke: #B57C10;
  stroke-width: 1;
}

.hero__tick-halo {
  fill: none;
  stroke: var(--amber-bright, #E7A63A);
  stroke-width: 1.5;
  opacity: .5;
  transform-origin: 415.5px 117.5px;
  animation: heroPulse 2.8s var(--e-inout, ease-in-out) infinite;
}

/* The phone cut puts the exception tick somewhere else, so the pulse needs its
   own origin. */
.hero__fig .hero__tick-halo--m { transform-origin: 138px 226.5px; }

@keyframes heroPulse {
  0%, 100% { transform: scale(.72); opacity: .7; }
  55%      { transform: scale(1);   opacity: 0; }
}

.hero__exc-label { font-size: 10px; letter-spacing: 1.1px; }

.hero__owner {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 650;
  fill: var(--ink);
}

.hero__plate-div { stroke: rgba(181, 124, 16, .3); stroke-width: 1; }

/* One quiet block under the CTAs: what this is, then where else it runs.
   (Replaces the disclaimer slab that used to compete here — the synthetic
   notice now sits once, under the figure it describes.) */
.hero__meta {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  max-width: 52ch;
}

.hero__cat {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.hero__cat-k {
  display: block;
  margin-bottom: .35em;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__alts { margin: 0; line-height: 2; font-size: var(--t-xs); color: var(--muted); }

.hero__alt {
  display: inline-block;
  margin-right: var(--s-2);
  padding: .15em .7em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  font-size: var(--t-xs);
  white-space: nowrap;
}

/* ------------------------------ Run stage ------------------------------ */

#stage .section-head { margin-bottom: var(--s-10); }

.run__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-10);
  align-items: stretch;
}

.run__panel {
  max-width: none;
  width: 100%;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .75);
}

.run__side { display: grid; grid-template-rows: auto 1fr; gap: var(--s-2); align-content: start; }

/* Panel and rail should end together — no black void under the shorter column. */
.run__panel { display: flex; flex-direction: column; }
/* The feed row absorbs the slack, so the panel never ends in a white void. */
.run__panel .dash {
  flex: 1;
  align-content: stretch;
  grid-template-rows: auto auto auto auto 1fr;
}

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

.run__pill {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .3em .8em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}

.run__pill--live { color: var(--ok-hi); border-color: rgba(79, 211, 154, .35); }

/* --- The simulated dashboard screen (its own light palette, from source) --- */

.dash {
  --d-bg: #FAFCFE;
  --d-card: #FFFFFF;
  --d-ink: #17324A;
  --d-mut: #5C6B78;
  --d-soft: #5A6A78;
  --d-line: #E4EBF1;
  background: var(--d-bg);
  color: var(--d-ink);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
  font-family: var(--font-ui);
}

.dash__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.dash__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  /* solid base first: the label must stay legible even if the gradient is
     dropped, and the audit reads background-color. */
  background-color: #0B4F8A;
  background-image: linear-gradient(135deg, #0B4F8A, #1F7FA8);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  flex: none;
}

.dash__titles { display: grid; line-height: 1.35; min-width: 0; }
.dash__title { font-weight: 650; font-size: 16px; }
.dash__sub { color: var(--d-mut); font-size: 12.5px; }

.dash__tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.dash__tab {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 .85em;
  border: 1px solid var(--d-line);
  border-radius: var(--r-pill);
  background: #FFFFFF;
  color: #5A6A78;
  font-family: var(--font-mono);
  font-size: 11px; /* legibility floor — never below 11px rendered */
  letter-spacing: .07em;
  white-space: nowrap;
}

/* Tab follows the scene: 0–1 overview · 2–4 queue · 5 health */
[data-scene="0"] .dash__tab--1, [data-scene="1"] .dash__tab--1,
[data-scene="2"] .dash__tab--2, [data-scene="3"] .dash__tab--2, [data-scene="4"] .dash__tab--2,
[data-scene="5"] .dash__tab--3 {
  border-color: #1077D7;
  background: #1077D7;
  color: #FFFFFF;
}

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

.dash__tile {
  border: 1px solid var(--d-line);
  background: var(--d-bg);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.dash__tile-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--d-soft);
}

.dash__tile-value {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 20px;
  color: #17324A;
  font-variant-numeric: tabular-nums;
}

/* KPI value swaps by scene */
.kv { display: none; }
[data-scene="0"] .kv--sync { display: inline; font-size: 16px; }
[data-scene="1"] .kv--full, [data-scene="2"] .kv--full, [data-scene="3"] .kv--full,
[data-scene="4"] .kv--full, [data-scene="5"] .kv--full { display: inline; }
.kv--zero { display: inline; }
[data-scene="2"] .kv--zero, [data-scene="3"] .kv--zero { display: none; }
[data-scene="2"] .kv--one, [data-scene="3"] .kv--one { display: inline; }

[data-scene="2"] .dash__tile--exc,
[data-scene="3"] .dash__tile--exc {
  border-color: rgba(192, 138, 46, .45);
  background: #FBF6EC;
}
[data-scene="2"] .dash__tile--exc .dash__tile-value,
[data-scene="3"] .dash__tile--exc .dash__tile-value { color: #8A6318; }

/* --- Views --- */

.dash__views {
  border: 1px solid var(--d-line);
  background: var(--d-card);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  min-height: 232px;
  align-content: start;
}

.dash__view { display: none; gap: var(--s-3); }

/* The funnel fills its frame instead of leaving a dead slab under "Completed". */
.dash__view--funnel { min-height: 190px; align-content: space-between; }
[data-scene="0"] .dash__view--funnel, [data-scene="1"] .dash__view--funnel { display: grid; }
[data-scene="2"] .dash__view--queue, [data-scene="3"] .dash__view--queue,
[data-scene="4"] .dash__view--queue { display: grid; }
[data-scene="5"] .dash__view--health { display: grid; }

.dash__view-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--d-soft);
  margin: 0;
}

.dash__fun-row {
  display: grid;
  grid-template-columns: 82px 1fr 40px;
  align-items: center;
  gap: var(--s-3);
  font-size: 12.5px;
  color: var(--d-mut);
}

.dash__fun-track {
  display: block;
  height: 9px;
  border-radius: var(--r-pill);
  background: rgba(11, 34, 64, .08);
  overflow: hidden;
}

/* Same funnel treatment as the light-band chart: blue = volume, both places. */
.dash__fun-bar {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #0F6FC8, #0B4F8A);
}

.dash__fun-n {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}

.dash__q-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  border: 1px solid var(--d-line);
  background: var(--d-bg);
  border-radius: var(--r-xs);
  padding: var(--s-2) var(--s-3);
  font-size: 12.5px;
  color: var(--d-ink);
  width: 100%;
  text-align: left;
  font-family: inherit;
}

/* the exception row inside the simulated app is a jump target too */
button.dash__q-row {
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--d-1) var(--e-out), box-shadow var(--d-1) var(--e-out);
}
button.dash__q-row:hover { box-shadow: 0 0 0 3px rgba(192, 138, 46, .22); }

.dash__pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: .25em .7em;
  border-radius: var(--r-pill);
  background: #EDF2F6;
  color: #5C6B78;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  white-space: nowrap;
}

/* queue status swaps by scene */
.st { display: none; }
[data-scene="0"] .st--syncing { display: inline; }
[data-scene="1"] .st--ok, [data-scene="2"] .st--ok, [data-scene="3"] .st--ok,
[data-scene="4"] .st--ok, [data-scene="5"] .st--ok { display: inline; }
[data-scene="0"] .st--synced, [data-scene="1"] .st--synced { display: inline; }
[data-scene="2"] .st--exception { display: inline; }
[data-scene="3"] .st--assigned { display: inline; }
[data-scene="4"] .st--resolved, [data-scene="5"] .st--resolved { display: inline; }

[data-scene="2"] .dash__q-row--exc, [data-scene="3"] .dash__q-row--exc {
  border-color: rgba(192, 138, 46, .45);
  background: #FBF6EC;
}
[data-scene="2"] .dash__pill--exc, [data-scene="3"] .dash__pill--exc {
  background: #C08A2E;
  color: #FFFFFF;
}
[data-scene="4"] .dash__q-row--exc, [data-scene="5"] .dash__q-row--exc {
  border-color: rgba(69, 183, 196, .5);
  background: #F0FAFB;
}
[data-scene="4"] .dash__pill--exc, [data-scene="5"] .dash__pill--exc {
  background: #45B7C4;
  color: #FFFFFF;
}

.dash__pill--run    { background: #45B7C4; color: #FFFFFF; }
.dash__pill--paused { background: #C08A2E; color: #FFFFFF; }
.dash__pill--idle   { background: #EDF2F6; color: #5C6B78; }

/* --- Message feed --- */

.dash__feed { display: grid; min-height: 64px; align-items: end; }

.dash__msg {
  display: none;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--d-line);
  background: var(--d-card);
  color: var(--d-ink);
  font-size: 13px;
  line-height: 1.5;
  max-width: 92%;
}

[data-scene="0"] [data-bubble="0"], [data-scene="1"] [data-bubble="1"],
[data-scene="2"] [data-bubble="2"], [data-scene="3"] [data-bubble="3"],
[data-scene="4"] [data-bubble="4"], [data-scene="5"] [data-bubble="5"] { display: block; }

.dash__who {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--d-soft);
  margin-bottom: .3em;
}

.dash__msg--warn {
  border-color: rgba(192, 138, 46, .45);
  background: #FBF6EC;
}
.dash__msg--warn .dash__who { color: #8A6318; }

.dash__msg--human {
  justify-self: end;
  border-color: rgba(69, 183, 196, .5);
  background: #F0FAFB;
}
.dash__msg--human .dash__who { color: #2A7E89; }

/* --- The page's one disclosure --- */

/* It lives inside the simulated screen, so it cannot be cropped out of a
   screenshot of the records it describes. Stated as a fact about a
   demonstration, in the screen's own quiet metadata voice — never the amber
   caution slab, which on this page is reserved for the human gate. */
.dash .dash__note {
  margin: 0;
  padding: var(--s-3) 0 0;
  border: 0;
  border-top: 1px solid var(--d-line);
  border-radius: 0;
  background: none;
  color: var(--d-mut);
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  max-width: 62ch;
}
.dash .dash__note::before { content: none; }

/* --- Transport (top of the run — the play affordance must be unmissable) --- */

.run__transport {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-8);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
}

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

.run__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 550;
  cursor: pointer;
  transition: background var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out), transform var(--d-1) var(--e-out);
}

.run__btn:hover { background: var(--bg-card-3); border-color: var(--accent); }
.run__btn:active { transform: translateY(1px); }

/* Icon buttons carry a word: nobody should have to decode a glyph. */
.run__btn--icon { padding: 0 var(--s-3); gap: .45em; }

.run__btn-t {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.run__btn--play {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  padding: 0 var(--s-5);
  min-width: 116px; /* play/pause swap in place — no jump in the bar */
}
.run__btn[disabled] { opacity: .4; cursor: not-allowed; }
.run__btn[disabled]:hover { background: var(--bg-card-2); border-color: var(--line-strong); }
.run__btn--play:hover { background: var(--blue-hi); border-color: var(--blue-hi); color: #06121F; }

.run__btn--pause {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.run__btn--pause:hover { background: var(--bg-card-3); color: var(--ink); }

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

.run__pos {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.run__pos b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.run__track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  overflow: hidden;
}

.run__bar {
  display: block;
  height: 100%;
  width: 0;
  min-width: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue-hi), var(--cyan-hi));
  transition: width var(--d-3) var(--e-out);
}

/* --- Timeline rail: every step is a jump target --- */

.run__rail-hint {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.run__step { position: relative; }

.run__step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 30px;
  bottom: calc(var(--s-2) * -1);
  width: 2px;
  background: var(--line-soft);
}
.run__step:last-child::before { display: none; }

.run__step-btn {
  position: relative;
  width: 100%;
  display: grid;
  gap: 3px;
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-6) + 22px);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out), opacity var(--d-3) var(--e-out);
}

.run__step-btn:hover { background: var(--bg-card); border-color: var(--line); }

.run__marker {
  position: absolute;
  left: 14px;
  top: 17px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg);
  transition: border-color var(--d-2) var(--e-out), background var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}

.run__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.run__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  color: var(--muted);
}

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

.run__meta {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--muted);
  white-space: nowrap;
}

.run__result {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--accent);
}
.run__result::before { content: "→ "; }

/* --- The three states must be unmistakable --- */

/* future: dimmed, waiting */
.run__step[data-run-state="future"] .run__step-btn { opacity: .55; }
.run__step[data-run-state="future"] .run__result { visibility: hidden; }

/* past: done, receded */
.run__step[data-run-state="past"] .run__step-btn { opacity: .78; }
.run__step[data-run-state="past"] .run__marker {
  border-color: var(--accent);
  background: var(--accent);
}
.run__step[data-run-state="past"] .run__title { font-weight: 500; color: var(--body); }
.run__step[data-run-state="past"] .run__result { color: var(--muted); }
.run__step[data-run-state="past"] .run__step-btn:hover,
.run__step[data-run-state="future"] .run__step-btn:hover { opacity: 1; }

/* current: foregrounded */
.run__step[data-run-state="current"] .run__step-btn {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.run__step[data-run-state="current"] .run__marker {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}
.run__step[data-run-state="current"] .run__label { color: var(--accent); }

/* the human gate is amber, in every state */
.run__step--human .run__label { color: var(--amber); }
.run__step--human[data-run-state="current"] .run__step-btn {
  background: color-mix(in srgb, var(--amber) 13%, var(--bg-card));
  border-color: color-mix(in srgb, var(--amber) 50%, transparent);
  box-shadow: inset 3px 0 0 0 var(--amber);
}
.run__step--human[data-run-state="current"] .run__marker,
.run__step--human[data-run-state="past"] .run__marker {
  border-color: var(--amber);
  background: var(--amber);
}
.run__step--human[data-run-state="current"] .run__marker {
  box-shadow: 0 0 0 5px rgba(231, 166, 58, .22);
}
.run__step--human .run__result { color: var(--amber); }

/* --- Cause and effect strip: arrived → did → record → owner --- */

.flow {
  margin-top: var(--s-12);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  overflow: hidden;
}

/* The strip is its own unit, not a fourth thing crammed under the player. */
.flow__head {
  margin: 0;
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.flow__row {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

[data-scene="0"] .flow__row[data-flow="0"],
[data-scene="1"] .flow__row[data-flow="1"],
[data-scene="2"] .flow__row[data-flow="2"],
[data-scene="3"] .flow__row[data-flow="3"],
[data-scene="4"] .flow__row[data-flow="4"],
[data-scene="5"] .flow__row[data-flow="5"] { display: grid; }

.flow__step { display: none; }

.flow__cell {
  position: relative;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-5) var(--s-6);
  border-left: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  color: var(--ink);
  line-height: 1.4;
}
.flow__cell:first-of-type { border-left: 0; }

/* the chevron that makes it read as a chain */
.flow__cell + .flow__cell::before {
  content: "";
  position: absolute;
  left: -5px;
  top: calc(var(--s-5) + 3px);
  width: 9px;
  height: 9px;
  border-top: 1.5px solid var(--line-strong);
  border-right: 1.5px solid var(--line-strong);
  transform: rotate(45deg);
  background: var(--bg-card);
}

.flow__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

.flow__cell--hot { color: var(--amber); font-weight: 550; }
.flow__cell--hot .flow__k { color: var(--amber); }

.flow__row--exc { background: color-mix(in srgb, var(--amber) 8%, transparent); }

/* ------------------------------ Charts band ------------------------------ */

.charts__grid { align-items: stretch; }

.charts__card {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.charts__card svg { max-width: 640px; }

.charts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

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

.charts__text { margin: 0; }

.charts__amber { color: #8A5D05; font-weight: 600; }

/* SVG chart parts */
.fx-label text, .fx-label { font-family: var(--font-mono); font-size: 13px; fill: var(--muted); }
.fx-label--amber { fill: #8A5D05; font-weight: 700; }
.fx-num text { font-family: var(--font-mono); font-size: 13px; font-weight: 600; fill: var(--ink); }
.fx-track rect { fill: rgba(11, 34, 64, .07); }
.fx-grid line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.fx-axis text { font-family: var(--font-mono); font-size: 11.5px; fill: var(--muted); }
.fx-note { font-family: var(--font-mono); font-size: 11.5px; fill: var(--muted); }
.fx-bar-ok { fill: var(--rf-ch-1, #2F9AA8); }
.fx-bar-open { fill: none; stroke: var(--rf-ch-1, #2F9AA8); stroke-width: 2.5; stroke-dasharray: 5 4; }
.fx-bar-exc { fill: var(--amber-bright, #E7A63A); }
.fx-exc-dot { fill: var(--amber-bright, #E7A63A); stroke: #B57C10; stroke-width: 2; }

/* funnel drop-off: the chart teaches what the copy doesn't */
.fx-drop-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  fill: var(--muted);
}
.fx-drop text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* The biggest loss is emphasised by weight, not by amber — on this page amber
   only ever means "a person is required". */
.fx-drop text:first-child { fill: var(--ink); font-weight: 700; }

.fx-deadline {
  stroke: #B57C10;
  stroke-width: 2;
  stroke-dasharray: 5 5;
  opacity: .85;
}
.fx-deadline-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  font-weight: 600;
  fill: #8A5D05;
}

.fx-exc-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  font-weight: 700;
  fill: #8A5D05;
}

/* Ledger */
.charts__ledger { display: grid; gap: var(--s-4); }

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 520px;
}

.ledger th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-strong);
}

.ledger td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  color: var(--body);
}

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

.ledger tr:last-child td { border-bottom: 0; }

.ledger__exc td { background: rgba(231, 166, 58, .07); }
.ledger__exc td:nth-child(2) { color: #8A5D05; font-weight: 550; }

/* ==========================================================================
   SCENE — a day of operations resolving
   One larger cinematic board: six ordinary records queue, run and close on
   their own across a working day; one leaves the board in amber at 02:05,
   sits with a named owner, and returns closed at 08:12 before the deadline.
   Framed in the .panel app-window treatment (the honest "photograph").
   ========================================================================== */

.day {
  max-width: none;
  width: 100%;
  margin: 0;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .75);
  display: flex;
  flex-direction: column;
}

.day__body {
  /* Simulated product surface on a dark band. As with .dash above, the screen
     palette is stated literally: the theme --rf-* tokens resolve to their dark
     colourway inside this band and would render invisible on a white screen.
     Every value below is the light-band geometry contract colour, held in one
     block so it can be promoted to tokens later. */
  --y-bg: #FAFCFE;
  --y-card: #FFFFFF;
  --y-ink: #17324A;
  --y-mut: #5C6B78;
  --y-soft: #5A6A78;
  --y-line: #E4EBF1;
  --y-hair: rgba(92, 107, 120, .20);
  --y-tick: rgba(92, 107, 120, .55);
  --y-ch: #2F9AA8;
  --y-ch-soft: rgba(47, 154, 168, .55);
  --y-port: #0B4F8A;
  --y-out: #0B4F8A;
  --y-node: #1077D7;
  --y-ring: rgba(16, 119, 215, .28);
  --y-amber: #E7A63A;
  --y-amber-line: #B57C10;
  --y-amber-ink: #8A5D05;
  --y-amber-fill: #FBF6EC;

  background: var(--y-bg);
  color: var(--y-ink);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
  font-family: var(--font-ui);
  flex: 1;
  align-content: start;
}

.day__scroll { overflow-x: auto; overflow-y: hidden; }

/* This is a scene, not a figure: it must clear core's 680px cap on
   `main svg[viewbox]` — hence the deliberately specific selector. */
.day .day__scroll .day__board {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* --- kit primitives, restated at the light geometry contract --- */

.day .dg-channel,
.day .dg-channel path {
  fill: none;
  stroke: var(--y-ch);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.day .dg-channel--soft {
  stroke: var(--y-ch-soft);
  stroke-width: 2;
  stroke-dasharray: 2 6;
}
.day .dg-output {
  fill: none;
  stroke: var(--y-out);
  stroke-width: 3;
  stroke-linecap: round;
}
.day .dg-port { fill: var(--y-port); }
.day .dg-port--open {
  fill: var(--y-card);
  stroke: var(--y-port);
  stroke-width: 2;
}
.day .dg-ring {
  fill: none;
  stroke: var(--y-ring);
  stroke-width: 1.5;
}
.day .dg-human {
  fill: none;
  stroke: var(--y-amber-line);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}
.day .dg-human-dot {
  fill: var(--y-amber);
  stroke: var(--y-amber-line);
  stroke-width: 1.5;
}
.day .dg-hair {
  stroke: var(--y-hair);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.day .dg-tick {
  stroke: var(--y-tick);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.day .dg-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  fill: var(--y-soft);
}
.day .dg-label--human { fill: var(--y-amber-ink); font-weight: 600; }
.day .dg-label--accent { fill: #0B4F8A; }
.day .dg-plate {
  fill: var(--y-card);
  stroke: var(--y-line);
  stroke-width: 1.5;
}
.day .dg-plate--human {
  fill: var(--y-amber-fill);
  stroke: rgba(181, 124, 16, .55);
}

/* --- scene-specific marks --- */

.day__rule, .day__div { stroke: var(--y-line); stroke-width: 1; }

.day__deadline {
  stroke: var(--y-amber-line);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.day__big {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 28px;
  fill: var(--y-ink);
  font-variant-numeric: tabular-nums;
}
.day__val {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 17px;
  fill: var(--y-ink);
  font-variant-numeric: tabular-nums;
}
.day__val--human { fill: var(--y-amber-ink); }

.day__owner {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 15px;
  fill: var(--y-ink);
}

.day__grain-tick { fill: rgba(11, 79, 138, .20); }
.day__grain { fill: url(#dayGrain); }

/* the one focal point: the human gate breathes */
.day__halo {
  fill: none;
  stroke: var(--y-amber);
  stroke-width: 1.5;
  opacity: .55;
  transform-origin: 260px 140px;
  animation: dayHalo 3s var(--e-inout, ease-in-out) infinite;
}

@keyframes dayHalo {
  0%, 100% { transform: scale(.6); opacity: .75; }
  60%      { transform: scale(1);  opacity: 0; }
}

/* travelling packets — the board is moving, not a still */
.day .dg-packet {
  fill: var(--y-node);
  offset-distance: 0%;
  offset-rotate: 0deg;
  animation: dayPacket 4.4s linear infinite;
}
.day .dg-packet--human { fill: var(--y-amber); }

.day .day__pk--1 { offset-path: path("M396 322 H566"); animation-delay: .2s; }
.day .day__pk--2 { offset-path: path("M557 400 H786"); animation-delay: 1.5s; }
.day .day__pk--3 { offset-path: path("M634 426 H871"); animation-delay: 2.6s; }
.day .day__pk--4 { offset-path: path("M176 258 C 202 258, 212 152, 240 152"); animation-delay: .6s; animation-duration: 3.2s; }
.day .day__pk--5 { offset-path: path("M430 152 C 462 152, 476 258, 491 258"); animation-delay: 2.2s; animation-duration: 3.2s; }

@keyframes dayPacket {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.day .day__cap { margin: 0; color: var(--y-mut); }

.day__hint {
  display: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--y-soft);
}

/* Legible at 375: the board scrolls at a readable scale, never squashed. */
@media (max-width: 1100px) {
  .day .day__scroll .day__board { min-width: 960px; }
  .day__hint { display: block; }
}

@media (max-width: 560px) {
  .day__body { padding: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .day__halo { animation: none; opacity: .5; transform: scale(.85); }
  .day .dg-packet { display: none; }
}

/* ------------------------------ Before / after ------------------------------ */

.ba { display: grid; gap: var(--s-4); align-content: start; }

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

.ba--after .ba__title { color: var(--accent); }
.ba--after { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

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

.ba__list li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--body);
}

.ba__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--line-strong);
}

.ba--after .ba__list li::before { background: var(--accent); border-radius: 50%; }

.ba__foot {
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
  font-family: var(--font-display);
  font-size: var(--t-title-3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
}

.ba__foot--owned {
  color: #8A5D05;
  display: flex;
  align-items: baseline;
  gap: .6em;
}

.ba__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber-bright, #E7A63A);
  box-shadow: 0 0 0 4px rgba(231, 166, 58, .22);
  transform: translateY(-1px);
}

.ba { transition: box-shadow var(--d-2) var(--e-out), transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out); }
.ba:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.ba--after:hover { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }

/* ------------------------------ Calculator ------------------------------ */

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

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

.calc__out {
  float: right;
  font-family: var(--font-mono);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.calc__formula {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: var(--s-4);
}

.calc__formula span { color: var(--ink); }

.calc__tiles {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-4);
}

.calc__tile--primary {
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  background: color-mix(in srgb, var(--blue) 5%, var(--bg-card));
}
.calc__tile--primary .tile__value { color: var(--blue-deep); }

.calc__foot { align-items: flex-start; gap: var(--s-4); }

.calc__foot-text { display: grid; gap: var(--s-1); justify-items: start; min-width: 0; }

.calc__note { margin: 0; max-width: 58ch; }

/* Comfortable targets: the sliders and both controls in the footer clear 44px
   in both axes on a phone. */
.calc__disclosures {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .3em;
  margin-left: -.3em;
  font-size: var(--t-sm);
}

.calc .range { min-height: 44px; }

#calc-reset { min-height: 44px; }

/* ------------------------------ All demos ------------------------------ */

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

.demos__name {
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  font-weight: 600;
  color: var(--ink);
}

.demos__desc {
  font-size: var(--t-sm);
  color: var(--body);
  margin-top: calc(var(--s-1) * -1);
}

.demos__card--current {
  border-style: dashed;
  background: var(--bg);
}

.demos__card .link-arrow { margin-top: auto; }

.demos__card.card--link { transition: transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out); }
.demos__card.card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
}
.demos__card.card--link:hover .demos__name { color: var(--blue-deep); }

/* charts + calculator lift */
.charts__card, .charts__ledger, .calc {
  transition: box-shadow var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.charts__card:hover, .charts__ledger:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); }

/* ------------------------------ CTA ------------------------------ */

.cta__row { justify-content: center; flex-wrap: wrap; }
.cta .eyebrow--plain { justify-content: center; }

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 1024px) {
  .run__grid { grid-template-columns: 1fr; }
  .run__panel { max-width: 720px; margin-inline: auto; width: 100%; }
  .run__side { max-width: 720px; margin-inline: auto; width: 100%; }
  .calc__tiles { grid-template-columns: 1fr 1fr; }
  .calc__tile--primary { grid-column: 1 / -1; }
  .flow__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__cell { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line-soft); }
  .flow__cell:nth-of-type(-n + 2) { border-top: 0; }
  .flow__cell:nth-of-type(odd) { border-left: 0; }
  .flow__cell + .flow__cell::before { display: none; }
}

@media (max-width: 768px) {
  .calc__grid { grid-template-columns: 1fr; }
  .charts__card svg { max-width: 100%; }

  /* The hero figure is drawn at ~0.7 scale on a phone: hold the geometry
     contract by drawing it heavier, so it still reads from a metre away. */
  .hero__fig .dg-label { font-size: 12px; letter-spacing: 1.1px; }
  .hero__fig .hero__exc-label { font-size: 11.5px; letter-spacing: .9px; }
  .hero__fig-src { font-size: 13px; }
  .hero__owner { font-size: 18px; }
  .hero__fig .dg-channel path { stroke-width: 3; }
  .hero__fig .dg-output { stroke-width: 3.5; }
  .hero__fig .dg-human { stroke-width: 2.5; }
  .hero__fig .dg-ring { stroke-width: 2; }
}

@media (max-width: 560px) {
  .dash { padding: var(--s-3); }
  .dash__kpis { grid-template-columns: 1fr; }
  .dash__tile { grid-template-columns: 1fr auto; align-items: center; }
  .dash__tile-value { font-size: 17px; }
  .dash__fun-row { grid-template-columns: 72px 1fr 34px; }
  .dash__q-row { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .calc__tiles { grid-template-columns: 1fr; }
  .cta__row .btn { width: 100%; }
  .hero__cta .btn { width: 100%; }

  .run__transport { gap: var(--s-4); padding: var(--s-3); }
  .run__tbtns { width: 100%; justify-content: space-between; }
  .run__btn-t { display: none; }
  .run__btn--icon { padding: 0; }
  .flow__head { padding: var(--s-3) var(--s-4); }
  .run__btn--play { flex: 1; }
  .run__meter { flex-basis: 100%; }
  .run__step-btn { padding-right: var(--s-3); }
  .run__head { flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
  .flow__row { grid-template-columns: 1fr; }
  .flow__cell { border-left: 0; border-top: 1px solid var(--line-soft); }
  .flow__cell:first-of-type { border-top: 0; }

  /* Type inside the phone cuts. Drawn against a narrow viewBox, so these sizes
     land well above the 9px legibility floor once the SVG is laid out. */
  .hero__fig svg.fig-narrow .dg-label { font-size: 13px; letter-spacing: .7px; }
  .hero__fig svg.fig-narrow .hero__fig-src { font-size: 14px; }
  .hero__fig svg.fig-narrow .hero__owner { font-size: 17px; }

  .charts__card svg.fig-narrow .fx-deadline-label { font-size: 13px; letter-spacing: .9px; }
  .charts__card svg.fig-narrow .fx-exc-label { font-size: 13px; }
}

/* Reduced motion: nothing depends on animation — the whole run reads as a
   static, complete document with every step and every consequence visible. */
@media (prefers-reduced-motion: reduce) {
  .run__marker, .run__btn, .run__result, .run__title, .run__step-btn, .run__bar { transition: none; }
  .hero__tick-halo { animation: none; opacity: .55; transform: scale(.85); }
  .ba, .demos__card.card--link { transition: none; }
  .ba:hover, .demos__card.card--link:hover { transform: none; }

  .run__step[data-run-state="future"] .run__step-btn,
  .run__step[data-run-state="past"] .run__step-btn { opacity: 1; }
  .run__step[data-run-state="future"] .run__result { visibility: visible; }

  .flow__row { display: grid; border-top: 1px solid var(--line); }
  .flow__row:first-child { border-top: 0; }
  .flow__step {
    display: block;
    grid-column: 1 / -1;
    padding: var(--s-3) var(--s-6) 0;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .flow__cell { padding-top: var(--s-3); }
}