/* TOLLkit v2 — The product performs (seed 1115049211). Clash Grotesk, navy on white. */

/* block: text never draws in a stand-in face and then reflows. The files are cached for a year, so after the first
   page they are ready before the page draws. */
@font-face { font-family: 'Clash Grotesk'; src: url('assets/fonts/clash-grotesk-400.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Clash Grotesk'; src: url('assets/fonts/clash-grotesk-500.woff2') format('woff2'); font-weight: 500; font-display: block; }

:root {
  /* palette: navy on white by day; by night the near-blacks of the first tollkit.dev (#0a0a0a page, #151515 panels,
     #222 bands, #f5f5f5 type, #a6a6a6 muted). light-dark() picks a side from color-scheme: the system by default,
     or whichever the reader chose with the theme button (html[data-theme]). */
  color-scheme: light dark;
  --bg: light-dark(oklch(100% 0 none), oklch(13.4% 0 none));
  --surface: light-dark(oklch(96.7% 0.003 106), oklch(18.6% 0 none));
  --ink: light-dark(oklch(29.7% 0.064 268), oklch(97% 0 none));
  --muted: light-dark(oklch(51.4% 0.042 273), oklch(72.5% 0 none));
  --accent: oklch(75.4% 0.165 63);
  --accent-strong: color-mix(in oklch, var(--accent), white 18%);
  --accent-ink: light-dark(var(--ink), oklch(13.4% 0 none));
  --field-1: light-dark(oklch(12.7% 0.009 254), oklch(22.6% 0 none));
  --field-1-ink: oklch(100% 0 none);
  --field-2: light-dark(oklch(91% 0.007 89), oklch(18.6% 0 none));
  --field-2-ink: var(--ink);
  --on-dark-muted: oklch(74.8% 0.016 270);
  --paper: oklch(100% 0 none); /* the wallet's receipts and switch knobs stay white at night */
  --control: light-dark(oklch(85.9% 0.008 279), oklch(36% 0 none)); /* an off switch track */

  /* the wallet's own interface colours, used only inside [data-ui] */
  --ui-bg: oklch(17.7% 0.009 264);
  --ui-panel: oklch(21.8% 0.015 267);
  --ui-line: oklch(29.3% 0.021 266);
  --ui-raised: oklch(28.5% 0.021 266);
  --ui-text: oklch(93.7% 0.008 271);
  --ui-muted: oklch(70.9% 0.026 268);
  --ui-blue: oklch(65.9% 0.182 260);
  --ui-green: oklch(76.3% 0.153 161);
  --ui-red: oklch(71.2% 0.181 23);
  --ui-amber: oklch(82% 0.142 79);
  --ui-ask: color-mix(in oklch, var(--ui-blue) 20%, var(--ui-bg));
  --ui-chip: color-mix(in oklch, var(--ui-blue) 32%, var(--ui-bg));
  --ui-chip-line: color-mix(in oklch, var(--ui-blue) 50%, var(--ui-bg));
  --ui-inner-radius: 10px;
  --ui-pad: 18px;

  /* paper documents inside [data-ui] */
  --doc-ink: oklch(25.4% 0.034 267);
  --doc-muted: oklch(55.3% 0.031 269);
  --doc-line: oklch(91% 0.008 91);
  --doc-warn: oklch(51.3% 0.169 27);
  --doc-pos: oklch(55.5% 0.12 160);

  /* type: Clash Grotesk, five steps, all rem + vw */
  --font: 'Clash Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.2rem + 3.2vw, 4rem);
  --step-display: clamp(4rem, 1rem + 7.6vw, 8.25rem);

  /* space */
  --page-gutter: clamp(1.25rem, 0.95rem + 1.2vw, 2rem);
  --content: 90rem;
  --gutter: clamp(0.75rem, 0.3rem + 1.15vw, 1.5rem);
  /* space between sections (74px on a phone, ~100px at 1440; it was 80 → 136) and between blocks inside one (32px → 56px).
     74px is the floor: any closer and a short last line (a button, a price) reads as a label for the heading below it. */
  --section: clamp(4.625rem, 3.2rem + 3.5vw, 6.5rem);
  --block-gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  /* tracking for large type. Clash Grotesk's tightest pairs (St, iv, Li, ki, AI) sit about 0.04em apart, so at -0.03 to
     -0.04em they nearly met and left a 1px sliver of white; -0.015em keeps them clearly apart while still tight. */
  --track-tight: -0.015em;
  --radius: 4px;
  --header: 4.5rem;
  --z-header: 10;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 500ms;
  /* the FAQ: opening is the deliberate part, closing is the response, so it is quicker; main.js reads all three */
  --faq-open: 280ms;
  --faq-close: 200ms;
  --faq-ease: var(--ease-out);

  interpolate-size: allow-keywords;
  scrollbar-gutter: stable;
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-padding-block-start: calc(var(--header) + 1rem); overscroll-behavior-y: none; }
html[data-theme='light'] { color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }
@media (any-pointer: coarse) { html { overscroll-behavior-y: auto; } }
body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.4; overflow-x: clip; }
/* First arrival only: nothing is drawn until Clash Grotesk has loaded (the head script removes fonts-wait). Between
   TOLLkit pages it is never set: the fonts are already cached, and hiding the new page would only add blank time. */
.fonts-wait body { visibility: hidden; }
h1, h2, h3, p, figure, ul, dl, dd, pre { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
/* <picture> only offers the browser smaller formats; the <img> inside keeps its place in every layout */
picture { display: contents; }
button, input, select { font: inherit; color: inherit; }
input, select { font-size: max(16px, 1em); }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: start; user-select: none; -webkit-user-select: none; }
button, a, summary, [role='button'] { touch-action: manipulation; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: max(2px, 0.08em) solid currentColor; outline-offset: 0.25em; }
/* the router moves focus to the content after a page change; that focus is for screen readers, not a ring */
#main:focus { outline: none; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.nums { font-variant-numeric: tabular-nums; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
.head { font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); }
.lead { font-size: var(--step-lead); line-height: 1.3; }

/* ---------- content grid with breakouts ---------- */
.content-grid {
  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--page-gutter), 1fr)
    [content-start] min(100% - var(--page-gutter) * 2, var(--content)) [content-end]
    minmax(var(--page-gutter), 1fr) [full-width-end];
}
:is(.content-grid, .full-width) > * { grid-column: content; }
:is(.content-grid, .full-width) > .full-width { grid-column: full-width; display: grid; grid-template-columns: inherit; }
:is(.content-grid, .full-width) > .bleed { grid-column: full-width; }

