/* G-Bell brand law section 1: Inter Tight for display, Inter for body and
   controls. Self hosted because the CSP allows same origin only. */
@font-face { font-family: "Inter Tight"; src: url("/static/fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 300 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }  /* display */
@font-face { font-family: "Inter Tight"; src: url("/static/fonts/inter-tight-latin-ext.woff2") format("woff2");
  font-weight: 300 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }  /* display */
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }  /* body */
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }  /* body */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ground: #ffffff;
  --ink: #111111;
  --quiet: #5a5a5a;
  --line: #e4e4e4;
  --accent: #111111;
  --accent-hover: #333333;
  --wash: #ffffff;
  --signal: #ffe14a;
  --signal-ink: #111111;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  /* SHAPE: one radius for every surface and control. Chips are the single
     documented exception, they are pills. Grids round on the container with
     overflow hidden so the shared inner dividers stay square. */
  --r: 22px;      /* surfaces: frames, panels, poured blocks, covers */
  --r-sm: 14px;   /* inside a surface: inputs, code, picker cells */
  --r-pill: 999px;/* every control. buttons and chips share one shape */
  /* Live figures take their own colour so a changing number is never mistaken
     for a fixed one. Yellow family, darkened to 5.07:1 on white. */
  --live-ink: #8a6a00;
  --danger: #a12133;
  --body-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Inter Tight', -apple-system, sans-serif;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  scrollbar-color: var(--quiet) var(--ground);
}
* { box-sizing: border-box; }
h1, h2, h3, h4, .wordmark { font-family: "Inter Tight", var(--body-stack); font-weight: 300;
  letter-spacing: -0.035em; line-height: 1.0; }
html { scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); }
[hidden] { display: none !important; }
::selection { color: var(--paper); background: var(--accent); }
a { color: var(--accent); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip { position: absolute; left: 20px; top: -60px; padding: 10px; background: var(--paper); }
.skip:focus { top: 10px; z-index: 5; }
.masthead, main, footer { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
/* The bar floats: rounded, inset, blurred. It lifts on scroll instead of
   drawing a line, and it carries a live reading so the nav holds the product. */
.masthead { position: sticky; top: 12px; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; min-height: 58px; gap: 18px; margin-top: 14px;
  padding: 0 8px 0 22px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  transition: box-shadow .34s var(--ease-out), background .34s var(--ease-out); }
.masthead[data-stuck] { background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 34px -14px rgba(17, 17, 17, .26); }
.nav-live { display: none; align-items: baseline; gap: 6px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--quiet);
  white-space: nowrap; }
.nav-live b { font-family: var(--display); font-size: 15px; font-weight: 400;
  letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nav-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
  flex: none; align-self: center; animation: beat 2.6s var(--ease-out) infinite; }
@keyframes beat { 0%, 62%, 100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, .5); }
  38% { box-shadow: 0 0 0 6px rgba(17, 17, 17, 0); } }
