/* backbone-chapter.css */
.backbone-chapter {
  background: var(--ink-950);
  position: relative;
}
.backbone-chapter .chapter-head {
  padding-block: var(--space-9);
  border-bottom: 1px solid var(--hairline);
}
.backbone-chapter .chapter-head h2 {
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.backbone-chapter .chapter-head .lede {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--ink-100);
  margin-top: var(--space-5);
  max-width: 60ch;
}

/* Scroll rail */
.scroll-rail {
  position: fixed;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-300);
}
@media (min-width: 1100px) { .scroll-rail.visible { display: flex; } }
.scroll-rail a {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px;
  text-transform: uppercase;
  transition: color var(--t-ui) var(--ease-out-expo);
}
.scroll-rail a .dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ink-500);
  transition: background var(--t-ui), transform var(--t-ui);
}
.scroll-rail a .label { opacity: 0; transition: opacity var(--t-ui); }
.scroll-rail a:hover .label,
.scroll-rail a.active .label { opacity: 1; }
.scroll-rail a:hover .dot { background: var(--ink-100); }
.scroll-rail a.active { color: var(--ink-0); }
.scroll-rail a.active .dot { background: var(--ember); transform: scale(1.5); }

/* Stop = each viewport-tall sub-section */
.stop {
  min-height: 100dvh;
  padding-block: var(--space-9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.stop .stop-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-300);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
}
.stop .stop-num::before {
  content: ""; width: 24px; height: 1px; background: var(--ember);
}
.stop h3 {
  font-size: clamp(36px, 6vw, 88px);
  line-height: 1;
  margin-bottom: var(--space-5);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.stop .stop-lede {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--ink-100);
  max-width: 60ch;
  margin-bottom: var(--space-7);
}

/* Stop 02: prior + defect */
.diagram-prior {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 880px) { .diagram-prior { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-7); } }
.diagram-prior .node {
  background: var(--ink-900);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  position: relative;
}
.diagram-prior .node h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: var(--space-3);
}
.diagram-prior .node p { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-100); }
.diagram-prior .node.label-box {
  background: rgba(232, 96, 58, 0.05);
  border-color: rgba(232, 96, 58, 0.4);
}
.diagram-prior .node.label-box h4 { color: var(--ember); }
.diagram-prior .node.label-box .quote {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--ember);
  font-style: italic;
  margin-top: var(--space-3);
}
.diagram-prior .arrow-svg {
  position: absolute; inset: 0;
  pointer-events: none;
  width: 100%; height: 100%;
}

/* Stop 03: dodge lexicon grid */
.lexicon {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.lexicon .term {
  position: relative;
  padding: var(--space-5) var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--ink-0);
  background: var(--ink-900);
  overflow: hidden;
  transition: opacity var(--t-slow) var(--ease-out-expo);
}
.lexicon .term::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px; top: 50%;
  height: 2px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-hero) var(--ease-out-expo);
}
.lexicon .term.struck { color: var(--ink-300); }
.lexicon .term.struck::before { transform: scaleX(1); }
.lexicon .term .why {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--ink-300);
  margin-top: 6px;
  letter-spacing: 0;
  text-transform: none;
}

/* Stop 04: baseline vs backbone columns */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
@media (min-width: 880px) { .compare { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }
.compare .col {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--ink-900);
  overflow: hidden;
}
.compare .col header {
  padding: var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.compare .col.bad header { color: var(--ember); }
.compare .col.good header { color: var(--signal); }
.compare .col ul { list-style: none; margin: 0; padding: 0; }
.compare .col li {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--hairline);
  color: var(--ink-100);
}
.compare .col li:first-child { border-top: 0; }
.compare .col.bad li::before { content: "× "; color: var(--ember); }
.compare .col.good li::before { content: "✓ "; color: var(--signal); }