/* ---------- controls ---------- */
.button {
  --btn-h: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: var(--btn-h); padding-inline: 1.4rem;
  /* Clash Grotesk sits high in its line box (tall ascent, short descent), so plain centring leaves the capitals ~0.1em
     above the middle. Browsers without text-box get a small top padding instead. */
  padding-block-start: 0.2em;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: var(--radius);
  transition: background-color var(--t-hover) ease;
}
/* Where text-box works, the label's box is trimmed to exactly cap height and baseline, and equal padding above and
   below makes up the button's height, so the capitals sit on the centre. (text-box only trims block boxes, which is
   why the button becomes an inline-block here rather than a flex box; align-content keeps the label centred when a
   row stretches the button taller, as beside a multi-line code box.) */
@supports (text-box: trim-both cap alphabetic) {
  .button { display: inline-block; align-content: center; text-align: center; min-block-size: 0; padding-block: calc((var(--btn-h) - 1cap) / 2); text-box: trim-both cap alphabetic; }
  .menu-btn { padding-block-start: 0; text-box: trim-both cap alphabetic; }
}
.button:focus-visible { outline-color: var(--accent); }
.button:active { transform: scale(0.97); }
.button--quiet { background: var(--surface); color: var(--ink); }
/* a quiet button sits beside text that must not move (the Copy label, a code box): it answers a press with a deeper
   tint instead of the scale, so nothing in it shifts by a pixel */
.button--quiet:active { transform: none; background: color-mix(in oklch, var(--surface), var(--ink) 10%); }
.button--quiet:focus-visible { outline-color: var(--ink); }
/* the header's button: 36px with a mouse, so it sits lighter beside the nav links; 40px on touch screens to match Menu */
.button--small { --btn-h: 2.25rem; padding-inline: 0.95rem; font-size: var(--step-small); }
@media (any-pointer: coarse) { .button--small { --btn-h: 2.5rem; } }
/* the Copy button's label is swapped by script; the span keeps the button's own box untouched while its text fades,
   and the button is wide enough for "Copied" from the start so the row beside it never shifts */
.button .label { display: inline-block; }
.button[data-copy] { min-inline-size: 5.5em; }
/* the label fades through a filter, which puts it on its own compositor layer while it animates; keeping that layer
   from the start means the text is rasterised the same way at rest and mid-fade, so it never nudges by a pixel */
.button[data-copy] .label { will-change: opacity, filter; }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: color var(--t-hover) ease; }
.link-arrow { text-decoration: none; font-weight: 500; }
.link-arrow span { display: inline-block; }
/* every link gives press feedback, including links inside running text and credits; buttons and the logo have their own */
a[href]:not(.button, .mark):active { opacity: 0.7; }
/* text fields: one look for every form; :user-invalid only after the visitor has typed or submitted */
:is(input[type='text'], input[type='url'], input[type='email'], input[type='search']):user-invalid { border-color: var(--doc-warn); background: color-mix(in oklch, var(--doc-warn) 6%, var(--bg)); }
.field-error { display: none; font-size: var(--step-small); color: var(--doc-warn); transition: opacity 160ms var(--ease-out); }
form:has(:user-invalid) .field-error { display: block; }
/* the error arrives rather than appears: a fade (and, with motion allowed, a 2px settle) from @starting-style */
@starting-style { form:has(:user-invalid) .field-error { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .field-error { transition: opacity 160ms var(--ease-out), translate 160ms var(--ease-out); }
  @starting-style { form:has(:user-invalid) .field-error { translate: 0 -2px; } }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-strong); }
  .button--quiet:hover { background: var(--field-2); }
  .theme-btn:hover { background: var(--field-2); }
  .link:hover { text-decoration-color: currentColor; }
  .link-arrow:hover span { transform: translateX(4px); }
  .link-plain:hover { color: var(--muted); }
}
@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
  .theme-btn { transition: background-color var(--t-hover) ease; }
  .link-arrow span { transition: transform var(--t-hover) var(--ease-out); }
}

/* ---------- skip link ---------- */
.skip { position: absolute; inset-inline-start: var(--page-gutter); inset-block-start: -100px; z-index: calc(var(--z-header) + 1); padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: var(--radius); text-decoration: none; }
.skip:focus { inset-block-start: 12px; }

/* ---------- top bar ---------- */
.top { position: sticky; inset-block-start: 0; z-index: var(--z-header); background: var(--bg); }
.top-inner { block-size: var(--header); display: flex; align-items: center; gap: 2rem; }
/* the logo: the mark plus the wordmark, set in Big Shoulders Display (900 for TOLL, 600 for kit) and outlined to a path,
   so it needs no extra font download and the page keeps one typeface. The face is condensed, so the word runs a little
   taller than the old wide one; the mark stays 1.15 × the word's cap height. */
.mark { display: inline-flex; align-items: center; gap: 0.3em; min-block-size: 44px; font-size: var(--step-lead); color: var(--ink); text-decoration: none; }
.mark:active { opacity: 0.75; }
/* The wordmark's frame has a little room around the letters, and neither SVG clips its edges: on iPhone an SVG placed
   on a half pixel lost its bottom row of pixels to the frame's edge. */
