/* Cleared to Build: brand tokens, Field Set (docs/brand/directions/field-set.html, founder pick 2026-10-29). The landing's
   single source: components.css and site.css use only these. Landing additions (layout and motion) are at the end.
   The job site's own paperwork: a blueprint field for the hero, the nav and the footer; light grey and white for the
   reading; safety orange for the one thing to do, always a fill with dark ink on it, never orange text on white; green
   only for cleared. The city's own words stay on warm paper in a serif, so the letter reads as a document.
   WCAG 2 contrast measured on white unless noted. Body text is AAA; every other text pair is AA or better. */
:root {
  /* surfaces */
  --color-page: #F2F4F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #F5F7FA;                  /* header strips, table heads */
  --color-paper: oklch(97.8% 0.014 88);        /* the city's letter #fcf7ed, ink on it 15.9:1 */
  --color-paper-edge: oklch(88% 0.03 85);
  --color-border: #D5DCE3;                     /* hairlines, never meaning */
  --color-border-strong: #AEB9C5;
  --color-field: #6A7785;                      /* input and checkbox edges, 4.6:1 (3:1 needed) */
  --color-rule-strong: #14202E;                /* the heavy ink rule round what matters */

  /* text */
  --color-ink: #14202E;                        /* 16.5:1 (AAA) */
  --color-ink-2: #3F4E5E;                      /* 8.5:1 (AAA) */
  --color-muted: #53616E;                      /* 6.4:1, 5.8:1 on the page */

  /* blueprint: the field, links, the current place */
  --color-blueprint: #0F2D50;                  /* white on it 13.9:1 */
  --color-blueprint-deep: #0A2240;
  --color-line: #3B5D85;                       /* construction lines on the field; decorative */
  --color-on-blue: #FFFFFF;
  --color-on-blue-2: #C4D3E5;                  /* secondary text on blueprint, 9.1:1 */
  --color-accent: #0F2D50;                     /* links on light ground */
  --color-accent-deep: #0A2240;
  --color-accent-tint: #E8EEF6;
  --color-accent-edge: #9FB3CC;
  --color-accent-ink: #FFFFFF;
  --color-focus: #0F2D50;
  --color-focus-dark: #FF6B1A;                 /* the focus ring on the field */

  /* safety orange: the one thing to do. A fill with dark ink on it (6.6:1); as a shape on blueprint 4.9:1 */
  --color-action: #FF6B1A;
  --color-action-hover: #FF8540;
  --color-action-edge: #D9530A;
  --color-action-ink: #17110A;

  /* warm: only for what needs the customer */
  --color-warm: #AD4208;                       /* orange words, only when unavoidable: 5.9:1, 5.3:1 on the tint */
  --color-warm-bg: #FFF1E8;
  --color-warm-line: #FFD3B8;
  --color-warm-edge: #FF6B1A;                  /* decorative edge; the tag carries the meaning */

  /* status: always a word, with a glyph where it helps */
  --color-success: #1B7346;                    /* cleared, covered: 5.9:1 */
  --color-success-bg: #E8F5EE;
  --color-success-edge: #A9D5BC;
  --color-warning: oklch(49% 0.1 70);          /* please confirm  #84550f, 6.4:1 */
  --color-warning-bg: oklch(97% 0.04 85);
  --color-error: oklch(50% 0.18 27);           /* #b32322, 6.5:1 */
  --color-error-bg: oklch(97% 0.018 27);
  --color-highlight: oklch(92% 0.13 100);      /* a blank to fill #f9e77b, ink on it 13.4:1 */

  /* elevation: borders carry structure; shadows only lift */
  --shadow-1: none;                                                                             /* Field Set: borders carry structure */
  --shadow-2: 0 1px 2px oklch(25% 0.02 256 / 0.06), 0 6px 16px -4px oklch(25% 0.02 256 / 0.10); /* the sticky action bar, the pay panel */
  --shadow-3: 0 2px 6px oklch(25% 0.02 256 / 0.06), 0 18px 40px -12px oklch(25% 0.02 256 / 0.22); /* menus; the mockup frames */
  --shadow-btn: none;
  --shadow-pressed: inset 0 1px 2px oklch(20% 0.04 256 / 0.25);

  /* type */
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Overpass", var(--font-body);                    /* highway lettering: headings and desk names, 800 */
  --font-doc: "Source Serif 4", Georgia, "Times New Roman", serif; /* the city's words, quoted: a document, not our UI */
  --font-letter: Calibri, Carlito, Arial, sans-serif;              /* the response letter only: the customer's Word default */

  /* app scale: fixed, ratio about 1.2, body 18px */
  --text-xs: 0.9375rem; --text-sm: 1rem; --text-md: 1.125rem; --text-lg: 1.3125rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.5rem;
  /* marketing scale */
  --text-body-m: clamp(1.1875rem, 1.12rem + 0.2vw, 1.25rem);
  --text-lead: clamp(1.25rem, 1.15rem + 0.4vw, 1.4rem);
  --text-section: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem);
  --text-display: clamp(2.5rem, 1.7rem + 2.4vw, 3.75rem);

  /* space, 4px base */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;

  /* shape and motion */
  --radius-control: 4px;
  --radius-panel: 4px;
  --radius-tag: 4px;
  --control-h: 48px;        /* the 48px target older hands need, at a tool's proportions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 200ms;

  /* landing additions: layout */
  --wrap: 72rem;
  --gutter: var(--space-md);
  --section-gap: var(--space-2xl);
  --nav-h: 76px;
  --nav-h-condensed: 60px;

  /* landing additions: motion. One easing, four durations, one distance; every transition and animation uses these */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-medium: 320ms;  /* accordion height, nav condense */
  --dur-reveal: 560ms;  /* a section settling in on scroll */
  --dur-type: 28ms;     /* per word, the hero's draft writing itself */
  --reveal-shift: 12px;
  --press-shift: 1px;
}
@media (min-width: 48rem) { :root { --gutter: var(--space-xl); --section-gap: var(--space-3xl); } }
/* Reduced motion: every duration and distance goes to zero, so each component lands on its final state at once */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro: 0ms; --dur-short: 0ms; --dur-medium: 0ms; --dur-reveal: 0ms; --dur-type: 0ms; --reveal-shift: 0px; --press-shift: 0px; }
}