@media (min-width: 1080px) { .nav-live { display: inline-flex; } }
.wordmark { text-decoration: none; color: var(--ink); font-size: 24px; font-weight: 500; letter-spacing: -0.035em; white-space: nowrap; }
nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
nav a { color: var(--ink); font-size: 14px; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 64px; padding: 56px 0 40px; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.0; letter-spacing: -0.035em; font-weight: 300; margin: 0; text-wrap: balance; }
.intro p { color: var(--quiet); font-size: 18px; margin: 0 0 3px; max-width: 42ch; }
h2 { font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -0.032em; line-height: 1.05; margin: 0; font-weight: 300; text-wrap: balance; }
h3 { font-size: 18px; margin: 0; }
p { max-width: 70ch; }
.offer { background: var(--paper); color: var(--ink); border: 1px solid var(--line); padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.offer p { margin: 0; }
.offer strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.offer-detail { margin-left: 32px; }
/* Icons are Phosphor (MIT), vendored under static/icons and inlined as a sprite
   by scripts/build_icons.py. The CSP allows same-origin only, so no icon CDN. */
.sprite { display: none; }
.i { width: 18px; height: 18px; flex: none; fill: currentColor; }
.i-sm { width: 15px; height: 15px; }

/* One button system. Default is solid; .secondary is outlined; .ghost is bare;
   .text-button is an inline link-button. .button-sm tightens any of them.
   Every variant carries hover, active, focus-visible and disabled. */
button, .button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; border: 1px solid transparent; background: var(--accent); color: var(--paper); padding: 10px 20px; min-height: 42px; font: inherit; font-size: 13.5px; font-weight: 500; border-radius: var(--r-pill); text-decoration: none; cursor: pointer; transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out), transform 90ms var(--ease-out); }
button:hover, .button:hover { background: var(--accent-hover); text-decoration: none; }
button:hover:not(:disabled), .button:hover { box-shadow: 0 6px 18px -8px rgba(17, 17, 17, .45); }
button:active:not(:disabled), .button:active { transform: translateY(1px); box-shadow: none; }
button .i, .button .i { width: 15px; height: 15px; }
.button-sm { min-height: 38px; padding: 8px 13px; font-size: 13px; gap: 7px; }
.ghost { background: transparent; color: var(--ink); border-color: transparent; }
.ghost:hover { background: transparent; color: var(--ink); border-color: var(--line); }
/* The refresh icon spins for exactly as long as the request is in flight. */
#coverage-refresh:disabled .i { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.offer .button { background: var(--paper); color: var(--accent); }
.offer .button:hover { background: var(--wash); }
.secondary { border-color: var(--line); color: var(--ink); background: var(--paper); }
.secondary:hover { background: var(--ground); border-color: var(--ink); }
button:disabled { cursor: default; background: var(--ground); color: var(--quiet); border-color: var(--line); transform: none; }
button:disabled .i { opacity: .65; }
.text-button { padding: 6px 0; min-height: 0; border: 0; border-radius: 0; color: var(--accent);
  background: transparent; text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.text-button:hover { box-shadow: none; }
.text-button:hover { background: transparent; color: var(--accent-hover); }
.text-button:active { transform: none; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; padding: 48px 0 64px; }
.section-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.section-top > span { color: var(--quiet); font-size: 13px; }
.quiet, .job-meta { color: var(--quiet); font-size: 14px; }
#feed-note { margin: 12px 0 28px; }
.job-list { list-style: none; padding: 0; margin: 0; }
.job-list li { padding: 13px 0; border-bottom: 1px solid var(--line); }
.job-title { display: inline-block; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.job-meta { margin: 4px 0; overflow-wrap: anywhere; }
.job-dates { font-size: 12px; color: var(--quiet); margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.job-list .text-button { min-height: 36px; font-size: 13px; }
aside { border-top: 1px solid var(--line); padding-top: 22px; }
aside > p { margin: 18px 0; }
aside h2 { font-size: 28px; }
#purchase { margin-top: 26px; }
#purchase button { width: 100%; }
#checkout-note { margin-top: 10px; }
label { display: block; font-size: 14px; font-weight: 600; }
input { width: 100%; min-width: 0; display: block; margin-top: 8px; padding: 12px; font: inherit; font-size: 15px; background: var(--paper); color: var(--ink); border: 1px solid var(--quiet); border-radius: 0; caret-color: var(--accent); }
input::placeholder { color: var(--quiet); }
#login-form { margin: 30px 0 24px; }
form button { margin-top: 12px; }
.search-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#search-form { margin-bottom: 24px; }
.account-actions { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.usage { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
#account-message, #feed-status { font-size: 14px; color: var(--quiet); overflow-wrap: anywhere; }
#account-message.error, #feed-status.error { color: var(--danger); }
details { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
summary { cursor: pointer; font-weight: 600; font-size: 14px; min-height: 30px; }
details p { font-size: 14px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper); border: 1px solid var(--line); padding: 16px; font-size: 12px; line-height: 1.7; border-radius: 0; }
.source-note { margin-top: 36px; }
.detail { margin-top: 32px; padding: 24px; background: var(--paper); border: 1px solid var(--line); }
#next { margin-top: 24px; }
#key-result { margin-top: 26px; }
#key-result button { margin-top: 12px; }
footer { padding: 24px 0 40px; display: flex; gap: 30px; justify-content: space-between; align-items: baseline; flex-wrap: wrap; border-top: 1px solid var(--line); font-size: 12px; color: var(--quiet); }
footer p { margin: 0; }
footer nav { display: flex; gap: 16px; }
footer nav a { color: var(--quiet); }
.flow { display: flex; align-items: stretch; list-style: none; padding: 0; margin: 0; gap: 0; min-width: 0; }
.flow li { flex: 1; min-width: 0; border: 1px solid var(--line); padding: 14px 16px; background: var(--paper); }
.flow li + li { margin-left: 28px; position: relative; }
.flow li + li::before { content: ""; position: absolute; left: -20px; top: 50%; width: 12px; height: 1px; background: var(--quiet); }
.flow li + li::after { content: ""; position: absolute; left: -10px; top: 50%; border: 4px solid transparent; border-left-color: var(--quiet); transform: translateY(-50%); }
.flow strong { display: block; font-size: 14px; font-weight: 650; }
.flow span { display: block; margin-top: 6px; font-size: 12px; color: var(--quiet); line-height: 1.4; }
.flow-watch { border-color: var(--ink); }
/* Prose pages: a sticky contents rail beside the column, so a long page is
   navigable and the measure stays readable instead of stranded left of centre. */
.documentation { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; padding: 52px 0 72px; align-items: start; }
.doc-body { min-width: 0; max-width: 780px; }
.doc-body > *:first-child { margin-top: 0; }
.toc { position: sticky; top: 28px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); counter-reset: toc; }
.toc li { border-bottom: 1px solid var(--line); counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 10px 0; font-size: 13px; line-height: 1.35; color: var(--quiet); text-decoration: none; }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--line); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--ink); }
.documentation h2 { scroll-margin-top: 24px; }
.documentation h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.035em; margin-bottom: 22px; }
.documentation h2 { margin-top: 38px; margin-bottom: 14px; }
.documentation code { font-size: .9em; overflow-wrap: anywhere; }
.documentation li { margin-bottom: 12px; }
@media (max-width: 900px) {
  .masthead, main, footer { width: calc(100% - 40px); }
  .intro { gap: 28px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
  .offer-detail { display: block; margin: 3px 0 0; font-size: 14px; }
  nav { gap: 16px; }
}
@media (max-width: 650px) {
  /* Phones get two deliberate rows inside a rounded bar rather than a pill that
     wraps by accident: identity and the action, then the links beneath. */
  .masthead { min-height: 0; padding: 10px 10px 12px 16px; gap: 10px 12px; margin-top: 10px;
    border-radius: var(--r); flex-wrap: wrap; }
  .masthead .wordmark { flex: 1 1 auto; }
  .masthead nav { order: 3; flex: 1 0 100%; justify-content: space-between; gap: 8px;
    padding-top: 10px; border-top: 1px solid var(--line); }
  .masthead nav .chip { order: -1; }
  nav { gap: 18px; }
  nav a { font-size: 12px; }
  .intro { grid-template-columns: 1fr; padding: 32px 0; gap: 22px; }
  .intro p { font-size: 16px; }
  .offer { padding: 18px; align-items: start; flex-direction: column; gap: 16px; }
  .workspace { grid-template-columns: 1fr; gap: 42px; padding-top: 32px; }
  aside { max-width: none; }
  .search-fields { grid-template-columns: 1fr; }
  .flow { flex-direction: column; }
  .flow li + li { margin-left: 0; margin-top: 28px; }
  .flow li + li::before { left: 18px; top: -20px; width: 1px; height: 12px; }
  .flow li + li::after { left: 14px; top: -10px; border: 4px solid transparent; border-top-color: var(--quiet); border-left-color: transparent; transform: none; }
  .section-top { align-items: start; }
  .section-top > span { white-space: nowrap; }
  footer { flex-direction: column; gap: 8px; }
  .detail { padding: 18px; }
}

/* Disclosure rows share one shape: caret, then label, caret turns when open. */
summary { display: flex; align-items: center; gap: 10px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary .caret { transition: transform 160ms var(--ease-out); color: var(--quiet); }
details[open] > summary .caret { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* Prose pages collapse the contents rail above the text on narrow screens. */
@media (max-width: 900px) {
  .documentation { grid-template-columns: 1fr; gap: 26px; padding-top: 34px; }
  .doc-body { max-width: none; }
  .toc { position: static; }
  .toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
}
@media (max-width: 560px) {
  .toc ol { grid-template-columns: 1fr; }
}

/* ═══ texture and detail, borrowed from the deck vocabulary ═══════════════════
   THE SIGNAL BUDGET. Yellow (#ffe14a) is the only colour on this site and it
   gets three placements, no more:
     1  the atlas tiles          the hero diagram, drawn by motion.js
     2  the source legend swatch and its share of the board field
     3  the active state of one control at a time
   Everything else is ink on paper with a hairline. Grain goes on ONE surface,
   the hero, because a printed page has a surface and a screen does not.
   Registration marks sit OUTSIDE the frames, from the poster reference.
   Motion: reveal once. Replaying on every scroll back reads as a demo. */

:root {
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --faint: #9a9a96;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --stagger-dur: 500ms; --stagger-distance: 12px; --stagger-stagger: 40ms;
  --stagger-blur: 3px; --stagger-ease: cubic-bezier(.22, 1, .36, 1);
  --digit-dur: 500ms; --digit-distance: 8px; --digit-stagger: 70ms;
  --digit-blur: 2px; --digit-ease: cubic-bezier(.34, 1.45, .64, 1);
}

/* Grain. One surface only, and never dark enough to eat a letter counter. */
.grain { position: relative; isolation: isolate; }
.grain::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  z-index: 0; background-image: var(--grain); mix-blend-mode: multiply; opacity: .052; }
.grain > * { position: relative; z-index: 1; }

/* Mono micro-label. A data label on an instrument, never an eyebrow above a heading. */
.kick { font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--quiet); margin: 0; }

/* Registration marks, outside the corners of a frame. */
.marks { position: relative; }
.marks > i.mark { position: absolute; width: 9px; height: 9px; pointer-events: none;
  border: 0 solid var(--faint); opacity: .6; }
.marks > i.mark:nth-of-type(1) { top: -22px; left: -22px; border-top-width: 1px; border-left-width: 1px; }
.marks > i.mark:nth-of-type(2) { top: -22px; right: -22px; border-top-width: 1px; border-right-width: 1px; }
.marks > i.mark:nth-of-type(3) { bottom: -22px; left: -22px; border-bottom-width: 1px; border-left-width: 1px; }
.marks > i.mark:nth-of-type(4) { bottom: -22px; right: -22px; border-bottom-width: 1px; border-right-width: 1px; }
@media (max-width: 980px) { .marks > i.mark { display: none; } }

/* Section rail: ticks in the left margin, label on hover. */
.rail { position: fixed; left: 20px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: none; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 10px 14px 10px 0; transition: gap .34s var(--ease-out); }
.rail:hover { gap: 7px; }
@media (min-width: 1180px) { .rail { display: flex; } }
.rail a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 3px 0; }
.rail i { display: block; flex: none; width: 9px; height: 1px; background: var(--faint);
  transition: width .34s var(--ease-out), background .22s ease; }