.mark-icon { flex: none; inline-size: auto; block-size: 1.3em; aspect-ratio: 773 / 859; fill: currentColor; overflow: visible; }
.mark-word { flex: none; inline-size: auto; block-size: 1.185em; aspect-ratio: 5229 / 1720; fill: currentColor; overflow: visible; }
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: clip; }
.top-nav { margin-inline-start: auto; }
.top-links { display: flex; gap: 1.5rem; font-size: var(--step-small); }
.top-links a { color: var(--muted); }
.top-links a:is([aria-current='true'], [aria-current='page']) { color: var(--ink); text-decoration-color: currentColor; }
.menu-btn { display: none; min-block-size: 2.5rem; padding-inline: 0.9rem; padding-block-start: 0.2em; border-radius: var(--radius); background: var(--surface); font-size: var(--step-small); font-weight: 500; }
.menu-btn:active { transform: scale(0.97); }
.menu-btn:focus-visible { outline-color: var(--ink); }
/* theme button: a small round quiet button at the header's end. The icon shows the current setting; the label says what a press does. */
.theme-btn { flex: none; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--surface); color: var(--ink); }
.theme-btn:active { background: color-mix(in oklch, var(--surface), var(--ink) 10%); }
.theme-btn:focus-visible { outline-color: var(--ink); }
.theme-btn svg { inline-size: 1.125rem; block-size: 1.125rem; display: none; }
html:not([data-theme]) .theme-btn .theme-ico--system, html[data-theme='light'] .theme-btn .theme-ico--light, html[data-theme='dark'] .theme-btn .theme-ico--dark { display: block; }
/* the phone menu: a native popover under the bar; it floats over the page, so it carries a drop (taste-skill-ignore) */
.menu { position: fixed; inset: calc(var(--header) + 8px) var(--page-gutter) auto auto; margin: 0; inline-size: min(20rem, 100% - 2 * var(--page-gutter)); padding: 8px; border: 0; border-radius: 8px; background: var(--bg); color: var(--ink); box-shadow: 0 12px 40px color-mix(in oklch, var(--ink) 22%, transparent); opacity: 0; transition: opacity 120ms var(--ease-out), display 120ms allow-discrete, overlay 120ms allow-discrete; } /* taste-skill-ignore: a floating menu */
/* opens in 180ms, closes faster (120ms): the menu answers the tap, then gets out of the way */
.menu:popover-open { opacity: 1; transition-duration: 180ms; }
@starting-style { .menu:popover-open { opacity: 0; } }
.menu ul { display: grid; }
.menu a { display: flex; align-items: center; min-block-size: 48px; padding-inline: 12px; border-radius: 4px; text-decoration: none; font-size: var(--step-lead); }
.menu a[aria-current='page'] { background: var(--surface); }
.menu a:active { background: var(--field-2); }
@media (prefers-reduced-motion: no-preference) {
  /* it grows out of the Menu button above its top-right corner, not out of its own middle */
  .menu { transform-origin: top right; translate: 0 -0.25rem; scale: 0.97; transition: opacity 120ms var(--ease-out), translate 120ms var(--ease-out), scale 120ms var(--ease-out), display 120ms allow-discrete, overlay 120ms allow-discrete; }
  .menu:popover-open { translate: 0 0; scale: 1; transition-duration: 180ms; }
  @starting-style { .menu:popover-open { translate: 0 -0.25rem; scale: 0.97; } }
  .menu-btn { transition: transform var(--t-press) var(--ease-out); }
}

