/* Hallmark · shape: Field Record (kept hero idea: the request drawn as a system, now on a survey map) · genre: modern-minimal · theme: Furrow (by request) · job: sign up · redesign: full
 * hero: Map, a generated survey map under the system diagram, the holding edged in tangerine around it; your app, Compass and the five fields of tools as notebook cards and white sheets, the request drawn as a dashed route and the pin landing on the winning tool · sections: Index on the white sheet (the coverage matrix beside three facts from it, then the board with its job tabs and priority), Rows (the three guesses beside the measurement, the measurement on the white sheet), Rows (what Compass does: the call, the retry as a schedule against the seconds, the two orders, the loop), Statement (the founder's line), Split (the agent command), Band on the tangerine field over a map fragment (the close) · nav: three-part bar ruled as a map neatline · footer: mast · imagery: the product built (the diagram, the matrix, the board, the schedule), the generated map (contour values are samples); no photographs · signature: the request drawn as a route across the map of tools, the pin landing on the winner
 * axes: light/grotesk-sans/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, the hero carries a map, a diagram and a loop; the map is masked to a whisper behind the words and the loop stops off screen */
/* Hallmark · waive 42 · wordmark, four section links and one key, named here as the nav · a developer tool page with five real destinations reads best in the bar its visitors expect */
/* Hallmark · dismissed 23 · the tangerine band is the committed posture's one field, a declared surface under posture: committed in the stamp */
/* Hallmark · dismissed 46a · 58% is one minus 3.49 over 8.29, both figures on the crawl board of this page */
/* Hallmark · added #agent · the agent command section, asked for by the user (the Speko cue); the command is the repository's own `npm run setup` */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 72px; --bleed: max(0px, (100vw - var(--container)) / 2); }