/* Stop 05: branching tree */
.branches {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 880px) { .branches { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.branch {
  border: 1px solid var(--hairline);
  background: var(--ink-900);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  position: relative;
  transition: transform var(--t-ui) var(--ease-out-expo), border-color var(--t-ui);
}
.branch:hover { transform: translateY(-2px); }
.branch .head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.branch .head .name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.branch.fix { border-color: rgba(106, 255, 176, 0.25); }
.branch.fix .head .name { color: var(--signal); }
.branch.offer { border-color: rgba(246, 193, 119, 0.25); }
.branch.offer .head .name { color: var(--warning); }
.branch.track { border-color: rgba(126, 182, 255, 0.25); }
.branch.track .head .name { color: var(--info); }
.branch h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--ink-0);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.branch p { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-100); }
.branch .structure {
  margin-top: 0;
  padding-top: 0;
  border-top: 0 dashed var(--ink-500);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-300);
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms linear,
    margin-top 320ms cubic-bezier(0.16, 1, 0.3, 1),
    padding-top 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-top-width 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.branch:hover .structure,
.branch:focus-within .structure,
.branch.open .structure {
  max-height: 320px;
  opacity: 1;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top-width: 1px;
}
@media (hover: none) {
  .branch:hover .structure { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; border-top-width: 0; }
  .branch.open .structure { max-height: 320px; opacity: 1; margin-top: var(--space-5); padding-top: var(--space-4); border-top-width: 1px; }
}
.branch:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 4px;
}

/* Stop 06: pipeline */
.pipeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
}
.pipeline::-webkit-scrollbar { height: 6px; }
.pipeline::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: 4px; }
.pipeline .stage {
  background: var(--ink-900);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--space-5);
  position: relative;
  display: grid; gap: var(--space-2);
}
.pipeline .stage::after {
  content: "→";
  position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-300);
  font-family: var(--font-mono);
}
.pipeline .stage:last-child::after { content: ""; }
.pipeline .stage .num { font-family: var(--font-mono); font-size: 10px; color: var(--ink-300); letter-spacing: 0.2em; }
.pipeline .stage .name { font-family: var(--font-mono); font-size: 13px; color: var(--ink-0); letter-spacing: 0.05em; }
.pipeline .stage .what { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--ink-300); }
.pipeline .stage.loop { border-color: rgba(232, 96, 58, 0.4); }
.pipeline .stage.loop .name { color: var(--ember); }
@media (min-width: 980px) {
  .pipeline { grid-auto-columns: 1fr; overflow-x: visible; }
}

/* Stop 07: radar + slider */
.radar-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 880px) { .radar-wrap { grid-template-columns: 1fr 1fr; } }
.radar {
  aspect-ratio: 1;
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}
.radar svg { width: 100%; height: 100%; }
.radar .ring { fill: none; stroke: var(--hairline); stroke-width: 1; transition: stroke var(--t-ui), stroke-width var(--t-ui); }
.radar .ring.active { stroke: var(--ember); stroke-width: 1.5; }
.radar .label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-300);
  transition: color var(--t-ui);
}
.radar .label.active { color: var(--ember); }
.effort-slider {
  border: 1px solid var(--hairline);
  background: var(--ink-900);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
.effort-slider .label-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.effort-slider .buckets {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.effort-slider .buckets button {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-100);
  letter-spacing: 0.1em;
  text-align: left;
  transition: background var(--t-ui), border-color var(--t-ui), color var(--t-ui);
}
.effort-slider .buckets button .name { display: block; color: var(--ink-0); font-size: 14px; letter-spacing: 0.2em; }
.effort-slider .buckets button.active {
  background: rgba(232, 96, 58, 0.06);
  border-color: var(--ember);
  color: var(--ember);
}
.effort-slider .buckets button.active .name { color: var(--ember); }
.effort-slider .out {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-100);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--ink-500);
}
.effort-slider .out strong { color: var(--ember); }