/* Cleared to Build landing UI kit. Part 1 is docs/brand/components.css (rev 3) as ported; part 2 adds the landing's own
   components. Each one is built by one function in landing/components.py, so the markup is the same every time.
   Every component uses tokens.css only, and every motion uses the motion tokens (zeroed under reduced motion).
   Each part names the shipped pattern it follows; docs/brand/inspiration.md has the reasons. */

/* ===== Part 1: brand components (docs/brand/components.css) ===== */

/* icons: one small custom set, 24px grid, 2px stroke, currentColor. Used inline beside words, never in tinted tiles. */
.icon { display: inline-block; flex-shrink: 0; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }

/* a panel: white, a hairline edge, a 1px shadow (Stripe, GitHub). Not a card grid: panels hold tables, lists and documents. */
.panel { border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: var(--shadow-1); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.panel-head h2, .panel-head h3, .panel-head h4 { font-size: var(--text-md); }
.panel-body { padding: var(--space-md); }
.panel--lift { border: 2px solid var(--color-rule-strong); }  /* Field Set: the heavy ink edge, like the permit card */

/* buttons (Field Set): safety orange with dark ink, the one thing to do; a white secondary with an ink edge */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-md); border: 1px solid var(--color-action-edge); border-radius: var(--radius-control); background: var(--color-action); color: var(--color-action-ink); box-shadow: var(--shadow-btn); font: 700 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-action-hover); color: var(--color-action-ink); }
.btn:active { background: var(--color-action-hover); box-shadow: var(--shadow-pressed); transform: translateY(var(--press-shift)); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { border-color: var(--color-border-strong); background: var(--color-surface-2); color: var(--color-muted); box-shadow: none; cursor: not-allowed; }
.btn--secondary { border-color: var(--color-ink); background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.btn--secondary:hover { background: var(--color-page); border-color: var(--color-ink); color: var(--color-ink); }
.btn--secondary:active { background: var(--color-surface-2); box-shadow: var(--shadow-pressed); transform: translateY(var(--press-shift)); }
.btn--block { width: 100%; }
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.link:hover { color: var(--color-accent-deep); text-decoration-thickness: 2px; }
.link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

/* fields (GOV.UK, USWDS): label above, hint under it, a plain box with a visible edge */
.field { display: grid; gap: var(--space-2xs); margin-top: var(--space-lg); }
.field > span, .field > legend { font-weight: 700; }
.field .hint { font-weight: 400; color: var(--color-ink-2); }
.input { width: 100%; min-height: var(--control-h); padding: 0 var(--space-sm); border: 1px solid var(--color-field); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-ink); font: inherit; transition: border-color var(--dur-micro) var(--ease-out); }
.input:hover { border-color: var(--color-ink-2); }
.input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 0; border-color: var(--color-accent); }
.input:disabled { background: var(--color-surface-2); cursor: not-allowed; }

