/* GENERATED by scripts/design-v3-sync.cjs — the self-hosted face §2 asks for. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:optional;src:url(/assets/fonts/hanken-grotesk-var-latin.woff2) format('woff2');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}
/* navaal.css v3: "Soft chapters"
   Each section is a chapter with its own soft, flat colour, floor to ceiling, held together by one typeface,
   one grid and one radius. Bilby's silhouette is the page's one shape. See docs/DESIGN-GUIDELINES.md. */

:root {
  color-scheme: light;
  /* warm day: ground and ink */
  --bg: #f8f6f5;          /* warm white page */
  --white: #ffffff;       /* cards, fields, product chapter */
  --ink: #2a2420;         /* warm near-black: every word */
  --muted: #6c625a;       /* secondary notes only */
  --night: #1b1714;       /* the one dark chapter: Bilby's night */
  --night-ink: #f4eee8;
  --night-muted: #c2b7ad;
  /* warm chapters */
  --blush: #f8ddd6;       /* rose */
  --sky: #e1e7f2;         /* soft morning blue, the one cool note */
  --sage: #e2e9d6;        /* warm sage */
  --sand: #f8d9cd;        /* apricot, the outback at dawn */
  --deep-blush: #f0b8a8; --deep-sky: #c9d4e8; --deep-sage: #c9d6b8; --deep-sand: #f4c9a8;
  --bilby: #0f5257;       /* Bilby in brand teal */
  /* the one accent: deep teal, for the action */
  --accent: #0f5257;
  --accent-hover: #0b4246;
  --accent-ink: #ffffff;
  /* status: reserved, always with a word */
  --st-working: #166b46; --st-working-bg: #d6efe2;
  --st-slow: #8a4a00;    --st-slow-bg: #fbe6c8;
  --st-broken: #9e1f18;  --st-broken-bg: #f9d9d6;
  --st-unknown: #6c625a; --st-unknown-bg: #efe9e4;
  /* type: one family */
  --font: "Hanken Grotesk", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);  /* 14–15 */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);    /* 17–19 */
  --step-lead: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);      /* 22–28 */
  --step-head: clamp(2.5rem, 1.4rem + 3.8vw, 5rem);           /* 40–80 */
  --step-display: clamp(3.25rem, 1.2rem + 6.4vw, 7rem);       /* 52–112 */

  /* frame */
  --margin: clamp(1.25rem, 4vw, 4rem);
  --gutter: clamp(1rem, 1.6vw, 1.5rem);
  --radius: 18px;         /* one radius for tiles, media and buttons */
  --maxw: 1440px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms; --t-hover: 200ms; --t-ui: 260ms;
}

