@import url("./alef-tokens.css");

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg0: var(--color-surface-base);
  --bg1: var(--color-surface-raised);
  --bg2: var(--color-surface-raised-2);
  --field: var(--color-surface-overlay);
  --ink: var(--color-text-primary);
  --ink-mid: var(--color-text-secondary);
  --ink-quiet: var(--color-text-tertiary);
  --accent-ink: var(--color-action-primary);
  --border-subtle: var(--color-border-subtle);
  --border-strong: var(--color-border-default);
  --graph-ambient: var(--color-text-tertiary);
  --line: var(--color-border-subtle);
  --line-strong: var(--color-border-default);
  --accent: var(--color-action-primary);
  --accent-soft: var(--color-action-primary-soft);
  --accent-line: var(--color-action-primary-line);
  --on-accent: var(--color-text-on-action);
  --risk: var(--color-status-critical);
  --success: var(--color-status-positive);
  --warning: var(--color-status-caution);
  --withheld: #a8afb9;
  --header-bg: rgba(11, 12, 14, 0.88);
  --shadow: 0 18px 50px rgb(0 0 0 / 26%);
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --shell: 76rem;
  --gutter: clamp(1rem, 4vw, 3.5rem);

  /*
   * Shape scale. One system, two values, no exceptions:
   *   --radius-surface  every panel, container, button, input, nav item, chip
   *   --radius-mark     round semantic marks only (status dots, meters)
   * Geometry inside the record animations (2px/1px/50% corners on the source
   * and node glyphs) is drawing, not surface, and is deliberately excluded.
   */
  --radius-surface: 4px;
  --radius-mark: 999px;

  /*
   * Section rhythm. The page is paced rather than evenly spaced: chapters that
   * carry an argument open up, supporting ledgers stay tight, so the scroll has
   * grouping instead of seven identical beats.
   */
  --beat-tight: clamp(3.5rem, 5.5vw, 5rem);
  --beat: clamp(5rem, 8vw, 7rem);
  --beat-open: clamp(6rem, 10vw, 9.5rem);
}

html[data-theme="light"] {
  color-scheme: light;
  /*
   * The fill/label relationship has to invert with the theme. Dark mode uses a
   * light ochre fill with the dark ink label. Light mode darkened the accent
   * for legibility as text but kept the dark label, so the primary CTA was
   * #14171c on #8a6b3a: 3.9:1, under AA, on the page's main conversion
   * control. The label is now off-white and the ochre is a step deeper, which
   * also lifts every accent-as-text use (5.2:1 on the base surface).
   */
  --accent: #836237;
  --accent-soft: rgb(131 98 55 / 10%);
  --accent-line: rgb(131 98 55 / 45%);
  --on-accent: #fbfaf8;
  --withheld: #59616b;
  --header-bg: rgba(245, 247, 250, 0.9);
  --shadow: 0 18px 50px rgb(35 42 53 / 8%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  overflow-x: clip;
  background: var(--bg0);
}

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: clip;
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
summary {
  font: inherit;
}

button,
input {
  color: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
}

svg {
  display: block;
}

figure,
h1,
h2,
h3,
h4,
p,
ol,
ul,
dl,
dd {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

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

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 0.9rem;
  transform: translateY(-180%);
  border: 1px solid var(--accent);
  border-radius: var(--radius-surface);
  background: var(--bg1);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
}

.skip-link:focus {
  transform: none;
}

.section-shell,
.header-inner {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.brand svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: var(--bg0);
  stroke: currentColor;
  stroke-width: 1.25;
}

.brand circle {
  fill: currentColor;
  stroke: none;
}

.desktop-nav,
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.desktop-nav a,
.theme-toggle {
  min-height: 2.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-surface);
  color: var(--ink-mid);
  font-size: 13px;
  font-weight: 500;
}

.desktop-nav a:hover,
.theme-toggle:hover {
  background: var(--bg2);
  color: var(--ink);
}

.desktop-nav .nav-action {
  margin-left: 0.4rem;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.theme-toggle {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  background: transparent;
}

.theme-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.theme-icon-moon,
html[data-theme="light"] .theme-icon-sun {
  display: none;
}

html[data-theme="light"] .theme-icon-moon {
  display: block;
}

.mobile-nav {
  display: none;
}

.content-section {
  border-top: 1px solid var(--line);
  padding-block: clamp(5rem, 9vw, 8rem);
}

.section-index,
.eyebrow,
.micro-label,
.card-label,
.receipt-kind,
.form-heading > p {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow,
.section-index {
  color: var(--accent);
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: min(42rem, calc(100svh - 4.75rem));
  display: grid;
  align-items: center;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

/*
 * The hero carried a 6rem decorative grid behind everything. It was ruled
 * lines drawn to look designed, and it fought the consequence graph, which is
 * the one thing in the hero that means something. Removed: the graph is the
 * background now.
 */

.hero-layout {
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 0.88fr) minmax(26rem, 1.12fr);
}

/*
 * The copy stack was a uniform 1.2rem gap between five elements of five
 * different registers, which reads as a form, not a composition. Each interval
 * is now set to the relationship it carries: the label sits on the headline,
 * the lede steps back, the actions get real air, and the disclosure is
 * separated by a rule because it is a different kind of statement.
 */
.hero-copy {
  display: block;
  max-width: 34rem;
}

.hero-copy .eyebrow {
  margin-bottom: 1.15rem;
}

.hero-copy .hero-lede {
  margin-top: 1.4rem;
}

.hero-copy .hero-actions {
  margin-top: 2.1rem;
}

.hero-copy .trust-line {
  margin-top: 2rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--line);
}

.hero h1,
.chapter-heading h2,
.evaluation-section h2,
.detail-hero h1 {
  max-width: 15ch;
  font-family: var(--font-serif);
  /* One chapter-headline scale everywhere, pinned to the hero's (operator, 2026-07-27). */
  font-size: clamp(2.9rem, 4.2vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero h1 {
  max-width: 13ch;
  font-size: clamp(2.9rem, 4.2vw, 3.9rem);
  line-height: 0.98;
}

.hero-lede {
  max-width: 43rem;
  color: var(--ink-mid);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.primary-action,
.secondary-action,
.story-transition {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-surface);
  font-size: 13px;
  font-weight: 600;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.primary-action {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.primary-action:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent) 88%, var(--ink));
}

.secondary-action {
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.secondary-action:hover {
  border-color: var(--ink-quiet);
  background: var(--bg1);
}

.trust-line {
  max-width: 42rem;
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
}

.anim-mount {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
  box-shadow: var(--shadow);
}

.anim-stage {
  min-height: 30rem;
}

.hero-anim-mount .anim-stage {
  min-height: clamp(29rem, 52vw, 38rem);
}

.anim-mount figcaption {
  min-height: 3.1rem;
  display: flex;
  align-items: center;
  padding: 0.75rem 11rem 0.75rem 1rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.035em;
  line-height: 1.45;
  text-transform: uppercase;
}

.anim-fallback {
  min-height: inherit;
  display: grid;
  align-content: center;
  gap: 1.5rem;
  padding: 2rem;
  color: var(--ink-mid);
}

.anim-fallback > p {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.anim-fallback > strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
}

.anim-local-controls {
  position: absolute;
  z-index: 5;
  right: 0.75rem;
  bottom: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-surface);
  background: var(--bg2);
}

.anim-local-controls button {
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-surface);
  background: transparent;
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.anim-local-controls button:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--accent-ink);
}

.anim-local-controls button:disabled {
  cursor: default;
  color: var(--ink-quiet);
}

.anim-local-controls [data-anim-status] {
  min-width: 3.7rem;
  padding-inline: 0.4rem;
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.045em;
  text-align: right;
  text-transform: uppercase;
}

.agent-mark,
.person-mark {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg2);
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
}

.chapter-heading {
  display: grid;
  align-items: start;
  gap: 2rem;
  grid-template-columns: minmax(9rem, 0.38fr) minmax(0, 1fr);
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.chapter-heading > div {
  display: grid;
  gap: 1.5rem;
}

.chapter-heading h2,
.evaluation-section h2 {
  font-size: clamp(2.9rem, 4.2vw, 3.9rem);
  line-height: 0.98;
}

.chapter-heading > div > p {
  max-width: 48rem;
  color: var(--ink-mid);
  font-size: 15px;
  line-height: 1.7;
}

.consequence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.consequence-card {
  position: relative;
  display: grid;
  min-height: 29rem;
  align-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 3px solid var(--line-strong);
}

.consequence-card + .consequence-card {
  border-left: 1px solid var(--line);
}

.consequence-card--engineering {
  border-top-color: var(--risk);
}

.consequence-card--customer {
  border-top-color: var(--warning);
}

.consequence-card--revenue {
  border-top-color: var(--accent);
}

.card-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.card-label > span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.consequence-card h3 {
  max-width: 25ch;
  margin-top: 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.3vw, 2.05rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.consequence-summary {
  max-width: 32ch;
  margin-top: 0.75rem;
  color: var(--ink-mid);
  font-size: 13px;
}

.consequence-grammar {
  display: grid;
  border-top: 1px solid var(--line);
}

.consequence-grammar div {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--line);
}

.consequence-grammar dt {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.consequence-grammar dd {
  color: var(--ink-mid);
  font-size: 12px;
  line-height: 1.4;
}

.focal-value {
  font-family: var(--font-serif);
  font-size: 1.25em;
  font-weight: 500;
}

.state-mark {
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.5;
  text-transform: uppercase;
}

.state-mark--observed {
  color: var(--success);
}

.state-mark--predicted {
  color: var(--accent);
}

.state-mark--withheld {
  color: var(--withheld);
}

.state-mark--proposed {
  color: var(--warning);
}

.state-mark--confirmed {
  color: var(--success);
}

.prediction-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 11px;
}

.confidence-meter {
  position: relative;
  display: inline-block;
  width: 4.5rem;
  height: 0.35rem;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-mark);
}

.confidence-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
}

.lens-explorer {
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.lens-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.lens-tabs button {
  position: relative;
  min-height: 3.25rem;
  cursor: pointer;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 12px;
}

.lens-tabs button:last-child {
  border-right: 0;
}

.lens-tabs button[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--ink);
}

.lens-tabs button[aria-selected="true"]::after {
  position: absolute;
  right: 0.9rem;
  bottom: -1px;
  left: 0.9rem;
  height: 2px;
  background: var(--accent);
  content: "";
}

.lens-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.lens-record-head > div {
  display: grid;
  gap: 0.25rem;
}

.lens-record-head strong {
  font-size: 13px;
  font-weight: 500;
}