/* status as words (GOV.UK task list): done is plain text; only what needs the customer gets a tag */
.state { display: inline-flex; align-items: baseline; gap: var(--space-2xs); font-weight: 700; white-space: nowrap; }
.state--ok { color: var(--color-success); }
.state--warn { color: var(--color-warning); }
.state--err { color: var(--color-error); }
.state--plain { color: var(--color-ink-2); font-weight: 400; }
.tag { display: inline-block; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-tag); background: var(--color-action); color: var(--color-action-ink); font-weight: 700; line-height: 1.4; white-space: nowrap; }

/* a summary list (GOV.UK "check answers", Stripe's invoice To/From): label, value, a hairline between rows */
.summary { margin: 0; }
.summary > div { display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(0, 5fr); gap: var(--space-2xs) var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.summary > div:last-child { border-bottom: 0; }
.summary dt { color: var(--color-ink-2); }
.summary dd { margin: 0; min-width: 0; }

/* a table (Procore, Ramp): hairline rows, quiet heads in sentence case, figures right-aligned in tabular numerals */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.table th { padding: var(--space-xs) var(--space-md); border-bottom: 1px solid var(--color-border-strong); background: var(--color-surface-2); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; text-align: left; white-space: nowrap; }
.table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .meta { display: block; color: var(--color-muted); font-size: var(--text-sm); }

/* a notice (USWDS summary box, GOV.UK error summary): a tinted panel with a hairline all round; an error gets a heavy red edge */
.notice { padding: var(--space-md); border: 1px solid var(--color-accent-edge); border-radius: var(--radius-panel); background: var(--color-accent-tint); }
.notice > * + * { margin-top: var(--space-2xs); }
.notice--ok { border-color: var(--color-success-edge); background: var(--color-success-bg); }
.notice--warm { border-color: var(--color-warm-line); background: var(--color-warm-bg); }
.notice--err { border: 4px solid var(--color-error); border-radius: var(--radius-tag); background: var(--color-surface); }
.notice--err h2, .notice--err h3 { color: var(--color-ink); }

/* the city's words (DocuSign, Harvey): the document set as a document, on paper, in a serif */
.letter { padding: var(--space-md); border: 1px solid var(--color-paper-edge); border-radius: var(--radius-tag); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-doc); font-size: var(--text-md); line-height: 1.55; }
.letter cite { display: block; margin-bottom: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-sm); font-style: normal; color: var(--color-ink-2); }