:root[data-time="night"] {
  color-scheme: dark;
  --bg: #1b1714; --white: #27211d; --ink: #f4eee8; --muted: #bdb2a8;
  --night: #110e0c; --night-ink: #f4eee8; --night-muted: #c2b7ad;
  --blush: #36241f; --sky: #1f2531; --sage: #232b22; --sand: #36271c;
  --deep-blush: #4d3029; --deep-sky: #2d3547; --deep-sage: #354231; --deep-sand: #4d3523;
  --bilby: #4fb3a9;
  --accent: #23756f; --accent-hover: #2b8780; --accent-ink: #ffffff;
  --st-working: #72d3a2; --st-working-bg: #1b3a2b;
  --st-slow: #f1b45c;    --st-slow-bg: #3e2d14;
  --st-broken: #ff8f82;  --st-broken-bg: #43211d;
  --st-unknown: #bdb2a8; --st-unknown-bg: #2f2925;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* The skip link every page carries: off-screen until it is tabbed to, then a real button in the
   top-left. Left unstyled it is the page's first line of text against the screen edge, which the
   design gate fails (edge-text) and a visitor sees as a stray link above the logo. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip:focus { left: var(--margin); top: .75rem; padding: .7rem 1.1rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
.display { font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.045em; }
.head { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; }
.small { font-size: var(--step-small); }
.muted { color: var(--muted); }
p { max-width: 60ch; text-wrap: pretty; }
.nums { font-variant-numeric: tabular-nums; }

/* ---------- frame ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.chapter { position: relative; padding-block: clamp(6rem, 11vw, 10rem); background: var(--field, var(--bg)); color: var(--field-ink, var(--ink)); overflow: clip; }
.chapter--white { --field: var(--white); }
.chapter--blush { --field: var(--blush); }
.chapter--sky { --field: var(--sky); }
.chapter--sage { --field: var(--sage); }
.chapter--sand { --field: var(--sand); }
.chapter--night { --field: var(--night); --field-ink: var(--night-ink); --muted: var(--night-muted); }
.chapter--accent { --field: var(--accent); --field-ink: var(--accent-ink); --muted: #cfe3e2; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 3.25rem; padding: 0 1.5rem; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.button:hover { background: var(--accent-hover); }
.button:active { transform: scale(.97); }
.button--soft { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.button--soft:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.more { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; color: var(--accent); text-decoration: none; }
/* At night the accent is a deep teal for a button's FILL, and as text on a dark chapter it reads
   2.7:1 — the design gate called it on /status and it is right. Bilby's lighter teal is the same
   hue at 7:1 on the night chapters, so the link keeps its colour and becomes readable. */
:root[data-time="night"] .more { color: var(--bilby); }
.more::after { content: "›"; font-size: 1.25em; line-height: 1; transition: transform var(--t-hover) var(--ease-out); }
.more:hover::after { transform: translateX(4px); }
.chapter--night .more, .chapter--accent .more { color: inherit; }
.link { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .07em; }
.link:hover { color: var(--accent); }
.field { width: 100%; min-height: 3.25rem; padding: .75rem 1.1rem; border: 0; border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: max(1rem, var(--step-body)); }
.field::placeholder { color: #8b8b90; }

/* ---------- nav: wordmark, links, one action ---------- */
.nav { position: sticky; top: 0; z-index: 30; background: var(--bg); }
.nav__in { display: flex; align-items: center; gap: 2rem; height: 3.75rem; }
.nav__mark img { height: 22px; width: auto; }
.nav__links { display: flex; gap: 1.6rem; margin-left: auto; font-size: var(--step-small); font-weight: 500; }
.nav__links a { text-decoration: none; color: var(--muted); transition: color var(--t-hover) ease; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); }
.nav .button { min-height: 2.5rem; padding-inline: 1rem; font-size: var(--step-small); border-radius: 12px; }
.nav__burger { display: none; width: 44px; height: 44px; margin-left: auto; }
/* THE NO-SCRIPT PHONE MENU, for the pages that must work with JavaScript off (P50 §3.9: the status
   network). The site's own burger is a button navaal.js wires up; a <details> opens in the browser
   itself, so the page somebody loads at 2 a.m. during an outage still has a menu. Above 860px the
   whole thing is display:none and the markup costs nothing. */
.mnav { display: none; }
.mnav > summary { list-style: none; cursor: pointer; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav > summary::marker { content: ""; }
.mnav[open] > summary { background: var(--white); border-radius: 12px; }
.mpanel { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: grid; padding: .5rem var(--margin) 1.25rem; background: var(--flow, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.mpanel a { padding: .85rem 0; color: var(--ink); text-decoration: none; font-size: 1.0625rem; font-weight: 500; }
.mpanel a + a { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.nav__burger span { display: block; width: 20px; height: 2px; margin: 5px auto; background: var(--ink); border-radius: 2px; }

/* ---------- logo tile (third-party marks, nominative use) ---------- */
.logo { display: inline-grid; place-items: center; flex: none; width: var(--size, 44px); height: var(--size, 44px); border-radius: calc(var(--size, 44px) * .28); background: #fbf8f6; color: var(--brand, var(--ink)); }
.logo svg { width: 56%; height: 56%; }
.logo--mono { font-weight: 700; font-size: calc(var(--size, 44px) * .46); color: #2a2420; }

/* ---------- state chip: word + soft colour ---------- */
.state { display: inline-flex; align-items: center; gap: .5em; min-height: 2rem; padding: 0 .8rem; border-radius: 10px; font-size: var(--step-small); font-weight: 600; white-space: nowrap; color: var(--st-unknown); background: var(--st-unknown-bg); }
.state::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.state[data-state="working"] { color: var(--st-working); background: var(--st-working-bg); }
.state[data-state="slow"], .state[data-state="partly_broken"] { color: var(--st-slow); background: var(--st-slow-bg); }
.state[data-state="broken"] { color: var(--st-broken); background: var(--st-broken-bg); }

/* =========================================================
   NOTES — a row of plain tiles, for the pages the kit's own chapters do not cover: support, the
   docs index, contact, the regional pages. The site is full of three-up explanations ("Email
   support", "Response time", "Status") and they need a shape that is the kit's: a white tile, the
   one radius, no border and no shadow, the heading at lead size.
   ========================================================= */
/* EVERY auto-fit FLOOR IS CAPPED AT THE SPACE THERE IS. A bare minmax(26rem, 1fr) cannot go below
   26rem, so on a 390px screen the grid itself was 416px wide and took the page with it — the gate
   found seven blocks of text against the screen edge and 46px of overflow. min(Xrem, 100%) lets the
   column shrink to the screen when the screen is smaller than the column. */
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 8px; }
.note { padding: 1.5rem 1.75rem; border-radius: var(--radius); background: var(--white); }
.note > :first-child { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
/* a card's own title is a card title: at lead size a post title in a three-up tile wraps to four
   lines and reads as a headline that got away */
.note h2, .note h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.note p { margin-top: .6rem; font-size: var(--step-body); line-height: 1.5; }
.note a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.note a:hover { color: var(--accent); }

/* a document page opens like a status page, with its title at heading size rather than display:
   a post or a policy has a longer name than a service does, and every headline is two lines */
/* one measure for a page of words: the tiles, the headings and the reading column share it,
   so the page's two margins match (the gate reads a mixed-width page as off-centre) */
/* ONE PAIR OF MARGINS ON A DOCUMENT PAGE. The reading measure IS the page's frame here: a wide wrap
   with a narrow column inside it reads as a shifted page (the gate measured 58px of margin on the
   left against 198px on the right), and two nested measures give a chapter two left edges. So every
   chapter sits in this one, and the prose fills it instead of setting its own. */
.wrap--read { max-width: 46rem; }
.wrap--read .prose, .wrap--read .prose > * { max-width: none; }
.st-top--page .lead { margin: 1.75rem auto 0; max-width: 54ch; }
.st-top--page .st-actions { justify-content: center; }

/* =========================================================
   PROSE — the reading column (DESIGN-GUIDELINES §7, "Blog, docs and everything else":
   "body at --step-body in a 65ch column, figures wider"). Every page that is mostly words wears
   this: posts, docs, legal, support, the regional pages. It is deliberately plain — the chapter
   around it carries the colour, and the words carry the rest.
   ========================================================= */
.prose { max-width: 65ch; margin-inline: auto; font-size: var(--step-body); line-height: 1.65; }
.prose > * + * { margin-top: 1.1em; }
/* a sub-heading in a 65ch column: at lead size an eleven-word question sets three lines, which
   reads as a headline that got away rather than a heading in a document */
.prose h2 { margin-top: 2.4em; font-size: clamp(1.35rem, 1.05rem + 0.75vw, 1.65rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.prose h3 { margin-top: 1.8em; font-size: calc(var(--step-body) * 1.15); font-weight: 700; letter-spacing: -0.015em; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
/* a sub-heading inside a document is a question in full on these pages: at lead size it sets three
   lines in a 350px column, so on a phone it steps back to a size a long question can hold */
@media (max-width: 620px) { .prose h2 { font-size: 1.25rem; } .prose blockquote { font-size: 1.2rem; } }
.prose a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .07em; }
.prose a:hover { color: var(--accent); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .45em; }
.prose blockquote { margin-inline: 0; padding-left: 1.1em; border-left: 3px solid var(--deep-sand); font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; }
.prose figure, .prose .wide { max-width: min(100%, 52rem); margin-inline: auto; }
.prose figure img, .prose > img { width: 100%; height: auto; border-radius: var(--radius); }
.prose figcaption { margin-top: .6em; font-size: var(--step-small); color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
.prose th, .prose td { padding: .7em .9em; text-align: left; background: var(--white); }
.prose th { font-weight: 700; }
.prose tr + tr th, .prose tr + tr td { border-top: 4px solid var(--flow, var(--bg)); }
.prose code { padding: .1em .35em; border-radius: 6px; background: var(--white); font-size: .92em; }
.prose pre { padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--white); overflow-x: auto; }
.prose pre code { padding: 0; background: none; }
.prose .small { font-size: var(--step-small); color: var(--muted); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] > * { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .js [data-reveal].is-in > * { opacity: 1; transform: none; }
  /* ON A DOCUMENT PAGE THE WORDS NEVER FADE. The entrance is the same move, without the opacity:
     a chapter of prose that starts invisible is a chapter nobody can read until it finishes
     arriving — the gate measured whole screens of text as empty ground, which is exactly what a
     reader scrolling quickly sees. The blocks still arrive; they slide. */
  .js [data-doc] [data-reveal] > * { opacity: 1; }
}

/* =========================================================
   HOME
   ========================================================= */

/* hero: Bilby's silhouette, enormous, holding the stores it walks */
.hero { position: relative; min-height: calc(100svh - 3.75rem); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; background: var(--sand); overflow: clip; padding-block: 4rem; }
.hero__copy { position: relative; z-index: 2; grid-column: 1 / span 6; min-width: 0; }
.hero__scan > * { min-width: 0; }
.hero h1 { font-size: var(--step-head); line-height: .95; letter-spacing: -0.045em; }
.hero__sub { margin-top: 2rem; font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; max-width: 28ch; }
.hero__scan { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 2.5rem; max-width: 34rem; }
.hero__scan label { grid-column: 1 / -1; font-size: var(--step-small); font-weight: 600; }
.hero__scan small { grid-column: 1 / -1; font-size: var(--step-small); color: var(--muted); }
/* where the scan says where it has got to, once it is running: the same words the theatre uses, in
   the page's own voice. Hidden until there is something to say, so nothing moves on load. */
.hero__prog { grid-column: 1 / -1; margin: 0; font-size: var(--step-small); font-weight: 600; color: var(--accent); }
.hero__prog::after { content: "…"; }
.hero__scan.is-busy .button { opacity: .55; pointer-events: none; }
.bilby { position: absolute; z-index: 1; right: -3vw; top: 52%; width: min(84vh, 54vw); aspect-ratio: 49 / 50; transform: translateY(-50%); -webkit-mask: url(img/bilby-mask.svg) center / contain no-repeat; mask: url(img/bilby-mask.svg) center / contain no-repeat; background: var(--deep-blush); }
.bilby { background: var(--bilby); }
.bilby__eye { position: absolute; z-index: 2; left: calc((41.5 - 13) / 49 * 100%); top: calc((35.8 - 1.5) / 50 * 100%); width: 3%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.hero__mail { position: absolute; z-index: 3; left: 52%; bottom: 9%; width: min(360px, 30vw); }

@media (prefers-reduced-motion: no-preference) {
  .bilby { animation: breathe 7s var(--ease-soft) infinite alternate; }
  @keyframes breathe { from { transform: translateY(-50%) scale(1); } to { transform: translateY(-51%) scale(1.015); } }
  .hero__mail { animation: float 6s var(--ease-soft) infinite alternate; }
  @keyframes float { to { transform: translateY(-10px); } }
  .bilby__eye { animation: blink 6s infinite; }
  @keyframes blink { 0%, 46%, 50%, 100% { transform: translate(-50%, -50%) scaleY(1); } 48% { transform: translate(-50%, -50%) scaleY(.1); } }
}

/* showcase: cards crossing a held photograph (the Earth at night) */
.reel { position: relative; height: 240svh; background: var(--night); color: var(--night-ink); }
.reel__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.reel__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.75) saturate(.8); }
.reel__head { position: absolute; z-index: 2; left: var(--margin); top: clamp(5rem, 12vh, 8rem); max-width: 40rem; opacity: var(--head-o, 1); transform: translateY(calc((1 - var(--head-o, 1)) * -40px)); }
.reel__head h2 { font-size: var(--step-head); }
.reel__head p { margin-top: 1rem; color: var(--night-muted); }
.reel__window { position: absolute; z-index: 3; left: var(--margin); right: var(--margin); top: 36%; bottom: 6%; overflow: hidden; border-radius: var(--radius); }
.reel__track { display: flex; gap: 32px; padding-left: 44%; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.card { flex: none; width: min(560px, 60vw); border-radius: var(--radius); overflow: hidden; background: var(--white); color: var(--ink); }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.card__foot { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; padding: 1.5rem 1.75rem 1.75rem; background: var(--field, var(--sand)); }
.card__foot h3 { font-size: var(--step-lead); letter-spacing: -0.025em; }
.card__foot p { font-size: var(--step-small); max-width: 26ch; text-align: right; }
.js .reel .card .card__foot > * { transition: opacity 400ms ease; }
.js .reel.is-moving .card:not([data-full]) .card__foot > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .reel__window { overflow-x: auto; } }

/* how it works: tiles that grow */
.grow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 10px; align-items: end; }
.grow__head { grid-column: 1 / span 6; grid-row: 1; align-self: start; }
.grow__head p { margin-top: 1.25rem; max-width: 40ch; }
.grow__step { display: grid; gap: 1rem; }
.grow__tile { position: relative; display: grid; place-items: center; border-radius: var(--radius); overflow: hidden; background: var(--tile); padding: 6%; }
.grow__tile img, .grow__tile video { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 10px; }
.grow__step h3 { font-size: var(--step-body); letter-spacing: -0.01em; font-weight: 700; }
.grow__step p { margin-top: .35rem; color: var(--muted); font-size: var(--step-small); max-width: 34ch; }
.grow__step:nth-of-type(2) { grid-column: 1 / span 3; grid-row: 2; } .grow__step:nth-of-type(2) .grow__tile { height: 26vh; --tile: var(--blush); }
.grow__step:nth-of-type(3) { grid-column: 4 / span 3; grid-row: 2; } .grow__step:nth-of-type(3) .grow__tile { height: 36vh; --tile: var(--sky); }
.grow__step:nth-of-type(4) { grid-column: 7 / span 3; grid-row: 1 / span 2; } .grow__step:nth-of-type(4) .grow__tile { height: 48vh; --tile: var(--sage); }
.grow__step:nth-of-type(5) { grid-column: 10 / span 3; grid-row: 1 / span 2; } .grow__step:nth-of-type(5) .grow__tile { height: 60vh; --tile: var(--sand); }

/* features: the studio, at poster scale */
.poster__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: first baseline; padding-block: .3em; text-decoration: none; }
.poster__row strong { grid-column: 1 / span 8; font-size: var(--step-head); font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; transition: color var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
.poster__row span { grid-column: 9 / span 4; font-size: var(--step-body); }
.poster__row span b { display: block; font-weight: 600; }
.poster__row--head strong { color: var(--muted); }
a.poster__row:hover strong { color: var(--accent); transform: translateX(.12em); }
.poster__note { margin-top: 3rem; }

/* proof: service logos running off the edges */
.band { background: var(--sky); padding-block: clamp(3rem, 7vh, 5rem); overflow: hidden; }
.band__track { display: flex; gap: clamp(3rem, 6vw, 6rem); width: max-content; align-items: center; }
.band__track svg { height: clamp(2rem, 3.4vw, 3rem); width: auto; fill: currentColor; color: var(--ink); flex: none; }
.band__note { padding-top: 1.25rem; }
@media (prefers-reduced-motion: no-preference) { .band__track { animation: run 48s linear infinite; } @keyframes run { to { transform: translateX(-50%); } } }

/* live board */
.live__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.live__head p { max-width: 38ch; color: var(--muted); }
.board { display: grid; gap: 8px; }
.board__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) auto; gap: var(--gutter); align-items: center; min-height: 76px; padding: .75rem 1.25rem; border-radius: var(--radius); background: var(--bg); text-decoration: none; transition: background-color var(--t-ui) ease, transform var(--t-ui) var(--ease-out); font-variant-numeric: tabular-nums; }
a.board__row:hover { background: var(--sky); transform: translateY(-2px); }
/* one fact, not two: the row closes on the right instead of reserving a column for nothing */
.board--tight .board__row { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) auto; }
/* A LIST OF LINKS, as rows. "Keep reading", "Where to go next", a blog index: the same words and
   the same hrefs as the bullet list they were, but each row spans the chapter, so the page's right
   margin is closed by something real and its last screens stop reading as empty ground. */
.board--links .board__row { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); min-height: 68px; padding: 1rem 1.25rem; }
.board--links .board__name { font-weight: 650; }
/* the note beside a row is read, not glanced at: at --step-small it is 14.4px, and on a page made
   mostly of rows that becomes the size most of the running text is set in — under the 15px floor */
.board--links .board__fact { text-align: right; font-size: 1rem; line-height: 1.45; }
.board__name { display: flex; align-items: center; gap: 1rem; font-size: var(--step-body); font-weight: 600; letter-spacing: -0.02em; }
.board__fact { color: var(--muted); font-size: var(--step-small); }
.live__foot { display: flex; justify-content: space-between; gap: 2rem; margin-top: 1.5rem; font-size: var(--step-small); color: var(--muted); }

/* pricing: plans that step up */
.steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 8px; align-items: end; }
.steps__head { grid-column: 1 / span 8; grid-row: 1; align-self: start; }
.steps__head p { margin-top: 1rem; }
.plan { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--tile); grid-row: 2; }
.plan:nth-of-type(2) { grid-column: 1 / span 4; --tile: var(--blush); --strip: var(--deep-blush); min-height: 400px; }
.plan:nth-of-type(3) { grid-column: 5 / span 4; --tile: var(--sky); --strip: var(--deep-sky); min-height: 500px; }
.plan:nth-of-type(4) { grid-column: 9 / span 4; --tile: var(--sage); --strip: var(--deep-sage); min-height: 600px; grid-row: 1 / span 2; }
.plan__body { flex: 1; padding: 1.75rem; }
.plan h3 { font-size: var(--step-lead); letter-spacing: -0.02em; }
.plan__price { margin-top: .5rem; font-size: var(--step-head); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price small { font-size: var(--step-body); font-weight: 500; letter-spacing: 0; }
.plan ul { margin-top: 1.25rem; display: grid; gap: .5rem; }
.plan a { display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 0 1.75rem; background: var(--strip); font-weight: 600; text-decoration: none; transition: filter var(--t-hover) ease; }
.plan a:hover { filter: brightness(.95); }
.plan a::after { content: "›"; font-size: 1.5em; transition: transform var(--t-hover) var(--ease-out); }
.plan a:hover::after { transform: translateX(4px); }
.studio-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.studio-prices a { display: grid; gap: .25rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--white); text-decoration: none; transition: background-color var(--t-ui) ease; }
.studio-prices a:hover { background: var(--sand); }
.studio-prices b { font-weight: 600; }
.studio-prices span { color: var(--muted); font-size: var(--step-small); font-variant-numeric: tabular-nums; }

/* faq: accordion of filled tiles */
.faq { align-items: start; }
.faq__head { grid-column: 1 / span 4; position: sticky; top: 6rem; }
.faq__list { grid-column: 5 / span 8; display: grid; gap: 8px; }
/* past six questions the head sits above and the questions take the whole wrap: at 4/8 a dozen of
   them run for three screens with an empty left third */
.faq--long .faq__head { grid-column: 1 / -1; position: static; margin-bottom: 1.75rem; }
.faq--long .faq__list { grid-column: 1 / -1; }
.faq details { border-radius: var(--radius); background: var(--white); transition: background-color var(--t-ui) ease; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 76px; padding: 1rem 1.5rem; font-size: var(--step-body); font-weight: 600; letter-spacing: -0.015em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 18px; height: 18px; }
/* THE MARKER IS DRAWN, NOT PLACED. As an <i> in the markup it is "a small icon" to the gate, and a
   row of questions each carrying one is the icon-card pattern §4 bans. Same mark, same place, no
   element: the document pages' accordion draws it with the summary's own corner. */
[data-doc] .faq summary { position: relative; padding-right: 3.25rem; }
[data-doc] .faq summary::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: 18px; height: 3px; border-radius: 2px; background: currentColor; }
[data-doc] .faq summary::before { content: ""; position: absolute; right: 1.5rem; top: 50%; width: 18px; height: 3px; border-radius: 2px; background: currentColor; transform: rotate(90deg); transition: transform var(--t-ui) var(--ease-out); }
[data-doc] .faq details[open] summary::before { transform: rotate(0deg); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 18px; height: 3px; border-radius: 2px; background: currentColor; transition: transform var(--t-ui) var(--ease-out); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] { background: var(--accent); color: var(--accent-ink); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details p { padding: 0 1.5rem 1.5rem; max-width: 52ch; }
/* the question keeps its own heading tag inside the summary, at the summary's size */
.faq summary h2, .faq summary h3 { font: inherit; letter-spacing: inherit; margin: 0; }
/* an answer that is more than one paragraph: lists, links and tables all sit on the same inset */
.faq__a { padding: 0 1.5rem 1.5rem; max-width: 62ch; }
.faq__a > * + * { margin-top: .9rem; }
.faq__a p { padding: 0; max-width: none; }
.faq__a ul, .faq__a ol { padding-left: 1.1rem; }
.faq__a li + li { margin-top: .4rem; }
/* a card title on a phone is a title, not a headline */
@media (max-width: 620px) { .note h3, .note > :first-child { font-size: 1.125rem; line-height: 1.25; } }
/* a tile on a phone is 350px wide: 28px of padding each side takes a tenth of the line away, and
   leaves the page's right margin measurably shorter than its left */
@media (max-width: 620px) { .note { padding: 1.15rem 1rem; } .picbar { gap: 1.25rem; } }
.faq details[open] .link:hover { color: inherit; }

/* cta: the first step, already open */
.start { min-height: 80svh; display: grid; align-items: center; }
.start__words { align-self: center !important; }
.start__words { grid-column: 1 / span 5; align-self: end; }
.start__words h2 { font-size: var(--step-display); line-height: .92; letter-spacing: -0.05em; }
.start__words p { margin-top: 1.5rem; max-width: 34ch; }
.dialog { --muted: #5e5e63; grid-column: 7 / span 5; justify-self: end; width: min(100%, 460px); padding: 1.75rem; border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: 0 24px 60px rgb(0 0 0 / .22); } /* taste-skill-ignore: a real dialog floats */
.dialog h3 { font-size: var(--step-lead); letter-spacing: -0.02em; }
.dialog p { margin-top: .35rem; color: var(--muted); font-size: var(--step-small); }
.dialog label { display: block; margin-top: 1.5rem; margin-bottom: .5rem; font-size: var(--step-small); font-weight: 600; }
.dialog .field { background: var(--bg); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--bg); }
.seg button { min-height: 2.75rem; border-radius: 14px; font-weight: 600; font-size: var(--step-small); color: var(--muted); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.seg button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.dialog .button { width: 100%; margin-top: 1.5rem; min-height: 3.5rem; }

/* footer: the mark, built large */
/* THE FOOT OF THE PAGE IS READ, NOT SKIMMED PAST. At 34svh of mark, 3.5rem of air and links set
   at 14.4px on .2rem rows, the footer ran to 1,409px — a screen and a half of thin text with
   nothing else on it, which is two screens of "almost empty ground" at the end of every short
   page. Same links, same order, set to be read: a little larger, a little tighter, one screen. */
.foot { background: var(--bg); padding-block: 3.5rem 1.75rem; }
.foot__mark { display: flex; align-items: end; gap: 4px; height: 26svh; min-height: 180px; }
.foot__mark span { flex: 1; display: grid; place-items: end start; height: var(--h); padding: 1rem; border-radius: var(--radius); background: var(--c); }
.foot__mark span b { font-size: var(--step-display); font-weight: 700; line-height: .8; letter-spacing: -0.05em; }
.foot__mark .foot__bilby { flex: 1.3; place-items: center; }
.foot__mark .foot__bilby img { width: 72%; height: auto; }
.foot__links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); margin-top: 2.5rem; font-size: 0.95rem; }
.foot__links b { display: block; margin-bottom: .6rem; font-weight: 600; }
.foot__links a { display: block; padding: .14rem 0; color: var(--muted); text-decoration: none; }
.foot__links a:hover { color: var(--ink); }
/* the line at the foot of every page is a sentence, not a label: at --step-small it is 14.4px, and
   on a short page it is the size MOST of the running text is set in — which is how the gate reads a
   page's body size, and 14.4px is under its 15px floor */
.foot__line { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; font-size: 1rem; color: var(--muted); }

/* =========================================================
   STATUS PAGES
   ========================================================= */
.st-top { background: var(--field); text-align: center; padding-block: clamp(4rem, 9vw, 7rem) clamp(4rem, 8vw, 6rem); }
.st-top[data-state="working"] { --field: var(--sage); }
.st-top[data-state="partly_broken"], .st-top[data-state="slow"] { --field: var(--sand); }
.st-top[data-state="broken"] { --field: var(--blush); }
.crumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem .75rem; margin-bottom: 3rem; font-size: var(--step-small); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.st-top .logo { margin-inline: auto; }
.st-top h1 { margin-top: 2rem; font-size: var(--step-display); line-height: .95; letter-spacing: -0.05em; }
/* a long title steps down on a phone: every headline is two lines at every width (SS0.6) */
@media (max-width: 900px) { .st-top h1 { font-size: var(--step-head); letter-spacing: -0.04em; } }
/* A DOCUMENT PAGE'S TITLE is a title, not a display line, and it is as long as the page is called:
   these are live titles and every word of them stays, so the type steps down by length instead of
   setting three lines. (This must stay BELOW the .st-top h1 display rule above, which has the same
   weight and would otherwise win.) */
.st-top--page h1 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); letter-spacing: -0.035em; line-height: 1.05; }
.st-top--long h1 { font-size: clamp(1.6rem, 0.8rem + 2.1vw, 2.9rem); }
.st-top--xlong h1 { font-size: clamp(1.35rem, 0.6rem + 1.9vw, 2.6rem); letter-spacing: -0.025em; line-height: 1.12; }
@media (max-width: 620px) {
  .st-top--page h1 { font-size: clamp(1.75rem, 7vw, 2.2rem); }
  .st-top--long h1 { font-size: 1.4rem; }
  .st-top--xlong h1 { font-size: 1.25rem; }
}
/* the title spans the wrap; everything else in the opening chapter keeps the reading measure */
.st-top__in { max-width: var(--maxw); }
.st-top__in > .crumbs, .st-top__in > .lead, .st-top__in > .st-actions, .st-top__in > .prose, .st-top__in > .notes { max-width: 46rem; }
.st-verdict { margin-top: 1rem; font-size: var(--step-head); font-weight: 700; letter-spacing: -0.04em; line-height: 1; max-width: none; }
.st-verdict span { color: var(--st-working); }
@media (max-width: 900px) { .st-verdict { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.15; } }
.st-top[data-state="partly_broken"] .st-verdict span, .st-top[data-state="slow"] .st-verdict span { color: var(--st-slow); }
.st-top[data-state="broken"] .st-verdict span { color: var(--st-broken); }
.st-top > .wrap > p:not(.st-verdict) { margin: 1.75rem auto 0; max-width: 46ch; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; }
.st-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 2.5rem; align-items: center; }
.regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4rem; text-align: left; }
.region { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--white); }
.region b { display: block; font-size: var(--step-body); font-weight: 600; letter-spacing: -0.02em; }
.region small { color: var(--muted); font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.day { margin-top: 8px; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--white); text-align: left; }
.day__bars { display: grid; grid-template-columns: repeat(96, 1fr); gap: 2px; height: 52px; }
.day__bars i { border-radius: 3px; background: var(--st-working); opacity: .85; transform-origin: bottom; transition: transform var(--t-hover) var(--ease-out), opacity var(--t-hover) ease; }
.day__bars i[data-s="slow"] { background: #e0a040; }
.day__bars i[data-s="broken"] { background: var(--st-broken); }
.day__bars i:hover { transform: scaleY(1.15); opacity: 1; }
.day__legend { display: flex; justify-content: space-between; margin-top: .75rem; font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }

.split { align-items: center; }
.split__words { grid-column: 1 / span 5; }
.split__words h2 { font-size: var(--step-head); }
.split__words p { margin-top: 1.5rem; }
.split__words .button { margin-top: 2rem; }
.split__pic { grid-column: 7 / span 6; position: relative; }
.split__pic img { border-radius: var(--radius); }
.split__pic img + img { position: absolute; right: -4%; bottom: -12%; width: 46%; }
.split__pic figcaption { margin-top: 1rem; max-width: 30ch; font-size: var(--step-small); color: var(--muted); }

/* A DOCUMENT PAGE'S SPLIT. Same frame as the marketing split, but the words are a chapter and not a
   pitch: the heading keeps the chapter size (at display size a five-column heading wraps to four
   lines), the lead reads at body size, the picture closes the right margin, and the rest of the
   prose continues underneath on the reading measure. */
.split--doc { align-items: start; }
.split--doc .split__words h2 { font-size: var(--step-lead); letter-spacing: -0.025em; line-height: 1.15; }
.split--doc .split__words > * + * { margin-top: 1.1rem; }
.split--doc .split__words p { margin-top: 1.1rem; font-size: var(--step-body); line-height: 1.6; }
.split--doc .split__pic img { width: 100%; height: auto; }
.split__rest { margin-top: 2.75rem; }
/* a chapter of forty words does not need a whole screen to say them */
.flow--short { padding-block: 3.5rem; }
@media (max-width: 620px) { .flow--short { padding-block: 2.5rem; } }

/* A DOCUMENT CHAPTER: the prose holds six columns on one left edge, the chapter's scene holds the
   five on the right and closes that margin. On a phone the picture follows the words. */
.doc { align-items: start; }
.doc__words { grid-column: 1 / span 6; }
.doc__rail { grid-column: 8 / span 5; position: sticky; top: 7rem; }
.doc__pic img, .faq__pic img { width: 100%; height: auto; border-radius: var(--radius); }
/* a caption is read like a sentence, not glanced at like a label: at --step-small it is 14.4px, and
   on a short page carrying several of them that becomes the size most of the running text is set
   in, under the gate's 15px floor */
.doc__pic figcaption, .faq__pic figcaption { margin-top: .9rem; font-size: 1rem; line-height: 1.5; color: var(--muted); }
/* the caption runs the width of its column: a 30ch cap left the rail open on the right, which is
   the one edge a document page has to close with something */
.doc__pic figcaption { max-width: none; }
/* the band of scenes before the closing chapter */
.picbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--gutter); margin-top: 2rem; }
/* .status-pic carries a grid-column of its own from the status pages, where it sits in the 12-column
   grid; in the band that made every scene span the whole row at 1310px wide */