/* ---------- chrome: a three-part bar, ruled under like a map's neatline ---------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-ink); }
.bar::after { content: ""; position: absolute; inset: auto 0 -4px; height: 1px; background: color-mix(in oklab, var(--color-ink) 28%, transparent); pointer-events: none; }
.bar__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--gap-columns); min-height: var(--nav-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.wordmark svg { width: 24px; height: 24px; color: var(--color-ink); }
.wordmark svg path { fill: var(--color-accent); }
.bar .wordmark { grid-column: 1; justify-self: start; }
.bar__links { grid-column: 2; display: flex; gap: var(--space-lg); }
.bar__links a, .footer__row a { font-weight: 500; text-decoration-color: var(--color-rule); text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-short) var(--ease-out); white-space: nowrap; }
.bar__links a:hover, .footer__row a:hover { text-decoration-color: var(--color-accent); }
.bar__end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--space-md); }
.wordmark:focus-visible, .bar__links a:focus-visible, .footer__row a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-2xs); border-radius: var(--space-3xs); }

/* ---------- controls: moulded keys, tangerine with ink on it, and the white sheet ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-white) 70%, transparent), 0 1px 1px color-mix(in oklab, var(--color-ink) 6%, transparent); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { border-color: var(--color-ink); }
.btn--primary { border-color: color-mix(in oklab, var(--color-accent) 78%, var(--color-ink)); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-white) 32%, transparent), inset 0 -1px 0 color-mix(in oklab, var(--color-ink) 10%, transparent), 0 1px 2px color-mix(in oklab, var(--color-ink) 14%, transparent); }
.btn--primary:hover { border-color: var(--color-ink); background: color-mix(in oklab, var(--color-accent) 92%, var(--color-ink)); }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--color-ink) 16%, transparent); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.num, .figure { font-family: var(--font-outlier); font-weight: 400; font-variant-numeric: tabular-nums; }
.sheet { background: var(--color-paper-2); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.lead { color: var(--color-ink-2); }
.fineprint { font-size: var(--text-sm); color: var(--color-muted); }
h3 { font-weight: var(--display-weight); }

/* the command: a figure to copy, in mono on the white sheet */
.cmd { display: flex; align-items: center; gap: var(--space-sm); width: 100%; max-width: 100%; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-ink), var(--shadow-card); }
.cmd code { flex: 1; min-width: 0; font: 400 var(--text-sm)/1.4 var(--font-outlier); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd .token { font-weight: 500; }
.cmd--wide code { font-size: var(--text-lg); }

/* the notebook card: an ink head, cells on the grid parted by ink lines */
.entry { position: relative; border-radius: var(--radius-entry); background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ink), var(--shadow-lift); overflow: hidden; }
.entry__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 44px; padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper-2); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-white) 8%, transparent); }
.entry__kind { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.entry__kind strong { font: 600 var(--text-md)/1 var(--font-display); letter-spacing: -0.02em; }
.entry__kind svg { width: 18px; height: 18px; fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.entry__date { font-size: var(--text-xs); color: var(--color-on-ink-muted); white-space: nowrap; }
.entry__body { background: var(--notebook); background-color: var(--color-paper-2); }

/* ---------- hero: the system on the survey map ---------- */
.hero { position: relative; isolation: isolate; display: grid; min-height: min(calc(100svh - var(--nav-h)), 1000px); overflow: hidden; }
.hero__ground { position: absolute; inset: 0; z-index: 0; background: var(--color-paper); }
.hero__canvas { display: block; width: 100%; height: 100%; }
.js.stage .hero .hero__canvas { opacity: 0; transition: opacity 900ms var(--ease-out); }
.js.stage .hero.is-ready .hero__canvas { opacity: 1; }
/* without script the land is a plain contour-less paper with the holding's grid, so the diagram still sits on something */
html:not(.js) .hero__ground { background: radial-gradient(circle at 70% 50%, color-mix(in oklab, var(--color-paper-2) 70%, transparent), transparent 60%), var(--color-paper); }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; padding-top: var(--space-lg); }
.hero__text > * { min-width: 0; max-width: 100%; }
.hero h1 { max-width: 11ch; font-size: clamp(3rem, 1.6rem + 4.4vw, 5.75rem); line-height: 0.98; }
.hero .lead { max-width: 30ch; }
.hero .actions { margin-top: var(--space-xs); }
.hero .cmd { max-width: 420px; }
.hero .fineprint { margin-top: calc(-1 * var(--space-xs)); }

/* the diagram: your app, Compass, five fields of tools, on the holding */
.diagram { position: relative; margin: 0; display: grid; grid-template-columns: 150px 40px minmax(180px, 1fr) 40px 278px; grid-template-rows: minmax(480px, auto) auto; align-items: stretch; }
.diagram .col { display: flex; flex-direction: column; position: relative; }
.diagram .col-left { justify-content: center; }
.diagram .col-right { gap: var(--space-sm); justify-content: space-between; }
.node { align-self: center; width: 100%; }
.node .entry__body { display: grid; align-content: center; min-height: 96px; padding: var(--space-sm) var(--space-md); }
.node .request { display: block; font: 600 var(--text-lg)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); min-height: 2.3em; }
.hub { align-self: center; }
.hub-badge .dial { width: 26px; height: 26px; color: var(--color-paper-2); overflow: visible; stroke: none; }
.needle { transform-box: fill-box; transform-origin: center; }
.needle-n { fill: var(--color-accent); } .needle-s { fill: var(--color-on-ink-muted); } .needle-pin { fill: var(--color-ink); stroke: var(--color-paper-2); stroke-width: 1.2; }
.hub-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; background: var(--notebook); background-color: var(--color-paper-2); }
.hub-steps li { display: flex; align-items: center; gap: var(--space-sm); min-height: 56px; padding: var(--space-xs) var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); font-weight: 500; font-size: var(--text-sm); line-height: 1.25; color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out); }
.hub-steps li:first-child { border-top: 0; }
.hub-steps li::before { counter-increment: step; content: counter(step); flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-ink); color: var(--color-paper-2); font: 500 var(--text-xs)/1 var(--font-outlier); }
.hub-steps li.is-on { background: var(--color-accent-soft); }
.hub-steps li.is-on::before { background: var(--color-accent); color: var(--color-accent-ink); }
.group { position: relative; min-height: 84px; padding: var(--space-xs) var(--space-sm); display: flex; flex-direction: column; justify-content: center; gap: var(--space-xs); overflow: visible; box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 16%, transparent), var(--shadow-card); }
.group-title { margin: 0; font: 600 var(--text-sm)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--color-ink); }
.tiles { display: flex; flex-wrap: nowrap; gap: var(--space-2xs); }
.tile { position: relative; flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); box-shadow: inset 0 1px 0 var(--color-white), 0 1px 1px color-mix(in oklab, var(--color-ink) 8%, transparent); transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.tile img { width: 16px; height: 16px; display: block; border-radius: 3px; }
.tile--marked { border-color: var(--color-ink); }
.tile--marked::after { content: ""; position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-paper-2); }
.tile.is-on { background: var(--color-accent); border-color: color-mix(in oklab, var(--color-accent) 78%, var(--color-ink)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-white) 32%, transparent), 0 1px 2px color-mix(in oklab, var(--color-ink) 14%, transparent); }
.tile--more { border-style: dashed; color: var(--color-muted); font: 500 var(--text-md)/1 var(--font-body); background: transparent; box-shadow: none; }
/* the tool's name above the tile: a short wait on hover, none on focus */
.tile::before { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + var(--space-xs)); transform: translate(-50%, 2px); padding: var(--space-2xs) var(--space-xs); border-radius: 4px; background: var(--color-ink); color: var(--color-paper-2); font: 500 var(--text-xs)/1.3 var(--font-body); white-space: nowrap; opacity: 0; pointer-events: none; z-index: var(--z-tooltip); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.tile:hover::before { opacity: 1; transform: translate(-50%, 0); transition-delay: 800ms; }
.tile:focus-visible::before { opacity: 1; transform: translate(-50%, 0); transition-delay: 0ms; }
.tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tile:hover { border-color: var(--color-ink); }
.tile.is-on:hover { border-color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .tile::before { transition: none; } }
.diagram-caption { grid-column: 1 / -1; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); text-align: center; }