/* a dated activity list (Linear, GitHub timeline): a hairline spine, a small mark, the date on the right */
.events { margin: 0; padding: 0; list-style: none; }
.events li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); }
.events li::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--color-border); }
.events li:first-child::before { top: 1.1em; }
.events li:last-child::before { bottom: calc(100% - 1.1em); }
.events li::after { content: ""; position: absolute; left: 0; top: 0.95em; width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-field); }
.events .done::after { background: var(--color-ink-2); box-shadow: none; }
.events .now::after { background: var(--color-surface); box-shadow: inset 0 0 0 3px var(--color-accent); }
.events .now { font-weight: 700; }
.events .ok::after { background: var(--color-success); box-shadow: none; }
.events time, .events .when { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.events .later { color: var(--color-ink-2); }

/* small domain labels, plain text */
.sheet { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.code { white-space: nowrap; }
.blank { padding: 0 var(--space-2xs); border-radius: 2px; background: var(--color-highlight); box-shadow: inset 0 -2px 0 var(--color-ink); }


/* ===== Part 2: landing components ===== */

/* small button: the same button at 44px, for secondary actions inside a row (copy, play again) */
.btn--sm { min-height: 44px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
.btn .icon { width: 1.15em; height: 1.15em; }

/* nav (Field Set): the lockup and links on the blueprint field; it condenses and lifts once the page scrolls; the section in view is underlined in orange */
.nav { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--color-line); background: var(--color-blueprint); color: var(--color-on-blue); transition: box-shadow var(--dur-medium) var(--ease-out); }
.nav-in { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--nav-h); transition: min-height var(--dur-medium) var(--ease-out); }
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-blue); --logo-ink: currentColor; --logo-check: var(--color-action); }
.nav :focus-visible { outline-color: var(--color-focus-dark); }
.nav-logo svg { width: 10rem; height: auto; transform-origin: left center; transition: transform var(--dur-medium) var(--ease-out); }
.nav-links { display: none; align-self: stretch; gap: var(--space-md); margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links a { display: inline-flex; align-items: center; height: 100%; padding-inline: var(--space-2xs); color: var(--color-on-blue-2); font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent; transition: color var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.nav-links a:hover { color: var(--color-on-blue); box-shadow: inset 0 -4px 0 var(--color-line); }
.nav-links a[aria-current] { color: var(--color-on-blue); box-shadow: inset 0 -4px 0 var(--color-action); }
.nav-in > .btn { margin-left: auto; }
.nav-links + .btn { margin-left: 0; }
.nav.is-condensed { box-shadow: var(--shadow-2); }
.nav.is-condensed .nav-in { min-height: var(--nav-h-condensed); }
@media (max-width: 29rem) { .nav-in > .btn { min-height: 44px; padding-inline: var(--space-sm); font-size: var(--text-sm); } }
@media (min-width: 30rem) { .nav-logo svg { width: 12rem; } }
@media (min-width: 60rem) {
  .nav-links { display: flex; }
  .nav-logo svg { width: 13.5rem; }
  .nav.is-condensed .nav-logo svg { transform: scale(0.89); }
}

/* section header: the question or claim as the heading, one line of context under it (GOV.UK) */
.section-head { max-width: 46rem; }
.section-head h2 { font-size: var(--text-section); line-height: 1.12; }
.section-head p { margin-top: var(--space-sm); font-size: var(--text-lead); color: var(--color-ink-2); }
.section-head + * { margin-top: var(--space-xl); }

/* the comment block (GitHub review, DocuSign): grey header strip, the city's words on paper left, our draft right */
.cm-head .cm-title { font-weight: 700; }
.cm-title .topic { font-family: var(--font-body); font-weight: 400; color: var(--color-ink-2); }
.cm-body { display: grid; gap: var(--space-lg); padding: var(--space-md); }
@media (min-width: 48rem) { .cm-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--space-lg); } }
.cm-label { margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); }
.cm-side .letter { margin: 0; }
.cm-side .draft { max-width: 60ch; font-size: var(--text-md); }
.cm-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.letter .ask { padding: 0 var(--space-3xs); border-radius: 2px; background: linear-gradient(var(--color-accent-tint), var(--color-accent-tint)) no-repeat 0 0 / 100% 100%; box-shadow: inset 0 -2px 0 var(--color-accent-edge); color: inherit; transition: background-size var(--dur-reveal) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.cm--needs { border-color: var(--color-warm-edge); }
.cm--needs > .panel-head { border-bottom-color: var(--color-warm-line); background: var(--color-warm-bg); }

/* a sheet-by-sheet task list (Procore punch list): a hairline row each, an empty box to tick */
.tasks { margin: var(--space-md) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.tasks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.tasks li::before { content: ""; width: 16px; height: 16px; margin-top: var(--space-2xs); border: 2px solid var(--color-field); border-radius: 3px; }
.checks { margin-top: var(--space-sm); }

/* the hero demo: the same comment block, playing the draft in once. Without JS or with reduced motion it is simply finished */
.cm-status { transition: color var(--dur-short) var(--ease-out); }
.cm[data-demo] .draft .w, .cm[data-demo] .tasks li, .cm[data-demo] .checks { transition: opacity var(--dur-short) var(--ease-out) calc(var(--i, 0) * var(--dur-type)), transform var(--dur-short) var(--ease-out) calc(var(--i, 0) * var(--dur-type)); }
.js .cm[data-demo="reset"] .draft .w, .js .cm[data-demo="reading"] .draft .w { opacity: 0; transition: none; }
.js .cm[data-demo="reset"] .tasks li, .js .cm[data-demo="reading"] .tasks li, .js .cm[data-demo="writing"] .tasks li,
.js .cm[data-demo="reset"] .checks, .js .cm[data-demo="reading"] .checks, .js .cm[data-demo="writing"] .checks { opacity: 0; transform: translateY(var(--reveal-shift)); transition: none; }
.js .cm[data-demo="reset"] .ask { background-size: 0% 100%; box-shadow: inset 0 -2px 0 transparent; transition: none; }
.demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-sm); }
.demo-foot p { font-size: var(--text-sm); color: var(--color-ink-2); }