.picbar > * { grid-column: auto; position: static; }

/* A WRAP INSIDE A WRAP. The old pages nest their own .wrap inside the article, so inside the
   reading column it applied the page gutter a second time: a 334px column became 219px, and a
   five-word heading set three lines at 1440. A nested wrap is just a block. */
.prose .wrap, .doc__words .wrap, .wrap .wrap, .faq__a .wrap { max-width: none; padding-inline: 0; }

/* the article's own two-column answer grid was drawn for a 1200px page; inside the reading column
   it has room for one column, and splits only where there is real room for two */
.prose .ans-grid, .wrap--read .ans-grid, .doc__words .ans-grid { grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }

/* A TABLE KEEPS EVERY COLUMN. The monitor comparison has nine; at 768 the page itself scrolled
   sideways by 404px. The table scrolls instead, inside its own frame, and says so by looking like
   one thing that can move. */
/* a generated file, a code sample, a long key: it scrolls inside its own frame. The llms.txt
   generator's output pushed the page 145px sideways at 1440. */
[data-doc] pre, [data-doc] code { max-width: 100%; overflow-wrap: anywhere; }
[data-doc] pre { overflow-x: auto; }

.tablewrap { margin-top: 1.75rem; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius); background: var(--white); }
.tablewrap table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--step-small); }
.tablewrap th, .tablewrap td { padding: .85rem 1rem; text-align: left; vertical-align: top; line-height: 1.45; }
.tablewrap thead th { position: sticky; top: 0; background: var(--sand); font-weight: 650; letter-spacing: -0.01em; }
.tablewrap tbody tr + tr th, .tablewrap tbody tr + tr td { box-shadow: inset 0 1px 0 var(--sand); }
.tablewrap td a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* THE LIVE STATUS BOX a post embeds. It fills itself from the status checks, so the markup stays;
   the stylesheet it used to carry beside it does not. */