/* ---------- hero: copy left, the composer right ---------- */
.hero { padding-block-start: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.hero-copy { grid-column: 1 / span 5; }
.hero-title { font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); font-weight: 500; }
.hero-sub { margin-block-start: 1.5rem; max-inline-size: 42ch; }
.hero-actions { margin-block-start: 1.75rem; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.hero-note { margin-block-start: 1.25rem; max-inline-size: 42ch; }
.hero-stage { grid-column: 6 / span 7; }
.stage-note { margin-block-start: 0.75rem; }

/* the wallet fragment (radii nest: outer = inner + padding) */
.app { background: var(--ui-bg); color: var(--ui-text); border-radius: calc(var(--ui-inner-radius) + var(--ui-pad)); padding: var(--ui-pad); display: grid; gap: 16px; font-size: var(--step-small); }
.app-bar { display: flex; justify-content: space-between; align-items: center; }
.app-logo { font-weight: 500; font-size: var(--step-body); }
.app-pill { display: inline-flex; align-items: center; gap: 0.5em; padding: 6px 12px; background: var(--ui-panel); border-radius: 999px; color: var(--ui-muted); }
.dot { flex: none; display: inline-block; inline-size: 0.55em; block-size: 0.55em; border-radius: 50%; }
.dot--ok { background: var(--ui-green); }
.chat { display: grid; gap: 16px; align-content: start; }
.ask-who { color: var(--ui-muted); margin-block-end: 6px; }
.ask { background: var(--ui-ask); border-radius: var(--ui-inner-radius) var(--ui-inner-radius) 4px var(--ui-inner-radius); padding: 14px 16px; justify-self: end; max-inline-size: 100%; }
.ask-text { font-size: var(--step-lead); line-height: 1.55; }
.ask select {
  appearance: none; -webkit-appearance: none; cursor: pointer; font-size: 1em;
  background: var(--ui-chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e8eaf0' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 0.45em center;
  color: var(--ui-text); border: 1px solid var(--ui-chip-line); border-radius: 8px; padding-block: 0.05em; padding-inline: 0.35em 1.3em; line-height: 1.3; /* inside [data-ui] */
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.ask select:active { background-color: color-mix(in oklch, var(--ui-chip), white 8%); }
/* The chips wrap onto several lines and sit close together, so the focus ring is drawn on the chip's own edge rather than
   outside it, where the chip on the next line would cover it. Focus must not change a chip's position or stacking: when
   you tap from one open picker straight to another, restyling the chip being opened made the iPhone close its picker. */
.ask select:focus-visible { outline-width: 2px; outline-offset: -1px; }
[data-ui] .bot { background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: var(--ui-inner-radius); padding: 16px; }
.bot-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bot-name { font-size: var(--step-body); font-weight: 500; }
.tag { flex: none; padding: 3px 10px; border-radius: 6px; background: var(--ui-raised); color: var(--ui-muted); font-weight: 500; white-space: nowrap; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.tag.is-on { background: color-mix(in oklch, var(--ui-green) 16%, transparent); color: var(--ui-green); }
.tag.is-wait { background: color-mix(in oklch, var(--ui-amber) 16%, transparent); color: var(--ui-amber); }
.tag.is-block { background: color-mix(in oklch, var(--ui-red) 16%, transparent); color: var(--ui-red); }
.bot-rows { margin-block-start: 12px; display: grid; gap: 8px; }
.bot-rows div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 12px; }
.bot-rows dt { color: var(--ui-muted); }
.bot-rows dd.is-block { color: var(--ui-red); }
.bot-rows dd.is-wait { color: var(--ui-amber); }
.bot-actions { margin-block-start: 16px; display: flex; gap: 8px; }
.app-btn { padding: 9px 16px; border-radius: 8px; background: var(--ui-raised); color: var(--ui-text); font-weight: 500; transition: background-color var(--t-hover) ease; }
.app-btn:not([disabled]):active { transform: scale(0.97); }
.app-btn[disabled] { color: var(--ui-muted); cursor: default; }
.app-btn--go { background: var(--ui-blue); color: var(--ui-bg); }
.app-btn--go:focus-visible { outline-color: var(--ui-blue); }
.app-btn--go[aria-pressed='true'] { background: var(--ui-raised); color: var(--ui-text); }
.app-btn--go[disabled] { background: var(--ui-raised); color: var(--ui-muted); }
.reply-foot { margin-block-start: 10px; color: var(--ui-muted); }
.caps { background: var(--ui-panel); border-radius: var(--ui-inner-radius); padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: baseline; }
.caps-title { font-weight: 500; font-size: var(--step-body); }
.caps dl { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; }
.caps dl div { display: grid; gap: 2px; }
.caps dt { color: var(--ui-muted); }
.caps dd { font-variant-numeric: tabular-nums; font-weight: 500; }
.caps-note { color: var(--ui-muted); }
@media (hover: hover) and (pointer: fine) {
  .ask select:hover { border-color: var(--ui-blue); }
  .app-btn--go:not([disabled]):not([aria-pressed='true']):hover { background: color-mix(in oklch, var(--ui-blue), white 15%); }
}
@media (prefers-reduced-motion: no-preference) {
  .app-btn { transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
}

/* ---------- the pit ---------- */
.pit { margin-block-start: var(--section); background: var(--field-1); color: var(--field-1-ink); padding-block-end: var(--section); }
.pit-media { block-size: 70svh; overflow: clip; }
.pit-img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.08); }
.pit-copy { margin-block-start: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1rem; align-items: start; }
.pit-title { grid-column: 1 / span 5; grid-row: 1 / span 2; font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); }
.statement { grid-column: 7 / span 6; font-size: var(--step-lead); line-height: 1.35; max-inline-size: 36ch; }
.pit-copy .small { grid-column: 7 / span 6; }
.pit .muted { color: var(--on-dark-muted); }

/* ---------- outputs: index + live sheet ---------- */
.outputs { padding-block: var(--section); }
.outputs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.outputs-names { grid-column: 1 / span 5; display: grid; justify-items: start; gap: 0.15em; }
.outputs-lead { font-size: var(--step-body); margin-block-end: 1.5rem; max-inline-size: 30ch; }
.out-name { font-size: var(--step-head); line-height: 1.1; letter-spacing: var(--track-tight); color: var(--muted); transition: color var(--t-hover) ease; }
.out-name.is-on { color: var(--ink); }
.out-name:active { color: var(--ink); opacity: 0.75; }
.outputs-stage { grid-column: 7 / span 6; position: relative; block-size: 72svh; min-block-size: 600px; background: var(--surface); overflow: clip; border-radius: var(--radius); }
.sheet { position: absolute; inset-block-start: 72px; inset-inline-start: clamp(1.25rem, 0.2rem + 3vw, 4rem); inline-size: min(560px, 100% - 40px); min-block-size: 100%; background: var(--paper); color: var(--doc-ink); border: 1px solid var(--doc-line); border-radius: 6px; padding: 32px; font-size: var(--step-small); } /* [data-ui] root */
.sheet--narrow { inline-size: min(440px, 100% - 40px); }
.sheet[hidden] { display: none; }
.sheet.is-entering { transition: opacity 200ms var(--ease-out); }
@starting-style { .sheet.is-entering:not([hidden]) { opacity: 0; } }
.sheet-head { display: flex; justify-content: space-between; color: var(--doc-muted); }
.sheet-title { margin-block-start: 18px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; }
.sheet-chip { display: inline-block; margin-block-start: 10px; padding: 3px 10px; border-radius: 6px; font-weight: 500; }
.sheet-chip--warn { background: color-mix(in oklch, var(--doc-warn) 10%, var(--paper)); color: var(--doc-warn); }
.sheet-body { margin-block-start: 16px; font-size: var(--step-body); line-height: 1.45; }
.sheet-body--warn { color: var(--doc-warn); font-weight: 500; }
.sheet-list { margin-block-start: 8px; padding-inline-start: 1.1em; list-style: disc; font-size: var(--step-body); display: grid; gap: 6px; }
.sheet-rows { margin-block-start: 22px; display: grid; }
[data-ui] .sheet-rows div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-block-start: 1px solid var(--doc-line); }
.sheet-rows dt { color: var(--doc-muted); }
.sheet-rows dd { font-variant-numeric: tabular-nums; text-align: end; }
.sheet-foot { margin-block-start: 18px; padding-block-start: 14px; border-block-start: 2px solid var(--doc-ink); display: flex; justify-content: space-between; font-size: var(--step-body); font-weight: 500; font-variant-numeric: tabular-nums; }
.pos { color: var(--doc-pos); }
@media (hover: hover) and (pointer: fine) { .out-name:hover { color: var(--ink); } }