.rail:hover i { width: 20px; }
.rail b { font-family: var(--mono); font-size: 9.5px; font-weight: 400; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint); white-space: nowrap;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s ease, transform .34s var(--ease-out), color .22s ease; }
.rail:hover b { opacity: 1; transform: none; }
.rail a:hover i { width: 30px; background: var(--ink); }
.rail a:hover b, .rail a.here b { color: var(--ink); }
.rail a.here i { width: 22px; background: var(--ink); }

/* The dock: the one action, compact, once the hero is behind you. */
.dock { position: fixed; top: 12px; right: 16px; z-index: 45; display: flex; gap: 6px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out); }
.dock.up { opacity: 1; transform: none; pointer-events: auto; }
.chip { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: 12px; font-weight: 600; line-height: 1; padding: 9px 13px; border-radius: 999px;
  color: var(--ink); background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--line); white-space: nowrap;
  transition: border-color .28s var(--ease-out), background .28s var(--ease-out); }
.chip:hover { border-color: rgba(17, 17, 17, .38); background: #fff; }
.chip .i { width: 14px; height: 14px; }
.chip.hot { background: var(--signal); border-color: rgba(17, 17, 17, .2); }
.chip.hot:hover { background: var(--signal); border-color: rgba(17, 17, 17, .5); }

/* Reveal: transitions.dev 18 (text stagger) and 02 (number pop-in). */
.t-stagger > * { opacity: 0; transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur)); will-change: transform, opacity, filter;
  transition: opacity var(--stagger-dur) var(--stagger-ease),
              transform var(--stagger-dur) var(--stagger-ease),
              filter var(--stagger-dur) var(--stagger-ease); }