.sl-box { margin-top: 1.75rem; padding: 1.5rem 1.75rem; border-radius: var(--radius); background: var(--white); }
.sl-box h2 { font-size: var(--step-lead); letter-spacing: -0.025em; }
.sl-box .sl-a { margin-top: .7rem; }
.sl-box .sl-m { margin-top: .5rem; font-size: var(--step-small); color: var(--muted); }
.sl-box .sl-m a, .sl-box .sl-a a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* THE POSTS' OWN DRAWINGS. Every illustration carried a label sheet beside it — Space Grotesk,
   Inter, JetBrains Mono, fills in hex — three fonts the site no longer loads and a monospace label
   §4 does not allow. The geometry is the post's; the labels take the kit's type and ink. */
svg text { font-family: inherit; }
svg .flbl { font-weight: 650; font-size: 13.5px; fill: var(--night-ink); }
svg .lbl, svg .g, svg .t, svg .k { font-weight: 650; font-size: 12.5px; fill: var(--ink); }
svg .fsub, svg .gs, svg .sub, svg .ts, svg .s { font-weight: 500; font-size: 11.5px; fill: var(--muted); }
svg .fmono, svg .gm, svg .mono, svg .tm, svg .tr { font-weight: 650; font-size: 11.5px; fill: var(--bilby); letter-spacing: .03em; }

/* ──────────────────────────────────────────────────────────────────────────────────────────────
   THE COMPONENTS THE DOCUMENT PAGES CARRY
   §7: an instrument is restyled to the tokens, not carried across with its own stylesheet. These
   are the live site's own article furniture — the answer-first block, the citable paragraph, the
   Bilby side card with its gauge, the figures, the interactive checklist, the pricing rows — and
   with their stylesheet gone they were loose text and, in the gauge's case, a black disc half a
   screen wide (a <path> with no fill of its own paints black). Every one of them is here in the
   kit's own ink, spacing and radius. Ordered as they appear in an article.
   ────────────────────────────────────────────────────────────────────────────────────────────── */

/* the by-line row, and the dot that separates its parts */
[data-doc] .amv { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: 1.1rem; font-size: var(--step-small); color: var(--muted); }
[data-doc] .amv span { display: inline-flex; align-items: center; gap: .5rem; }
[data-doc] .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bilby); flex: none; }
[data-doc] .upd-line, [data-doc] .method, [data-doc] .src { font-size: var(--step-small); color: var(--muted); }
[data-doc] .src { text-decoration: underline; text-underline-offset: .2em; }

/* the answer-first opening: the question's answer, before anything else */
/* THE ARTICLE'S OPENING ANSWER reads at lead size — and nothing inside an accordion does. Chrome
   still lays out a closed <details>, so its text has boxes: at lead size (22px on a phone, which is
   exactly where the gate starts calling text a headline) every hidden answer was read as a headline
   of eleven to twenty lines, and as large text lying under something. Inside a <details>, text is
   text. */
/* Inside a disclosure, text is text — and the rule has to beat .lead, which is a class and was
   winning over "details p" on every tool page (a 27.8px lead inside a closed <details> reads to
   the gate as large text lying under something). */
[data-doc] details .answer > :first-child, [data-doc] details .fa, [data-doc] details .big, [data-doc] details .says, [data-doc] details .tsub,
[data-doc] details .lead, [data-doc] details .ct, [data-doc] details .tsub, [data-doc] details p, [data-doc] details li { font-size: var(--step-body); line-height: 1.6; }
[data-doc] .reading > .answer > :first-child, [data-doc] .prose > .answer:first-child > :first-child { font-size: var(--step-lead); line-height: 1.4; letter-spacing: -0.015em; }
[data-doc] .fa { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--sand); font-size: var(--step-lead); line-height: 1.4; }

/* a paragraph someone can cite, and the mark that links to it */
[data-doc] .citable { scroll-margin-top: 6rem; }
[data-doc] .anch { margin-left: .4rem; color: var(--muted); text-decoration: none; opacity: .55; }
[data-doc] .anch:hover { opacity: 1; color: var(--accent); }

/* the notes an article leaves beside the text */
[data-doc] .callout, [data-doc] .statusnote, [data-doc] .lens-link, [data-doc] .lens-box, [data-doc] .nightly-offer { display: block; margin-top: 1.75rem; padding: 1.35rem 1.6rem; border-radius: var(--radius); background: var(--white); }
[data-doc] .lens-link, [data-doc] .lens-box, [data-doc] .nightly-offer { background: var(--sky); }
[data-doc] .callout > * + *, [data-doc] .statusnote > * + *, [data-doc] .lens-link > * + *, [data-doc] .lens-box > * + * { margin-top: .7rem; }
[data-doc] .callout a, [data-doc] .statusnote a, [data-doc] .lens-link a, [data-doc] .lens-box a, [data-doc] .nightly-offer a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* the article's own figures: a drawing, a screenshot, a diagram that scrolls */
[data-doc] .print, [data-doc] .print-img, [data-doc] .bp-art, [data-doc] .bp-object, [data-doc] .figure-card { margin-top: 1.75rem; }
[data-doc] .print-img, [data-doc] .bp-art, [data-doc] .figure-card { padding: 1.25rem; border-radius: var(--radius); background: var(--white); }
[data-doc] .print-img svg, [data-doc] .bp-art svg, [data-doc] .figure-card svg { display: block; width: 100%; height: auto; }
[data-doc] .bp-object img, [data-doc] .figure-card img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
[data-doc] .fig-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
[data-doc] figure figcaption { margin-top: .8rem; font-size: 1rem; line-height: 1.5; color: var(--muted); }

/* the side card: what Bilby found, with its gauge */
[data-doc] .post-grid { display: block; }
[data-doc] .post-rail { display: block; margin-top: 2.25rem; }
[data-doc] .tobj { min-width: 0; padding: 1.5rem 1.6rem; border-radius: var(--radius); background: var(--white); overflow-wrap: anywhere; }
[data-doc] .tobj-k { font-size: var(--step-small); color: var(--muted); }
[data-doc] .r2-dialrow { display: flex; align-items: center; gap: 1.1rem; margin-top: 1rem; }
[data-doc] .dial { position: relative; width: 88px; height: 88px; flex: none; }
[data-doc] .dial svg { display: block; width: 100%; height: 100%; }
[data-doc] .dial-track, [data-doc] .dial-arc { fill: none; stroke-width: 7; stroke-linecap: round; }
[data-doc] .dial-track { stroke: var(--sand); }
[data-doc] .dial-arc { stroke: var(--accent); }
[data-doc] .dial-ticks line { stroke: var(--deep-sand, var(--sand)); stroke-width: 2; }
[data-doc] .dial-needle { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; transform: rotate(var(--deg, 0deg)); transform-origin: 44px 44px; transform-box: view-box; }
[data-doc] .dial-hub { fill: var(--ink); }
[data-doc] .dial-val { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; }
[data-doc] .big { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; }
/* on a phone the gauge's figure, its verdict and its label sit in one narrow column: at lead size
   the three of them read to the gate as one heading of three lines */
@media (max-width: 620px) { [data-doc] .big { font-size: 1.15rem; } [data-doc] .dial-val { font-size: 1.1rem; } }
/* a fact row: the label takes what is left and the figure takes what it needs — but neither may
   push the page wider than the screen (at 768 this row scrolled /apps sideways by 174px) */
[data-doc] .tobj-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: .35rem 1rem; margin-top: 1.1rem; font-size: var(--step-small); }
[data-doc] .tobj-rows > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 820px) { [data-doc] .tobj-rows { grid-template-columns: minmax(0, 1fr); } [data-doc] .tobj-rows b { margin-bottom: .35rem; } }
[data-doc] .tobj-rows b { font-variant-numeric: tabular-nums; }
/* the kit's own state colours: they are redefined for the night theme, a hex is not — #a8301f
   on the night surface measured 2.4:1 */
[data-doc] .tobj-rows .bad, [data-doc] .bad { color: var(--st-broken); font-weight: 650; }
[data-doc] .tobj-how { margin-top: 1rem; }
[data-doc] .tobj-how a { font-weight: 650; }

/* the checklist a reader ticks, and what it answers back */
[data-doc] .iwidget { margin-top: 1.75rem; padding: 1.35rem 1.6rem; border-radius: var(--radius); background: var(--white); display: grid; gap: .6rem; }
[data-doc] .iwidget label, [data-doc] .opt { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.45; cursor: pointer; }
[data-doc] .iwidget input, [data-doc] .opt input { margin-top: .25rem; accent-color: var(--accent); }
[data-doc] .iout { margin-top: 1.1rem; padding-top: 1.1rem; font-size: var(--step-small); color: var(--muted); box-shadow: inset 0 1px 0 var(--sand); }

/* two answers side by side, and the pricing rows */
[data-doc] .ans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: var(--gutter); margin-top: 1.5rem; }
[data-doc] .rlist { display: grid; gap: 8px; margin-top: 1.5rem; }
[data-doc] .ritem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; padding: 1.2rem 1.4rem; border-radius: var(--radius); background: var(--white); }
[data-doc] .rn { font-weight: 700; font-variant-numeric: tabular-nums; }
[data-doc] .ritem h3 { font-size: var(--step-body); font-weight: 700; }
/* a row's paragraph is the page's own instruction on the docs pages, not a price footnote: at
   --step-small and muted, 1,468 characters of the getting-started guide were set at 14.4px */