/* disclosure (GOV.UK accordion, <details>): hairline rows, a chevron that turns, the height eases open (main.js) */
.disclosure { border-bottom: 1px solid var(--color-border); }
.disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding: var(--space-sm) var(--space-2xs); list-style: none; cursor: pointer; font-weight: 700; font-size: var(--text-md); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { color: var(--color-accent-deep); }
.disclosure > summary:hover .disclosure-q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.disclosure > summary:active { background: var(--color-surface-2); }
.disclosure > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-tag); }
.disclosure .chev { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--color-accent); transition: transform var(--dur-medium) var(--ease-out); }
.disclosure[open] > summary .chev { transform: rotate(180deg); }
.disclosure-body { overflow: hidden; }
.disclosure-body > div { padding: 0 var(--space-2xs) var(--space-lg); color: var(--color-ink-2); max-width: 68ch; }
.disclosure-body > div > * + * { margin-top: var(--space-sm); }
.disclosures { border-top: 1px solid var(--color-border); }
/* in a panel: rows get the panel's padding, the last loses its rule */
.panel > .disclosure > summary { padding-inline: var(--space-md); }
.panel > .disclosure:last-child { border-bottom: 0; }
.panel > .disclosure > .disclosure-body > div { max-width: none; padding: 0; color: var(--color-ink); }
.row-sum { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-md); min-width: 0; }
.row-sum .n { min-width: 1.5rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.row-sum .t { flex: 1 1 12rem; }
.row-sum .t span { font-weight: 400; color: var(--color-ink-2); }

/* the ledger (Mercury accounts, Ramp rows): the figure left in tabular numerals, what it measures and its source right */
:where(.ledger) { margin: 0; padding: 0; list-style: none; }
.ledger > li { display: grid; gap: var(--space-2xs) var(--space-lg); padding: var(--space-md); border-bottom: 1px solid var(--color-border); }
.ledger > li:last-child { border-bottom: 0; }
@media (min-width: 48rem) { .ledger > li { grid-template-columns: 11rem minmax(0, 1fr); padding: var(--space-lg); } }
.ledger .fig { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ledger .fig span { font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; color: var(--color-ink-2); }
.ledger .what { font-size: var(--text-md); }
.ledger .source { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }

/* the invoice (Stripe hosted invoice): the amount large, line items on hairlines, a bold total, one full-width button */
.invoice .amount { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; }
.invoice .amount-for { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.lines { margin: var(--space-lg) 0 0; border-top: 1px solid var(--color-border); }
.lines > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.lines dt { color: var(--color-ink-2); }
.lines dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lines .total { border-bottom: 0; border-top: 1px solid var(--color-border-strong); }
.lines .total dt { color: var(--color-ink); font-weight: 700; }
.invoice .btn { margin-top: var(--space-md); }
.invoice .fine { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }

/* the activity list with detail (Linear, GitHub timeline): a title and a line under it, the time on the right */
.events--detail li { padding-block: var(--space-sm); }
.events--detail li::after { top: calc(var(--space-sm) + 0.4em); }
.events--detail li:first-child::before { top: calc(var(--space-sm) + 0.4em); }
.events--detail li:last-child::before { bottom: calc(100% - var(--space-sm) - 0.4em); }
.events--detail b { display: block; }
.events--detail p { margin-top: var(--space-3xs); color: var(--color-ink-2); font-size: var(--text-md); font-weight: 400; }
.events--detail .when { padding-top: 0.15em; }
@media (max-width: 36rem) { .events--detail li { grid-template-columns: minmax(0, 1fr); gap: 0; } .events--detail .when { order: -1; padding: 0; } }

/* email line with a copy button */
.addr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); }
.addr a { font-weight: 700; overflow-wrap: anywhere; }

/* toast (GOV.UK notification, kept small): says what just happened, then leaves */
.toast { position: fixed; left: 50%; bottom: var(--space-lg); z-index: 30; max-width: calc(100% - 2 * var(--space-md)); margin: 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-surface); box-shadow: var(--shadow-3); opacity: 0; transform: translate(-50%, var(--reveal-shift)); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* reveal on scroll: a short settle, once. Only with JS; the hero never waits */
.js [data-reveal] { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--reveal-shift)); }