.lens-record-head > p {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.lens-panel {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.lens-panel > div:first-child {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.lens-panel h3 {
  max-width: 25ch;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.lens-panel dl {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--line);
}

.lens-panel dl div {
  display: grid;
  gap: 1rem;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.lens-panel dt {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.lens-panel dd {
  font-size: 13px;
}

.persistent-record-line {
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

.story-transition {
  width: fit-content;
  margin: 2.25rem auto 0;
  border: 1px solid var(--line-strong);
}

.story-transition:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.workspace-section {
  background:
    linear-gradient(var(--bg0), var(--bg0)) padding-box,
    radial-gradient(circle at 50% 45%, var(--accent-soft), transparent 65%) border-box;
}

.proof-line {
  color: var(--accent) !important;
  font-family: var(--font-mono);
  font-size: 12px !important;
  letter-spacing: 0.06em;
}

/* ============================================================================
 * THE GOVERNED RECORD (shared-context figure)
 *
 * Operator, 2026-07-27: "It was not just about spacing. It was also about
 * creatively checking if that's the best way to show that data."
 *
 * Four geometries were built and rendered before choosing this one; the bench
 * is docs/record-form-candidates.html and the screenshots are beside it.
 *   A. Rail: five marks on one hairline. Reads as a five-step process. The
 *      approval carries no more weight than anything else, so the one claim
 *      that distinguishes this product is invisible.
 *   B. Ledger: one entry per line. Legible as an audit log, but most of the
 *      width is empty rules, the gate is a barely-visible dashed row, and it
 *      would be the third rules-and-rows block on this page.
 *   D. Convergence: contributions arriving from both margins into a column.
 *      Reads as a flowchart, needs narration, and reintroduces exactly the
 *      alternating left/right the operator objected to.
 *   C. Gated bar (this one): the record is a bar. Claims dock onto it from
 *      above. The bar is SEVERED at the human gate, with a cut cap on each
 *      end, and the human stands in the gap. After the gate the record
 *      resumes in the observed colour, the receipt appends to it, and an
 *      arrow says it continues.
 *
 * C won because the governance claim is structural rather than decorative:
 * the reader sees that the record physically cannot cross the human without
 * being told so. It is the only candidate where the shape argues the point.
 *
 * Geometry derives from --mark and the bar positions, so it cannot drift.
 * ========================================================================= */

.shared-record-motion {
  --mark: 2.05rem;
  --gate-mark: 2.6rem;
  --stem: 1.7rem;
  /* Labels clear the gate glyph, which is the tallest thing on the axis. */
  --word-drop: 1.8rem;

  position: relative;
  overflow: hidden;
  min-height: clamp(10.5rem, 13vw, 12.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
  box-shadow: 0 12px 32px rgb(0 0 0 / 10%);
}

.shared-record-motion__field,
.shared-record-motion__field ol {
  position: absolute;
  inset: 0;
}

/*
 * The record, in two pieces. The gap between them is the gate: 51% to 63%,
 * with the human centred at 57%. Each cut end carries a cap so the break reads
 * as a severance rather than as a line hidden behind a box.
 */
.shared-record-motion__rail,
.shared-record-motion__trace {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

.shared-record-motion__rail {
  /* Starts at the first claim: the record begins when something is observed,
     so there is no stub of line hanging off the left. */
  right: 49%;
  left: 12%;
  background: var(--ink-quiet);
  color: var(--ink-quiet);
  transform-origin: left;
}

.shared-record-motion__trace {
  right: 6%;
  left: 63%;
  background: var(--success);
  color: var(--success);
  transform-origin: left;
}

.shared-record-motion__rail::after,
.shared-record-motion__trace::after {
  position: absolute;
  width: 1px;
  height: 0.78rem;
  top: 50%;
  transform: translateY(-50%);
  background: currentColor;
  content: "";
}

.shared-record-motion__rail::after {
  right: 0;
}

.shared-record-motion__trace::after {
  left: 0;
}

/* The record continues past the receipt. */
.shared-record-motion__trace > i {
  position: absolute;
  width: 0.44rem;
  height: 0.44rem;
  top: 50%;
  right: -0.06rem;
  transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid var(--success);
  border-right: 2px solid var(--success);
}

/*
 * z-index sits on the contribution, not the glyph: the translate that centres
 * each one creates a stacking context, so a z-index on the glyph alone is
 * scoped inside it and the bar paints straight through the marks.
 */
.record-contribution {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: clamp(4.5rem, 11vw, 7rem);
  transform: translateX(-50%);
}

/* Claims dock onto the record from above, all four identically. */
.record-contribution__source {
  position: absolute;
  bottom: calc(50% + var(--stem) + 0.05rem);
  left: 50%;
  width: var(--mark);
  height: var(--mark);
  transform: translateX(-50%);
  border: 1px solid var(--ink-mid);
  background: var(--bg1);
}

.record-contribution__source::before,
.record-contribution__source::after {
  position: absolute;
  content: "";
}

.record-contribution__link {
  position: absolute;
  bottom: calc(50% + 0.05rem);
  left: 50%;
  width: 1px;
  height: var(--stem);
  transform: translateX(-50%);
  transform-origin: bottom;
  background: var(--line-strong);
}

/* One baseline for all five words. */
.record-contribution__label {
  position: absolute;
  top: calc(50% + var(--word-drop));
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 1;
  white-space: nowrap;
}

.record-contribution__node {
  display: none;
}

/*
 * The gate is the exception, and it is the only one. Its glyph sits IN the
 * record rather than docked above it, because that is what it is, and it runs
 * a quarter larger in full-strength ink because this is the moment the section
 * is about. No stem: nothing connects it to the record, it interrupts it.
 */
.record-contribution--gate .record-contribution__source {
  bottom: auto;
  top: 50%;
  width: var(--gate-mark);
  height: var(--gate-mark);
  transform: translate(-50%, -50%);
  border-color: var(--ink);
}

.record-contribution--gate .record-contribution__source::before,
.record-contribution--gate .record-contribution__source::after {
  border-color: var(--ink);
}

.record-contribution--gate .record-contribution__link {
  display: none;
}

.record-contribution--gate .record-contribution__label {
  color: var(--ink);
}

/* OBSERVED: circle, filled centre. */
.record-contribution--observed .record-contribution__source {
  border-color: var(--success);
  border-radius: 50%;
}

.record-contribution--observed .record-contribution__source::after {
  width: 0.4rem;
  height: 0.4rem;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--success);
}

/* WITHHELD: square, struck through. */
.record-contribution--withheld .record-contribution__source {
  border-color: var(--withheld);
  border-radius: 2px;
}

.record-contribution--withheld .record-contribution__source::after {
  width: 1px;
  height: 64%;
  top: 18%;
  left: 50%;
  transform: rotate(45deg);
  background: var(--withheld);
}

/*
 * PREDICTED: diamond. The box is divided by root two before rotating so the
 * rotated silhouette occupies the same footprint as the other docked marks.
 */
.record-contribution--predicted .record-contribution__source {
  width: calc(var(--mark) / 1.414);
  height: calc(var(--mark) / 1.414);
  border-color: var(--accent);
  transform: translateX(-50%) rotate(45deg);
}

.record-contribution--predicted .record-contribution__source::after {
  width: 0.34rem;
  height: 0.34rem;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
}

/* APPROVAL: a person. */
.record-contribution--approval .record-contribution__source {
  border-radius: 2px;
}

.record-contribution--approval .record-contribution__source::before {
  width: 0.36rem;
  height: 0.36rem;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--ink-mid);
  border-radius: 50%;
}

.record-contribution--approval .record-contribution__source::after {
  width: 0.86rem;
  height: 0.36rem;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--ink-mid);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

/* RECEIPT: a document, ruled. */
.record-contribution--receipt .record-contribution__source {
  border-color: var(--success);
  border-radius: 2px;
  background:
    linear-gradient(var(--success), var(--success)) 50% 36% / 0.62rem 1px no-repeat,
    linear-gradient(var(--success), var(--success)) 50% 62% / 0.44rem 1px no-repeat,
    var(--bg1);
}

/*
 * Motion, and the reason it is worth having: the post-gate half of the record
 * does not draw until the approval has landed. The animation says the same
 * thing the section says, which is that nothing proceeds past the human.
 * One pass on entry, then it stays complete (landing-page.js:
 * playSharedRecordOnce). Nothing loops, so there is no perpetual movement for
 * a local pause control to stop. The primed floor is 0.45, not near zero: the
 * static frame has to read on its own before the trace ever runs.
 */
.shared-record-motion.is-primed .shared-record-motion__rail,
.shared-record-motion.is-primed .shared-record-motion__trace {
  opacity: 0.25;
  transform: translateY(-50%) scaleX(0);
}

.shared-record-motion.is-primed .record-contribution__source,
.shared-record-motion.is-primed .record-contribution__link,
.shared-record-motion.is-primed .record-contribution__label {
  opacity: 0.45;
}

.shared-record-motion.is-playing .shared-record-motion__rail {
  animation: record-bar 1900ms cubic-bezier(0.3, 0, 0.1, 1) both;
}

.shared-record-motion.is-playing .shared-record-motion__trace {
  animation: record-bar 1100ms cubic-bezier(0.3, 0, 0.1, 1) 2900ms both;
}

.shared-record-motion.is-playing .record-contribution__source {
  animation: record-mark 620ms cubic-bezier(0.3, 0, 0.1, 1) var(--delay) both;
}

.shared-record-motion.is-playing .record-contribution__link {
  animation: record-stem 620ms cubic-bezier(0.3, 0, 0.1, 1) var(--delay) both;
}

.shared-record-motion.is-playing .record-contribution__label {
  animation: record-word 620ms cubic-bezier(0.3, 0, 0.1, 1) var(--delay) both;
}

@keyframes record-bar {
  from {
    opacity: 0.25;
    transform: translateY(-50%) scaleX(0);
  }

  to {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
  }
}

/*
 * Uses the independent `translate` property rather than `transform`, so the
 * mark arrives without clobbering the diamond's rotation or the gate's
 * centring transform.
 */
@keyframes record-mark {
  from {
    opacity: 0.45;
    translate: 0 -0.5rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes record-stem {
  from {
    opacity: 0.45;
    transform: translateX(-50%) scaleY(0.1);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes record-word {
  from {
    opacity: 0.45;
  }

  to {
    opacity: 1;
  }
}

.worked-example-label {
  margin-bottom: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.incident-section .persistent-record-line {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-top: 0;
}

.workspace-frame {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
  box-shadow: var(--shadow);
}

.workspace-frame > .worked-example-label {
  margin: 0;
  padding: 0.7rem 1.25rem;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--field) 66%, var(--bg1));
}

.workspace-topbar {
  display: flex;
  min-height: 4.8rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg2);
}

.workspace-topbar > div {
  display: grid;
  gap: 0.25rem;
}

.workspace-topbar strong {
  font-size: 13px;
  font-weight: 500;
}

.workspace-topbar > p {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
}

.workspace-columns {
  display: grid;
  grid-template-columns: minmax(12rem, 0.72fr) minmax(27rem, 1.8fr) minmax(15rem, 0.88fr);
}

.participants-panel,
.context-panel,
.decision-panel {
  min-width: 0;
  padding: 1.25rem;
}

.context-panel,
.decision-panel {
  border-left: 1px solid var(--line);
}

.participants-panel {
  background: color-mix(in srgb, var(--field) 58%, var(--bg1));
}

.context-panel {
  background:
    radial-gradient(circle, var(--line) 0.7px, transparent 0.8px) 0 0 / 1rem 1rem,
    var(--bg1);
}

.decision-panel {
  background: color-mix(in srgb, var(--bg2) 68%, var(--bg1));
}

.participants-panel > header,
.context-panel > header,
.decision-panel > header {
  display: flex;
  min-height: 2.75rem;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.participants-panel h3,
.context-panel h3,
.decision-panel h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
}

.participant-rail-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.85rem;
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.055em;
}

.participant-rail-label span {
  color: var(--accent);
}

.participant-list {
  display: grid;
  padding-top: 0.35rem;
}

.participant-list li {
  display: grid;
  min-height: 4.25rem;
  align-items: center;
  gap: 0.75rem;
  grid-template-columns: 2rem minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}

.participant-list .agent-mark {
  width: 2rem;
  height: 2rem;
}

.participant-list li > span:last-child,
.human-participants article p,
.decision-owner > span:last-child {
  display: grid;
}

.participant-list li > span:last-child {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.participant-list li > span:last-child strong,
.participant-list li > span:last-child small {
  grid-column: 1 / -1;
}

.participant-list strong,
.human-participants strong,
.decision-owner strong {
  font-size: 12px;
  font-weight: 500;
}

.participant-list small,
.human-participants small,
.decision-owner small {
  color: var(--ink-quiet);
  font-size: 11px;
  line-height: 1.45;
}

.participant-list em {
  grid-row: 1;
  grid-column: 2;
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
}

.participant-list li[data-agent-state="idle"] em {
  color: var(--ink-quiet);
}

.participant-list li[data-agent-state="working"] em {
  color: var(--warning);
}

.participant-list li[data-agent-state="working"] .agent-mark {
  border-color: var(--warning);
  color: var(--warning);
}

.participant-list li[data-agent-state="returned"] .agent-mark {
  border-color: color-mix(in srgb, var(--success) 56%, var(--line));
  color: var(--success);
}

.human-participants {
  display: grid;
  gap: 0.75rem;
  padding-top: 1.25rem;
}

.human-participants article,
.decision-owner {
  display: grid;
  align-items: center;
  gap: 0.7rem;
  grid-template-columns: 2.5rem minmax(0, 1fr);
}

.person-mark {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.canvas-question {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 0 0.7rem;
  border-bottom: 1px solid var(--line);
}

.canvas-question strong {
  font-size: 13px;
  font-weight: 500;
}

.canvas-question > span {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.context-canvas {
  position: relative;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-top: 1rem;
}

.canvas-artifact {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--success);
  border-radius: var(--radius-surface);
  background: color-mix(in srgb, var(--bg2) 94%, transparent);
  box-shadow: 0 0.65rem 1.4rem rgb(0 0 0 / 8%);
}

.canvas-artifact--incident {
  min-height: 13.25rem;
  grid-column: 1 / span 7;
}

.canvas-artifact--account {
  min-height: 13.25rem;
  grid-column: 8 / -1;
}

.canvas-artifact--policy {
  min-height: 9.5rem;
  grid-column: 1 / span 5;
  border-top-style: dashed;
  border-top-color: var(--withheld);
}

.canvas-artifact--prediction {
  min-height: 9.5rem;
  grid-column: 6 / -1;
  border-top-style: dashed;
  border-top-color: var(--accent);
}

.canvas-artifact__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.canvas-artifact__header > span:last-child,
.canvas-artifact > small,
.canvas-artifact--policy > p {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.canvas-artifact h4 {
  max-width: 38ch;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.artifact-dependency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin: -0.9rem -0.9rem 0.15rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px dashed var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.035em;
}

.canvas-trend {
  display: grid;
  gap: 0.25rem;
  margin-top: auto;
}

.canvas-trend svg {
  width: 100%;
  height: 4.15rem;
  overflow: visible;
}

.canvas-trend line {
  stroke: var(--warning);
  stroke-dasharray: 3 3;
  stroke-width: 1;
}

.canvas-trend path {
  fill: none;
  stroke: var(--success);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.canvas-trend circle {
  fill: var(--warning);
  stroke: var(--bg2);
  stroke-width: 1.5;
}

.canvas-trend p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.canvas-trend strong {
  color: var(--warning);
  font-weight: 500;
}

.canvas-artifact table {
  width: 100%;
  margin-top: auto;
  border-collapse: collapse;
  font-size: 11px;
}

.canvas-artifact th,
.canvas-artifact td {
  padding: 0.38rem 0.2rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.canvas-artifact th {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
}

.canvas-artifact th:last-child,
.canvas-artifact td:last-child {
  text-align: right;
}

.canvas-focal {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 0.95;
}

.canvas-artifact--prediction .prediction-row {
  display: grid;
  grid-template-columns: auto 1fr;
}

.confidence-slot {
  display: grid;
  gap: 0.45rem;
}

.confidence-slot i {
  position: relative;
  display: block;
  width: 100%;
  height: 0.55rem;
  border-right: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  background:
    linear-gradient(var(--accent-line), var(--accent-line)) center / 100% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 0.55rem no-repeat;
}

.confidence-slot span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.role-views {
  display: grid;
  gap: 0.75rem;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.role-views article {
  display: grid;
  min-width: 0;
  min-height: 3.9rem;
  align-items: center;
  gap: 0.65rem;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-surface);
  background: color-mix(in srgb, var(--accent-soft) 76%, var(--bg2));
}

.role-views article p {
  display: grid;
}

.role-views strong {
  font-size: 12px;
  font-weight: 500;
}

.role-views small {
  color: var(--ink-quiet);
  font-size: 11px;
}

.presence-cursor {
  position: relative;
  width: 0.9rem;
  height: 1.1rem;
  align-self: start;
  margin-top: 0.2rem;
}

.presence-cursor::before {
  position: absolute;
  width: 0.75rem;
  height: 0.9rem;
  border: 1px solid var(--accent);
  background: var(--bg2);
  clip-path: polygon(0 0, 100% 70%, 58% 73%, 42% 100%);
  content: "";
}

.presence-cursor--revenue::before {
  border-color: var(--success);
}

.contribution-list {
  display: grid;
  padding-top: 0.7rem;
}

.contribution-list > li {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 2rem minmax(0, 1fr);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.step-number {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.contribution-list article {
  display: grid;
  gap: 0.35rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--success);
}

.contribution-list article.withheld-artifact {
  border-left-style: dashed;
  border-left-color: var(--withheld);
}

.contribution-list article.prediction-artifact {
  border-left-style: dashed;
  border-left-color: var(--accent);
}

.contribution-list article > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.contribution-list article > header > strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.contribution-list article > p {
  font-size: 13px;
}

.contribution-list article > small {
  color: var(--ink-quiet);
  font-size: 11px;
}

.proposal-card {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-surface);
  background: var(--accent-soft);
}

.proposal-card h4 {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.1;
}

.proposal-card dl {
  display: grid;
}

.proposal-card dl div {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.55rem;
  border-top: 1px solid var(--accent-line);
}

.proposal-card dt {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.proposal-card dd {
  font-size: 12px;
}

.decision-actions {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 0.75rem;
}

.decision-action {
  display: grid;
  min-height: 2.6rem;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  color: var(--ink-mid);
  font-size: 11px;
}

.decision-action--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.decision-owner {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.approval-receipt {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.85rem;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--success) 46%, var(--line));
  border-left: 3px solid var(--success);
  border-radius: var(--radius-surface);
  background: color-mix(in srgb, var(--success) 8%, var(--bg2));
}

.approval-receipt > strong {
  font-size: 12px;
  font-weight: 500;
}

.approval-receipt > small {
  color: var(--ink-quiet);
  font-size: 11px;
  line-height: 1.45;
}

.inspect-link,
.text-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.75rem;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.workspace-receipt-preview {
  display: grid;
  min-height: 4.5rem;
  align-items: center;
  gap: 1rem;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--line-strong);
  background: var(--bg2);
}

.workspace-receipt-preview article {
  display: grid;
  gap: 0.12rem;
}

.workspace-receipt-preview article > span {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.workspace-receipt-preview article > strong {
  font-size: 12px;
  font-weight: 500;
}

.workspace-receipt-preview > i {
  color: var(--accent);
  font-style: normal;
}

.workspace-frame figcaption {
  padding: 0.7rem 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

.sequence-controls {
  display: grid;
  align-items: center;
  gap: 0.65rem;
  grid-template-columns: minmax(8rem, 1fr) auto auto auto;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--field) 66%, var(--bg1));
  font-family: var(--font-mono);
  font-size: 11px;
}

.sequence-progress {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(8, 1fr);
}

.sequence-progress i {
  height: 2px;
  background: var(--line-strong);
}

.sequence-progress i.is-complete,
.sequence-progress i.is-current {
  background: var(--accent);
}

.sequence-controls > p {
  min-width: 9rem;
  color: var(--ink-quiet);
}

.sequence-controls button {
  min-width: 4.6rem;
  min-height: 2.75rem;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: transparent;
  font-size: 12px;
}

.sequence-controls button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.sequence-controls button:disabled {
  cursor: default;
  opacity: 0.5;
}

.js-ready [data-story-sequence][data-sequence-playing="true"] [data-sequence-item] {
  opacity: 0.66;
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    background 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.js-ready [data-story-sequence][data-sequence-playing="true"] [data-sequence-item].is-sequence-complete {
  opacity: 0.9;
}

.js-ready [data-story-sequence][data-sequence-playing="true"] [data-sequence-item].is-sequence-current {
  opacity: 1;
  transform: translateY(-1px);
}

.js-ready [data-story-sequence][data-sequence-playing="true"]
  :is(.canvas-artifact, .proposal-card, .approval-receipt).is-sequence-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line), 0 0.75rem 1.8rem rgb(0 0 0 / 14%);
}

.js-ready [data-story-sequence][data-sequence-playing="true"]
  .participant-list li.is-sequence-current {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
}

.receipt-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.receipt-flow article {
  position: relative;
  display: grid;
  min-height: 16rem;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border-top: 3px solid var(--line-strong);
}

.receipt-flow article + article {
  border-left: 1px solid var(--line);
}

.receipt-flow article:nth-child(1) {
  border-top-color: var(--warning);
}

.receipt-flow article:nth-child(2) {
  border-top-color: var(--accent);
}

.receipt-flow article:nth-child(3),
.receipt-flow article:nth-child(4) {
  border-top-color: var(--success);
}

.receipt-flow h3 {
  min-height: 4.4rem;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.receipt-flow article > p:not(.receipt-kind) {
  color: var(--ink-mid);
  font-size: 12px;
}

.receipt-state {
  width: fit-content;
  margin-top: auto;
  padding: 0.35rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-surface);
  font-family: var(--font-mono);
  font-size: 11px;
}

.receipt-state--held {
  color: var(--warning);
}

.receipt-state--approved {
  color: var(--accent);
}

.receipt-state--observed,
.receipt-state--confirmed {
  color: var(--success);
}

.durable-line {
  padding: 1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

.full-loop-link {
  display: flex;
  width: fit-content;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0 auto;
  color: var(--ink-mid);
  font-size: 13px;
  font-weight: 600;
}

.full-loop-link:hover {
  color: var(--accent);
}

.breadth-band {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}

.breadth-band--promoted {
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, var(--accent-soft), transparent 38%),
    color-mix(in srgb, var(--bg1) 72%, var(--bg0));
}

.breadth-heading {
  display: grid;
  align-items: end;
  gap: 2rem;
  grid-template-columns: minmax(9rem, 0.38fr) minmax(0, 1fr);
  margin-bottom: 1.75rem;
}

.breadth-heading > div {
  display: grid;
  gap: 1rem;
}

.breadth-heading h2 {
  max-width: 24ch;
  font-family: var(--font-serif);
  font-size: clamp(2.9rem, 4.2vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}

.breadth-heading > div > p {
  max-width: 48rem;
  color: var(--ink-mid);
  font-size: 14px;
}

.breadth-ledger {
  border-top: 1px solid var(--line-strong);
}

.breadth-ledger li,
.breadth-ledger li > a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.7rem;
}

.breadth-ledger li {
  min-height: 3.4rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-mid);
  font-size: 14px;
  line-height: 1.5;
}

.breadth-ledger li:not(.breadth-ledger__example) {
  padding-left: 11.2rem;
}

.breadth-ledger li > a {
  justify-content: space-between;
  flex: 1;
}

.breadth-ledger li > a:hover {
  color: var(--accent);
}

.breadth-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.7rem;
}

.breadth-ledger__example {
  min-height: 5.4rem !important;
  align-items: center !important;
}

.breadth-ledger__example a > strong {
  color: var(--accent);
  font-size: 13px;
  white-space: nowrap;
}

.breadth-ledger i {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: normal;
}

.breadth-kind {
  width: 10.5rem;
  flex: 0 0 10.5rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.trust-layout {
  display: grid;
  align-items: start;
  gap: clamp(3rem, 7vw, 6rem);
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.86fr);
}

.law-list {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.law-list li {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.law-list > li > span {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.law-list h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.law-list p {
  max-width: 38rem;
  margin-top: 0.5rem;
  color: var(--ink-mid);
  font-size: 14px;
}

.deployment-summary {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.deployment-summary h3 {
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}

.deployment-modes {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
}

.deployment-summary > p:not(.micro-label, .deployment-modes) {
  color: var(--ink-mid);
  font-size: 14px;
}

.boundary-diagram {
  padding: 1rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-surface);
  background:
    linear-gradient(90deg, transparent 49.8%, var(--line) 50%, transparent 50.2%),
    var(--accent-soft);
}

.boundary-diagram > p {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.boundary-diagram > div {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.boundary-diagram span {
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--bg1);
  color: var(--ink-mid);
  font-size: 11px;
  text-align: center;
}

.evaluation-section {
  background: var(--bg1);
}

.evaluation-layout {
  display: grid;
  align-items: start;
  gap: clamp(3rem, 8vw, 7rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(25rem, 1.15fr);
}

.evaluation-layout > div:first-child {
  display: grid;
  gap: 1.5rem;
}

.evaluation-layout > div:first-child > p:last-child {
  max-width: 39rem;
  color: var(--ink-mid);
  font-size: 15px;
}

.signup {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg0);
}

.form-heading {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.form-heading h3 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
}

.signup > label {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.form-row {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.form-row input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  outline: 0;
  background: var(--bg1);
  font-size: 14px;
}

.form-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.form-row input[aria-invalid="true"] {
  border-color: var(--risk);
}

.form-status,
.form-note {
  min-height: 1.2rem;
  color: var(--ink-quiet);
  font-size: 12px;
}

.form-status[data-state="error"] {
  color: var(--risk);
}

.form-status[data-state="success"] {
  color: var(--success);
}

.company-field {
  position: absolute;
  left: -9999px;
}

.site-footer {
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: grid;
  min-height: 9rem;
  align-items: center;
  gap: 1.5rem;
  grid-template-columns: auto 1fr auto;
}

.footer-inner nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.footer-inner nav a,
.footer-inner > p {
  color: var(--ink-quiet);
  font-size: 12px;
}

.footer-inner nav a:hover {
  color: var(--ink);
}

.noscript-note {
  padding: 1rem;
  border-top: 1px solid var(--line);
  background: var(--bg1);
  color: var(--ink-mid);
  font-size: 12px;
  text-align: center;
}

/* Dedicated pages reuse the same register without repeating homepage density. */
.detail-main {
  min-height: calc(100svh - 4.75rem);
}

.detail-hero {
  padding-block: clamp(5rem, 10vw, 9rem);
}

.detail-hero .section-shell {
  display: grid;
  gap: 1.5rem;
}

.detail-hero h1 {
  max-width: 14ch;
}

.detail-hero .detail-lede {
  max-width: 48rem;
  color: var(--ink-mid);
  font-size: 16px;
}

.detail-register {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.detail-register > article,
.detail-register > section {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  background: var(--bg1);
}

.detail-register h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
}

.detail-register h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.detail-register p,
.detail-register li {
  max-width: 50rem;
  color: var(--ink-mid);
  font-size: 14px;
}

.detail-register ul,
.detail-register ol {
  display: grid;
  gap: 0.55rem;
}

.detail-register li {
  padding-left: 1rem;
  border-left: 2px solid var(--line-strong);
}

.detail-back {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: 13px;
}

.detail-crosslink {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--bg1);
  color: var(--ink-mid);
  font-size: 13px;
}

.detail-crosslink:hover {
  border-color: var(--accent-line);
  color: var(--ink);
}

.detail-crosslink span {
  color: var(--accent);
}

.detail-crosslink-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-page-cta {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.detail-page-cta .detail-crosslink {
  margin-top: 0;
}

@media (max-width: 68rem) {
  .hero {
    min-height: auto;
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 52rem;
  }

  .workspace-columns {
    grid-template-columns: minmax(12rem, 0.7fr) minmax(22rem, 1.3fr);
  }

  .decision-panel {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .proposal-card {
    grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr);
  }

  .proposal-card .state-mark,
  .proposal-card h4 {
    grid-column: 1;
  }

  .proposal-card dl {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

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

  .receipt-flow article:nth-child(3) {
    border-left: 0;
  }

  .receipt-flow article:nth-child(n + 3) {
    border-top-width: 1px;
  }

  .breadth-ledger li:not(.breadth-ledger__example) {
    padding-left: 0;
  }
}

@media (max-width: 52rem) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    position: relative;
    display: block;
  }

  .mobile-nav summary {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    cursor: pointer;
    place-content: center;
    gap: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    list-style: none;
  }

  .mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav summary span {
    display: block;
    width: 1.1rem;
    height: 1px;
    background: var(--ink);
  }

  .mobile-nav[open] summary span:first-child {
    transform: translateY(3px) rotate(45deg);
  }

  .mobile-nav[open] summary span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }

  .mobile-nav nav {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    display: grid;
    width: min(19rem, calc(100vw - 2rem));
    padding: 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-surface);
    background: var(--bg1);
    box-shadow: var(--shadow);
  }

  .mobile-nav nav a {
    min-height: 2.9rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }

  .mobile-nav nav a:last-child {
    border-bottom: 0;
  }

  .chapter-heading {
    grid-template-columns: 1fr;
  }

  .detail-crosslink-row {
    grid-template-columns: 1fr;
  }

  .breadth-heading {
    grid-template-columns: 1fr;
  }

  .breadth-kind {
    width: 100%;
    flex-basis: 100%;
  }

  .consequence-grid {
    grid-template-columns: 1fr;
  }

  .consequence-card {
    min-height: 13rem;
  }

  .consequence-card + .consequence-card {
    border-left: 0;
  }

  .lens-panel {
    grid-template-columns: 1fr;
  }

  .lens-record-head,
  .workspace-topbar {
    align-items: start;
    flex-direction: column;
  }

  .lens-record-head > p,
  .workspace-topbar > p {
    text-align: left;
  }

  .workspace-columns {
    grid-template-columns: 1fr;
  }

  .context-panel,
  .decision-panel {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .proposal-card {
    grid-template-columns: 1fr;
  }

  .proposal-card .state-mark,
  .proposal-card h4,
  .proposal-card dl {
    grid-row: auto;
    grid-column: auto;
  }

  .trust-layout,
  .evaluation-layout {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    padding-block: 2rem;
  }

  .footer-inner nav {
    justify-content: start;
  }
}

@media (max-width: 39rem) {
  :root {
    --gutter: 1rem;
  }

  .theme-toggle {
    width: 2.75rem;
    justify-content: center;
    padding-inline: 0;
  }

  .theme-toggle > span {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
  }

  .hero {
    padding-block: 2.75rem 3.5rem;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 12vw, 3.5rem);
  }

  .hero h1 br {
    display: none;
  }

  .hero-actions {
    display: grid;
  }

  .primary-action,
  .secondary-action {
    width: 100%;
  }

  .content-section {
    padding-block: 4.5rem;
  }

  .chapter-heading {
    margin-bottom: 2.5rem;
  }

  .chapter-heading h2,
  .evaluation-section h2 {
    font-size: clamp(2.75rem, 12vw, 3.5rem);
  }

  .chapter-heading h2 br {
    display: none;
  }

  .consequence-card {
    min-height: 12rem;
  }

  .lens-tabs button {
    padding-inline: 0.25rem;
    font-size: 12px;
  }

  .lens-record-head {
    display: grid;
    gap: 0.65rem;
  }

  .lens-panel {
    padding: 1.25rem;
  }

  .lens-panel dl div {
    gap: 0.45rem;
    grid-template-columns: 1fr;
  }

  .workspace-topbar {
    display: grid;
  }

  .participants-panel,
  .context-panel,
  .decision-panel {
    padding: 1rem;
  }

  .context-canvas {
    grid-template-columns: 1fr;
  }

  .canvas-artifact--incident,
  .canvas-artifact--account,
  .canvas-artifact--policy,
  .canvas-artifact--prediction,
  .role-views {
    min-height: 0;
    grid-column: 1;
  }

  .canvas-artifact--incident {
    min-height: 13rem;
  }

  .role-views {
    grid-template-columns: 1fr;
  }

  .canvas-trend p {
    align-items: start;
    flex-direction: column;
    gap: 0.1rem;
  }

  .canvas-artifact--prediction .prediction-row {
    grid-template-columns: 1fr;
  }

  .canvas-artifact--prediction .confidence-meter {
    width: 100%;
  }

  .contribution-list article > header {
    align-items: start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .workspace-receipt-preview {
    align-items: start;
    gap: 0.65rem;
    grid-template-columns: 1fr;
    padding: 0.75rem 1rem;
  }

  .workspace-receipt-preview article {
    width: 100%;
    min-height: 3.6rem;
    justify-content: center;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--line);
  }

  .workspace-receipt-preview article:last-of-type {
    border-bottom: 0;
  }

  .workspace-receipt-preview > i {
    display: none;
  }

  .sequence-controls {
    grid-template-columns: 1fr 1fr;
  }

  .sequence-progress,
  .sequence-controls > p {
    grid-column: 1 / -1;
  }

  .sequence-controls button {
    width: 100%;
  }

  .receipt-flow {
    grid-template-columns: 1fr;
  }

  .receipt-flow article {
    min-height: 14rem;
  }

  .receipt-flow article + article {
    border-top-width: 1px;
    border-left: 0;
  }

  .receipt-flow h3 {
    min-height: 0;
  }

  .decision-actions {
    grid-template-columns: 1fr;
  }

  .law-list li {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .deployment-summary {
    padding: 1.25rem;
  }

  .boundary-diagram > div {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-ready [data-story-sequence] [data-sequence-item] {
    opacity: 1 !important;
  }

}

/*
 * Round 8 hero type floor, transplanted from v3 commits 98b06f9/c2e467c.
 * The icon controls deliberately retain font-size: 0; their accessible names
 * remain in the DOM and their 44x44 target is defined by anim-hero.css.
 */
html
  :is(
    [data-anim="hero"] .anim-hero__path-readout > p,
    [data-anim="hero"] .anim-hero__payoff-tag,
    [data-anim="hero"] .anim-hero__payoff-tag i,
    [data-anim="hero"] .anim-hero__path-step > span
  ) {
  font-size: 0.6875rem;
}

html
  :is(
    [data-anim="hero"] .anim-hero__payoff-note,
    [data-anim="hero"] .anim-hero__payoff > p,
    [data-anim="hero"] .anim-hero__cue .anim-hero__cue-detail
  ) {
  font-size: 0.75rem;
}

html [data-anim="hero"] .anim-local-controls button {
  font-size: 0;
}

html [data-anim="hero"] .anim-hero__path-step small i,
html [data-anim="hero"] .anim-hero__cue text {
  font-size: 0.6875rem;
}

@media (max-width: 48rem) {
  html [data-anim="hero"] .anim-hero__path-readout {
    bottom: calc(10% - 0.6rem);
    padding-top: 0.34rem;
  }

  html [data-anim="hero"] .anim-hero__path-readout ol {
    margin-top: 0.25rem;
  }

  html [data-anim="hero"] .anim-hero__path-step {
    padding-top: 0.4rem;
  }

  html [data-anim="hero"] .anim-hero__path-step small {
    gap: 0.1rem;
  }

  html [data-anim="hero"] .anim-hero__path-step > span {
    margin-top: 0.04rem;
  }
}

/* Round 3 dedicated-page narratives */

.desktop-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"],
.footer-inner a[aria-current="page"] {
  color: var(--ink);
}

.desktop-nav a[aria-current="page"] {
  background: var(--bg2);
  box-shadow: inset 0 -1px 0 var(--accent);
}

.page-detail .detail-main {
  overflow: hidden;
}

.page-detail .detail-hero {
  position: relative;
  min-height: calc(100svh - 4.75rem);
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.page-detail .detail-hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.96%, var(--line) 50%, transparent 50.04%),
    linear-gradient(0deg, transparent 0 49.96%, var(--line) 50%, transparent 50.04%);
  background-size: 6rem 6rem;
  content: "";
  mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 24%), transparent);
  pointer-events: none;
}

.detail-hero-grid {
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(24rem, 0.98fr);
}

.detail-hero-copy {
  display: grid;
  align-content: center;
  gap: 1.55rem;
}

.page-detail .detail-hero h1 {
  max-width: 13ch;
  font-size: clamp(3.35rem, 5.6vw, 5.35rem);
}

.page-platform .detail-hero h1,
.page-security .detail-hero h1 {
  max-width: 14ch;
  font-size: clamp(3.2rem, 5vw, 4.95rem);
}

.page-detail .detail-hero .detail-lede {
  max-width: 42rem;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.7;
}

.detail-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.detail-hero-actions .detail-back {
  margin: 0;
}

.detail-disclosure {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
}

.detail-proof-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 48%, transparent), transparent 45%),
    var(--bg1);
  box-shadow: var(--shadow);
}

.detail-proof-panel::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--line-strong) 0.65px, transparent 0.8px);
  background-size: 1.1rem 1.1rem;
  content: "";
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 42%), transparent 72%);
  pointer-events: none;
}

.detail-proof-panel > * {
  position: relative;
}

.detail-proof-panel figcaption {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.035em;
}

.detail-chapter .chapter-heading {
  margin-bottom: clamp(2.75rem, 6vw, 5rem);
}

.detail-chapter .chapter-heading h2 {
  max-width: 16ch;
}

.detail-chapter .chapter-heading > div > p {
  max-width: 45rem;
}

.source-glyph {
  display: inline-grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg2);
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.source-glyph--predicted {
  border-style: dashed;
  border-color: var(--accent);
  color: var(--accent);
}

.state-mark--withheld {
  color: var(--withheld);
}

.state-mark--proposed {
  color: var(--warning);
}

.state-mark--abstain {
  color: var(--ink-quiet);
}

/* Product */

.product-loop-panel {
  min-height: 34rem;
  display: grid;
  align-content: end;
}

.detail-loop-strip {
  display: grid;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.detail-loop-strip li {
  position: relative;
  display: grid;
  min-height: 5.2rem;
  align-items: center;
  gap: 1rem;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}

.detail-loop-strip li::before {
  position: absolute;
  z-index: 0;
  width: 1px;
  height: 100%;
  left: 1.15rem;
  background: var(--accent-line);
  content: "";
}

.detail-loop-strip li:first-child::before {
  height: 50%;
  top: 50%;
}

.detail-loop-strip li:last-child::before {
  height: 50%;
  top: 0;
}

.detail-loop-strip li > span {
  z-index: 1;
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--bg1);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.detail-loop-strip li > div {
  display: grid;
}

.detail-loop-strip strong {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 400;
}

.detail-loop-strip small {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.story-ledger {
  border-top: 1px solid var(--line-strong);
  background: var(--bg1);
}

.story-ledger article {
  position: relative;
  display: grid;
  min-height: 6.6rem;
  align-items: center;
  gap: 0.75rem 1.25rem;
  grid-template-columns: auto minmax(14rem, 1fr) minmax(12rem, 0.8fr) auto;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.story-ledger article::before {
  position: absolute;
  width: 2px;
  inset-block: 0;
  left: 0;
  background: var(--success);
  content: "";
}

.story-ledger article.story-ledger__prediction::before {
  background: repeating-linear-gradient(to bottom, var(--accent) 0 4px, transparent 4px 7px);
}

.story-ledger article > div:nth-child(2) {
  display: grid;
  gap: 0.25rem;
}

.story-ledger h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
}

.ledger-proof {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.story-ledger .prediction-row {
  grid-template-columns: auto 5rem auto;
}

.ledger-end {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-top: 0;
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

.detail-lens-explorer {
  margin-top: clamp(2rem, 5vw, 4rem);
}

.detail-role-panel {
  min-height: 20rem;
}

.decision-workbench {
  display: grid;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
  grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 0.72fr);
}

.workbench-record,
.workbench-decision {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.workbench-record {
  border-right: 1px solid var(--line);
}

.workbench-record > header {
  display: grid;
  gap: 0.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-strong);
}

.workbench-record > header h3,
.workbench-decision > h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 400;
  line-height: 1.08;
}

.workbench-record > header > span {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.workbench-decision {
  display: grid;
  align-content: start;
  gap: 1rem;
  background: var(--bg2);
}

.workbench-decision > dl {
  display: grid;
}

.workbench-decision > dl div {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.65rem;
  border-top: 1px solid var(--line);
}

.workbench-decision dt,
.decision-inspection summary {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.workbench-decision dd {
  font-size: 13px;
}

.decision-inspection {
  border-block: 1px solid var(--line);
  padding-block: 0.65rem;
}

.decision-inspection summary {
  min-height: 2.75rem;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.decision-inspection summary::-webkit-details-marker {
  display: none;
}

.decision-inspection summary::after {
  color: var(--accent);
  content: "+";
}

.decision-inspection[open] summary::after {
  content: "−";
}

.decision-inspection ul {
  display: grid;
  gap: 0.45rem;
  padding-block: 0.5rem;
}

.decision-inspection li {
  padding-left: 0.75rem;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-mid);
  font-size: 12px;
}

.page-detail .decision-action {
  font-size: 12px;
}

.lifecycle-track {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--bg1);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.lifecycle-track li {
  position: relative;
  display: grid;
  min-height: 13rem;
  align-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-top: 3px solid var(--line-strong);
}

.lifecycle-track li + li {
  border-left: 1px solid var(--line);
}

.lifecycle-track li:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 2.2rem;
  right: -0.35rem;
  color: var(--accent);
  content: "→";
}

.lifecycle-track li > span {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.lifecycle-track li > div {
  display: grid;
  gap: 0.35rem;
}

.lifecycle-track strong {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 400;
}

.lifecycle-track small {
  color: var(--ink-mid);
  font-size: 11px;
}

.lifecycle-track .is-held {
  border-top-color: var(--warning);
}

.lifecycle-track .is-approved {
  border-top-color: var(--accent);
}

.lifecycle-track .is-active,
.lifecycle-track .is-complete {
  border-top-color: var(--success);
}

.lifecycle-track .is-alternate {
  border-top-style: dashed;
  border-top-color: var(--ink-quiet);
}

.receipt-stack-detail {
  display: grid;
  gap: 1px;
  margin-top: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.receipt-stack-detail article {
  display: grid;
  min-height: 15rem;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg1);
}

.receipt-stack-detail h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
}

.receipt-stack-detail article > p:not(.receipt-kind) {
  color: var(--ink-mid);
  font-size: 13px;
}

.receipt-stack-detail .receipt-state {
  margin-top: auto;
}

/* Platform */

.temporal-proof-panel {
  min-height: 33rem;
  display: grid;
  align-content: end;
}

.temporal-proof-panel > header,
.permission-path-panel > div:first-child,
.incident-command-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.temporal-proof-panel > header > span,
.incident-command-panel > header > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.temporal-proof-panel ol {
  display: grid;
  padding: 1.25rem;
}

.temporal-proof-panel li {
  display: grid;
  min-height: 4.8rem;
  align-items: center;
  gap: 0.8rem;
  grid-template-columns: 3rem auto minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}

.temporal-proof-panel time {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.temporal-proof-panel li > div {
  display: grid;
}

.temporal-proof-panel li strong {
  font-size: 13px;
  font-weight: 500;
}

.temporal-proof-panel li small {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.asof-comparison {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asof-comparison > article {
  display: grid;
  min-height: 29rem;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg1);
}

.asof-comparison article > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.asof-comparison article > header > span {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.asof-comparison h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 400;
  line-height: 1.1;
}

.asof-comparison ol {
  display: grid;
}

.asof-comparison li {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--line);
}

.asof-comparison li span,
.asof-comparison li small {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.asof-comparison li strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.asof-anchor {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(3.6rem, 7vw, 5.5rem);
  line-height: 0.9;
}

.asof-comparison article > p:not(.state-mark) {
  max-width: 35rem;
  color: var(--ink-mid);
  font-size: 14px;
}

.dependency-mechanic {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1fr);
}

.dependency-mechanic article {
  display: grid;
  min-height: 17rem;
  align-content: start;
  gap: 1.1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--success);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.dependency-mechanic h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

.dependency-mechanic article .state-mark {
  margin-top: auto;
}

.dependency-link {
  display: grid;
  place-content: center;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}

.dependency-link i {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-style: normal;
}

.coordination-register {
  display: grid;
  margin-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.coordination-register article {
  display: grid;
  min-height: 6rem;
  align-items: center;
  gap: 1rem;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}

.coordination-register article > span:first-child {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.coordination-register h3 {
  margin-top: 0.25rem;
  font-size: 14px;
  font-weight: 500;
}

.activity-trace {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.activity-trace > div {
  display: grid;
  min-height: 5.5rem;
  align-items: center;
  gap: 1rem;
  grid-template-columns: 1fr 1.35fr 1.35fr 0.7fr;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
}

.activity-trace > div:last-child {
  border-bottom: 0;
}

.activity-trace__head {
  min-height: 3rem !important;
  background: var(--bg2);
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.activity-trace strong,
.activity-trace > div > span {
  font-size: 12px;
}

.activity-trace strong {
  display: grid;
  font-weight: 500;
}

.activity-trace strong small {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
}

.activity-trace > div > span {
  color: var(--ink-mid);
}

.activity-trace > div > span:last-child {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.trace-replay-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-top: 0;
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}

.trace-replay-line span {
  color: var(--accent);
}

.relationship-ledger {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.relationship-ledger article {
  display: grid;
  min-height: 6.3rem;
  align-items: center;
  gap: 1rem;
  grid-template-columns: auto minmax(8rem, 1fr) minmax(5rem, 0.45fr) auto minmax(8rem, 1fr);
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}

.relationship-ledger article > strong {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  font-weight: 400;
}

.relationship-ledger article > i {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  text-align: center;
}

.epistemic-register {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--line);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.epistemic-register article {
  display: grid;
  min-height: 18rem;
  align-content: start;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 3px solid var(--success);
  background: var(--bg1);
}

.epistemic-register article:nth-child(2) {
  border-top-style: dashed;
  border-top-color: var(--accent);
}

.epistemic-register article:nth-child(3) {
  border-top-style: dashed;
  border-top-color: var(--withheld);
}

.epistemic-register article:nth-child(4) {
  border-top-color: var(--ink-quiet);
}

.epistemic-register h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 400;
  line-height: 1.15;
}

.epistemic-register article > p {
  color: var(--ink-mid);
  font-size: 13px;
}

.agent-contracts {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(18rem, 0.8fr);
}

.agent-contracts > article,
.budget-abstain {
  min-width: 0;
  display: grid;
  min-height: 23rem;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.agent-contracts > article > header {
  display: grid;
  align-items: center;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.agent-contracts h3,
.budget-abstain h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
}

.agent-contracts dl {
  display: grid;
}

.agent-contracts dl div {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--line);
}

.agent-contracts dt {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.agent-contracts dd {
  font-size: 13px;
}

.budget-abstain {
  border-style: dashed;
  color: var(--ink-mid);
}

.budget-abstain > p:last-child {
  font-size: 13px;
}

/* Security */

.permission-path-panel {
  min-height: 33rem;
  display: grid;
  align-content: center;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.permission-path-panel > div:first-child {
  padding-inline: 0;
}

.permission-path-panel > div:first-child,
.permission-gate {
  display: grid;
  gap: 0.25rem;
}

.permission-path-panel strong {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
}

.permission-arrow {
  display: grid;
  height: 3rem;
  place-items: center;
  color: var(--accent);
}

.permission-gate {
  padding: 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-surface);
  background: var(--accent-soft);
}

.permission-results {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.permission-results article {
  display: grid;
  min-height: 7.5rem;
  align-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--line-strong);
  background: var(--bg2);
}

.permission-results article:last-child {
  border-style: dashed;
}

.permission-results article strong {
  font-size: 1.25rem;
}

.permission-path-panel figcaption {
  margin: 1rem calc(clamp(1.25rem, 3vw, 2rem) * -1) calc(clamp(1.25rem, 3vw, 2rem) * -1);
}

.control-path {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.control-path li {
  display: grid;
  min-height: 8rem;
  align-items: start;
  gap: 1rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding: 1.3rem 1rem;
  border-bottom: 1px solid var(--line);
}

.control-path li > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.control-path li > div {
  display: grid;
  gap: 0.4rem;
}

.control-path h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 400;
}

.control-path li p:last-child {
  max-width: 48rem;
  color: var(--ink-mid);
  font-size: 14px;
}

.withheld-showcase {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
}

.withheld-primary,
.withheld-showcase > aside {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.withheld-primary {
  display: grid;
  align-content: start;
  gap: 1.4rem;
  border-top: 3px dashed var(--withheld);
}

.withheld-primary > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.withheld-primary h3 {
  max-width: 22ch;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
}

.withheld-primary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.withheld-primary dl div {
  display: grid;
  gap: 0.3rem;
  padding: 0.8rem;
  border-top: 1px solid var(--line);
}

.withheld-primary dt {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.withheld-primary dd {
  font-size: 13px;
}

.withheld-showcase > aside {
  display: grid;
  align-content: start;
  gap: 0;
}

.withheld-showcase > aside article {
  display: grid;
  gap: 0.4rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

.withheld-showcase > aside article > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.withheld-showcase > aside article > strong {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
}

.withheld-showcase > aside > p:last-child {
  margin-top: 1rem;
  color: var(--ink-mid);
  font-size: 13px;
}

.security-boundary {
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--accent);
  border-radius: var(--radius-surface);
  background:
    linear-gradient(90deg, transparent 49.92%, var(--line) 50%, transparent 50.08%),
    var(--accent-soft);
}

.security-boundary > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--accent-line);
}

.security-boundary > header > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.security-boundary__grid {
  display: grid;
  gap: 1px;
  margin-block: 1.25rem;
  background: var(--line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.security-boundary__grid article {
  display: grid;
  min-height: 10rem;
  align-content: start;
  gap: 0.6rem;
  padding: 1rem;
  background: var(--bg1);
}

.security-boundary__grid article > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.security-boundary__grid article > strong {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
  font-weight: 400;
}

.security-boundary__grid article > small {
  color: var(--ink-quiet);
  font-size: 11px;
}

.security-boundary figcaption {
  color: var(--ink-mid);
  font-size: 14px;
}

.deployment-matrix {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deployment-matrix article {
  display: grid;
  min-height: 18rem;
  align-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg1);
}

.deployment-matrix article > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.deployment-matrix h3 {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 0.95;
}

.deployment-matrix article > p {
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 11px;
}

.deployment-boundary-copy {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-top: 0;
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

.procurement-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.procurement-grid > section {
  display: grid;
  align-content: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.procurement-grid > section:last-child {
  border-style: dashed;
}

.procurement-grid section > header {
  display: grid;
  gap: 0.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.procurement-grid h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: 400;
}

.procurement-grid ul {
  display: grid;
}

.procurement-grid li {
  display: grid;
  gap: 0.4rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.procurement-grid li > span {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.procurement-grid li > strong {
  font-size: 13px;
  font-weight: 500;
}

.procurement-grid .state-mark {
  margin-top: 1rem;
}

.governance-teaser-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.governance-teaser-grid figure {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
  box-shadow: var(--shadow);
}

.governance-teaser-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--line);
  background: #0b0c0e;
}

.governance-teaser-grid figcaption {
  display: grid;
  min-height: 10.5rem;
  align-content: start;
  gap: 0.55rem;
  padding: 1rem;
}

.governance-teaser-grid figcaption > span,
.governance-teaser-grid figcaption > small {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.governance-teaser-grid figcaption > span {
  color: var(--accent);
}

.governance-teaser-grid figcaption > strong {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.7vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

.governance-teaser-grid figcaption > small {
  margin-top: auto;
}

.human-gate-flow {
  display: grid;
  align-items: stretch;
  grid-template-columns: 1fr auto 1fr auto 1fr;
}

.human-gate-flow article {
  display: grid;
  min-height: 19rem;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--warning);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.human-gate-flow article:nth-of-type(2) {
  border-top-color: var(--accent);
}

.human-gate-flow article:nth-of-type(3) {
  border-top-color: var(--success);
}

.human-gate-flow h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.7vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

.human-gate-flow article .receipt-state {
  margin-top: auto;
}

.human-gate-flow > i {
  display: grid;
  width: 3rem;
  place-items: center;
  color: var(--accent);
  font-style: normal;
}

/* Worked-example details */

.incident-command-panel {
  min-height: 33rem;
  display: grid;
  align-content: end;
}

.incident-command-panel > header > div {
  display: grid;
  gap: 0.2rem;
}

.incident-command-panel > header strong {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
}

.severity-state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 0.55rem;
  border-left: 3px solid var(--risk);
  color: var(--risk) !important;
}

.severity-state i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.incident-command-panel ol {
  display: grid;
  padding: 1.25rem;
}

.incident-command-panel li {
  display: grid;
  min-height: 4.45rem;
  align-items: center;
  gap: 0.75rem;
  grid-template-columns: 2.2rem minmax(0, 1fr) minmax(8rem, auto);
  border-bottom: 1px solid var(--line);
}

.incident-command-panel li > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.incident-command-panel li > strong {
  font-size: 13px;
  font-weight: 500;
}

.incident-command-panel li > small {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
}

.runbook-nav {
  position: sticky;
  z-index: 40;
  top: 4.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
}

.runbook-nav .section-shell {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.runbook-nav a {
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem;
  border-left: 1px solid var(--line);
  color: var(--ink-mid);
  font-size: 12px;
}

.runbook-nav a:last-child {
  border-right: 1px solid var(--line);
}

.runbook-nav a:hover {
  background: var(--bg2);
  color: var(--ink);
}

.runbook-nav a > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.ops-layout {
  display: grid;
  align-items: start;
  gap: 2rem clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
}

.ops-layout > .chapter-heading {
  grid-column: 1 / -1;
}

.ops-evidence-stage {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1fr);
}

.ops-anchor-card {
  display: grid;
  min-height: 22rem;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--success);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.ops-anchor-card--incident {
  border-top-color: var(--risk);
}

.ops-anchor-card h3 {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: 0.9;
}

.ops-anchor-card > p:not(.micro-label, .state-mark) {
  color: var(--ink-mid);
  font-size: 14px;
}

.ops-anchor-card .state-mark {
  margin-top: auto;
}

.ops-anchor-card > small {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.ops-connector {
  display: grid;
  place-content: center;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  text-align: center;
}

.ops-reader-note {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: 1.25rem;
  border-top: 1px solid var(--accent);
  background: linear-gradient(to bottom, var(--accent-soft), transparent);
}

.ops-reader-note h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
}

.ops-reader-note > p:last-child {
  color: var(--ink-mid);
  font-size: 13px;
}

.impact-console {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.product-example-impact {
  margin-top: 1.5rem;
}

.impact-console > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.impact-console > header h3 {
  margin-top: 0.25rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
}

.impact-console__dependency {
  padding: 0.55rem 1.25rem;
  border-bottom: 1px dashed var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.impact-signal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.impact-signal > span {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
}

.impact-signal > span + span {
  border-left: 1px solid var(--line);
}

.impact-signal small {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.impact-signal strong {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 400;
  line-height: 1;
}

.impact-signal > span:nth-child(2) strong {
  color: var(--risk);
}

.impact-console table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.impact-console th,
.impact-console td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  text-align: left;
  overflow-wrap: anywhere;
}

.impact-console th {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
}

.impact-console td strong {
  color: var(--risk);
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 400;
}

.impact-console > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1.25rem;
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.exposure-stage {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exposure-result,
.exposure-policy {
  min-width: 0;
  display: grid;
  min-height: 23rem;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-strong);
  border-top: 3px dashed var(--accent);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.exposure-policy {
  border-top-color: var(--withheld);
}

.exposure-result > header,
.exposure-policy > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
}

.exposure-value {
  margin-top: auto;
  font-family: var(--font-serif);
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: 0.85;
}

.exposure-result h3,
.exposure-policy h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

.exposure-result .prediction-row {
  grid-template-columns: minmax(5rem, 1fr) auto;
}

.exposure-policy dl {
  display: grid;
}

.exposure-policy dl div {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.6rem;
  border-top: 1px solid var(--line);
}

.exposure-policy dt {
  color: var(--ink-quiet);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.exposure-policy dd {
  font-size: 13px;
}

.rollback-register {
  display: grid;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  background: var(--bg1);
}

.rollback-register article {
  display: grid;
  min-height: 8.5rem;
  align-items: center;
  gap: 1rem;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  padding: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.rollback-register article:last-child {
  border-bottom: 0;
}

.rollback-register article > span:first-child {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.rollback-register article > div {
  display: grid;
  gap: 0.35rem;
}

.rollback-register h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
}

.rollback-register article > div > p:last-child {
  color: var(--ink-mid);
  font-size: 12px;
}

@media (max-width: 74rem) {
  .desktop-nav a,
  .theme-toggle {
    padding-inline: 0.62rem;
  }

  .desktop-nav {
    gap: 0;
  }

  .detail-hero-grid {
    gap: 3rem;
  }

  .ops-layout {
    grid-template-columns: 1fr;
  }

  .ops-reader-note {
    max-width: 42rem;
  }
}

@media (max-width: 68rem) {
  .detail-hero-grid {
    grid-template-columns: 1fr;
  }

  .detail-hero-copy {
    max-width: 52rem;
  }

  .detail-proof-panel {
    width: min(100%, 48rem);
    min-height: auto;
  }

  .product-loop-panel,
  .temporal-proof-panel,
  .permission-path-panel,
  .incident-command-panel {
    min-height: auto;
  }

  .lifecycle-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lifecycle-track li:nth-child(4) {
    border-left: 0;
  }

  .lifecycle-track li:nth-child(n + 4) {
    border-top-width: 1px;
  }

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

  .budget-abstain {
    min-height: 0;
    grid-column: 1 / -1;
  }
}

@media (max-width: 60rem) {
  .decision-workbench,
  .withheld-showcase {
    grid-template-columns: 1fr;
  }

  .workbench-record {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .epistemic-register article {
    min-height: 15rem;
  }

  .activity-trace > div {
    gap: 0.7rem;
    grid-template-columns: 0.9fr 1fr 1fr 0.65fr;
  }
}

@media (max-width: 52rem) {
  .page-detail .detail-hero {
    min-height: auto;
  }

  .story-ledger article {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .story-ledger .ledger-proof {
    grid-column: 2 / -1;
  }

  .story-ledger article > .prediction-row {
    grid-column: 2 / -1;
  }

  .receipt-stack-detail,
  .asof-comparison,
  .deployment-matrix,
  .procurement-grid,
  .governance-teaser-grid,
  .security-boundary__grid {
    grid-template-columns: 1fr;
  }

  .receipt-stack-detail article,
  .asof-comparison > article,
  .deployment-matrix article {
    min-height: auto;
  }

  .dependency-mechanic,
  .ops-evidence-stage {
    grid-template-columns: 1fr;
  }

  .dependency-link,
  .ops-connector {
    min-height: 4rem;
  }

  .dependency-link i {
    transform: rotate(90deg);
  }

  .activity-trace {
    border: 0;
    background: transparent;
  }

  .activity-trace__head {
    display: none !important;
  }

  .activity-trace > div:not(.activity-trace__head) {
    min-height: 0;
    gap: 0.45rem;
    grid-template-columns: 1fr;
    margin-bottom: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--bg1);
  }

  .activity-trace > div:not(.activity-trace__head) > *::before {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--ink-quiet);
    font-family: var(--font-mono);
    font-size: 11px;
  }

  .activity-trace > div:not(.activity-trace__head) > strong::before {
    content: "PARTICIPANT";
  }

  .activity-trace > div:not(.activity-trace__head) > span:nth-child(2)::before {
    content: "USES";
  }

  .activity-trace > div:not(.activity-trace__head) > span:nth-child(3)::before {
    content: "ADDS";
  }

  .activity-trace > div:not(.activity-trace__head) > span:nth-child(4)::before {
    content: "SCOPE";
  }

  .relationship-ledger article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .relationship-ledger article > i {
    grid-column: 1 / -1;
    padding-block: 0.25rem;
    text-align: left;
  }

  .agent-contracts {
    grid-template-columns: 1fr;
  }

  .budget-abstain {
    grid-column: auto;
  }

  .human-gate-flow {
    grid-template-columns: 1fr;
  }

  .human-gate-flow article {
    min-height: 15rem;
  }

  .human-gate-flow > i {
    width: auto;
    min-height: 3rem;
    transform: rotate(90deg);
  }

  .runbook-nav {
    top: 4.75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .runbook-nav .section-shell {
    width: max-content;
    min-width: 100%;
    grid-template-columns: repeat(4, minmax(10.5rem, 1fr));
    padding-inline: 1rem;
  }

  .exposure-stage {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 39rem) {
  .page-detail .detail-hero {
    padding-block: 3.5rem 4.5rem;
  }

  .page-detail .detail-hero h1,
  .page-platform .detail-hero h1,
  .page-security .detail-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.9rem, 14vw, 4rem);
  }

  .detail-hero-actions {
    display: grid;
  }

  .detail-hero-actions .detail-back {
    width: 100%;
  }

  .detail-proof-panel figcaption {
    font-size: 12px;
  }

  .story-ledger article {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1rem;
  }

  .story-ledger article > .state-mark,
  .story-ledger article > .prediction-row,
  .story-ledger .ledger-proof {
    grid-column: 2;
  }

  .story-ledger .prediction-row {
    grid-template-columns: 1fr;
  }

  .detail-role-panel {
    min-height: 0;
  }

  .lifecycle-track {
    grid-template-columns: 1fr;
  }

  .lifecycle-track li {
    min-height: 8rem;
  }

  .lifecycle-track li + li {
    border-top-width: 1px;
    border-left: 0;
  }

  .lifecycle-track li:not(:last-child)::after {
    top: auto;
    right: 1rem;
    bottom: -0.8rem;
    transform: rotate(90deg);
  }

  .temporal-proof-panel li {
    grid-template-columns: 2.8rem auto minmax(0, 1fr);
  }

  .asof-comparison li {
    grid-template-columns: 2.8rem minmax(0, 1fr);
  }

  .asof-comparison li small {
    grid-column: 2;
  }

  .coordination-register article {
    align-items: start;
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .coordination-register article > .state-mark {
    grid-column: 2;
  }

  .trace-replay-line {
    align-items: start;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
  }

  .epistemic-register {
    grid-template-columns: 1fr;
  }

  .epistemic-register article {
    min-height: 0;
  }

  .permission-results {
    grid-template-columns: 1fr;
  }

  .withheld-primary > header,
  .exposure-result > header,
  .exposure-policy > header,
  .security-boundary > header {
    align-items: start;
    flex-direction: column;
  }

  .withheld-primary dl {
    grid-template-columns: 1fr;
  }

  .security-boundary {
    background: var(--accent-soft);
  }

  .incident-command-panel li {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }

  .incident-command-panel li > small {
    grid-column: 2;
    text-align: left;
  }

  .impact-console > header {
    align-items: start;
    flex-direction: column;
  }

  .impact-console th,
  .impact-console td {
    padding: 0.8rem 0.6rem;
  }

  .impact-console th {
    font-size: 11px;
  }

  .impact-console td {
    font-size: 11px;
  }

  .impact-console td strong {
    font-size: 1.35rem;
  }

  .rollback-register article {
    align-items: start;
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }

  .rollback-register article > .receipt-state {
    grid-column: 2;
    margin-top: 0;
  }
}

/* ============================================================================
 * LANDING COMPOSITION LAYER
 *
 * Scoped to `.landing` (index.html only) so the product, platform, and
 * security pages keep the shared component styles above unchanged.
 *
 * The problem this layer solves: below the hero, every section was the same
 * object. A mono label in a narrow empty left column, a serif headline capped
 * at 15ch floating in the middle of the page, a body paragraph, then a
 * full-width bordered container with a 5px radius. Six times. The page was
 * tidy and completely flat: nothing was more important than anything else,
 * and the layout said nothing that the copy did not already say.
 *
 * The move: the page sells one governed record read many ways, so the layout
 * is built as a record. One left spine that every headline shares. Section
 * labels ride the rule that opens their chapter instead of floating above it.
 * The role columns literally share row lines. Boxes survive in exactly two
 * places, both of which mean something.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 1. Chapter openings
 *
 * The label was an eyebrow: a small uppercase line hovering above a headline,
 * repeated on all seven sections, sitting in a 0.38fr column that held nothing
 * else. It is now a tab on the rule that opens the chapter, which gives it a
 * job (it divides and names) and returns the headline to the page's left edge,
 * where the hero headline already lives.
 * ------------------------------------------------------------------------ */

.landing .content-section {
  border-top: 0;
}

.landing .chapter-heading,
.landing .breadth-heading {
  display: block;
  padding-top: 0;
  border-top: 0;
}

.landing .chapter-heading {
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
}

.landing .breadth-heading {
  margin-bottom: 2rem;
}

.landing .chapter-heading .section-index,
.landing .breadth-heading .section-index,
.landing .evaluation-layout .section-index {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.landing .chapter-heading .section-index::after,
.landing .breadth-heading .section-index::after,
.landing .evaluation-layout .section-index::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

/*
 * Accent discipline. The ochre previously coloured all seven chapter labels,
 * which is also the colour the honesty grammar uses for PREDICTED. Reserving
 * it for action and prediction makes it mean something; wayfinding labels are
 * quiet.
 */
.landing .eyebrow,
.landing .section-index {
  color: var(--ink-quiet);
}

/*
 * Headline measure. At 15ch a two-clause headline broke into three or four
 * short lines stranded mid-page. At the left spine with the full column
 * available, the authored line breaks resolve as written, two lines.
 */
.landing .chapter-heading h2,
.landing .breadth-heading h2,
.landing .evaluation-section h2 {
  max-width: 32ch;
}

.landing .chapter-heading > div {
  display: block;
}

.landing .chapter-heading > div > p {
  max-width: 62ch;
  margin-top: 1.75rem;
}

.landing .chapter-heading > div > p + p {
  margin-top: 1rem;
}

.landing .chapter-heading > div > .proof-line {
  margin-top: 2rem;
}

/* ---------------------------------------------------------------------------
 * 2. Pacing
 *
 * Seven sections at one padding value is seven identical beats. Chapters that
 * carry the argument open up; the breadth ledger is support and stays tight.
 * ------------------------------------------------------------------------ */

.landing .content-section {
  padding-block: var(--beat);
}

.landing .incident-section {
  padding-block: var(--beat-open) var(--beat);
}

.landing .workspace-section {
  padding-block: var(--beat-open);
}

.landing .breadth-band {
  padding-block: var(--beat-tight);
}

.landing .evaluation-section {
  padding-block: var(--beat-open) var(--beat);
}

/* ---------------------------------------------------------------------------
 * 3. The consequence ledger
 *
 * The section claims one event read three ways from one shared record, and the
 * old layout contradicted it: three separate cards in a rounded container,
 * each running its own definition list, so Evidence / Action / Withheld /
 * Owner landed on three different baselines (measured 874, 883 and 891px).
 *
 * Now the three roles are columns of one ledger. Nested subgrid puts every
 * row on the same line across all three, so the hairlines run continuously
 * from the left edge of the page to the right and the reader can compare
 * across a row. The container box is gone; the rules are the structure.
 * ------------------------------------------------------------------------ */

.landing .consequence-grid {
  display: grid;
  border: 0;
  border-radius: 0;
  background: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto repeat(4, auto) auto;
}

.landing .consequence-card {
  display: grid;
  min-height: 0;
  align-content: initial;
  padding: 0 clamp(1.1rem, 2.2vw, 1.9rem);
  gap: 0;
  grid-row: span 6;
  grid-template-rows: subgrid;
}

.landing .consequence-card:first-child {
  padding-left: 0;
}

.landing .consequence-card:last-child {
  padding-right: 0;
}

.landing .consequence-card + .consequence-card {
  border-left: 1px solid var(--line);
}

/*
 * Column colour now carries evidence state rather than role identity.
 * Engineering and Customer are both OBSERVED, Revenue is PREDICTED, which is
 * exactly what the state marks at the foot of each column already say. Three
 * arbitrary role colours collapse into the two the honesty grammar owns.
 */
.landing .consequence-card--engineering,
.landing .consequence-card--customer {
  border-top-color: var(--success);
}

.landing .consequence-card--revenue {
  border-top-color: var(--accent);
}

.landing .consequence-card > div {
  padding-block: 1.6rem 2.1rem;
}

/* The role dot was decoration: the column's top rule already carries state. */
.landing .card-label > span {
  display: none;
}

.landing .consequence-grammar {
  display: grid;
  border-top: 1px solid var(--line-strong);
  grid-row: span 4;
  grid-template-rows: subgrid;
}

/*
 * align-content: start, not center. When one column's value wraps to two lines
 * the shared row grows for all three, and centering would float the shorter
 * columns' keys off the row's own baseline: the EVIDENCE keys sat at 605, 597,
 * 605. Starting them puts every key on one line across the ledger.
 */
.landing .consequence-grammar > div {
  align-content: start;
  padding-block: 0.85rem;
  gap: 0.75rem;
  grid-template-columns: 4.75rem minmax(0, 1fr);
}

.landing .consequence-card > .state-mark {
  align-self: center;
  padding-block: 1.3rem;
}

/* The closing line summarises the ledger, so it aligns to the spine. */
.landing .incident-section .persistent-record-line {
  padding: 1.15rem 0 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  text-align: left;
}

.landing .story-transition {
  margin: 2.5rem 0 0;
}

/* ---------------------------------------------------------------------------
 * 3b. The closing chapter
 *
 * Opens the full width like the others: rule, headline at the spine, then the
 * body and the form share the row beneath it.
 * ------------------------------------------------------------------------ */

.landing .evaluation-layout {
  align-items: start;
  /* The base gap sets both axes; rows are spaced by margins here so the label,
     headline and content row are not each pushed apart by a 7rem gutter. */
  row-gap: 0;
  column-gap: clamp(3rem, 7vw, 6rem);
  grid-template-columns: minmax(0, 1fr) minmax(23rem, 0.92fr);
}

.landing .evaluation-layout > .section-index,
.landing .evaluation-layout > h2 {
  grid-column: 1 / -1;
}

.landing .evaluation-layout > h2 {
  max-width: 26ch;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.landing .evaluation-lede {
  max-width: 52ch;
  color: var(--ink-mid);
  font-size: 15px;
  line-height: 1.7;
}

/* A 2rem serif heading was inheriting the body's 1.55 leading, which opens a
   visible hole when it wraps to two lines on narrow viewports. */
.landing .form-heading h3 {
  line-height: 1.15;
}

.landing .form-heading {
  gap: 0.55rem;
}

/* ---------------------------------------------------------------------------
 * 4. Breadth ledger
 * ------------------------------------------------------------------------ */

.landing .breadth-heading > div > p {
  max-width: 62ch;
  margin-top: 1.25rem;
}

/*
 * The band carried an accent wash across its left 38%. In dark mode it read as
 * a brown stain rather than a tint, and in light mode it darkened the surface
 * under the ochre labels enough to drop them to 4.3:1. The surface tint and
 * the two band rules already separate this section; the wash only cost
 * contrast.
 */
.landing .breadth-band--promoted {
  background: color-mix(in srgb, var(--bg1) 72%, var(--bg0));
}

/* Labels are quiet under the accent discipline, which also clears AA here. */
.landing .breadth-kind,
.landing .boundary-diagram > p {
  color: var(--ink-mid);
}

/*
 * The graph's status readout is tertiary ink on the overlay surface, the one
 * remaining pair under AA in light mode (4.37:1). Stepping it to secondary
 * clears it without touching the animation itself.
 */
.landing .anim-local-controls [data-anim-status] {
  color: var(--ink-mid);
}

/* ---------------------------------------------------------------------------
 * 5. The shared record, full bleed
 *
 * This figure is the page's thesis (people and agents contributing to one
 * durable record) and it was a 216px panel indented inside the 76rem shell,
 * carrying exactly the same border, radius and background as the form at the
 * bottom of the page. It is now the widest single gesture on the page: the
 * rail runs edge to edge, held by two rules instead of a box. Bleeding by the
 * gutter is exact, so it reaches the viewport edge without overflowing it.
 * ------------------------------------------------------------------------ */

.landing .shared-record-motion {
  /*
   * Sized to the figure rather than the other way round. It was 304px tall
   * holding about 60px of content, which is the blank waiting space the
   * standing rules forbid.
   */
  min-height: clamp(10.5rem, 13vw, 12.5rem);
  /*
   * Breaking out of the centred shell, not just its padding: 50% is half the
   * shell's content box, 50vw is half the viewport, so the difference is
   * exactly the distance to each viewport edge. html and body already carry
   * overflow-x: clip, so this cannot introduce a horizontal scrollbar.
   */
  margin-inline: calc(50% - 50vw);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
}

.landing .shared-record-motion::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--line-strong);
  content: "";
}

/* ---------------------------------------------------------------------------
 * 6. The decision sequence
 *
 * Four steps in time, so it reads as a timeline rather than a second
 * comparison table: one continuous rule across the top with a node opening
 * each step, node colour matching the state chip that closes it. Without this
 * it was the same layout family as the consequence ledger, two sections apart.
 * ------------------------------------------------------------------------ */

/*
 * Subgrid here too, for a different reason than the ledger. The four steps are
 * one sequence, so their kind, headline, body and state chip each sit on a
 * shared line; without it the closing chips landed at 404, 438, 473 and 438,
 * which made a strict order look like four unrelated cards.
 */
.landing .receipt-flow {
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  background: none;
  column-gap: clamp(1.25rem, 2.5vw, 2.25rem);
  row-gap: 0.9rem;
  grid-template-rows: auto auto auto auto;
  /* The clearance below the rail lives on the container, so no padding sits on
     the subgrid items to disturb the shared track lines. */
  padding-top: 2.4rem;
}

.landing .receipt-flow article {
  min-height: 0;
  padding: 0;
  border-top: 0;
  gap: 0;
  grid-row: span 4;
  grid-template-rows: subgrid;
}

.landing .receipt-flow article + article {
  border-left: 0;
}

.landing .receipt-flow article::before {
  position: absolute;
  top: -2.71rem;
  left: 0;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: var(--radius-mark);
  background: var(--bg0);
  box-shadow: 0 0 0 1px var(--step);
  content: "";
}

.landing .receipt-flow article:nth-child(1) {
  --step: var(--warning);
}

.landing .receipt-flow article:nth-child(2) {
  --step: var(--accent);
}

.landing .receipt-flow article:nth-child(3),
.landing .receipt-flow article:nth-child(4) {
  --step: var(--success);
}

.landing .receipt-flow h3 {
  min-height: 0;
}

.landing .receipt-flow .receipt-state {
  align-self: start;
  margin-top: 0.5rem;
}

.landing .durable-line {
  padding: 1.1rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  text-align: left;
}

.landing .full-loop-link {
  margin: 1.5rem 0 0;
}

/* ---------------------------------------------------------------------------
 * 7. Trust
 *
 * Panel inside panel inside panel: a bordered aside holding a bordered
 * boundary diagram holding six bordered chips. The aside's border is dropped
 * so the two halves read as one editorial spread. The boundary diagram keeps
 * its border because there the border is the content.
 * ------------------------------------------------------------------------ */

.landing .deployment-summary {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.landing .deployment-summary .micro-label {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-strong);
}

.landing .boundary-diagram {
  padding: 1.15rem;
}

/* ---------------------------------------------------------------------------
 * 8. Motion
 *
 * Two additions, both scroll-driven in CSS (no scroll listeners), both gated
 * on reduced-motion and on support, so browsers without view() timelines get
 * the finished state rather than a broken one.
 *
 * Consequence rows: the three readings resolve out of one event, so the
 * columns arrive after the headline that states the event.
 * Receipt steps: proposal, decision, execution, outcome is a strict order and
 * the section's claim is that nothing executes ahead of authority, so the
 * steps arrive in that order.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .landing .consequence-card,
    .landing .receipt-flow article {
      animation: chapter-settle linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 62%;
    }

    .landing .consequence-card:nth-child(2),
    .landing .receipt-flow article:nth-child(2) {
      animation-range: entry 14% entry 66%;
    }

    .landing .consequence-card:nth-child(3),
    .landing .receipt-flow article:nth-child(3) {
      animation-range: entry 18% entry 70%;
    }

    .landing .receipt-flow article:nth-child(4) {
      animation-range: entry 22% entry 74%;
    }
  }
}

@keyframes chapter-settle {
  /*
   * The floor is 0.4, not 0. A scroll-driven timeline that starts at zero
   * leaves real content invisible if the timeline ever resolves oddly (it does
   * under full-page capture), and this is an enterprise page where the content
   * is the product. At 0.4 the arrival still reads and nothing is ever lost.
   */
  from {
    opacity: 0.4;
    transform: translateY(0.85rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * 9. Responsive
 *
 * Subgrid row sharing only means anything while the three roles sit side by
 * side. Below 52rem the grid is one column per role and every subgrid
 * relationship is unwound explicitly rather than left to inherit.
 * ------------------------------------------------------------------------ */

/*
 * Shared row lines are only worth having while the columns sit side by side.
 * Below the breakpoints the subgrid is unwound explicitly: this layer is more
 * specific than the base collapse rules above, so anything it sets has to be
 * released here rather than left to inherit.
 */
@media (max-width: 68rem) {
  .landing .receipt-flow {
    row-gap: 2.75rem;
    grid-template-rows: none;
    padding-top: 2rem;
  }

  .landing .receipt-flow article {
    display: grid;
    align-content: start;
    gap: 0.9rem;
    grid-row: auto;
    grid-template-rows: none;
  }

  .landing .receipt-flow article::before {
    top: -0.31rem;
  }

  .landing .receipt-flow article:nth-child(n + 3)::before {
    display: none;
  }
}

@media (max-width: 52rem) {
  .landing .evaluation-layout {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .landing .evaluation-layout > h2 {
    margin-bottom: 0;
  }

  .landing .consequence-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 2.5rem;
  }

  .landing .consequence-card {
    padding: 0;
    grid-row: auto;
    grid-template-rows: none;
  }

  .landing .consequence-card + .consequence-card {
    border-left: 0;
  }

  .landing .consequence-grammar {
    grid-row: auto;
    grid-template-rows: none;
  }

  .landing .consequence-card > div {
    padding-block: 1.4rem 1.6rem;
  }

  .landing .shared-record-motion {
    margin-inline: 0;
    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    border-left: 1px solid var(--line-strong);
    border-radius: var(--radius-surface);
  }

  .landing .shared-record-motion::after {
    display: none;
  }
}

@media (max-width: 39rem) {
  .landing .chapter-heading h2,
  .landing .breadth-heading h2,
  .landing .evaluation-section h2 {
    max-width: none;
  }

  .landing .receipt-flow article {
    padding-top: 2rem;
  }
}

/* ---------------------------------------------------------------------------
 * 10. The governed record, vertical
 *
 * The gated bar needs about 480px of width to keep five words apart. Below
 * 38rem the whole form rotates rather than shrinking: the record runs top to
 * bottom, claims dock onto it from the left, the gate still severs it, and the
 * words sit to the right on one column. Same argument, same reading order,
 * turned ninety degrees.
 * ------------------------------------------------------------------------ */

@media (max-width: 38rem) {
  .landing .shared-record-motion {
    --stem: 1.05rem;
    --bar-x: 4.3rem;

    min-height: 21rem;
  }

  .landing .shared-record-motion__rail,
  .landing .shared-record-motion__trace {
    top: 12%;
    right: auto;
    bottom: 49%;
    left: var(--bar-x);
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    transform-origin: top;
  }

  .landing .shared-record-motion__trace {
    top: 63%;
    bottom: 6%;
  }

  /* caps turn with the bar */
  .landing .shared-record-motion__rail::after,
  .landing .shared-record-motion__trace::after {
    width: 0.78rem;
    height: 1px;
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .landing .shared-record-motion__rail::after {
    bottom: 0;
  }

  .landing .shared-record-motion__trace::after {
    top: 0;
  }

  .landing .shared-record-motion__trace > i {
    top: auto;
    right: auto;
    bottom: -0.06rem;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }

  .landing .record-contribution {
    top: var(--position);
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    transform: translateY(-50%);
  }

  /* claims dock from the left */
  .landing .record-contribution__source {
    top: 50%;
    bottom: auto;
    left: calc(var(--bar-x) - var(--stem) - var(--mark) / 2 - 0.05rem);
    transform: translate(-50%, -50%);
  }

  .landing .record-contribution--predicted .record-contribution__source {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .landing .record-contribution__link {
    top: 50%;
    bottom: auto;
    left: calc(var(--bar-x) - var(--stem) - 0.05rem);
    width: var(--stem);
    height: 1px;
    transform: translateY(-50%);
    transform-origin: left;
  }

  /* the gate still sits in the record */
  .landing .record-contribution--gate .record-contribution__source {
    top: 50%;
    left: var(--bar-x);
    transform: translate(-50%, -50%);
  }

  /* one word column to the right of the record */
  .landing .record-contribution__label {
    top: 50%;
    left: calc(var(--bar-x) + var(--gate-mark) / 2 + 0.9rem);
    transform: translateY(-50%);
  }

  .landing .shared-record-motion.is-primed .shared-record-motion__rail,
  .landing .shared-record-motion.is-primed .shared-record-motion__trace {
    transform: translateX(-50%) scaleY(0);
  }

  .landing .shared-record-motion.is-playing .shared-record-motion__rail,
  .landing .shared-record-motion.is-playing .shared-record-motion__trace {
    animation-name: record-bar-vertical;
  }

  .landing .shared-record-motion.is-playing .record-contribution__source {
    animation-name: record-mark-vertical;
  }

  .landing .shared-record-motion.is-playing .record-contribution__link {
    animation-name: record-stem-vertical;
  }
}

@keyframes record-bar-vertical {
  from {
    opacity: 0.25;
    transform: translateX(-50%) scaleY(0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

/* Marks arrive from the side the record grows from. */
@keyframes record-mark-vertical {
  from {
    opacity: 0.45;
    translate: -0.5rem 0;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes record-stem-vertical {
  from {
    opacity: 0.45;
    transform: translateY(-50%) scaleX(0.1);
  }

  to {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
  }
}

/* ---------------------------------------------------------------------------
 * 11. The applied-grammar chains
 *
 * Operator, after seeing a tidy vertical dot list: "Is that the best way to
 * show that chain? It's not really creative or a nice way to view that."
 * Correct, and exactly what the skill warns about. This is the third form.
 *
 * The section's claim is that ONE governed loop is made concrete across the
 * enterprise, so the form's whole job is to make the sameness visible instead
 * of asserting it. All four chains share one armature:
 *
 *     the change -> its immediate effect -> what it propagates into -> the exposure
 *
 * and the worked example carries one extra hop, which is precisely what the
 * lede says it does: it carries the FULL evidence chain.
 *
 * Desktop is that armature drawn. Four station guides run down the whole
 * block, faded at both ends so they read as structure rather than as table
 * rules. Each chain is a drawn line with nodes threaded through the same
 * stations, in the hero's language, so the columns lining up IS the argument.
 * The worked example runs in the hero's gold and visibly carries the extra
 * node the others do not have.
 *
 * The arrow glyphs stand down in both layouts: the drawn connector replaces
 * them, which is the connector becoming the design rather than a separator.
 * They are decorative aria-hidden elements, not copy, and no token is added,
 * removed or reordered.
 *
 * Forms rendered and rejected this round (docs/chain-form-candidates-2.html,
 * screenshots in docs/chain-forms/):
 *   P2 congruent curves: every chain drawn as the identical descending curve.
 *      The slope needed to stay shallow enough to keep labels legible, so the
 *      congruence never became visible and the band filled with dead space.
 *   P3 one loop with the other domains listed under each station: the
 *      strongest statement of "one loop", but the other three chains stop
 *      being traceable as chains, which is the thing this section is about.
 *   S  serpentine fold for phones: the path folds back on itself, so the
 *      second line reads right to left. At a glance it says "Customer impact
 *      -> Checkout decline", which is the chain backwards. Fatal.
 * ------------------------------------------------------------------------ */

.landing .breadth-band--promoted {
  /* one surface value, so the token knockouts can match the band exactly */
  --band-surface: color-mix(in srgb, var(--bg1) 72%, var(--bg0));

  background: var(--band-surface);
}

.landing .breadth-ledger li {
  display: block;
  min-height: 0;
  padding-block: 1.05rem;
  border-bottom: 0;
}

.landing .breadth-ledger li:not(.breadth-ledger__example) {
  padding-left: 0;
}

.landing .breadth-ledger__example {
  min-height: 0 !important;
  padding-block: 0 1.05rem;
}

.landing .breadth-ledger li.breadth-ledger__example > a {
  display: grid;
  flex: none;
  align-items: baseline;
  column-gap: 1.5rem;
  row-gap: 0.9rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.landing .breadth-kind {
  width: auto;
  flex: none;
  grid-column: 1;
}

.landing .breadth-ledger__example a > strong {
  grid-column: 2;
  justify-self: end;
}

/* The connector is drawn, so the separator glyphs stand down. */
.landing .breadth-ledger .breadth-chain > i {
  display: none;
}

/*
 * The worked example's chain has to span the whole anchor grid. Left in the
 * first column it was confined to the width the link did not use, so its
 * stations resolved at 472/622/772 instead of on the shared 540/908/1269, and
 * the alignment that carries the section's argument broke on the one row that
 * matters most.
 */
.landing .breadth-ledger__example .breadth-chain {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
 * 11a. Desktop: the armature
 * ------------------------------------------------------------------------ */

@media (min-width: 52.01rem) {
  .landing .breadth-ledger {
    position: relative;
    border-top: 0;
    padding-block: 0.5rem;
  }

  /*
   * Four station guides at the shared stages. Faded at both ends so the block
   * reads as an armature rather than as a ruled table.
   */
  .landing .breadth-ledger::before {
    position: absolute;
    z-index: 0;
    inset: 1.15rem 0 0.85rem;
    background-image:
      linear-gradient(var(--line), var(--line)),
      linear-gradient(var(--line), var(--line)),
      linear-gradient(var(--line), var(--line)),
      linear-gradient(var(--line), var(--line));
    background-position: 0% 0, 33.333% 0, 66.667% 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 1px 100%;
    content: "";
    mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
    pointer-events: none;
  }

  .landing .breadth-ledger li {
    position: relative;
    z-index: 1;
    padding-block: 1.65rem;
  }

  .landing .breadth-ledger__example {
    padding-block: 0 1.65rem !important;
  }

  .landing .breadth-chain {
    position: relative;
    display: block;
    height: 1.5rem;
    padding: 0;
  }

  /* the chain itself, drawn */
  .landing .breadth-chain::before {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--line-strong);
    content: "";
    transform: translateY(-50%);
  }

  .landing .breadth-ledger__example .breadth-chain::before {
    height: 1.5px;
    background: var(--accent);
  }

  /*
   * The NODE sits on the station, not the token's centre. Centring the token
   * on the guide put its node half a token-width to the left, so the nodes
   * landed at 490/480/484 instead of on one line, and the alignment that is
   * supposed to be the whole argument was not actually there. The node leads,
   * the drawn line runs into it, and the label knocks the line out to its
   * right.
   */
  .landing .breadth-chain > span {
    position: absolute;
    top: 50%;
    left: var(--x);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.7rem;
    background: var(--band-surface);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    transform: translateY(-50%);
  }

  /* the node each chain puts down at that station */
  .landing .breadth-chain > span::before {
    width: 0.44rem;
    height: 0.44rem;
    flex: none;
    border: 1px solid var(--ink-quiet);
    border-radius: 50%;
    background: var(--band-surface);
    content: "";
  }

  /*
   * The terminal token reverses: its node has to land on the last station
   * without the label running off the right edge, so the label sits to the
   * left of the node. The asymmetry is the point, it reads as the end.
   */
  .landing .breadth-chain > span:last-of-type {
    flex-direction: row-reverse;
    padding-right: 0;
    padding-left: 0.7rem;
    transform: translate(-100%, -50%);
  }

  /* where the chain lands */
  .landing .breadth-chain > span:last-of-type::before {
    background: var(--ink-quiet);
  }

  .landing .breadth-ledger__example .breadth-chain > span::before {
    border-color: var(--accent);
  }

  .landing .breadth-ledger__example .breadth-chain > span:last-of-type::before {
    background: var(--accent);
  }

  /* the shared stations */
  .landing .breadth-chain > span:nth-of-type(1) { --x: 0%; }
  .landing .breadth-chain > span:nth-of-type(2) { --x: 33.333%; }
  .landing .breadth-chain > span:nth-of-type(3) { --x: 66.667%; }
  .landing .breadth-chain > span:nth-of-type(4) { --x: 100%; }

  /* the worked example carries one extra hop between stations two and three */
  .landing .breadth-ledger__example .breadth-chain > span:nth-of-type(3) { --x: 50%; }
  .landing .breadth-ledger__example .breadth-chain > span:nth-of-type(4) { --x: 66.667%; }
  .landing .breadth-ledger__example .breadth-chain > span:nth-of-type(5) { --x: 100%; }
}

/* ---------------------------------------------------------------------------
 * 11b. Phones: the same path, folded into a staircase
 *
 * Four stations will not fit across a phone, so the path folds instead of
 * reflowing: it descends and steps right at every stage, with a drawn elbow
 * carrying the eye from one node to the next. Reading order is unambiguous
 * (down and to the right, never back), nothing wraps, nothing is truncated,
 * nothing scrolls sideways. The four staircases are congruent shapes and the
 * worked example is visibly one step longer, so the sameness survives the
 * fold, which is the whole point of the form.
 * ------------------------------------------------------------------------ */

@media (max-width: 52rem) {
  .landing .breadth-chain {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    padding-left: 0;
  }

  .landing .breadth-chain > span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-left: calc(var(--i, 0) * 0.85rem);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.25;
  }

  .landing .breadth-chain > span::before {
    width: 0.44rem;
    height: 0.44rem;
    flex: none;
    border: 1px solid var(--ink-quiet);
    border-radius: 50%;
    background: var(--band-surface);
    content: "";
  }

  .landing .breadth-chain > span:last-of-type::before {
    background: var(--ink-quiet);
  }

  .landing .breadth-ledger__example .breadth-chain > span::before {
    border-color: var(--accent);
  }

  .landing .breadth-ledger__example .breadth-chain > span:last-of-type::before {
    background: var(--accent);
  }

  /* the drawn elbow: down from this node, then right into the next */
  .landing .breadth-chain > span::after {
    position: absolute;
    top: 1.05rem;
    left: calc(var(--i, 0) * 0.85rem + 0.21rem);
    width: 0.85rem;
    height: 0.78rem;
    border-bottom: 1px solid var(--line-strong);
    border-bottom-left-radius: 3px;
    border-left: 1px solid var(--line-strong);
    content: "";
  }

  .landing .breadth-ledger__example .breadth-chain > span::after {
    border-color: var(--accent);
  }

  .landing .breadth-chain > span:last-of-type::after {
    display: none;
  }

  .landing .breadth-chain > span:nth-of-type(1) { --i: 0; }
  .landing .breadth-chain > span:nth-of-type(2) { --i: 1; }
  .landing .breadth-chain > span:nth-of-type(3) { --i: 2; }
  .landing .breadth-chain > span:nth-of-type(4) { --i: 3; }
  .landing .breadth-chain > span:nth-of-type(5) { --i: 4; }

  .landing .breadth-ledger li + li {
    border-top: 1px solid var(--line);
  }

  .landing .breadth-ledger li.breadth-ledger__example > a {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing .breadth-ledger__example a > .breadth-chain {
    order: 1;
  }

  .landing .breadth-ledger__example a > strong {
    order: 2;
    grid-column: 1;
    justify-self: start;
  }
}

/* ---------------------------------------------------------------------------
 * 11c. The chains draw themselves
 *
 * The hero's signature is a consequence path drawing through a graph, and
 * these four chains are the same grammar, so they arrive the same way: each
 * drawn line writes itself left to right as the band comes into view, the
 * worked example first. Scroll-driven in pure CSS, so there is no scroll
 * listener, one pass with nothing looping (so nothing needs a pause control),
 * and browsers without view() timelines get the finished state.
 *
 * Only the connector animates. The tokens stay at full opacity throughout:
 * this is an enterprise page and the words are the content, so they are never
 * held back behind a timeline.
 * ------------------------------------------------------------------------ */

@media (min-width: 52.01rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .landing .breadth-chain::before {
      animation: chain-draw linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 58%;
      transform-origin: left center;
    }

    .landing .breadth-ledger li:nth-of-type(2) .breadth-chain::before {
      animation-range: entry 18% entry 64%;
    }

    .landing .breadth-ledger li:nth-of-type(3) .breadth-chain::before {
      animation-range: entry 24% entry 70%;
    }

    .landing .breadth-ledger li:nth-of-type(4) .breadth-chain::before {
      animation-range: entry 30% entry 76%;
    }
  }
}

@keyframes chain-draw {
  from {
    transform: translateY(-50%) scaleX(0);
  }

  to {
    transform: translateY(-50%) scaleX(1);
  }
}