[data-doc] .ritem p { margin-top: .35rem; font-size: var(--step-body); line-height: 1.55; }

/* the row of actions an article ends a section with */
[data-doc] .cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* a table the page brought with it gets the same frame as one the transform wrapped */
[data-doc] .tbl-wrap { margin-top: 1.75rem; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius); background: var(--white); }
[data-doc] .tbl-wrap table, [data-doc] table.data { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: var(--step-small); }
[data-doc] .tbl-wrap th, [data-doc] .tbl-wrap td { padding: .85rem 1rem; text-align: left; vertical-align: top; line-height: 1.45; }
[data-doc] .tbl-wrap thead th { background: var(--sand); font-weight: 650; }
[data-doc] .tbl-wrap tbody tr + tr th, [data-doc] .tbl-wrap tbody tr + tr td { box-shadow: inset 0 1px 0 var(--sand); }

/* the card chips on a post tile: a tag, not an eyebrow — sentence case, its own ground */
/* THE CATEGORY ON A POST TILE GOES UNDER THE TITLE. As a filled chip above it, three identical
   cards each opened with a small coloured block — which is the icon-card pattern §4 bans, and the
   gate called it by name. The word is the same word; it reads as the note it is. */
[data-doc] .note { display: flex; flex-direction: column; }
[data-doc] .note h2, [data-doc] .note h3 { order: 1; }
[data-doc] .note .pk { order: 2; margin: .5rem 0 0; padding: 0; background: none; font-size: var(--step-small); font-weight: 600; color: var(--muted); }
[data-doc] .note .rd { order: 3; }
[data-doc] .pk { display: inline-block; margin-bottom: .55rem; padding: .2rem .55rem; border-radius: 7px; background: var(--sand); font-size: .78rem; font-weight: 650; color: var(--muted); }
/* on a dark card the accent is a button fill, not an ink: "Open the checklist →" measured 2:1 */
[data-doc] .rd { display: inline-block; margin-top: .7rem; font-size: var(--step-small); font-weight: 650; color: inherit; text-decoration: underline; text-underline-offset: .25em; }

/* ──────────────────────────────────────────────────────────────────────────────────────────────
   THE INSTRUMENTS — /tools/*
   §7: "the tool is the hero and the live thing, restyled to the tokens (fields, buttons, .board
   for results)". Each tool page used to carry its own stylesheet, which was the old design in
   miniature: hairline rules, 11px labels, an eyebrow over the number, colours whose variables v3
   does not define. The markup and the JavaScript that drives it are untouched; this is the whole
   look of every calculator, checker and generator on the site, in the kit's own tokens.
   ────────────────────────────────────────────────────────────────────────────────────────────── */

/* the tool's own opening: what it is, what it answers */
/* the opening chapter of a tool page: the words hold six columns, the tool holds the rest and is
   the first thing on the screen — §7, the tool is the hero and the live thing */
[data-doc] .split--tool .split__words { grid-column: 1 / span 5; }
[data-doc] .split__tool { grid-column: 7 / span 6; }
/* the phone rule has to name the modifier too: .split--tool .split__words is two classes and was
   beating the one-class stacking rule, so the title kept a five-column measure at 390 */
@media (max-width: 900px) { [data-doc] .split__tool, [data-doc] .split--tool .split__words { grid-column: 1 / -1; } [data-doc] .split__tool { margin-top: 2rem; } }
/* a title beside the tool has five columns, not the page: it sets to the space it has */
[data-doc] .split--tool h1 { font-size: clamp(1.6rem, 1rem + 1.5vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; }

[data-doc] .thero-id { display: flex; align-items: center; gap: .75rem; }
[data-doc] .ti { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 11px; background: var(--sand); color: var(--ink); flex: none; }
[data-doc] .ti svg { width: 1.3rem; height: 1.3rem; }
[data-doc] .ti-hero { width: 3rem; height: 3rem; }
[data-doc] .ti-hero svg { width: 1.6rem; height: 1.6rem; }
[data-doc] .thero-cat { font-size: var(--step-small); font-weight: 650; color: var(--muted); }
[data-doc] .tsub { margin-top: 1.1rem; font-size: var(--step-lead); line-height: 1.45; max-width: 46ch; }

/* the fields. A tool is typed into: the field is the biggest thing on the card. */
[data-doc] .f-label { display: block; margin-bottom: .45rem; font-size: var(--step-small); font-weight: 650; }
[data-doc] .f-input {
  width: 100%; padding: .85rem 1rem; border: 0; border-radius: 12px;
  background: var(--sand); color: var(--ink); font: inherit; font-size: var(--step-body);
  transition: box-shadow var(--t-ui) ease, background-color var(--t-ui) ease;
}
[data-doc] .f-input::placeholder { color: var(--muted); }
[data-doc] .f-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--white); }
[data-doc] textarea.f-input { min-height: 7rem; resize: vertical; line-height: 1.55; }
[data-doc] .amt-wrap { position: relative; }
[data-doc] .amt-wrap .f-input { padding-left: 2rem; }
[data-doc] .amt-wrap::before { content: "$"; position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
[data-doc] .pd-field + .pd-field, [data-doc] .f-label + .f-input { margin-top: .35rem; }
[data-doc] .pd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
[data-doc] .pd-h { font-weight: 650; }
[data-doc] .pd-count { font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }
[data-doc] .pd-body { margin-top: .6rem; }
[data-doc] .pd-body.empty { color: var(--muted); }

/* the card the tool lives in, and the row of results it answers with */
[data-doc] .tool-card, [data-doc] .scan-card { padding: 1.75rem; border-radius: var(--radius); background: var(--white); }
/* the phone rule is scoped exactly like the desktop one, or it loses the cascade by a class */
@media (max-width: 620px) { [data-doc] .tool-card, [data-doc] .scan-card { padding: 1.15rem; } }
[data-doc] .tsec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--gutter); align-items: start; }
[data-doc] .conv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--gutter); }
[data-doc] .conv h2, [data-doc] .tsec-grid h2 { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.2; }
[data-doc] .ex { margin-top: 1.5rem; padding: 1.35rem 1.6rem; border-radius: var(--radius); background: var(--sand); }
[data-doc] .ex h3 { font-size: var(--step-body); font-weight: 700; }
[data-doc] .ex-rows { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.25rem; margin-top: 1rem; font-size: var(--step-small); }
[data-doc] .ex-rows b, [data-doc] .tobj-rows b { font-weight: 650; font-variant-numeric: tabular-nums; }
[data-doc] .in { font-size: var(--step-small); color: var(--muted); }
[data-doc] .says { margin-top: 1.1rem; font-size: var(--step-lead); line-height: 1.4; }
/* emphasis is weight here, not colour: .hi lands inside tinted cards too, and the accent on a
   dark card measured 2:1 */
[data-doc] .hi { color: inherit; font-weight: 700; }
[data-doc] .ok { color: var(--st-working); font-weight: 650; }
[data-doc] .wk { margin-top: 1.75rem; padding: 1.35rem 1.6rem; border-radius: var(--radius); background: var(--sky); }
[data-doc] .wk h3 { font-size: var(--step-body); font-weight: 700; }
[data-doc] .wk ul { margin-top: .6rem; padding-left: 1.1rem; }
[data-doc] .ct { margin-top: 1.75rem; font-size: var(--step-lead); font-weight: 650; }
[data-doc] .cd { margin-top: .5rem; color: var(--muted); }
[data-doc] .why summary { cursor: pointer; font-weight: 650; }
[data-doc] .why[open] summary { margin-bottom: .6rem; }

/* WHAT THE TOOLS' OWN STYLESHEET STILL HELD. /assets/tools.css went with the rest of the old
   design, and these are the parts of it the pages (and the scripts that build markup at runtime)
   still ask for: the phone action bar, the segmented control, the chips, the hints. Without the
   bar's rule it sat at the top of every width against the left edge of the screen. */
[data-doc] .mbar { display: none; }
@media (max-width: 620px) {
  [data-doc] .mbar { display: flex; position: fixed; inset: auto 0 0; z-index: 60; gap: .5rem; padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom)); background: var(--white); }
  [data-doc] .mbar .button, [data-doc] .mbar .seg { flex: 1; justify-content: center; }
}
[data-doc] .seg { display: inline-flex; flex: 1 1 auto; border-radius: 11px; overflow: hidden; background: var(--sand); }
[data-doc] .seg button { flex: 1; min-height: 44px; padding: 0 .9rem; border: 0; background: transparent; font: inherit; font-weight: 650; color: var(--ink); cursor: pointer; }
[data-doc] .seg button[aria-pressed="true"], [data-doc] .seg button.on { background: var(--accent); color: var(--accent-ink); }
[data-doc] .is-off { opacity: .55; pointer-events: none; }
/* a row of figures with what each one counts under it */
/* A DOCUMENT'S TITLE BLOCK READS FROM THE LEFT. .st-top centres its words, which is right for a
   status card — one verdict, one line — and wrong for a page of prose: the trail, the title and
   the lead were centred above a left-aligned article, and in the tool split the five-column words
   column centred every line of it. */
[data-doc] .st-top { text-align: left; }

[data-doc] .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 8px; margin-top: 1.5rem; }
[data-doc] .stat { min-width: 0; padding: 1.25rem 1.4rem; border-radius: var(--radius); background: var(--white); }
[data-doc] .stat .num { font-size: var(--step-head); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
[data-doc] .stat .lbl { margin-top: .5rem; font-size: var(--step-small); color: var(--muted); }
[data-doc] .lbl { display: block; }

[data-doc] .actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
[data-doc] .actions .button { flex: 1 1 calc(50% - .65rem); justify-content: center; }
[data-doc] .act-note { margin-top: .6rem; font-size: var(--step-small); color: var(--muted); }
[data-doc] .f-hint { margin-top: .35rem; font-size: var(--step-small); color: var(--muted); }
/* a small label beside a field or a count ("4 inputs", "optional") */
[data-doc] .sl { font-size: var(--step-small); color: var(--muted); }
/* the copy confirmation: the script shows it for 1.8 seconds, so it starts hidden — without the
   rule it carried, every tool said COPIED before anyone had copied anything */
[data-doc] #shareOk, [data-doc] #copyOk { display: none; }
[data-doc] .f-opt { font-weight: 400; color: var(--muted); }
[data-doc] .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
[data-doc] .chip { min-height: 32px; padding: 0 .7rem; border: 0; border-radius: 9px; background: var(--sand); font-size: var(--step-small); font-weight: 650; color: var(--ink); cursor: pointer; }
[data-doc] .chip:hover, [data-doc] .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
/* the offer block the tools end on */
[data-doc] .nv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gutter); margin-top: 2rem; padding: 1.6rem 1.75rem; border-radius: var(--radius); background: var(--sky); }
[data-doc] .nv-cta-body { flex: 1 1 22rem; min-width: 0; }
[data-doc] .nv-cta-k { margin-bottom: .4rem; font-size: var(--step-small); font-weight: 650; color: var(--muted); }
[data-doc] .nv-cta-d, [data-doc] .nv-cta-sub { margin-top: .5rem; color: var(--muted); }
[data-doc] .nv-cta-act { display: flex; flex-wrap: wrap; gap: .6rem; }

/* the results a scan writes into: the box is in the page from the start and the tool's own script
   turns it on when it has something to show */
[data-doc] .rz { display: none; }
[data-doc] .rz.on { display: block; }
/* .status-pic brings a grid-column of its own from the status pages. Inside the accordion's list
   that asked for five columns, so the grid made five and the questions flowed ACROSS them: six
   narrow pillars of one word per line instead of a column of rows. */