/* Cleared to Build landing: base and page layout. Components live in components.css, values in tokens.css.
   build.py joins tokens.css, components.css and this file into dist/styles.css (one request). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--space-md)); overflow-x: clip; scrollbar-color: var(--color-muted) var(--color-page); }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: max(19px, var(--text-body-m));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: clip;
}
::selection { background: var(--color-accent-tint); color: var(--color-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent-deep); text-decoration-thickness: 2px; }
button { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-sm); top: -80px; z-index: 50; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-surface); font-weight: 700; }
.skip:focus { top: var(--space-sm); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(46rem + 2 * var(--gutter)); }
.section { padding-block: var(--section-gap); border-top: 1px solid var(--color-border); }

/* hero (Field Set): the promise and the one action in white on the blueprint field, then the product pinned to it,
   with thin construction lines running off its edges to the edge of the page */
.hero { position: relative; overflow: clip; padding-block: var(--space-xl) var(--section-gap); background: var(--color-blueprint); color: var(--color-on-blue); }
@media (min-width: 48rem) { .hero { padding-top: var(--space-xl); } }
.hero :focus-visible { outline-color: var(--color-focus-dark); }
.hero a:not(.btn) { color: var(--color-on-blue); }
.hero a:not(.btn):hover { color: var(--color-on-blue); }
.hero-copy { max-width: 52rem; }
.hero .for { font-weight: 700; color: var(--color-on-blue-2); }
.hero h1 { margin-top: var(--space-xs); max-width: 21ch; font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.025em; }
.hero .lead { margin-top: var(--space-lg); max-width: 44rem; font-size: var(--text-lead); color: var(--color-on-blue-2); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); }
.hero-actions > .btn, .close-panel > .btn { min-height: 60px; padding-inline: var(--space-lg); font-size: 1.25rem; }
.hero-actions .addr { color: var(--color-on-blue-2); }
.hero .assure { flex-basis: 100%; color: var(--color-on-blue-2); }
.hero .assure strong { color: var(--color-on-blue); }
.hero .btn--secondary { border-color: var(--color-on-blue-2); background: transparent; color: var(--color-on-blue); box-shadow: inset 0 0 0 1px var(--color-on-blue-2); }
.hero .btn--secondary:hover { background: var(--color-blueprint-deep); color: var(--color-on-blue); }
.hero-demo { position: relative; margin: var(--space-2xl) 0 0; color: var(--color-ink); }
.hero-demo::before, .hero-demo::after { content: ""; position: absolute; background: var(--color-line); pointer-events: none; }
.hero-demo::before { top: 0; left: -100vw; right: -100vw; height: 1px; }
.hero-demo::after { display: none; top: -100vh; bottom: calc(-1 * var(--section-gap)); right: 14rem; width: 1px; }
@media (min-width: 72rem) { .hero-demo::after { display: block; } } /* only where it runs through empty field, never through words */
.hero-demo > .panel { position: relative; z-index: 1; border: 2px solid var(--color-rule-strong); box-shadow: 0 1px 0 var(--color-blueprint-deep), 0 18px 40px -16px #061629; }
.hero-demo .demo-foot { position: relative; z-index: 1; }
.hero-demo .demo-foot p { color: var(--color-on-blue-2); }
@media (min-width: 48rem) { .hero-demo { margin-top: var(--space-2xl); } }

/* how it works: a short note left, the activity right */
.how { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 60rem) {
  .how { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .how > div:first-child { position: sticky; top: calc(var(--nav-h-condensed) + var(--space-lg)); }
}
.how .fine { margin-top: var(--space-md); max-width: 34rem; color: var(--color-ink-2); }
.how .panel-body { padding: var(--space-sm) var(--space-md); }
@media (min-width: 48rem) { .how .panel-body { padding: var(--space-md) var(--space-lg); } }

/* what you get back: the example report as the review */
.report-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: 0; }
.report-meta div { display: flex; gap: var(--space-xs); }
.report-meta dt { color: var(--color-ink-2); }
.report-meta dd { margin: 0; font-weight: 700; }
.report-summary { padding: var(--space-md); border-bottom: 1px solid var(--color-border); }
.report-files { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-md); }
.report-files p { font-size: var(--text-sm); color: var(--color-ink-2); }
.report .notice { margin-top: var(--space-lg); }