/* ---------- limits: sentences with switches ---------- */
.limits { padding-block-start: var(--section); }
.limits-top { padding-block-end: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.25rem; align-items: end; }
.limits-top .head { grid-column: 1 / span 6; }
.limits-top .lead { grid-column: 7 / span 6; max-inline-size: 40ch; }
.band { min-block-size: 15svh; align-items: center; padding-block: 24px; color: var(--muted); transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.band > .band-text { grid-row: 1; padding-inline-end: calc(var(--step-head) * 2 + 1.5rem); }
.band > .switch { grid-row: 1; justify-self: end; font-size: var(--step-head); }
.band-sentence { font-size: var(--step-head); line-height: 1; letter-spacing: var(--track-tight); }
.band-result { margin-block-start: 0.6rem; font-size: var(--step-body); max-inline-size: 60ch; }
.band.is-on { color: var(--field-1-ink); }
.band--a.is-on { background: var(--field-1); }
.band--b.is-on { background: var(--ink); }
.band--c.is-on { background: var(--field-2); color: var(--field-2-ink); }
.band--d.is-on { background: var(--surface); color: var(--ink); }
.band--e.is-on { background: var(--ink); }
.switch { flex: none; position: relative; inline-size: 2em; block-size: 1.1em; border-radius: 999px; background: var(--control); transition: background-color var(--t-ui) ease; }
.switch span { position: absolute; inset-block-start: 0.1em; inset-inline-start: 0.1em; inline-size: 0.9em; block-size: 0.9em; border-radius: 50%; background: var(--paper); transform-origin: left center; }
.switch[aria-checked='true'] { background: var(--ui-green); }
.switch[aria-checked='true'] span { transform: translateX(0.9em); }
.switch[data-locked] { cursor: not-allowed; }
/* pressing stretches the knob toward the free side of the track (a scale, so it costs no layout): rightward when
   off; when on it also moves back by the extra width, so its right edge stays put */
.switch:not([data-locked]):active span { transform: scaleX(1.1667); }
.switch[aria-checked='true']:not([data-locked]):active span { transform: translateX(0.75em) scaleX(1.1667); }
.switch:focus-visible { outline-color: var(--ink); }
.band.is-on .switch:focus-visible { outline-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  /* the knob travels across the track, so it eases in and out; the press stretch is quick and eases out */
  .switch span { transition: transform var(--t-ui) var(--ease-in-out); }
  .switch:not([data-locked]):active span { transition: transform var(--t-press) var(--ease-out); }
}

/* ---------- how it works: pinned fragment ---------- */
.how { padding-block: var(--section) calc(var(--section) / 2); }
.how-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.how-steps { grid-column: 1 / span 5; }
.how-title { margin-block-end: 0; }
.step { min-block-size: 58svh; display: flex; flex-direction: column; justify-content: center; color: var(--muted); transition: color var(--t-ui) ease; }
.step:first-of-type { justify-content: flex-start; min-block-size: 50svh; padding-block-start: 2.5rem; }
.step.is-on { color: var(--ink); }
.step-title { font-size: var(--step-head); line-height: 1; letter-spacing: var(--track-tight); }
.step p { margin-block-start: 1rem; max-inline-size: 40ch; }
.step-pic { display: none; }
/* the wallet's own screens: always whole, never enlarged past their real size, corners like the app */
.screen { aspect-ratio: 400 / 820; object-fit: cover; object-position: left top; background: var(--ui-bg); border-radius: 14px; }
/* two captures include the browser's scrollbar down their right edge; trim those 16px */
.screen--trim { aspect-ratio: 384 / 820; }
.how-stage { grid-column: 7 / span 6; position: sticky; inset-block-start: calc(var(--header) + 24px); block-size: min(100svh - var(--header) - 48px, 920px); align-self: start; padding: clamp(24px, 3vw, 48px); background: var(--field-2); border-radius: var(--radius); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
/* swapping phone screens: a short crossfade, with a little blur so the two screens read as one changing, not two stacked */
.how-stage img { grid-area: 1 / 1; block-size: min(100%, 820px); inline-size: auto; max-inline-size: 100%; opacity: 0; filter: blur(3px); transition: opacity 280ms ease, filter 280ms ease; }
.how-stage img.is-on { opacity: 1; filter: none; }

/* ---------- tools: two-ended rows ---------- */
.tools { padding-block: var(--section); }
.tools-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.tools-col { grid-column: 1 / span 8; }
.tools-col > :is(.tools-title, p, .connect) { max-inline-size: 560px; }
.tools-title { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; }
.tools-col > p:not(.tools-more) { margin-block-start: 1rem; }
.connect { margin-block-start: 1.5rem; display: flex; }
.connect-code { flex: 1; display: flex; align-items: center; padding-inline: 1rem; background: var(--surface); border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); overflow-x: auto; }
.connect-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--step-small); }
.connect .button { border-radius: 0; border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.tool-groups { columns: 2; column-gap: calc(var(--gutter) * 3); margin-block-start: 8px; }
.tool-group { break-inside: avoid; padding-block-start: 40px; }
.group { color: var(--muted); }
.rows li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5em; align-items: center; min-block-size: 36px; }
.rows .dot { inline-size: 1cap; block-size: 1cap; }
.rows .val { font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.dot--a { background: var(--ink); }
.dot--b { background: var(--field-1); }
.dot--c { background: light-dark(oklch(82.4% 0.014 89), oklch(42% 0 none)); }
.dot--d { background: var(--accent); }
.tools-more { margin-block-start: 40px; }
.ticker { grid-column: 9 / span 4; position: sticky; inset-block-start: calc(var(--header) + 24px); }
/* the photo's white ground multiplies into its own paper tile, so at night it reads as a print lying on the page */
.ticker picture { display: block; isolation: isolate; background: var(--paper); }
.ticker img { mix-blend-mode: multiply; max-block-size: 70svh; inline-size: auto; margin-inline: auto; }
.ticker figcaption { margin-block-start: 1rem; font-size: var(--step-small); color: var(--muted); max-inline-size: 36ch; }
@media (hover: hover) and (pointer: fine) { .rows li:hover { transform: translateX(4px); } }
@media (prefers-reduced-motion: no-preference) { .rows li { transition: transform var(--t-hover) var(--ease-out); } }

/* ---------- fees: names, one live figure ---------- */
.fees { padding-block: var(--section); background: var(--surface); }
.fees-title { font-size: var(--step-lead); font-weight: 500; margin-block-end: 48px; }
.fees-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.fee-names { grid-column: 1 / span 6; display: grid; justify-items: start; }
.fee-name { font-size: var(--step-head); line-height: 1.1; letter-spacing: var(--track-tight); color: var(--muted); display: flex; align-items: center; gap: 0.25em; transition: color var(--t-hover) ease; }
.fee-name::before { content: ''; flex: none; inline-size: 0.3em; block-size: 0.3em; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity var(--t-hover) ease; }
.fee-name.is-on { color: var(--ink); }
.fee-name.is-on::before { opacity: 1; }
.fee-name:active { opacity: 0.75; }
.fee-stage { grid-column: 8 / span 5; position: sticky; inset-block-start: calc(var(--header) + 3rem); }
.fee-figure { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.fee-figure .nums { font-size: var(--step-display); line-height: 0.9; letter-spacing: var(--track-tight); }
.fee-per { font-size: var(--step-body); }
.fee-text { margin-block: 1.5rem 2rem; max-inline-size: 40ch; }
.fees-plain { margin-block-start: 2rem; }
@media (hover: hover) and (pointer: fine) { .fee-name:hover { color: var(--ink); } }

/* ---------- FAQ: filled tiles that open and close smoothly ---------- */
.faq { padding-block: var(--section); }
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.faq-title { grid-column: 1 / span 4; position: sticky; inset-block-start: calc(var(--header) + 24px); }
.faq-list { grid-column: 5 / span 8; display: grid; gap: 8px; }
.faq details { background: var(--surface); border-radius: var(--radius); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
/* without script: the browser animates the answer's height where it can */
.faq details::details-content { block-size: 0; overflow: clip; }
.faq details[open]::details-content { block-size: auto; }
/* with script: the details box itself animates; the answer fades inside the growing box */
html.js .faq details::details-content { transition: none; }
.faq summary { list-style: none; cursor: pointer; min-block-size: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 12px; padding-inline: 24px; font-weight: 500; border-radius: var(--radius); transition: background-color var(--t-press) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:active { background: color-mix(in oklch, currentColor 10%, transparent); }
.faq details p { padding-block-end: 24px; padding-inline: 24px; max-inline-size: 52ch; }
.faq details[open] { background: var(--ink); color: var(--bg); }
/* a closing answer takes its closed colours at once, while its box shrinks */
.faq details[open].is-closing { background: var(--surface); color: var(--ink); }
.plus { flex: none; position: relative; inline-size: 1em; block-size: 1em; }
.plus::before, .plus::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: calc(50% - 0.09em); inline-size: 1em; block-size: 0.18em; background: currentColor; }
.plus::after { transform: rotate(90deg); }
.faq details[open] .plus::after { transform: rotate(0deg); }
.faq details.is-closing .plus::after { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .faq details:not([open]) summary:hover { background: var(--field-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content { transition: block-size var(--faq-close) var(--faq-ease), content-visibility var(--faq-close) allow-discrete; }
  .faq details[open]::details-content { transition-duration: var(--faq-open); }
  .plus::after { transition: transform var(--faq-open) var(--faq-ease); }
}
@media print {
  .faq details::details-content { block-size: auto; content-visibility: visible; }
  .faq-title { position: static; }
  .faq details, .faq details[open] { background: none; color: var(--ink); }
  .plus { display: none; }
}

/* ---------- close: the action tile ---------- */
.close { padding-block-start: calc(var(--section) / 2); overflow-x: clip; }
.close-row { display: grid; grid-template-columns: 1fr min(100% - 2 * (var(--page-gutter) + 6rem), 64rem) 1fr; column-gap: 12px; }
.close-flank, .close-tile { block-size: 360px; border-radius: var(--radius); overflow: clip; }
.close-flank--photo video { inline-size: 100%; block-size: 100%; object-fit: cover; }
.close-flank--field { background: var(--field-2); display: grid; place-items: center; }
.close-mark { inline-size: auto; block-size: 46%; aspect-ratio: 773 / 859; fill: var(--ink); }
.close-tile { background: var(--ink); color: var(--bg); padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; }
.close-title { font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); }
.close-tile p { max-inline-size: 46ch; }
.close-credit { margin-block-start: 12px; }

/* ---------- footer: a quiet line ---------- */
.foot { padding-block: var(--block-gap) 30px; row-gap: var(--block-gap); }
.credits { max-inline-size: 64ch; font-size: var(--step-small); }
.credits a { text-underline-offset: 0.18em; }
.foot-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px; font-size: var(--step-small); }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.foot-right { text-align: end; }
.foot-mark { display: inline-flex; align-items: center; gap: 0.5em; }
.foot-mark .mark-icon { block-size: 1.4em; color: var(--ink); }

/* ---------- spacing between sections ---------- */
/* A plain section owns its bottom space. When it follows a coloured band (tone or dark), it also needs space on top,
   or its heading sits right against the band's edge. */
:is(.page-section--tone, .page-section--dark) + .page-section:not(.page-section--tone, .page-section--dark) { padding-block-start: var(--section); }

/* ---------- loading skeletons ---------- */
/* Live data arrives after the page draws. Until then each box holds a copy of its loaded layout ([data-skeleton], inert)
   with every word turned into a grey bar, so the page is already its final size and nothing moves when the numbers land.
   The page script replaces the skeleton with the real rows. */
[data-skeleton] .skel { color: transparent; background: var(--skel-fill); border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* the bar colour comes from the section's ink, since a bar's own text colour is transparent */
:root { --skel-fill: color-mix(in oklch, var(--ink) 9%, transparent); }
.page-section--dark { --skel-fill: color-mix(in oklch, var(--field-1-ink) 13%, transparent); }
[data-skeleton] :is(.live-dot, .hb-bar, .meter > span, .sw, .tag-text) { background: var(--skel-fill); }
[data-skeleton] .tag-text .skel { background: none; }
.skel-chart { display: block; inline-size: 100%; border-radius: var(--radius); background: var(--skel-fill); opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) {
  [data-skeleton] { animation: skel-pulse 1.4s var(--ease-in-out) infinite alternate; }
}
@keyframes skel-pulse { to { opacity: 0.55; } }

/* ---------- a scrolling list beside a taller neighbour ---------- */
/* Side by side, the list takes exactly its neighbour's height and scrolls inside it with no visible scrollbar; the edge
   that still has rows fades out, so it reads as "more this way". Stacked, it runs its full length. Mark the row
   .fill-row, the column .fill-col and the scroller .fill-scroll (give the scroller tabindex="0" and an aria-label). */
@property --fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes scroll-edges {
  from { --fade-start: 0px; --fade-end: 3rem; }
  10%, 90% { --fade-start: 3rem; --fade-end: 3rem; }
  to { --fade-start: 3rem; --fade-end: 0px; }
}
@media (min-width: 1101px) {
  .fill-row { align-items: stretch; }
  .fill-row > .fill-col { align-self: stretch; display: flex; flex-direction: column; }
  .fill-col > .fill-scroll {
    flex: 1 1 0; min-block-size: 16rem; contain: size;
    overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none;
    animation: scroll-edges linear; animation-timeline: scroll(self block);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent); /* taste-skill-ignore: an overflow mask, not a fill */
  }
  .fill-scroll::-webkit-scrollbar { display: none; }
  .fill-scroll:focus-visible { outline-offset: 6px; }
  .fill-scroll .table-wrap { max-block-size: none; overflow: visible; }
}

/* ---------- inner pages: shared parts ---------- */
/* A page opens with its title and one paragraph, then sections that each start with a .section-head. */
.page-hero { padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.75rem; align-items: start; }
.page-hero h1 { grid-column: 1 / span 8; grid-row: 1; font-size: var(--step-display); line-height: 0.9; letter-spacing: var(--track-tight); font-weight: 500; }
/* the lead starts level with the top of the title's capitals and may run past it; it never pushes the title down */
.page-hero > p { grid-column: 9 / span 4; grid-row: 1 / span 2; max-inline-size: 46ch; padding-block-start: 0.35rem; }
.page-hero > :not(h1, p) { grid-column: 1 / -1; }
.page-hero > .page-actions { grid-column: 1 / span 8; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
/* long document titles (policies, terms) stay at heading size so they keep to two lines on a phone */
.page-hero--doc h1 { grid-column: 1 / span 7; font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); }
.page-hero--doc > p { grid-column: 8 / span 5; }
/* policies open on a filled panel (a step in tone, no border), then the text starts right below it */
.page-hero--doc { margin-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 3vw, 5rem); padding: clamp(1.75rem, 1rem + 3vw, 4rem); background: var(--surface); border-radius: var(--radius); }
.page-section { padding-block-end: var(--section); }
.page-section--tone { padding-block: var(--section); background: var(--surface); }
.page-section--dark { padding-block: var(--section); background: var(--field-1); color: var(--field-1-ink); }
.page-section--dark :is(.muted, .figure-label, .fine-print, .live-state:not([data-state='error'])) { color: var(--on-dark-muted); }
.page-section--dark :focus-visible { outline-color: currentColor; }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1rem; align-items: end; margin-block-end: 48px; }
.section-head h2 { grid-column: 1 / span 6; font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); }
/* "Everything": its y and t come within a sliver of each other at the tight tracking; untracked they sit clearly apart */
.section-head h2.track-open { letter-spacing: 0; }
.section-head > p { grid-column: 7 / span 6; max-inline-size: 44ch; }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: start; }
.split > :first-child { grid-column: 1 / span 5; }
.split > :last-child { grid-column: 7 / span 6; }
.fine-print { font-size: var(--step-small); color: var(--muted); max-inline-size: 72ch; }
.fine-print + .fine-print { margin-block-start: 0.6em; }
/* big figures, label underneath; no boxes */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2rem var(--gutter); }
.figure-num { font-size: var(--step-head); line-height: 1; letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; }
.figure-label { margin-block-start: 0.5rem; color: var(--muted); font-size: var(--step-small); max-inline-size: 24ch; }
/* real data tables: tables keep their lines */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
table.data { inline-size: 100%; border-collapse: collapse; font-size: var(--step-body); }
table.data th { text-align: start; font-weight: 500; font-size: var(--step-small); color: var(--muted); padding-block: 0 12px; padding-inline-end: 1.5rem; border-block-end: 2px solid var(--ink); vertical-align: bottom; white-space: nowrap; }
table.data td { padding-block: 14px; padding-inline-end: 1.5rem; border-block-end: 1px solid var(--field-2); vertical-align: top; }
table.data :is(th, td):last-child { padding-inline-end: 0; }
table.data .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .name { font-weight: 500; }
table.data td small, table.data .sub { display: block; margin-block-start: 0.25rem; font-size: var(--step-small); color: var(--muted); }
table.data code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--step-small); overflow-wrap: anywhere; }
.page-section--dark table.data th { border-block-end-color: currentColor; color: var(--on-dark-muted); }
.page-section--dark table.data td { border-block-end-color: color-mix(in oklch, var(--field-1-ink) 14%, transparent); }
/* a short label that sits in a table cell or a row, e.g. "3 free/day"; square, no pill */
.tag-text { display: inline-block; margin-inline-start: 0.4em; padding: 1px 6px; border-radius: 3px; background: var(--field-2); color: var(--ink); font-size: var(--step-small); font-weight: 500; white-space: nowrap; }
/* code you copy, with its button; reuses .connect */
pre.block { padding: 1rem 1.25rem; background: var(--surface); border-radius: var(--radius); overflow-x: auto; font-size: var(--step-small); line-height: 1.6; }
pre.block code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.page-section--dark pre.block { background: color-mix(in oklch, var(--field-1-ink) 8%, transparent); }
/* loading, empty and error states for live data */
.live-state { color: var(--muted); font-size: var(--step-small); }
.live-state[data-state='error'] { color: var(--doc-warn); }
.page-section--dark .live-state[data-state='error'] { color: var(--ui-red); }
.live-dot { flex: none; display: inline-block; inline-size: 0.6em; block-size: 0.6em; border-radius: 50%; background: var(--ui-green); margin-inline-end: 0.4em; }
.live-dot--down { background: var(--ui-red); }
.live-dot--warn { background: var(--ui-amber); }
/* legal and long-form text */
.prose { max-inline-size: 68ch; }
.prose > * { margin-block: 0; }
.prose > * + * { margin-block-start: var(--flow, 1em); }
.prose > h2 { --flow: 2.4em; font-size: var(--step-lead); font-weight: 500; line-height: 1.2; }
.prose > h3 { --flow: 1.8em; font-size: var(--step-body); font-weight: 500; }
.prose > :is(h2, h3) + * { --flow: 0.6em; }
.prose ul, .prose ol { padding-inline-start: 1.2em; }
.prose ul { list-style: disc; }
.prose li + li { margin-block-start: 0.4em; }
.prose a { text-underline-offset: 0.2em; }
.toc { display: grid; font-size: var(--step-small); position: sticky; inset-block-start: calc(var(--header) + 24px); }
/* each entry is a 32px row on desktop and a full 44px target on touch screens */
.toc a { display: block; padding-block: 0.4rem; color: var(--muted); text-decoration: none; }
@media (any-pointer: coarse) { .toc a { padding-block: 0.75rem; } }
.toc a[aria-current='true'] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--ink); } }