/* wires: the system's standing connections, dashed in ink like a right of way; the route draws over them when a request travels */
.wire { width: 40px; height: 100%; align-self: stretch; }
.wire path { fill: none; stroke: var(--color-ink); stroke-opacity: 0.42; stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.wire path { stroke-dashoffset: 100; animation: draw-wire var(--dur-long) var(--ease-out) forwards; }
.wire + .hub + .wire path { animation-delay: 300ms; }
@keyframes draw-wire { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .wire path { stroke-dashoffset: 0; animation: none; } }
.route { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.route.is-drawn { opacity: 1; }
.route__line { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 6; }
.route__reveal { fill: none; stroke: var(--color-white); stroke-width: 28; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.diagram > .entry, .diagram > .col { position: relative; z-index: 2; }
/* the pin: an ink disc with a paper centre that travels the route and lands on the tool */
.packet { position: absolute; top: 0; left: 0; z-index: var(--z-raised); width: 22px; height: 22px; border-radius: 50%; background: var(--color-ink); box-shadow: 0 0 0 2px var(--color-paper-2), 0 0 0 3px color-mix(in oklab, var(--color-ink) 22%, transparent), 0 3px 6px -1px color-mix(in oklab, var(--color-ink) 40%, transparent); opacity: 0; pointer-events: none; will-change: transform; }
.packet::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--color-paper-2); }
html:not(.js) .packet { display: none; }

/* ---------- section heads ---------- */
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.section-head .lead { max-width: 52ch; }

/* ---------- the benchmark: the coverage matrix beside its facts, then the board, both on the white sheet ---------- */
.board-section { padding-block: var(--section-gap) 0; }
.coverage { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--gap-columns); padding: var(--space-xl); margin-bottom: var(--space-2xl); }
.coverage__matrix { min-width: 0; overflow-x: auto; }
.matrix { width: 100%; border-collapse: separate; border-spacing: var(--space-3xs); margin: 0; }
.matrix th { text-align: left; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; padding: 0 var(--space-xs) var(--space-2xs) 0; }
.matrix thead th { padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-ink); }
.matrix thead th:not(:first-child) { text-align: center; }
.matrix tbody th { color: var(--color-ink); font-weight: 500; padding-right: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.matrix td { height: 44px; text-align: center; border-radius: 4px; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--color-ink); background: color-mix(in oklab, var(--color-contour) calc(var(--s, 0) * 62%), var(--color-paper-3)); }
.matrix td.is-lead { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 500; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent) 78%, var(--color-ink)); }
.matrix td.is-none { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in oklab, var(--color-ink) 7%, transparent) 5px 6px), var(--color-paper-2); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); }
.matrix__legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.matrix__ramp { display: inline-flex; gap: var(--space-3xs); }
.matrix__ramp i { width: 14px; height: 14px; border-radius: 3px; background: color-mix(in oklab, var(--color-contour) calc(var(--s, 0) * 62%), var(--color-paper-3)); }
.matrix__lead { width: 14px; height: 14px; border-radius: 3px; background: var(--color-accent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent) 78%, var(--color-ink)); margin-left: var(--space-xs); }
.coverage__notes { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.coverage__notes div { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.coverage__notes dt { font: 600 var(--text-title)/1.15 var(--font-display); letter-spacing: -0.02em; }
.coverage__notes dt b { font-weight: 600; font-family: var(--font-display); }
.coverage__notes dd { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }

.board { overflow: hidden; }
.board-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); padding: var(--space-md) var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-ink); }
.seg { display: flex; gap: var(--space-3xs); padding: var(--space-2xs); border: 0; border-radius: var(--radius-pill); background: var(--color-paper-3); margin: 0; max-width: 100%; overflow-x: auto; }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg__tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: 4px; background: transparent; color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg__tab:hover { color: var(--color-ink); background: color-mix(in oklab, var(--color-paper-2) 60%, transparent); }
.seg__tab[aria-selected="true"], .seg input:checked + .seg__tab { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-white) 30%, transparent), 0 1px 1px color-mix(in oklab, var(--color-ink) 12%, transparent); }
.seg__tab:active { transform: translateY(1px); }
.seg__tab:focus-visible, .seg input:focus-visible + .seg__tab { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.legend { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
/* the highest scorer's mark: a map pin, tangerine with an ink centre, the symbol the legend names */
.live { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); box-shadow: inset 0 0 0 3px var(--color-paper-2), 0 0 0 1px var(--color-ink); flex-shrink: 0; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 0 var(--space-md); height: 60px; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; font-weight: 400; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { padding-left: var(--space-xl); }
.tbl th:last-child, .tbl td:last-child { padding-right: var(--space-xl); }
.tbl thead th { height: 44px; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.tbl .num, .tbl th.num { text-align: right; }
.tbl .provider { display: inline-flex; align-items: center; gap: var(--space-sm); font: 500 var(--text-lg)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.tbl .provider .live { visibility: hidden; }
.tbl tr.routed td { background: var(--color-accent-soft); }
.tbl tr.routed .provider { font-weight: 600; }
.tbl tr.routed .provider .live { visibility: visible; }
.tbl tr.routed > td:first-child { box-shadow: inset 4px 0 0 var(--color-accent); }
.tbl .figure { font-size: var(--text-lg); color: var(--color-ink); }
.tbl tr.below .figure, .tbl tr.below .provider { color: var(--color-muted); }
.tbl .tier, .tbl .routed { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.tbl tr.routed .tier { color: var(--color-ink); }
.tbl .table-note { height: auto; padding-block: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); border-bottom: 0; white-space: normal; }
.tbl .figure.muted { color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm); }
.tbl tbody tr { transition: background-color var(--dur-short) var(--ease-out); }
.board-foot { padding: var(--space-md) var(--space-xl); border-top: var(--rule-hair) solid var(--color-ink); font-size: var(--text-sm); color: var(--color-muted); }
@keyframes blink-once { 50% { opacity: 0; } }
.js .tbl tr.routed.just-changed .live { animation: blink-once var(--dur-long) steps(2, jump-none) 1; }

/* ---------- how teams pick: three rows, the guess on manila, the measurement on the white sheet ---------- */
.featured { padding-block: var(--section-gap) 0; }
.compare { border-top: var(--rule-hair) solid var(--color-ink); }
.compare-head, .compare-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); column-gap: var(--gap-columns); }
.compare-head span { padding: var(--space-sm) 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.compare-head .is-compass { padding-left: var(--space-lg); color: var(--color-ink); }
.compare-row { padding-block: var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.compare-row:first-of-type { border-top: 0; }
.compare-row span { padding-bottom: var(--space-lg); color: var(--color-muted); line-height: 1.5; }
.compare-row strong { display: block; font: 600 var(--text-title)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); max-width: 14ch; }
.compare-row .is-compass { margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--shadow-card); }

/* ---------- what Compass does: four rows, a visual each ---------- */
.ledger { padding-block: var(--section-gap) 0; }
.ledger-rows { border-top: var(--rule-hair) solid var(--color-ink); }
.ledger-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ledger-row h3 { font-size: var(--text-xl); }
.ledger-row p { margin-top: var(--space-sm); color: var(--color-muted); }
.code { margin: 0; padding: var(--space-lg); font: 400 var(--text-sm)/1.75 var(--font-outlier); color: var(--color-ink); background: var(--notebook); background-color: var(--color-paper-2); overflow-x: auto; }
.code .token { font-weight: 500; }
.code .comment { color: var(--color-muted); }

/* the retry as a schedule: the request against the seconds, each attempt a pin on its moment */
.sched { margin: 0; padding: var(--space-lg) var(--space-xl); }
.sched__head { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink); }
.sched__scale { position: relative; height: 36px; margin-top: var(--space-sm); }
.sched__scale span { position: absolute; top: 50%; left: calc(var(--t) / 3 * 100%); translate: -50% -50%; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.sched__scale span:first-child { translate: 0 -50%; }
.sched__scale span:last-child { translate: -100% -50%; }
.sched__track { position: relative; height: 112px; background: linear-gradient(var(--color-ink), var(--color-ink)) 0 50% / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--color-rule) 0 1px, transparent 1px calc(100% / 6)); }
.ev { position: absolute; top: 50%; left: calc(var(--t) / 3 * 100%); translate: 22px -50%; display: grid; gap: var(--space-3xs); width: max-content; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 16%, transparent), 0 2px 5px -2px color-mix(in oklab, var(--color-ink) 22%, transparent); }
.ev::before { content: ""; position: absolute; left: -33px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; border-radius: 50%; background: var(--color-ink); box-shadow: 0 0 0 2px var(--color-paper-2), 0 0 0 3px color-mix(in oklab, var(--color-ink) 20%, transparent), 0 3px 6px -1px color-mix(in oklab, var(--color-ink) 30%, transparent); }
.ev::after { content: ""; position: absolute; left: -26px; top: 50%; width: 8px; height: 8px; translate: 0 -50%; border-radius: 50%; background: var(--color-paper-2); }
.ev .status { font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.ev .at { font-size: var(--text-sm); color: var(--color-muted); }
.ev--error .status { color: var(--color-error); }
.ev--ok { background: var(--color-ink); color: var(--color-paper-2); box-shadow: 0 2px 6px -2px color-mix(in oklab, var(--color-ink) 40%, transparent); }
.ev--ok::before { background: var(--color-accent); }
.ev--ok::after { background: var(--color-ink); }
.ev--ok .status { color: var(--color-paper-2); }
.ev--ok .at { color: var(--color-on-ink-muted); }
.sched__foot { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* two orders side by side, on the sheet */
.orders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orders > div { padding: var(--space-lg) var(--space-xl); }
.orders > div + div { border-left: var(--rule-hair) solid var(--color-rule); }
.orders .label { margin-bottom: var(--space-sm); }
.orders ol { margin: 0; padding: 0; list-style: none; counter-reset: order; border-top: var(--rule-hair) solid var(--color-ink); }
.orders li { display: flex; align-items: baseline; gap: var(--space-sm); min-height: 48px; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 500; color: var(--color-muted); }
.orders li::before { counter-increment: order; content: counter(order); font: 400 var(--text-xs)/1 var(--font-outlier); color: var(--color-muted); min-width: 1.5ch; }
.orders li:first-child { color: var(--color-ink); font: 600 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.02em; }
.orders li .figure { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); }
.orders li:first-child .figure { color: var(--color-ink); }

/* the loop: four numbered lines on the sheet */
.loop { list-style: none; margin: 0; padding: var(--space-md) var(--space-xl); counter-reset: loop; display: grid; }
.loop li { display: flex; align-items: center; gap: var(--space-md); min-height: 56px; padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); font-weight: 500; color: var(--color-muted); }
.loop li:first-child { border-top: 0; }
.loop li::before { counter-increment: loop; content: counter(loop); flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-ink); color: var(--color-paper-2); font: 500 var(--text-xs)/1 var(--font-outlier); }
.loop li:last-child { color: var(--color-ink); }
.loop li:last-child::before { background: var(--color-accent); color: var(--color-accent-ink); }