/* Stop 08: matrix */
.matrix {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--ink-900);
  overflow: hidden;
}
.matrix table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}
.matrix th, .matrix td {
  padding: var(--space-4);
  text-align: left;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.matrix th {
  background: var(--ink-800);
  color: var(--ink-300);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.matrix th:first-child { width: 22%; }
.matrix td.cell {
  cursor: pointer;
  transition: background var(--t-ui);
}
.matrix td.cell:hover { background: var(--ink-800); }
.matrix td.cell.active { background: rgba(232, 96, 58, 0.10); outline: 1px solid var(--ember); outline-offset: -1px; }
.matrix td.cell .action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.2em;
}
.matrix td.cell .action::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
}
.matrix td.cell .action.fix { color: var(--signal); }
.matrix td.cell .action.fix::before { background: var(--signal); }
.matrix td.cell .action.offer { color: var(--warning); }
.matrix td.cell .action.offer::before { background: var(--warning); }
.matrix td.cell .action.track { color: var(--info); }
.matrix td.cell .action.track::before { background: var(--info); }
.matrix tr.blocking td.cell { background: rgba(106, 255, 176, 0.05); }
.matrix-readout {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--ink-900);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-100);
  min-height: 6em;
}
.matrix-readout .head { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); color: var(--ink-300); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }

/* Stop 09: intent gate */
.gate {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--ink-900);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
.gate .input-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) { .gate .input-row { grid-template-columns: auto 1fr; align-items: center; } }
.gate .input-row label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.gate .input-row input {
  width: 100%;
  background: var(--ink-950);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-0);
}
.gate .input-row input:focus { border-color: var(--ember); outline: none; }
.gate .gates {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 880px) { .gate .gates { grid-template-columns: repeat(3, 1fr); } }
.gate .gate-cell {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-2);
  transition: border-color var(--t-ui), background var(--t-ui);
}
.gate .gate-cell .name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-300); }
.gate .gate-cell .desc { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--ink-100); }
.gate .gate-cell.fired { border-color: var(--ember); background: rgba(232, 96, 58, 0.06); }
.gate .gate-cell.fired .name { color: var(--ember); }
.gate .gate-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--space-2);
}
.gate .gate-suggestions button {
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-100);
  transition: border-color var(--t-ui), color var(--t-ui);
}
.gate .gate-suggestions button:hover { border-color: var(--ember); color: var(--ember); }

/* Stop 10: side-by-side terminals */
.terminals {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 980px) { .terminals { grid-template-columns: 1fr 1fr; } }
.terminal-card {
  background: #0a0908;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 420px;
}
.terminal-card header {
  padding: var(--space-3) var(--space-5);
  background: var(--ink-800);
  border-bottom: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-300);
}
.terminal-card.bad header { color: var(--ember); }
.terminal-card.good header { color: var(--signal); }
.terminal-card .lights { display: flex; gap: 6px; }
.terminal-card .lights span { width: 10px; height: 10px; border-radius: 999px; background: var(--ink-500); }
.terminal-card .body { padding: var(--space-5); color: var(--ink-100); white-space: pre-wrap; }
.terminal-card .body .prompt { color: var(--ink-300); }
.terminal-card .body .dodge { color: var(--ember); position: relative; padding: 0 2px; outline: 1px solid rgba(232, 96, 58, 0.4); border-radius: 3px; }
.terminal-card .body .label-good { color: var(--signal); }
.terminal-card .body .underline-good { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }

/* Stop 11: gauge */
.gauge-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 880px) { .gauge-wrap { grid-template-columns: 1fr 1.2fr; } }
.gauge {
  position: relative;
  aspect-ratio: 2 / 1;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}