[data-doc] .faq__list > *, [data-doc] .doc__rail > * { grid-column: auto; position: static; }
[data-doc] .faq__pic { margin-bottom: 1.25rem; }
/* a card that brought its own drawing keeps it, at the tile's width */
[data-doc] .note img, [data-doc] .note svg { display: block; width: 100%; height: auto; border-radius: 10px; }
/* a tile inside another card: /apps nests a row of tiles inside a fact card, and a long figure in
   one of them made the tile 214px wide in a 135px column — 47px of sideways scroll at 768 */
[data-doc] .notes, [data-doc] .note, [data-doc] .note > * { min-width: 0; overflow-wrap: anywhere; }
[data-doc] .note > a { color: inherit; }

.earth { position: relative; border-radius: var(--radius); overflow: hidden; }
.earth img { width: 100%; }
.pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: .5rem; transform: translate(-6px, -50%); font-size: var(--step-small); font-weight: 600; white-space: nowrap; }
.pin::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #ffd27a; flex: none; }
.pin span { padding: .25rem .6rem; border-radius: 8px; background: rgb(22 24 29 / .78); color: var(--night-ink); }
.pin--left { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
@media (prefers-reduced-motion: no-preference) {
  .pin::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #ffd27a; animation: ping 2.6s var(--ease-out) infinite; }
  .pin--left::after { left: auto; right: 0; }
  @keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3.4); opacity: 0; } }
}
.check__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-bottom: 3rem; align-items: end; }
.check__head h2 { grid-column: 1 / span 6; font-size: var(--step-head); }
.check__head p { grid-column: 8 / span 5; }
.check__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.check__facts div { padding: 1.25rem 1.5rem; border-radius: var(--radius); background: rgb(255 255 255 / .06); }
.flow:not([data-tone="dark"]) .check__facts div, .st-top .check__facts div { background: var(--white); }
.flow:not([data-tone="dark"]) .check__facts span, .st-top .check__facts span { color: var(--muted); }
.check__facts b { display: block; font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.check__facts span { color: var(--night-muted); font-size: var(--step-small); }

.ninety { align-items: start; }
.ninety__fig { grid-column: 1 / span 5; }
.ninety__fig h2 { font-size: var(--step-lead); letter-spacing: -0.015em; font-weight: 600; }
.ninety__fig strong { display: block; margin-top: 1.5rem; font-size: var(--step-display); font-weight: 700; line-height: .9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.ninety__fig p { margin-top: 1.25rem; max-width: 40ch; }
.ninety__list { grid-column: 7 / span 6; display: grid; gap: 8px; }
.incident { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: 1.1rem 1.5rem; border-radius: var(--radius); background: var(--bg); text-decoration: none; transition: background-color var(--t-ui) ease; }
.incident:hover { background: var(--sky); }
.incident b { font-weight: 600; font-variant-numeric: tabular-nums; }
.incident > span:not(.state) { color: var(--muted); font-size: var(--step-small); }
/* On the history page the incidents ARE the content, not a sidebar: at 14.4px they made the
   page's running text smaller than the site's body size, which the gate reads as small print
   everywhere. A page whose subject is a list sets that list at body size. */
.ninety__list--record .incident > span:not(.state) { font-size: var(--step-body); }
.ninety__list--record .incident b { font-size: var(--step-body); }
@media (max-width: 900px) { .ninety__list--record .incident > span:not(.state),
  .ninety__list--record .incident b { font-size: var(--step-body); } }
.incident .state { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.says { text-align: center; }
.says h2 { font-size: var(--step-lead); letter-spacing: -0.015em; font-weight: 600; }
.says blockquote { margin-top: 1.5rem; font-size: var(--step-head); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.says p { margin: 1.5rem auto 0; max-width: 48ch; color: var(--muted); }
.badge { align-items: center; }
.badge__words { grid-column: 1 / span 5; }
.badge__words h2 { font-size: var(--step-head); }
.badge__words p { margin-top: 1.25rem; }
.badge__demo { grid-column: 7 / span 6; display: grid; gap: 8px; }
.badge__chip { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; padding: .65rem 1rem; border-radius: 12px; background: var(--white); font-size: 15px; font-weight: 600; }
.badge__chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--st-working); }
.badge__chip span { color: var(--muted); font-weight: 400; }
.badge__demo pre { margin: 0; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--white); font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; }
.st-meta { padding-block: 3rem; font-size: var(--step-small); color: var(--muted); }
.st-meta a { color: var(--ink); }

/* =========================================================
   PHONE
   ========================================================= */
@media (max-width: 900px) {
  .nav__links, .nav__in > .button { display: none; }
  .nav__burger { display: block; }
  /* the two halves of the swap, together: hiding the links without showing a way to them is the
     state the owner found at 390px on 3 November */
  .mnav { display: block; }
  .nav.is-open .nav__links { display: flex; position: fixed; inset: 3.75rem 0 0; flex-direction: column; gap: 0; padding: 1rem var(--margin); background: var(--bg); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
  .nav.is-open .nav__links a { padding: .55rem 0; color: var(--ink); }
  .hero { align-items: start; min-height: 100svh; padding-block: 3rem 0; }
  .hero__copy { grid-column: 1 / -1; }
  .hero__sub { margin-top: 1.25rem; }
  .hero__scan { grid-template-columns: 1fr; }
  .bilby { position: relative; right: auto; top: auto; transform: none; width: 100vw; margin: 2.5rem 0 0 8vw; }
  .hero__caption { display: none; }
  .reel { height: auto; }
  .reel__stage { position: static; height: auto; padding-bottom: 4rem; }
  .reel__photo { position: static; aspect-ratio: 4 / 5; height: auto; }
  .reel__head { position: static; padding: 4rem var(--margin) 2rem; }
  .reel__window { position: static; overflow: visible; padding: 2rem var(--margin) 0; }
  .reel__track { transform: none; flex-direction: column; gap: 24px; padding: 0; }
  .card { width: 100%; }
  .card__foot { flex-direction: column; align-items: start; gap: .5rem; }
  .card__foot p { text-align: left; }
  .grow { row-gap: 2rem; }
  .grow__head, .grow__step:nth-of-type(n) { grid-column: 1 / -1; grid-row: auto; }
  .grow__step:nth-of-type(2) .grow__tile { height: 34vw; } .grow__step:nth-of-type(3) .grow__tile { height: 46vw; }
  .grow__step:nth-of-type(4) .grow__tile { height: 62vw; } .grow__step:nth-of-type(5) .grow__tile { height: 78vw; }
  .poster__row { padding-bottom: 1.75rem; }
  .poster__row strong, .poster__row span { grid-column: 1 / -1; }
  .poster__row span { padding: .5rem 0 0 var(--margin); }
  .live__head, .live__foot { flex-direction: column; align-items: start; }
  .board__row, .board--tight .board__row { grid-template-columns: 1fr auto; }
  /* on a phone a row is a stack: the name, then its note under it */
  .board--links .board__row { grid-template-columns: 1fr; gap: .35rem; }
  .board--links .board__fact { text-align: left; }
  .board__fact { display: none; }
  .steps { row-gap: 28px; }
  .steps__head, .plan:nth-of-type(n) { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .studio-prices { grid-template-columns: 1fr 1fr; }
  .faq__head, .faq__list { grid-column: 1 / -1; position: static; }
  .doc__words, .doc__rail { grid-column: 1 / -1; position: static; }
  .doc__rail { margin-top: 2.25rem; }
  .faq__list { margin-top: 2rem; }
  .start { row-gap: 3rem; }
  .start__words, .dialog { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
  .foot__mark { height: 22svh; min-height: 140px; }
  .foot__mark span { padding: .5rem; }
  .foot__links { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .foot__line { flex-direction: column; }
  .regions { grid-template-columns: 1fr; }
  .day__bars { grid-template-columns: repeat(48, 1fr); } .day__bars i:nth-child(-n+48) { display: none; }
  .split__words, .split__pic, .ninety__fig, .ninety__list, .badge__words, .badge__demo, .check__head h2, .check__head p { grid-column: 1 / -1; }
  .split__pic, .ninety__list, .badge__demo { margin-top: 2.5rem; }
  .split__pic img + img { position: static; width: 70%; margin: -15% 0 0 auto; }
  .check__head p { margin-top: 1.25rem; }
  .check__facts { grid-template-columns: 1fr 1fr; }
  .pin span { display: none; }
}

/* =========================================================
   v4 additions: the mail card, the live map, numbers, the feed, the calculator, the app, theme switch
   ========================================================= */
.mailcard { padding: 1rem 1.1rem 1.1rem; border-radius: var(--radius); background: var(--white); color: var(--ink); }
.mailcard__top { display: flex; align-items: center; gap: .7rem; font-size: var(--step-small); }
.mailcard__top img { width: 38px; height: 38px; padding: 5px; border-radius: 12px; background: var(--sage); }
.mailcard__top time { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
/* the film's phone card is white at both times of day, like the report beside it */
:root[data-time="night"] .film__phone .mailcard__top time { color: #6c625a; }
.mailcard p { margin-top: .6rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.mailcard .state { margin-top: .7rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 2rem; font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.hero__facts b { color: var(--ink); font-weight: 700; }

.map__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 2.5rem; }
.map__head h2 { grid-column: 1 / span 7; font-size: var(--step-head); }
.map__head p { grid-column: 8 / span 5; }
.map { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--sky); aspect-ratio: 1600 / 570; }
.map__in { position: absolute; inset: 0; }
.map canvas, .map__in > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .pin { z-index: 3; }
.pin--hq::before { width: 16px; height: 16px; background: var(--bilby); box-shadow: 0 0 0 4px rgb(255 255 255 / .85); } /* taste-skill-ignore: a marker ring, not a resting shadow */
.zone { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--x); width: 2.6%; transform: translateX(-50%); background: rgb(233 142 114 / .28); }
.zone--mail { background: rgb(15 82 87 / .2); }
.zone span { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .3rem .6rem; border-radius: 9px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; }
.zone--mail span { top: auto; bottom: 10px; }
.map__legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.map__legend div { padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--white); }
.map__legend b { display: block; font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.map__legend span { font-size: var(--step-small); color: var(--muted); }

.night4 .grow__tile { padding: 0; }
.night4 .grow__tile img { border-radius: 0; object-position: center; }
.chapter--night .grow__step p { color: var(--night-muted); }

.numbers { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: start; }
.numbers h2 { grid-column: 1 / -1; font-size: var(--step-head); max-width: 16ch; }
.figs { grid-column: 1 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fig { padding: 1.5rem; border-radius: var(--radius); background: var(--white); }
.fig b { display: block; font-size: var(--step-head); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.fig span { display: block; margin-top: .6rem; color: var(--muted); font-size: var(--step-small); }
.feed { grid-column: 8 / span 5; }
.feed h3 { font-size: var(--step-lead); letter-spacing: -0.02em; }
.feed ul { display: grid; gap: 8px; margin-top: 1.25rem; }
.feed li { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--white); }
.feed li .state { grid-row: 1 / span 2; align-self: start; }
.feed li b { font-weight: 600; line-height: 1.3; }
.feed li span:not(.state) { color: var(--muted); font-size: var(--step-small); }
.feed p { margin-top: 1rem; font-size: var(--step-small); color: var(--muted); }

.calc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.calc__words { grid-column: 1 / span 5; }
.calc__words h2 { font-size: var(--step-head); }
.calc__words p { margin-top: 1.25rem; }
.calc__input { margin-top: 2rem; }
.calc__input label { display: flex; justify-content: space-between; font-weight: 600; }
.calc__input output { font-variant-numeric: tabular-nums; }
.calc__input input { width: 100%; margin-top: .75rem; accent-color: var(--accent); height: 2.75rem; }
.calc__chart { grid-column: 7 / span 6; padding: 2rem; border-radius: var(--radius); background: var(--white); }
.calc__chart svg { width: 100%; height: auto; overflow: visible; }
.calc__chart text { font-family: var(--font); fill: var(--ink); }
.calc__chart .axis { fill: var(--muted); font-size: 13px; }
.calc__chart rect { transition: height 300ms var(--ease-out), y 300ms var(--ease-out); }
.calc__chart p { margin-top: 1rem; font-size: var(--step-small); color: var(--muted); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4rem; }
.pair figure { border-radius: var(--radius); overflow: hidden; }
.pair figcaption { padding: 1rem 1.25rem; background: var(--white); font-size: var(--step-small); color: var(--muted); }
.pair img { width: 100%; }

.app { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.app__pic { grid-column: 1 / span 7; border-radius: var(--radius); overflow: hidden; }
.app__words { grid-column: 9 / span 4; }
.app__words h2 { font-size: var(--step-head); }
.app__words p { margin-top: 1.25rem; }
.app__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 1.75rem; }
.app__plans div { padding: .9rem 1rem; border-radius: 14px; background: var(--white); }
.app__plans b { display: block; font-variant-numeric: tabular-nums; }
.app__plans span { font-size: var(--step-small); color: var(--muted); }
.app__words .button { margin-top: 1.75rem; }
.app__pic figcaption, .status-pic figcaption { padding: .9rem 1.25rem; background: var(--white); font-size: var(--step-small); color: var(--muted); }

.statusrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.status-pic { grid-column: 1 / span 5; border-radius: var(--radius); overflow: hidden; position: sticky; top: 6rem; }
.statusrow .board { grid-column: 6 / span 7; }

.themes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--white); }
.themes button { min-height: 2.25rem; padding: 0 .9rem; border-radius: 10px; font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.themes button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

@media (max-width: 900px) {
  .hero__mail { position: relative; left: auto; bottom: auto; width: auto; margin: -22vw var(--margin) 0; }
  .map__head h2, .map__head p { grid-column: 1 / -1; }
  .map__head p { margin-top: 1rem; }
  .map { aspect-ratio: 1600 / 900; }
  .map__in { width: 190%; left: -88%; right: auto; }
  .bilby { animation: none !important; }
  .zone span { display: none; }
  .map__legend { grid-template-columns: 1fr 1fr; }
  .figs, .feed, .calc__words, .calc__chart, .app__pic, .app__words, .status-pic, .statusrow .board { grid-column: 1 / -1; }
  .feed, .calc__chart, .app__words, .statusrow .board { margin-top: 2.5rem; }
  .status-pic { position: static; }
  .pair { grid-template-columns: 1fr; }
}

/* night: the dark-ink marks turn light */
:root[data-time="night"] .nav__mark img, :root[data-time="night"] .foot__bilby img { filter: invert(.93) sepia(.08); }
.fig b { white-space: nowrap; }
/* four moments: big 4:3 pictures, two by two */
.night4 .grow { grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 2.5rem; align-items: start; }
.night4 .grow__head { grid-column: 1 / -1; grid-row: auto; margin-bottom: 1rem; }
.night4 .grow__step:nth-of-type(n) { grid-column: auto; grid-row: auto; }
.night4 .grow__step:nth-of-type(n) .grow__tile { height: auto; aspect-ratio: 4 / 3; }
.night4 .grow__tile img { height: 100%; }
@media (max-width: 900px) { .night4 .grow { grid-template-columns: 1fr; } }
.fig b span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.feed ul { padding: 0; list-style: none; }
.mailcard__top img { background: #e2e9d6 !important; }

/* =========================================================
   v5: one flowing page. Sections carry no ground of their own; the page colour
   glides from chapter to chapter as you scroll (set by navaal.js from data-flow).
   ========================================================= */
body { background: var(--flow, var(--bg)); transition: background-color 1.1s var(--ease-soft); }
.nav { background: var(--flow, var(--bg)); transition: background-color 1.1s var(--ease-soft); }
.flow { position: relative; padding-block: clamp(4.5rem, 8vw, 7.5rem); background: transparent; }
.flow--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.hero.flow { background: transparent; }
.band { background: transparent; }
:root[data-time="night"] { --flow-ink: var(--ink); }

/* ---------- hero: Bilby, whole, watching ---------- */
.hero { min-height: calc(100svh - 3.75rem); padding-block: 3rem; }
.hero__stage { position: absolute; z-index: 1; right: max(var(--margin), calc((100vw - var(--maxw)) / 2 + var(--margin))); top: 50%; width: min(66vh, 42vw); aspect-ratio: 1; transform: translateY(-50%); }
.critter { width: 100%; height: 100%; overflow: visible; }
.critter .coat { fill: var(--bilby); }
.critter .pose { transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out); transform-origin: 60px 64px; transform-box: view-box; }
.critter .pose:not(.is-on) { opacity: 0; transform: scaleX(.82); }
.critter .white { fill: #fbf8f6; }
.critter .pupil { fill: #1b1714; transition: transform 260ms var(--ease-out); }
.critter .lid { transform-box: fill-box; transform-origin: center; }
.critter .ear { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .critter .lid.is-blink { animation: blink2 220ms ease-in-out; }
  @keyframes blink2 { 50% { transform: scaleY(.08); } }
  .critter .ear.is-twitch { animation: twitch 520ms var(--ease-out); }
  @keyframes twitch { 30% { transform: rotate(-7deg); } 60% { transform: rotate(4deg); } }
  .hero__stage { animation: bob 6s var(--ease-soft) infinite alternate; }
  @keyframes bob { to { transform: translateY(calc(-50% - 8px)); } }
}
.hero__mail { left: auto; right: calc(max(var(--margin), calc((100vw - var(--maxw)) / 2 + var(--margin))) + min(66vh, 42vw) * .5); bottom: 10%; width: min(340px, 26vw); }
.hero__badge { position: absolute; z-index: 3; right: max(var(--margin), calc((100vw - var(--maxw)) / 2 + var(--margin))); top: 14%; display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: 14px; background: var(--white); font-size: var(--step-small); font-weight: 600; }
.hero__badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--st-working); }
@media (prefers-reduced-motion: no-preference) { .hero__badge i { animation: beat 2s ease-in-out infinite; } @keyframes beat { 50% { transform: scale(1.6); opacity: .5; } } }

/* ---------- seven checks: a pinned stage, the list scrolls ---------- */
.checks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.checks__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 3rem; }
.checks__head h2 { grid-column: 1 / span 7; font-size: var(--step-head); }
.checks__head p { grid-column: 8 / span 5; }
.checks__stage { grid-column: 1 / span 6; position: sticky; top: 6rem; aspect-ratio: 5 / 4; border-radius: 28px; background: var(--white); overflow: hidden; }
.checks__list { grid-column: 8 / span 5; display: grid; }
.check { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding-block: 1.5rem; opacity: .38; transition: opacity 500ms var(--ease-out); }
.check.is-on { opacity: 1; }
.check h3 { font-size: var(--step-head); letter-spacing: -0.045em; }
.check h3 small { display: block; margin-top: .6rem; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; }
.check p { margin-top: .9rem; max-width: 40ch; }
.check .plans { margin-top: .9rem; font-size: var(--step-small); color: var(--muted); }
.check .phone-visual { display: none; }
.vis { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; opacity: 0; visibility: hidden; transform: scale(.96) translateY(14px); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out), visibility 0s linear 500ms; }
.vis.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.vis__card { width: 100%; max-width: 440px; padding: 1.4rem 1.5rem; border-radius: 20px; background: var(--tint, var(--bg)); }
.vis__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vis__title { font-weight: 700; letter-spacing: -0.02em; }
.vis__note { font-size: var(--step-small); color: var(--muted); }
/* watch */
.v-cart { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.v-cart .btn { flex: 1; height: 46px; border-radius: 12px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.v-cart .badge { position: relative; min-width: 72px; height: 46px; border-radius: 12px; background: var(--white); display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .vis.is-on .v-cart .btn { animation: press 2.4s var(--ease-out) infinite; }
  @keyframes press { 0%, 40%, 100% { transform: none; } 45% { transform: scale(.94); } 55% { transform: none; } }
  .vis.is-on .v-cart .count::after { content: "0"; animation: tick 2.4s steps(1) infinite; }
  @keyframes tick { 0%, 54% { content: "0"; } 55%, 100% { content: "1"; } }
}
/* money */
.v-pixels { display: grid; gap: 8px; margin-top: 1rem; }
.v-pixels div { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-radius: 12px; background: var(--white); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .vis.is-on .v-pixels .state { animation: pop 2.4s var(--ease-out) infinite both; }
  .vis.is-on .v-pixels div:nth-child(2) .state { animation-delay: .35s; } .vis.is-on .v-pixels div:nth-child(3) .state { animation-delay: .7s; }
  @keyframes pop { 0% { opacity: 0; transform: scale(.7); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
}
/* speed */
.v-gauge { display: grid; place-items: center; margin-top: .5rem; }
.v-gauge svg { width: 100%; max-width: 300px; }
.v-gauge .needle { transform-origin: 150px 150px; transform: rotate(-80deg); }
@media (prefers-reduced-motion: no-preference) { .vis.is-on .v-gauge .needle { animation: sweep 3s var(--ease-out) infinite; } @keyframes sweep { 0% { transform: rotate(-80deg); } 45%, 80% { transform: rotate(-12deg); } 100% { transform: rotate(-80deg); } } }
/* change */
.v-change { position: relative; margin-top: 1rem; height: 150px; border-radius: 14px; overflow: hidden; }
.v-change > div { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--step-body); font-weight: 800; letter-spacing: -0.02em; }
.v-change .before { background: var(--white); }
.v-change .after { background: var(--deep-sand); clip-path: inset(0 0 0 50%); }
.v-change .wipe { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .vis.is-on .v-change .after { animation: wipe 3.2s var(--ease-in-out) infinite alternate; }
  .vis.is-on .v-change .wipe { animation: wipeline 3.2s var(--ease-in-out) infinite alternate; }
  @keyframes wipe { from { clip-path: inset(0 0 0 85%); } to { clip-path: inset(0 0 0 15%); } }
  @keyframes wipeline { from { left: 85%; } to { left: 15%; } }
}
/* rivals */
.v-tags { display: flex; gap: 10px; margin-top: 1rem; }
.v-tags div { flex: 1; padding: 1rem; border-radius: 14px; background: var(--white); }
.v-tags b { display: block; font-size: var(--step-lead); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.v-tags s { color: var(--muted); }
/* search */
.v-serp { display: grid; gap: 6px; margin-top: 1rem; }
.v-serp div { display: flex; gap: .8rem; align-items: center; padding: .6rem .8rem; border-radius: 10px; background: var(--white); font-size: 15px; }
.v-serp em { font-style: normal; font-weight: 800; min-width: 1.6em; font-variant-numeric: tabular-nums; }
.v-serp .you { background: var(--st-slow-bg); }
@media (prefers-reduced-motion: no-preference) { .vis.is-on .v-serp .you { animation: drop 3s var(--ease-in-out) infinite alternate; } @keyframes drop { from { transform: translateY(-84px); } to { transform: none; } } }
/* answer */
.v-chat { display: grid; gap: 8px; margin-top: 1rem; }
.v-chat div { padding: .75rem .9rem; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.v-chat .q { justify-self: end; background: var(--sky); }
.v-chat .a { background: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .vis.is-on .v-chat .a { animation: type 3.4s steps(40) infinite; clip-path: inset(0 100% 0 0); }
  @keyframes type { 0% { clip-path: inset(0 100% 0 0); } 60%, 100% { clip-path: inset(0 0 0 0); } }
}

/* ---------- the film: one night at a store, played ---------- */
.film__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 2.5rem; }
.film__head h2 { grid-column: 1 / span 7; font-size: var(--step-head); }
.film__head p { grid-column: 8 / span 5; }
.film { position: relative; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--white); }
.film__store { position: absolute; inset: 4% 4% 4% 4%; border-radius: 18px; overflow: hidden; background: #ffffff; color: #2a2420; transition: transform 900ms var(--ease-in-out), filter 600ms ease; }
.film__bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; background: #f4efea; font-size: 13px; color: #6c625a; }
.film__bar i { width: 10px; height: 10px; border-radius: 50%; background: #e8a49a; } .film__bar i:nth-child(2) { background: #efcf8f; } .film__bar i:nth-child(3) { background: #a8cfa9; }
.film__bar span { flex: 1; height: 26px; line-height: 26px; padding: 0 12px; border-radius: 8px; background: #fff; }
.film__bar time { font-weight: 700; color: #2a2420; font-variant-numeric: tabular-nums; }
.film__nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 28px; font-size: 14px; font-weight: 600; }
.film__nav b { font-size: 20px; letter-spacing: -0.02em; }
.film__nav span { display: flex; gap: 24px; color: #6c625a; }
.film__nav .cart { position: relative; color: #2a2420; }
.film__ring { position: absolute; left: -16px; top: -12px; width: 96px; height: 44px; overflow: visible; pointer-events: none; }
.film__ring ellipse { fill: none; stroke: #c8352b; stroke-width: 3; stroke-dasharray: 230; stroke-dashoffset: 230; transition: stroke-dashoffset 900ms var(--ease-out); }
.film__pages { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; }
.film__page { position: absolute; inset: 0; padding: 0 28px 28px; transition: opacity 600ms ease, transform 800ms var(--ease-out); }
.film__home { display: grid; grid-template-rows: 1.1fr 1fr; gap: 14px; }
.film__hero { display: flex; justify-content: space-between; align-items: center; padding: 0 6%; border-radius: 16px; background: #f8d9cd; overflow: hidden; }
.film__hero b { font-size: clamp(18px, 2.4vw, 34px); line-height: 1.02; letter-spacing: -0.035em; }
.film__hero small { display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 10px; background: #2a2420; color: #fff; font-weight: 700; font-size: 13px; }
.film__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.film__grid > div { position: relative; display: grid; place-items: center; border-radius: 14px; background: var(--c); }
.film__grid > div span { position: absolute; left: 12px; bottom: 10px; font-size: 12px; font-weight: 700; }
.film__product { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; align-items: center; opacity: 0; transform: translateX(6%); }
.film__product .pic { height: 100%; border-radius: 16px; background: #f8d9cd; display: grid; place-items: center; }
.film__product h4 { font-size: clamp(20px, 2.6vw, 38px); letter-spacing: -0.035em; line-height: 1; }
.film__product .price { margin-top: 8px; font-size: clamp(16px, 1.6vw, 22px); font-weight: 800; color: #0f5257; }
.film__product p { margin-top: 10px; font-size: 13px; color: #6c625a; max-width: 30ch; }
.film__add { position: relative; margin-top: 18px; height: 48px; border-radius: 12px; background: #2a2420; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; transition: transform 140ms var(--ease-out); }
.film__cursor { position: absolute; z-index: 5; left: var(--cx, 70%); top: var(--cy, 70%); width: 26px; height: 32px; transition: left 1.2s var(--ease-in-out), top 1.2s var(--ease-in-out); pointer-events: none; }
.film__cursor svg { width: 100%; height: 100%; }
.film__cursor::after { content: ""; position: absolute; left: -16px; top: -16px; width: 36px; height: 36px; border-radius: 50%; background: rgb(15 82 87 / .25); transform: scale(0); }
.film.is-click .film__cursor::after { animation: clicky 500ms var(--ease-out); }
@keyframes clicky { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.film__bilby { position: absolute; z-index: 4; left: calc(var(--cx, 70%) + 30px); top: calc(var(--cy, 70%) + 28px); display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; background: #fff; font-size: 12px; font-weight: 700; color: #2a2420; transition: left 1.2s var(--ease-in-out), top 1.2s var(--ease-in-out); }
.film__bilby img { width: 26px; height: 26px; padding: 3px; border-radius: 8px; background: #e2e9d6; }
.film__report { position: absolute; z-index: 6; right: 6%; bottom: -80%; width: min(46%, 420px); padding: 18px 20px; border-radius: 18px; background: #fff; color: #2a2420; transition: bottom 900ms var(--ease-out); box-shadow: 0 24px 60px -18px rgb(60 40 25 / .35); } /* taste-skill-ignore: a card that floats over the film */
.film__report .vis__row { margin-bottom: 12px; }
/* The report card is deliberately white at both times of day — it is a piece of paper floating over
   the film. Its secondary line took --muted, which at night is #bdb2a8 and reads 2.1:1 on that
   white: unreadable, and the gate said so. A card that keeps its own ground keeps its own ink. */
.film__report .vis__note, :root[data-time="night"] .film__report .vis__note { color: #6c625a; }
.film__report .score { display: flex; align-items: center; gap: 14px; }
.film__report .score svg { width: 64px; height: 64px; }
.film__report .score circle:last-child { stroke-dasharray: 201; stroke-dashoffset: 201; transition: stroke-dashoffset 1.4s var(--ease-out); }
.film__report li { display: flex; justify-content: space-between; gap: 1rem; padding: 9px 11px; margin-top: 6px; border-radius: 10px; background: #f7f3ef; font-size: 13.5px; font-weight: 600; }
.film__phone { position: absolute; z-index: 7; left: 50%; top: -60%; width: min(44%, 380px); transform: translateX(-50%); padding: 16px 18px; border-radius: 22px; background: #fff; color: #2a2420; transition: top 900ms var(--ease-out); box-shadow: 0 30px 70px -20px rgb(40 25 15 / .45); } /* taste-skill-ignore: a notification that floats */
.film__phone .mailcard__top { font-size: 13px; }
.film__phone p { margin-top: 8px; font-weight: 700; font-size: 16px; line-height: 1.25; }
.film__phone small { display: block; margin-top: 6px; font-size: 13px; color: #6c625a; }
/* steps */
.film[data-step="1"] .film__home, .film[data-step="2"] .film__home, .film[data-step="3"] .film__home { opacity: 0; transform: translateX(-6%); }
.film[data-step="1"] .film__product, .film[data-step="2"] .film__product, .film[data-step="3"] .film__product { opacity: 1; transform: none; }
.film[data-step="2"] .film__ring ellipse, .film[data-step="3"] .film__ring ellipse { stroke-dashoffset: 0; }
.film[data-step="2"] .film__report, .film[data-step="3"] .film__report { bottom: 6%; }
.film[data-step="2"] .film__report .score circle:last-child, .film[data-step="3"] .film__report .score circle:last-child { stroke-dashoffset: 70; }
.film[data-step="3"] .film__store { filter: brightness(.86) saturate(.9); transform: scale(.97); }
.film[data-step="3"] .film__phone { top: 8%; }
.film__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.film__steps button { display: grid; gap: .3rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--radius); background: var(--white); text-align: left; transition: background-color var(--t-ui) ease; }
.film__steps button b { font-size: var(--step-lead); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.film__steps button span { font-size: var(--step-small); color: var(--muted); }
.film__steps button i { display: block; height: 4px; margin-top: .6rem; border-radius: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.film__steps button i::before { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--accent); }
.film__steps button[aria-pressed="true"] { background: var(--sand); }

/* ---------- the globe ---------- */
.globe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.globe__words { grid-column: 1 / span 5; }
.globe__words h2 { font-size: var(--step-head); }
.globe__words > p { margin-top: 1.25rem; }
.globe__now { display: grid; gap: 8px; margin-top: 2rem; }
.globe__now div { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--white); }
.globe__now i { grid-row: 1 / span 2; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.globe__now b { font-weight: 700; letter-spacing: -0.01em; }
.globe__now span { font-size: var(--step-small); color: var(--muted); }
.globe__ball { grid-column: 7 / span 6; position: relative; aspect-ratio: 1; cursor: grab; touch-action: pan-y; }
.globe__ball:active { cursor: grabbing; }
.globe__ball::before { content: ""; position: absolute; inset: -3%; border-radius: 50%; background: var(--white); opacity: .55; }
.globe__ball canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe__ball .fallback { position: absolute; inset: 6%; border-radius: 50%; object-fit: cover; }
.globe__hint { position: absolute; left: 50%; bottom: -1.75rem; transform: translateX(-50%); font-size: var(--step-small); color: var(--muted); white-space: nowrap; }

@media (max-width: 900px) {
  .hero__stage { position: relative; right: auto; top: auto; transform: none; width: min(78vw, 420px); margin: 2.5rem auto 0; animation: none !important; }
  .hero__mail { position: relative; right: auto; bottom: auto; width: auto; margin: -2rem var(--margin) 0; }
  .hero__badge { position: relative; right: auto; top: auto; margin: 1.5rem var(--margin) 0; width: max-content; }
  .checks__head h2, .checks__head p, .film__head h2, .film__head p { grid-column: 1 / -1; }
  .checks__head p, .film__head p { margin-top: 1rem; }
  .checks__stage { display: none; }
  .checks__list { grid-column: 1 / -1; gap: 6rem; }
  .check { min-height: 0; opacity: 1; padding: 0; }
  .check .phone-visual { display: block; position: relative; margin-top: 1.25rem; aspect-ratio: 5 / 4; border-radius: 22px; background: var(--white); overflow: hidden; }
  .check .phone-visual .vis { opacity: 1; visibility: visible; transform: none; }
  .film { aspect-ratio: 3 / 4; }
  .film__nav span em { display: none; }
  .film__report { width: 84%; right: 8%; }
  .film__phone { width: 84%; }
  .film__product { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .film__steps { grid-template-columns: 1fr 1fr; }
  .globe__words, .globe__ball { grid-column: 1 / -1; }
  .globe__ball { margin-top: 2.5rem; }
}
/* the closing chapter is teal: words turn light, the dialog keeps its own colours */
:root[data-tone="dark"] { --ink: #ffffff; --muted: #d4e6e4; }
:root[data-tone="dark"] .nav__mark img { filter: invert(1); }
.dialog { --ink: #2a2420; --white: #ffffff; --bg: #fbf8f6; color: #2a2420; }
:root { --accent-field: #0f5257; }
:root[data-time="night"] { --accent-field: #23756f; }
.flow[data-flow="accent"] .start__words { color: var(--ink); }
.foot { background: transparent; }
.st-top { background: transparent; }
.st-top .globe__ball { margin-top: 2rem; }
.flow[data-flow="sky"] .check__facts div { background: var(--white); }
.flow[data-flow="sky"] .check__facts span { color: var(--muted); }
.v-cart .count::after { content: "1"; }

.film__cursor, .film__bilby { transition: left 1.2s var(--ease-in-out), top 1.2s var(--ease-in-out), opacity 400ms ease; }
.film.is-resting .film__cursor, .film.is-resting .film__bilby { opacity: 0; }
.film__cursor svg { display: block; }