/* ---------- statement ---------- */
.statement { padding-block: var(--section-gap-l) 0; }
.statement blockquote { margin: 0; max-width: 24ch; font: 600 var(--text-section)/1.02 var(--font-display); letter-spacing: var(--tracking-display); }
.statement blockquote p { max-width: none; text-wrap: balance; hanging-punctuation: first; }
.statement footer { margin-top: var(--space-lg); font: 400 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); letter-spacing: 0; }

/* ---------- the agent: one command on the sheet, what it writes, what the agent gets ---------- */
.agent { padding-block: var(--section-gap-l) var(--section-gap); }
.agent__sheet { display: grid; gap: var(--space-xl); padding: var(--space-xl); }
.agent__cmd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap-columns); align-items: center; }
.agent__cmd .cmd { padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); }
.agent__writes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.agent__writes div { display: grid; gap: var(--space-xs); padding-block: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.agent__writes dt { font: 600 var(--text-title)/1.15 var(--font-display); letter-spacing: -0.02em; }
.agent__writes dd { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.agent__writes code { font-family: var(--font-outlier); font-size: 0.95em; color: var(--color-ink); }
.agent__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-muted); }
.agent__tools li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); font-family: var(--font-outlier); color: var(--color-ink); box-shadow: inset 0 1px 0 var(--color-white); }
.agent__tools li:first-child { border: 0; background: none; box-shadow: none; padding-left: 0; font-family: var(--font-body); color: var(--color-muted); }