/* ---------- 404 ---------- */
.missing { min-block-size: calc(100svh - var(--header)); padding-block: var(--section); align-content: center; row-gap: 1.5rem; }
.missing .lead { max-inline-size: 40ch; }
.missing-links { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .hero { padding-block-start: 56px; }
  .hero-copy, .hero-stage { grid-column: 1 / -1; }
  .hero-stage { margin-block-start: 40px; }
  .outputs-names { grid-column: 1 / -1; margin-block-end: 40px; }
  .outputs-stage { grid-column: 1 / -1; }
  .tools-col { grid-column: 1 / -1; }
  .ticker { grid-column: 1 / span 6; position: static; margin-block-start: 56px; }
  .pit-title, .statement, .pit-copy .small, .limits-top .head, .limits-top .lead { grid-column: 1 / -1; grid-row: auto; }
  .fee-names { grid-column: 1 / span 7; }
  .fee-stage { grid-column: 8 / span 5; }
  .faq-title { grid-column: 1 / -1; position: static; margin-block-end: 40px; }
  .faq-list { grid-column: 1 / -1; }
  .page-hero h1, .page-hero > p, .page-hero > .page-actions, .section-head h2, .section-head > p, .split > :first-child, .split > :last-child { grid-column: 1 / -1; }
  .page-hero h1, .page-hero > p { grid-row: auto; }
  .page-hero > p { padding-block-start: 0; }
  .top-links { gap: 1rem; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --header: 3.75rem; --ui-pad: 14px; }
  .top-inner { gap: 1rem; }
  .top-nav { display: none; }
  .top .button--small { margin-inline-start: auto; }
  .menu-btn { display: inline-flex; align-items: center; }
  .page-hero { padding-block-start: 2.5rem; }
  .section-head { margin-block-end: 24px; }
  /* stacked figures: enough room that one figure's note never reads as a label for the next number */
  .figures { row-gap: var(--block-gap); }
  .toc { position: static; }
  .page-hero h1 { font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); }
  .hero { padding-block-start: 40px; }
  .hero-stage { margin-block-start: 32px; }
  .caps { grid-template-columns: 1fr; }
  .caps dl { grid-column: auto; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .ask-text { font-size: var(--step-body); }

  .pit-media { block-size: 50svh; }
  .pit-copy { margin-block-start: 32px; }

  .outputs-names { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 20px; margin-block-end: 20px; scrollbar-width: none; align-items: baseline; }
  .outputs-names > * { flex: none; }
  .outputs-lead { display: none; }
  .out-name { font-size: var(--step-lead); white-space: nowrap; scroll-snap-align: start; }
  .outputs-stage { block-size: 70svh; min-block-size: 540px; }
  .sheet { inset-inline-start: 16px; inset-block-start: 16px; padding: 22px; inline-size: 340px; }

  .band { min-block-size: 132px; }
  .band > .band-text { padding-inline-end: 4.5rem; }
  .band-sentence { font-size: var(--step-lead); line-height: 1.15; }
  .band > .switch { font-size: 1.75rem; }
  .band-result { font-size: var(--step-small); }

  .how-steps { grid-column: 1 / -1; }
  .how-stage { display: none; }
  .step { min-block-size: 0; padding-block: 28px; color: var(--ink); }
  .step:first-of-type { padding-block-start: 28px; min-block-size: 0; }
  .step-pic { display: block; margin-block-start: 24px; inline-size: min(100%, 320px); block-size: auto; }

  .tool-groups { columns: 1; }
  .rows li { min-block-size: 44px; }
  .ticker { grid-column: 1 / -1; margin-block-start: var(--block-gap); }
  .ticker img { max-block-size: 50svh; }

  .fee-names, .fee-stage { grid-column: 1 / -1; }
  .fee-stage { position: static; margin-block: 12px var(--section); }
  .fee-stage .button { inline-size: 100%; --btn-h: 52px; }

  .faq summary { min-block-size: 64px; padding-inline: 20px; }
  .faq details p { padding-block-end: 20px; padding-inline: 20px; }

  .close-row { grid-column: content; grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .close-tile { grid-column: 1 / -1; grid-row: 1; block-size: auto; min-block-size: 300px; padding: 28px; }
  .close-flank { block-size: 120px; }
  .close-tile .button { inline-size: 100%; }

  .foot-line { grid-template-columns: 1fr; gap: 8px; }
  .foot-links { justify-content: flex-start; gap: 8px 20px; }
  .foot-right { text-align: start; }
}

/* ---------- narrow screens: data tables ---------- */
@media (max-width: 900px) {
  /* tables marked .stack become one block per row; each cell shows its column name from data-label */
  table.data.stack, table.data.stack :is(thead, tbody, tr, th, td) { display: block; }
  table.data.stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: clip; clip-path: inset(50%); }
  table.data.stack tr { padding-block: 14px; border-block-end: 1px solid var(--field-2); }
  table.data.stack td { display: flex; justify-content: space-between; gap: 1rem; padding-block: 3px; padding-inline-end: 0; border: 0; text-align: end; }
  table.data.stack td::before { content: attr(data-label); flex: none; max-inline-size: 45%; color: var(--muted); font-size: var(--step-small); text-align: start; }
  table.data.stack td:not([data-label])::before, table.data.stack td[data-label='']::before { content: none; }
  table.data.stack td:not([data-label]), table.data.stack td.name { display: block; text-align: start; }
  table.data.stack td.name { font-size: var(--step-lead); padding-block-end: 6px; }
  .page-section--dark table.data.stack tr { border-block-end-color: color-mix(in oklch, var(--field-1-ink) 14%, transparent); }
}