/* proof and numbers: ledgers in panels, the method link under them */
.ledger-foot { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 68ch; }

/* price: the terms left, the invoice right */
.price { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 60rem) { .price { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); } }
.price .summary { margin-top: var(--space-lg); }

/* closing call to action: one panel, one button */
.close-panel { display: grid; gap: var(--space-md); justify-items: start; padding: var(--space-lg); border: 2px solid var(--color-rule-strong); }
@media (min-width: 48rem) { .close-panel { padding: var(--space-xl); } }
.close-panel h2 { font-size: var(--text-section); }
.close-panel .lead { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 46rem; }
.close-panel .fine { color: var(--color-ink-2); }

/* footer: back on the blueprint field */
.foot { padding-block: var(--space-xl); background: var(--color-blueprint); color: var(--color-on-blue-2); }
.foot a:not(.btn) { color: var(--color-on-blue); }
.foot a:not(.btn):hover { color: var(--color-on-blue); }
.foot :focus-visible { outline-color: var(--color-focus-dark); }
.foot-in { display: grid; gap: var(--space-lg); }
@media (min-width: 48rem) { .foot-in { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.foot-logo { display: inline-flex; color: var(--color-on-blue); --logo-ink: currentColor; --logo-check: var(--color-action); }
.foot-logo svg { width: 12rem; height: auto; }
.foot ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot li { display: flex; align-items: center; min-height: 44px; }
.foot-note { grid-column: 1 / -1; padding-top: var(--space-md); border-top: 1px solid var(--color-line); font-size: var(--text-sm); color: var(--color-on-blue-2); }
.foot-note + .foot-note { padding-top: 0; border-top: 0; }

/* method and privacy: a plain document page */
.doc { padding-block: var(--space-xl) var(--section-gap); }
.doc h1 { font-size: var(--text-display); line-height: 1.1; }
.doc .lead { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); }
.doc h2 { margin-top: var(--space-xl); font-size: var(--text-xl); }
.doc h2 + * { margin-top: var(--space-sm); }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: var(--space-sm); }
.doc ul { padding-left: 1.25em; }
.doc li + li { margin-top: var(--space-2xs); }

/* city guides and the free tool (landing/seo.py) */
.doc ol { padding-left: 1.5em; }
.doc ol.steps li { padding-left: var(--space-2xs); }
.doc ol.steps li + li { margin-top: var(--space-sm); }
.doc .source { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.doc .source a { color: inherit; }
.doc .close-panel { margin-top: var(--space-sm); }
.doc .close-panel + p, .doc .disclosures { margin-top: var(--space-md); }
.doc .letter { margin-top: var(--space-sm); white-space: pre-line; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); margin: 0 0 var(--space-md); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.crumbs li + li::before { content: "›"; margin-right: var(--space-xs); }
.crumbs a { color: var(--color-accent); }
.doc .city-list { padding: 0; list-style: none; }
.doc .city-list li { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.doc .city-list a { font-weight: 700; font-size: var(--text-lg); }
.doc .city-list .state { display: block; white-space: normal; }
textarea.input { min-height: 12rem; padding-block: var(--space-sm); line-height: 1.5; resize: vertical; }
.tool-actions { margin-top: var(--space-lg); }
.tool-status:empty { display: none; }
.tool-result { margin-top: var(--space-xl); }
.tool-result h3 { margin-top: var(--space-lg); font-size: var(--text-lg); }

@media print { .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; } .nav { position: static; } }