/* ---------- the close on the tangerine field, over a fragment of the map ---------- */
.band { position: relative; isolation: isolate; padding-block: var(--section-gap-s); background: var(--color-accent); color: var(--color-accent-ink); overflow: hidden; }
.band__map { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.band__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: center; }
.band h2 { color: var(--color-accent-ink); }
.band p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 44ch; }
.band__actions { justify-content: flex-end; }

/* ---------- footer: a mast, the wordmark over the line ---------- */
.footer { padding-block: var(--space-2xl) var(--space-2xl); }
.wordmark--mast { font-size: var(--text-display-s); }
.wordmark--mast svg { width: 0.9em; height: 0.9em; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- under 84rem: the diagram tightens ---------- */
@media (max-width: 84rem) {
  .diagram { grid-template-columns: 132px 32px minmax(160px, 1fr) 32px 246px; }
  .tile { width: 28px; height: 28px; }
  .tile img { width: 14px; height: 14px; }
}

/* ---------- under 60rem ---------- */
@media (max-width: 60rem) {
  .bar__links { display: none; }
  .bar__in { grid-template-columns: minmax(0, 1fr) auto; }
  .bar__end { grid-column: 2; }
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
  .hero .cmd { max-width: none; }
  .diagram { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--space-md); }
  .wire, .route, .packet { display: none; }
  .diagram .col-right { gap: var(--space-sm); }
  .node .entry__body { min-height: 0; }
  .node .request { min-height: 0; }
  .group { min-height: 0; }
  .tiles { flex-wrap: wrap; gap: var(--space-xs); }
  .section-head, .ledger-row, .agent__cmd, .band__grid, .coverage { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .agent__sheet { padding: var(--space-lg); }
  .agent__writes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage { padding: var(--space-lg); }
  .band__actions { justify-content: flex-start; }
  .board-bar { padding-inline: var(--space-md); }
  .tbl th:first-child, .tbl td:first-child { padding-left: var(--space-md); }
  .tbl th:last-child, .tbl td:last-child { padding-right: var(--space-md); }
  .tbl .tier, .tbl th.tier, .tbl .long, .tbl .lat, .tbl th.lat, .tbl .routed, .tbl th.routed { display: none; }
  .tbl .provider { font-size: var(--text-md); }
  .tbl .figure { font-size: var(--text-md); }
  .legend { margin-left: 0; }
  .board-foot { padding-inline: var(--space-md); }
  .compare-head { display: none; }
  .compare-row { grid-template-columns: minmax(0, 1fr); }
  .compare-row span { padding-bottom: var(--space-md); }
  .compare-row .is-compass { margin-bottom: var(--space-lg); }
  .orders { grid-template-columns: minmax(0, 1fr); }
  .orders > div + div { border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .sched { padding: var(--space-md); }
  .ev .status { font-size: var(--text-lg); }
  .ev--ok { translate: calc(-100% - 22px) -50%; }
  .ev--ok::before { left: auto; right: -33px; }
  .ev--ok::after { left: auto; right: -26px; }
  .matrix td.is-none { font-size: 0; }
}

@media (max-width: 40rem) {
  .hero h1 { font-size: 2.75rem; }
  .hero .lead { font-size: 1.0625rem; }
  .actions .btn { min-height: 46px; padding-inline: var(--space-md); }
  .seg { width: 100%; }
  .seg__tab { flex: 1 0 auto; padding: 0 var(--space-sm); }
  .matrix th:first-child { padding-right: var(--space-xs); }
  .matrix td { font-size: var(--text-xs); }
  .footer__row { flex-direction: column; }
}