/* ---------- motion ---------- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* Entrances move elements with `translate`, not `transform`, so they never cover an element's own transform: a
   button that fades in still shrinks when pressed, and a row still nudges on hover. */
@keyframes rise { to { opacity: 1; translate: none; } }
@keyframes pit-in { from { transform: scale(1.18); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: no-preference) {
  .outputs-names { scroll-behavior: smooth; }
  .js [data-rise] { opacity: 0; translate: 0 16px; animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
  .fonts-wait [data-rise] { animation-play-state: paused; }
  /* the entrance owns opacity and translate; press, hover and colour changes keep their own quick timing, undelayed */
  .js [data-reveal] [data-part], .js [data-reveal]:not(:has([data-part])) {
    opacity: 0; translate: 0 16px;
    transition: opacity 450ms var(--ease-out), translate 500ms var(--ease-out), transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
    transition-delay: calc(var(--i, 0) * 75ms), calc(var(--i, 0) * 75ms), 0s, 0s, 0s;
  }
  .js [data-reveal].is-in [data-part], .js [data-reveal].is-in:not(:has([data-part])) { opacity: 1; translate: none; }
  /* Arriving from another TOLLkit page: the page title and everything on the first screen are simply there, so the
     header doesn't sit over an empty page while the content fades in. Until main.js marks the page ready, nothing is
     hidden; it then lets only the blocks below the first screen wait for their scroll entrance. */
  .is-nav [data-rise] { animation: none; opacity: 1; translate: none; }
  .is-nav:not(.is-ready) [data-reveal] [data-part], .is-nav:not(.is-ready) [data-reveal]:not(:has([data-part])) { opacity: 1; translate: none; transition: none; }
  /* changing pages in place (main.js router): the content crossfades over 180ms while the header holds still */
  .top { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
  @supports (animation-timeline: view()) {
    .pit-img { animation: pit-in linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .how-stage img { transition: none; }
  .sheet.is-entering { transition: none; }
}