.t-stagger.is-shown > * { opacity: 1; transform: translateY(0); filter: blur(0); }
.t-stagger.is-shown > *:nth-child(1) { transition-delay: 0ms; }
.t-stagger.is-shown > *:nth-child(2) { transition-delay: calc(var(--stagger-stagger) * 1); }
.t-stagger.is-shown > *:nth-child(3) { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger.is-shown > *:nth-child(4) { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger.is-shown > *:nth-child(5) { transition-delay: calc(var(--stagger-stagger) * 4); }
.t-stagger.is-shown > *:nth-child(6) { transition-delay: calc(var(--stagger-stagger) * 5); }
@keyframes t-digit-pop-in {
  0% { transform: translateY(var(--digit-distance)); opacity: 0; filter: blur(var(--digit-blur)); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); } }
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }

/* The 4px nudge every link in the deck ends with. */
.golink { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.golink .i { transition: transform .28s var(--ease-out); }
.golink:hover .i { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .t-stagger > * { transition: none !important; opacity: 1; transform: none; filter: none; }
  .t-digit-group .t-digit { animation: none !important; }
  .rail, .dock { transition: none !important; }
}

/* ═══ poured colour ══════════════════════════════════════════════════════════
   THE FIELD BUDGET, three moments, three different fields, deck rules kept:
     1  the offer          BLOB FIELD. Three radials behind a 44px blur on
                           near-black, drifting on three different periods so
                           the loop never lines up. The one poured surface.
     2  panel covers       DITHERED warm field. Text free, always, because a
                           halftone under type eats the counters of the letters.
     3  the hot chip       AURORA, clean, animated background-position.
   Everything else stays ink on paper. Yellow is still the only colour. */
:root {
  --warm: linear-gradient(122deg, #fffbe6 0%, #ffe14a 27%, #f0cf22 45%, #3a3a34 74%, #121210 100%);
  --aurora: linear-gradient(110deg, #fff 0%, #ffe14a 34%, #fff6c9 62%, #ededea 100%);
}
@keyframes aur { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }

/* Dither: two dot grids half a cell apart over a gradient. Text free surfaces only. */
.dither { position: relative; isolation: isolate; overflow: hidden; }
.dither::before, .dither::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dither > * { position: relative; z-index: 1; }
.dither::before { background-image: var(--grain); mix-blend-mode: overlay; opacity: .22; }
.dither::after {
  background-image:
    radial-gradient(circle at 50% 50%, var(--d-hi) var(--d-r), transparent calc(var(--d-r) + .1px)),
    radial-gradient(circle at 50% 50%, var(--d-lo) var(--d-r), transparent calc(var(--d-r) + .1px));
  background-size: var(--d-cell) var(--d-cell), var(--d-cell) var(--d-cell);
  background-position: 0 0, calc(var(--d-cell) / 2) calc(var(--d-cell) / 2);
  opacity: var(--d-op); }
.d-coarse { --d-cell: 4.5px; --d-r: .95px; --d-op: .85;
  --d-hi: rgba(255, 255, 255, .72); --d-lo: rgba(20, 20, 20, .26); }

.cover { height: 108px; background: var(--warm); background-size: 200% 200%;
  animation: aur 22s ease-in-out infinite; }

/* The blob field. Real radials that drift, swell and pass over each other,
   which is what makes it look poured rather than rendered. */
.field { position: absolute; inset: -40%; z-index: 0; filter: blur(44px);
  pointer-events: none; will-change: transform; }
.field i { position: absolute; display: block; border-radius: 50%; }
.field i:nth-child(1) { left: -4%; top: 18%; width: 66%; height: 90%;
  background: radial-gradient(circle, #ffe14a 0%, #f0cf22 44%, rgba(240, 207, 34, 0) 72%);
  animation: blob-a 19s ease-in-out infinite alternate; }
.field i:nth-child(2) { left: -8%; top: 4%; width: 60%; height: 98%;
  background: radial-gradient(circle, #0d0d0d 0%, #17150f 46%, rgba(13, 13, 13, 0) 74%);
  animation: blob-b 23s ease-in-out infinite alternate; }
.field i:nth-child(3) { right: 4%; top: -22%; width: 38%; height: 56%;
  background: radial-gradient(circle, #fffdf0 0%, #fff2b8 40%, rgba(255, 242, 184, 0) 70%);
  animation: blob-c 27s ease-in-out infinite alternate; }
@keyframes blob-a { 0% { transform: translate(-6%, 4%) scale(1); }
  50% { transform: translate(7%, -5%) scale(1.14); } 100% { transform: translate(2%, 8%) scale(.96); } }
@keyframes blob-b { 0% { transform: translate(4%, -3%) scale(1.06); }
  50% { transform: translate(-5%, 6%) scale(.92); } 100% { transform: translate(6%, 2%) scale(1.1); } }
@keyframes blob-c { 0% { transform: translate(3%, -4%) scale(.94); }
  50% { transform: translate(-7%, 5%) scale(1.12); } 100% { transform: translate(-2%, -6%) scale(1); } }

.chip.hot { background: var(--aurora); background-size: 220% 220%;
  animation: aur 18s ease-in-out infinite; border-color: rgba(17, 17, 17, .2); }

@media (prefers-reduced-motion: reduce) {
  .field i, .cover, .chip.hot { animation: none !important; }
}

/* A poured close. One per page, the same device as the offer on the home page. */
.poured { position: relative; isolation: isolate; overflow: hidden; background: #0d0d0d;
  color: #fff; margin: 64px 0 0; padding: 72px 48px; }
.poured > .poured-in { position: relative; z-index: 1; max-width: 46ch; }
.poured h2 { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.0; letter-spacing: -.035em;
  font-weight: 300; color: #fff; }
.poured p { margin: 16px 0 30px; color: rgba(255, 255, 255, .8); font-size: 16px; }
@media (max-width: 650px) { .poured { padding: 44px 22px; margin-top: 44px; } }

/* ── sub pages ──────────────────────────────────────────────────────────────
   BRAND.md section 1: sections separate at 8rem on desktop and 5rem on phones,
   body stays inside a 65 to 72ch measure, a headline gets more space above than
   below, and the display face never goes bold. */
.page-kick { margin-bottom: 18px; }
.setup-page, .documentation, main > .compare-intro { padding-top: 3.5rem; }
.documentation .doc-body > h2 { margin-top: 5rem; }
.documentation .doc-body > h2:first-child { margin-top: 0; }
.documentation p, .setup-page p, .doc-body li { max-width: 68ch; }
.setup-intro > p:first-of-type, .documentation > .doc-body > p:first-of-type { font-size: 19px;
  font-weight: 300; line-height: 1.5; color: var(--ink); max-width: 46ch; }
.setup-help, .source-note { margin-top: 5rem; }
@media (min-width: 900px) {
  .documentation .doc-body > h2 { margin-top: 8rem; }
  .setup-help, .source-note { margin-top: 8rem; }
}
/* The contents rail picks up the mono register the rest of the site uses. */
.toc a { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.toc a::before { font-size: 10px; }

/* Surfaces take the same radius. Grids clip so inner dividers stay square. */
.activity-frame, .benefit-grid, .panel, .offer, .poured, .proof,
pre, .command, input, textarea, .window-picker button, .client-picker button,
.routing-frame img, #feed-art, #source-art, .cover { border-radius: var(--r); }
.activity-frame, .benefit-grid, .panel, .offer, .poured { overflow: hidden; }
.benefit-tile, .activity-intro, .activity-measure, .inventory-measure { border-radius: 0; }
.chip { border-radius: 999px; }
.panel .cover, .benefit-tile.lit .cover, .first-task .cover { border-radius: 0; }
.nav-sentinel { display: block; height: 1px; }
nav .chip.hot { padding: 7px 13px; font-size: 12.5px; }
nav .chip.hot::after { content: none; }

/* Sub surfaces sit a step tighter than the surface that holds them. */
pre, .command, input, textarea, .window-picker button, .client-picker button { border-radius: var(--r-sm); }
.toc ol, .fields, .plain, .source-legend { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .nav-live i { animation: none !important; } }

/* Anything that changes on its own carries the live colour. */
#nav-count, .window-picker b, .nav-live b { color: var(--live-ink); }
#new-count, #open-count { color: var(--ink); }
.window-picker button[aria-pressed="true"] b { color: var(--signal); }
.offer strong { color: #fff; }
/* Only the characters that actually changed move. */
.t-digit-group.is-animating .t-digit { animation: none; }
.t-digit-group.is-animating .t-digit[data-changed] {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }

/* At phone width the links row has 328px to hold three links and the action.
   Tightening the type and the pill keeps it on one line instead of wrapping. */
@media (max-width: 430px) {
  .masthead nav { gap: 6px; }
  .masthead nav a { font-size: 12px; }
  .masthead nav .chip { padding: 7px 11px; font-size: 11.5px; gap: 5px; }
  .masthead nav .chip .i { width: 13px; height: 13px; }
}
/* Below 380px the row genuinely cannot hold all four, so the wrap is designed
   rather than accidental: centred, with a row gap that matches the column gap. */
@media (max-width: 380px) {
  .masthead nav { justify-content: center; gap: 8px 10px; }
}

:root { --hairline: #efefec; }

/* A control needs air above it or it reads as attached to the line before.
   Sleek here is mostly spacing, not a smaller pill. */
h1 + button, h2 + button, h3 + button, p + button,
h1 + .button, h2 + .button, h3 + .button, p + .button { margin-top: 18px; }
.workflow-action h3 + button, .first-task h2 + p + button { margin-top: 20px; }
button + p, .button + p { margin-top: 16px; }