.gauge svg { width: 100%; height: 100%; overflow: visible; }
.gauge .arc-bg { fill: none; stroke: var(--ink-700); stroke-width: 18; stroke-linecap: round; }
.gauge .arc-fg { fill: none; stroke-width: 18; stroke-linecap: round; transition: stroke-dashoffset 800ms var(--ease-in-out), stroke 300ms; }
.gauge .arc-fg.below { stroke: var(--signal); }
.gauge .arc-fg.above { stroke: var(--ember); }
.gauge .threshold-mark { stroke: var(--ink-300); stroke-width: 1.5; stroke-dasharray: 4 4; }
.gauge .pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: end center;
  padding-bottom: 6%;
  text-align: center;
}
.gauge .pct .num {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1;
}
.gauge .pct .lbl {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-300);
  margin-top: 4px;
}
.gauge.below-threshold .pct .num { color: var(--signal); }
.gauge.above-threshold .pct .num { color: var(--ember); }
.gauge-controls {
  display: grid;
  gap: var(--space-4);
}
.gauge-controls input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.gauge-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--ink-700);
  border-radius: 4px;
}
.gauge-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--ember);
  margin-top: -7px;
  cursor: pointer;
}
.gauge-controls input[type="range"]::-moz-range-track { height: 4px; background: var(--ink-700); border-radius: 4px; }
.gauge-controls input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: var(--ember); border: 0; }
.gauge-controls .buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.gauge-controls .buckets .b { padding: var(--space-3); border: 1px solid var(--hairline); border-radius: var(--r-md); font-family: var(--font-mono); font-size: 11px; color: var(--ink-100); }
.gauge-controls .buckets .b .k { color: var(--ink-300); display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 4px; }
.gauge-controls .verdict {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--ink-900);
}
.gauge-controls .verdict.below { border-color: var(--signal); color: var(--signal); }
.gauge-controls .verdict.above { border-color: var(--ember); color: var(--ember); }

/* Stop 12: self-check loop */
.loop {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}
.loop svg { width: 100%; height: 100%; }
.loop .qbutton {
  position: absolute;
  width: 36%;
  background: var(--ink-900);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  transition: border-color var(--t-ui), transform var(--t-ui);
}
.loop .qbutton:hover { border-color: var(--ember); transform: scale(1.02); }
.loop .qbutton .num { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--ink-300); display: block; margin-bottom: 2px; }
.loop .qbutton .q { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--ink-0); line-height: 1.3; }

/* Stop 13: metrics counters */
.targets {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 880px) { .targets { grid-template-columns: repeat(3, 1fr); } }
.target {
  border: 1px solid var(--hairline);
  background: var(--ink-900);
  border-radius: var(--r-lg);
  padding: var(--space-7);
  position: relative;
}
.target .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: var(--space-3);
}
.target .num {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.95;
  color: var(--ink-0);
  letter-spacing: -0.03em;
}
.target .num .unit { font-family: var(--font-mono); font-size: 0.25em; color: var(--ink-300); letter-spacing: 0.1em; vertical-align: middle; margin-left: 8px; }
.target .lbl { font-family: var(--font-body); font-size: var(--fs-md); color: var(--ink-100); margin-top: var(--space-3); }
.target .src { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-300); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--ink-500); }

/* Stop 14: provider neutrality */
.providers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 880px) { .providers { grid-template-columns: 1fr 1.4fr; gap: var(--space-9); } }
.providers .flow {
  display: grid;
  gap: var(--space-3);
}
.providers .flow .stage {
  background: var(--ink-900);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.providers .flow .stage .k { color: var(--ink-300); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.providers .flow .stage .v { color: var(--ink-0); }
.providers .flow .stage.protocol { border-color: var(--ember); background: rgba(232, 96, 58, 0.06); }
.providers .flow .stage.protocol .v { color: var(--ember); }
.providers .flow .arrow { font-family: var(--font-mono); color: var(--ink-300); justify-self: center; }
.providers .targets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 720px) { .providers .targets-grid { grid-template-columns: repeat(3, 1fr); } }
.providers .target-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--space-4);
  background: var(--ink-900);
}
.providers .target-card .n { font-family: var(--font-mono); font-size: 13px; color: var(--ink-0); letter-spacing: -0.01em; }
.providers .target-card .a { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); margin-top: 4px; }
.providers .clarify {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-300);
}

/* Stop 15: closing motto */
.motto-stop {
  text-align: center;
  align-items: center;
  justify-content: center;
}
.motto-stop .motto {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 120px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink-0);
  text-wrap: balance;
  max-width: 18ch;
  margin-inline: auto;
}
.motto-stop .motto .or { font-style: italic; color: var(--ink-300); }
.motto-stop .motto .cursor {
  display: inline-block;
  width: 0.5em; height: 0.9em;
  background: var(--signal);
  vertical-align: -0.1em;
  margin-left: 0.1em;
}