/* Harla — tokens.css, generated from tokens/tokens.json. Do not edit; run `npm run build`. */
@font-face { font-family: "Newsreader"; src: url("fonts-free/Newsreader-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts-free/Newsreader-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts-free/Newsreader-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts-free/DMSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts-free/DMSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts-free/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts-free/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
:root, [data-theme="light"], :root[data-theme="dark"] [data-theme="inverse"] {
  --main-char: #31312d;
  --main-light: #f5f3f1;
  --paper: #fafaf5;
  --ground: var(--main-light);
  --ink-muted: #444440;
  --highlighter-blue: #94dfdb;
  --highlighter-orange: #fecd82;
  --highlighter-purple: #ebb8e9;
  --highlighter-yellow: #faec3c;
  --highlighter-pink: #ffc5c4;
  --highlighter-green: #c8ec98;
  --annotation: #2a52d6;
  --status-uploaded: #e49cdc;
  --status-processed: #ffab59;
  --status-approved: #00e078;
  --stamp-ink: #2a200c;
  --rule: var(--main-char);
  --focus: var(--annotation);
  --scrim: rgba(49, 49, 45, 0.55);
  --on-highlighter: #31312d;
  --surface-hover: var(--paper);
  --ground-tint: #f7f1bb;
  --hl-green-fill: var(--highlighter-green);
  --hl-green-ink: var(--main-char);
  --hl-blue-fill: var(--highlighter-blue);
  --hl-blue-ink: var(--main-char);
  --hl-yellow-fill: var(--highlighter-yellow);
  --hl-yellow-ink: var(--main-char);
  --hl-pink-fill: var(--highlighter-pink);
  --hl-pink-ink: var(--main-char);
  --hl-purple-fill: var(--highlighter-purple);
  --hl-purple-ink: var(--main-char);
  --hl-orange-fill: var(--highlighter-orange);
  --hl-orange-ink: var(--main-char);
}
[data-theme="dark"], :root:not([data-theme="dark"]) [data-theme="inverse"] {
  --main-char: #ffffff;
  --paper: var(--ground);
  --ground: #000000;
  --ink-muted: var(--main-light);
  --annotation: #5b8cff;
  --stamp-ink: var(--main-light);
  --rule: var(--main-char);
  --focus: var(--annotation);
  --scrim: rgba(0, 0, 0, 0.75);
  --surface-hover: transparent;
  --hl-green-fill: transparent;
  --hl-green-ink: var(--highlighter-green);
  --hl-blue-fill: transparent;
  --hl-blue-ink: var(--highlighter-blue);
  --hl-yellow-fill: transparent;
  --hl-yellow-ink: var(--highlighter-yellow);
  --hl-pink-fill: transparent;
  --hl-pink-ink: var(--highlighter-pink);
  --hl-purple-fill: transparent;
  --hl-purple-ink: var(--highlighter-purple);
  --hl-orange-fill: transparent;
  --hl-orange-ink: var(--highlighter-orange);
}
:root {
  --space-hl: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;
  --space-3: 12px;
  --space-8: 32px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-none: 0px;
  --stroke-hairline: 1px;
  --stroke-stamp: 2px;
  --stroke-rubber: 3px;
  --stroke-icon: 1.5;
  --container-max: 1320px;
  --container-narrow: 720px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-height: 72px;
  --intro-peek: clamp(96px, 14vh, 140px);
  --intro-actions-gap: 63px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-reveal: 1200ms;
  --duration-scroll: 1000ms;
  --ease-reveal: cubic-bezier(0.37, 0, 0.63, 1);
  --duration-assemble-float: 2000ms;
  --duration-assemble-settle: 2000ms;
  --duration-assemble-fade: 500ms;
  --duration-swatch-slide: 500ms;
  --duration-swatch-pause: 200ms;
  --layer-header: 50;
  --layer-menu: 100;
  --layer-overlay: 200;
  --bp-sm: 520px;
  --bp-md: 760px;
  --bp-lg: 1024px;
  --font-serif: "ABC Otto", Newsreader, Georgia, serif;
  --font-sans: "ABC Diatype", "DM Sans", system-ui, sans-serif;
  --font-mono: "ABC Diatype Mono", "IBM Plex Mono", ui-monospace, monospace;
  --text-display: 300 64px/1 var(--font-serif);
  --text-kicker: italic 400 20px/1.2 var(--font-serif);
  --text-document: 400 20px/30px var(--font-serif);
  --text-document-dense: 400 13px/17px var(--font-serif);
  --text-heading-1: 300 clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem)/1.02 var(--font-serif);
  --text-heading-2: 300 clamp(2rem, 1.4rem + 2.4vw, 3.25rem)/1.08 var(--font-serif);
  --text-heading-3: 400 1.375rem/1.2 var(--font-serif);
  --text-article: 400 clamp(1.125rem, 1rem + 0.4vw, 1.25rem)/1.65 var(--font-serif);
  --text-strapline: 300 62px/1.2 var(--font-serif);
  --text-strapline-sm: 300 32px/1.2 var(--font-serif);
  --text-wordmark: 400 32px/1 var(--font-sans);
  --text-body: 400 14px/18px var(--font-sans);
  --text-label: 500 16px/20px var(--font-sans);
  --text-lead: 400 clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem)/1.5 var(--font-sans);
  --text-body-lg: 400 1rem/1.5 var(--font-sans);
  --text-control: 500 0.9375rem/1.25 var(--font-sans);
  --text-date-tag: 400 9px/10px var(--font-mono);
  --text-stamp: 600 22px/1 var(--font-mono);
}
.display { font: var(--text-display); letter-spacing: 0; }
.kicker { font: var(--text-kicker); letter-spacing: 0; }
.document { font: var(--text-document); letter-spacing: 0; }
.document-dense { font: var(--text-document-dense); letter-spacing: 0; }
.heading-1 { font: var(--text-heading-1); letter-spacing: 0; }
.heading-2 { font: var(--text-heading-2); letter-spacing: 0; }
.heading-3 { font: var(--text-heading-3); letter-spacing: 0; }
.article { font: var(--text-article); letter-spacing: 0; }
.strapline { font: var(--text-strapline); letter-spacing: 0; }
.strapline-sm { font: var(--text-strapline-sm); letter-spacing: 0; }
.wordmark { font: var(--text-wordmark); letter-spacing: 0; }
.body { font: var(--text-body); letter-spacing: 0; }
.label { font: var(--text-label); letter-spacing: 0.06em; }
.lead { font: var(--text-lead); letter-spacing: 0; }
.body-lg { font: var(--text-body-lg); letter-spacing: 0; }
.control { font: var(--text-control); letter-spacing: 0.04em; }
.date-tag { font: var(--text-date-tag); letter-spacing: 0.06em; }
.stamp { font: var(--text-stamp); letter-spacing: 0.08em; }

/* Harla — components.css, generated from src/components. Do not edit; run `npm run build`. */
/* Icon — line glyphs on a 24-unit grid, drawn in the text colour */
.icon { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.125em;
  fill: none; stroke: currentColor; stroke-width: var(--stroke-icon); stroke-linecap: square; stroke-linejoin: miter; }
.icon--lg { width: 1.5em; height: 1.5em; }

/* Layout — page container and section spacing */
.container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.section { --section-pad: var(--space-16); padding-block: var(--section-pad); }   /* --section-pad lets a child bleed through it */
.section--ruled { border-top: var(--stroke-hairline) solid var(--rule); }
/* A lighter section: the same ground as an article card on hover (surface-hover: paper in light) */
.section--surface { background: var(--surface-hover); }
.section.section--flush-top { padding-top: 0; }   /* doubled class: must beat the 1024px padding rule below */
@media (min-width: 1024px) { .section { --section-pad: var(--space-24); } }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.stack--sm { gap: var(--space-3); }
.stack--md { gap: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.split { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, auto); } }
/* Width of the text column, as a share of the container, from 760px (bp-md); full width below */
@media (min-width: 760px) { .width-65 { max-width: 65%; } .width-55 { max-width: 55%; } }

/* Eyebrow — the small label above a heading. Sentence case, never uppercase */
.eyebrow { display: block; font: var(--text-label); letter-spacing: 0.06em; color: var(--ink-muted); }

/* Tag — a category label in one highlighter colour. Light: fill. Dark: the colour moves to the outline and type (tokens) */
.tag { display: inline-block; padding: 2px var(--space-2); border: var(--stroke-hairline) solid;
  font: var(--text-body); font-weight: 500; letter-spacing: 0.02em; }
.tag--green  { background: var(--hl-green-fill);  color: var(--hl-green-ink);  border-color: var(--highlighter-green); }
.tag--blue   { background: var(--hl-blue-fill);   color: var(--hl-blue-ink);   border-color: var(--highlighter-blue); }
.tag--yellow { background: var(--hl-yellow-fill); color: var(--hl-yellow-ink); border-color: var(--highlighter-yellow); }
.tag--pink   { background: var(--hl-pink-fill);   color: var(--hl-pink-ink);   border-color: var(--highlighter-pink); }
.tag--purple { background: var(--hl-purple-fill); color: var(--hl-purple-ink); border-color: var(--highlighter-purple); }
.tag--orange { background: var(--hl-orange-fill); color: var(--hl-orange-ink); border-color: var(--highlighter-orange); }

/* Button — square; primary is filled, secondary is outlined; hover is a highlighter pass or an inversion */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: var(--space-2) var(--space-4); border: var(--stroke-stamp) solid var(--main-char); border-radius: var(--radius-none);
  font: var(--text-control); letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.button--lg { min-height: 48px; padding: var(--space-3) var(--space-6); }
.button--primary { background: var(--main-char); color: var(--ground); }
.button--primary:hover { background: var(--highlighter-green); border-color: var(--highlighter-green); color: var(--on-highlighter); }
.button--secondary { background: transparent; color: var(--main-char); }
.button--secondary:hover { background: var(--main-char); color: var(--ground); }
.button .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.button:hover .icon--trailing { transform: translateX(2px); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.4; cursor: default; pointer-events: none; }
.button--block { width: 100%; }

/* TextLink — a quiet link with an optional arrow; underlines on hover */
.text-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--main-char);
  font: var(--text-control); letter-spacing: 0.04em; text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: var(--stroke-hairline); text-underline-offset: 0.25em; cursor: pointer;
  transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.text-link:hover { text-decoration-color: currentColor; }
button.text-link { padding: 0; border: 0; background: none; }   /* the same look on a button ("Use a different email") */
.text-link--muted { color: var(--ink-muted); }
.text-link--muted:hover { color: var(--main-char); }
.text-link .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.text-link:hover .icon--trailing { transform: translateX(2px); }
.text-link:hover .icon--leading { transform: translateX(-2px); }

/* Highlight — a highlighter pass over a term. Light: a fill behind the type. Dark: the colour moves to the type (tokens) */
.hl { padding: 0 var(--space-hl); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* The fill sits behind the text around it, like ink over a real highlighter: in tight headings (heading-1's line
   height is 1.02) the fill reaches up into the line above, and must not cover that line's descenders (p, g, y).
   The parent becomes a stacking context so the fill stays above the parent's own ground */
.hl { position: relative; z-index: -1; }
:has(> .hl) { isolation: isolate; }
.hl--blue   { background: var(--hl-blue-fill);   color: var(--hl-blue-ink); }
.hl--orange { background: var(--hl-orange-fill); color: var(--hl-orange-ink); }
.hl--purple { background: var(--hl-purple-fill); color: var(--hl-purple-ink); }
.hl--yellow { background: var(--hl-yellow-fill); color: var(--hl-yellow-ink); }
.hl--pink   { background: var(--hl-pink-fill);   color: var(--hl-pink-ink); }
.hl--green  { background: var(--hl-green-fill);  color: var(--hl-green-ink); }

/* ClauseNote — underlined passage with its date tag */
.clause { position: relative; display: inline; text-decoration: underline; text-decoration-color: var(--annotation);
  text-decoration-thickness: var(--stroke-hairline); text-underline-offset: 0.18em; }
.clause__date { position: absolute; left: 0; top: 100%; margin-top: var(--space-1); white-space: nowrap;
  font-family: var(--font-mono); font-size: 9px; line-height: 10px; letter-spacing: 0.06em; color: var(--annotation); }

/* StatusStamp — the document lifecycle */
.status { display: inline-flex; align-items: stretch; border: var(--stroke-stamp) solid currentColor; border-radius: var(--radius-none);
  font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: 0.06em; }
.status > span { padding: var(--space-2) var(--space-4); }
.status > span + span { border-left: var(--stroke-stamp) solid currentColor; }
.status--uploaded  { color: var(--status-uploaded); }
.status--processed { color: var(--status-processed); }
.status--approved  { color: var(--status-approved); }
.status--held { color: var(--on-highlighter); background: var(--status-approved); border-color: var(--status-approved); letter-spacing: 0.02em; }
.status--held > span + span { border-left: 0; padding-left: 0; }

/* RubberStamp — the inked lockup */
.rubber { display: inline-block; transform: rotate(-4deg); padding: var(--space-2) var(--space-6);
  border: var(--stroke-rubber) solid var(--stamp-ink); outline: var(--stroke-hairline) solid var(--stamp-ink); outline-offset: 2px;
  font-family: var(--font-mono); font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stamp-ink); }

/* Lockup — bar mark + wordmark on one shared baseline */
.lockup { display: inline-flex; align-items: baseline; gap: 0.4em; font: var(--text-wordmark); letter-spacing: 0; color: var(--main-char); }
.lockup__mark { display: block; height: 1.2em; width: auto; }
/* Inline SVG mark (the React Lockup): follows the text colour, so it inverts with the wordmark */
svg.lockup__mark { fill: currentColor; shape-rendering: crispEdges; } /* snap bar edges to whole pixels so no bar renders lighter at small sizes */
/* main-char is already light on dark grounds; --inverse forces light on a black panel */
.lockup--inverse { color: var(--main-light); }
/* <img> mark: its ink is fixed at #3a3a3a. On dark/black grounds, invert it to light (~main-light) */
[data-theme="dark"] img.lockup__mark, .lockup--inverse img.lockup__mark { filter: brightness(0) invert(0.96); }

/* SiteHeader — sticky bar in the page theme: logo, nav links (anchors on a single-page site), actions, theme toggle;
   a pop-out menu below 1024px */
.site-header { position: sticky; top: 0; z-index: var(--layer-header); background: var(--ground); color: var(--main-char); }
/* The rule under the header: hidden at the top of the page, fades in once the page scrolls (site-header--scrolled) */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--stroke-hairline);
  background: var(--rule); pointer-events: none; opacity: 0; transition: opacity var(--duration-base) var(--ease-standard); }
.site-header--scrolled::after { opacity: 1; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: var(--header-height); }
.site-header__brand { display: inline-flex; color: inherit; text-decoration: none; font-size: 1.75rem; }
.site-header__brand .lockup { font-size: inherit; }
.site-header__end { display: flex; align-items: center; gap: var(--space-3); }
.site-header__actions { display: none; align-items: center; gap: var(--space-3); }
.site-header__menu-button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer; }

/* Links */
.site-nav { display: none; margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.site-nav__item { display: flex; align-items: center; padding-inline: var(--space-2);
  transition: background-color var(--duration-fast) var(--ease-standard); }
.site-nav__item--green { --item-fill: var(--hl-green-fill); --item-ink: var(--hl-green-ink); }
.site-nav__item--blue { --item-fill: var(--hl-blue-fill); --item-ink: var(--hl-blue-ink); }
.site-nav__item--yellow { --item-fill: var(--hl-yellow-fill); --item-ink: var(--hl-yellow-ink); }
.site-nav__item--pink { --item-fill: var(--hl-pink-fill); --item-ink: var(--hl-pink-ink); }
.site-nav__item--purple { --item-fill: var(--hl-purple-fill); --item-ink: var(--hl-purple-ink); }
.site-nav__item--orange { --item-fill: var(--hl-orange-fill); --item-ink: var(--hl-orange-ink); }
.site-nav__link { padding: var(--space-2) 0; color: inherit; font: var(--text-control); letter-spacing: 0.04em; text-decoration: underline;
  text-decoration-color: transparent; text-decoration-thickness: var(--stroke-hairline); text-underline-offset: 0.3em;
  transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard); }
.site-nav__link:hover { text-decoration-color: currentColor; }
/* Current: a highlighter pass (light) or the highlighter as type (dark), from the hl tokens */
.site-nav__item.is-active { background: var(--item-fill); }
.site-nav__item.is-active .site-nav__link { color: var(--item-ink); }

/* Mobile pop-out menu: a sheet from the right over a scrim */
.site-menu { position: fixed; inset: 0; z-index: var(--layer-menu); }
.site-menu__scrim { position: absolute; inset: 0; background: var(--scrim); animation: site-fade-in var(--duration-base) var(--ease-standard); }
.site-menu__sheet { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-8);
  width: min(100%, 420px); padding: 0 var(--gutter) var(--space-8); overflow-y: auto; background: var(--ground); color: var(--main-char);
  animation: site-sheet-in var(--duration-base) var(--ease-standard); }
@keyframes site-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes site-sheet-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.site-menu__top { display: flex; justify-content: flex-end; align-items: center; min-height: var(--header-height); }
.site-menu__list { margin: 0; padding: 0; list-style: none; }
.site-menu__group { padding-block: var(--space-4); border-top: var(--stroke-hairline) solid var(--rule); }
.site-menu__group-link { display: block; padding-block: var(--space-2); color: inherit; font: var(--text-heading-3); text-decoration: none; }
.site-menu__group-link:hover { color: var(--main-char); text-decoration: underline; text-decoration-thickness: var(--stroke-hairline); text-underline-offset: 0.25em; }
.site-menu__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.site-menu__actions .button { width: 100%; }

@media (min-width: 520px) {
  .site-header__actions { display: flex; }
}
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header__menu-button { display: none; }
  .site-menu { display: none; }
}

/* Theme toggle: shows the theme you'd switch to (moon in light, sun in dark), from <html data-theme> */
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: inline-block; }

/* SiteFooter — in the page theme: logo, description, action, link columns, legal bar */
.site-footer { background: var(--ground); color: var(--main-char); border-top: var(--stroke-hairline) solid var(--rule); }
.site-footer__main { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: var(--space-12); padding-block: var(--space-16); }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.site-footer__logo { display: inline-flex; color: inherit; text-decoration: none; font-size: 1.75rem; }
.site-footer__logo .lockup { font-size: inherit; }
.site-footer__desc { font: var(--text-body-lg); color: var(--ink-muted); max-width: 28ch; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.site-footer__heading { margin-bottom: var(--space-4); font: var(--text-label); letter-spacing: 0.06em; }
.site-footer__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-footer__link { color: var(--ink-muted); font: var(--text-body-lg); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.site-footer__link:hover { color: var(--main-char); text-decoration: underline; text-decoration-thickness: var(--stroke-hairline); text-underline-offset: 0.25em; }
/* The legal bar: its rule runs the full width of the screen; its content stays in the container */
.site-footer__bottom { border-top: var(--stroke-hairline) solid var(--rule); }
.site-footer__bottom-inner { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6);
  font: var(--text-body); color: var(--ink-muted); }
.site-footer__legal-links { display: flex; gap: var(--space-6); }
@media (max-width: 859px) {
  .site-footer__main { grid-template-columns: 1fr; }
}
@media (max-width: 519px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom-inner { flex-direction: column; }
}

/* Hero — headline, subtitle and actions; optional aside (wide screens) and media */
.hero { position: relative; overflow: hidden; padding-block: var(--space-16) var(--space-16); }
.hero__layout { position: relative; }
.hero__text { position: relative; z-index: 1; max-width: 760px; }
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero__title { font: var(--text-heading-1); letter-spacing: -0.01em; }
.hero__subtitle { margin-top: var(--space-6); max-width: 36em; font: var(--text-lead); color: var(--ink-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero__aside { display: none; }
.hero__media { margin-top: var(--space-12); }
@media (min-width: 900px) {
  .hero { padding-block: var(--space-24) var(--space-24); }
  .hero__aside { display: block; position: absolute; z-index: 0; top: 0; right: var(--gutter); pointer-events: none; }
}

/* DocumentTiles — six square file tiles that settle in and float. Decorative */
.doc-tiles { position: relative; width: 470px; height: 360px; }
.doc-tiles__tile { position: absolute; opacity: 0; transform: translateY(12px) rotate(var(--rot));
  transition: opacity 600ms var(--ease-standard) var(--delay), transform 600ms var(--ease-standard) var(--delay); }
.doc-tiles.is-loaded .doc-tiles__tile { opacity: 1; transform: rotate(var(--rot)); }
.doc-tiles.is-loaded .doc-tile { animation: doc-tile-float 7s ease-in-out var(--float-delay) infinite; }
@keyframes doc-tile-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.doc-tile { display: block; width: 100%; height: auto; overflow: visible; }
.doc-tile__sheet { stroke: var(--on-highlighter); stroke-width: var(--stroke-stamp); stroke-linejoin: miter; }
.doc-tile__fold, .doc-tile__glyph { fill: none; stroke: var(--on-highlighter); stroke-width: var(--stroke-stamp); stroke-linejoin: miter; stroke-linecap: square; }
.doc-tile__label { fill: var(--on-highlighter); font-family: var(--font-mono); font-weight: 600; font-size: 17px; letter-spacing: 0.08em; }
.doc-tile--green  .doc-tile__sheet { fill: var(--highlighter-green); }
.doc-tile--blue   .doc-tile__sheet { fill: var(--highlighter-blue); }
.doc-tile--purple .doc-tile__sheet { fill: var(--highlighter-purple); }
.doc-tile--yellow .doc-tile__sheet { fill: var(--highlighter-yellow); }
.doc-tile--pink   .doc-tile__sheet { fill: var(--highlighter-pink); }
.doc-tile--orange .doc-tile__sheet { fill: var(--highlighter-orange); }
@media (prefers-reduced-motion: reduce) {
  .doc-tiles__tile { opacity: 1; transform: rotate(var(--rot)); transition: none; }
  .doc-tiles.is-loaded .doc-tile { animation: none; }
}

/* Card — an outlined, linked card; hover shades it paper and underlines the title (no lift, no shadow) */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.card { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; padding: var(--space-6);
  border: var(--stroke-hairline) solid var(--rule); color: inherit; text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard); }
.card:hover { background: var(--surface-hover); }
.card__meta { display: flex; align-items: center; gap: var(--space-3); }
.card__date { font: var(--text-body); color: var(--ink-muted); }
.card__title { font: var(--text-heading-3); text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: var(--stroke-hairline); text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.card:hover .card__title { text-decoration-color: currentColor; }
.card__excerpt { font: var(--text-body-lg); color: var(--ink-muted); }
.card__cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2);
  font: var(--text-control); letter-spacing: 0.04em; }
.card__cta .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.card:hover .card__cta .icon { transform: translateX(2px); }
@media (max-width: 899px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .card-grid { grid-template-columns: 1fr; } }

/* CtaPanel — a square dark panel with a heading, text and actions */
.cta-panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);
  padding: var(--space-12) var(--space-8); background: var(--ground); color: var(--main-char); }
.cta-panel__title { max-width: 18em; font: var(--text-heading-2); }
.cta-panel__text { max-width: 36em; font: var(--text-lead); color: var(--ink-muted); }
.cta-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 1024px) { .cta-panel { padding: var(--space-16); } }

/* ActionList — ruled rows: icon tile, label and value, arrow. Interactive rows take a highlighter pass on hover */
.action-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--stroke-hairline) solid var(--rule); }
.action-list__row { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-4);
  border: 0; border-bottom: var(--stroke-hairline) solid var(--rule); background: none; color: inherit;
  font: inherit; text-align: left; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard); }
button.action-list__row { cursor: pointer; }
.action-list__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: var(--stroke-hairline) solid var(--rule); }
.action-list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.action-list__label { font: var(--text-body); color: var(--ink-muted); }
.action-list__value { font: var(--text-body-lg); overflow-wrap: anywhere; }
.action-list__arrow { margin-left: auto; font-size: 1.25rem; transition: transform var(--duration-fast) var(--ease-standard); }
.action-list li:nth-child(3n+1) .action-list__row:not(.action-list__row--static):hover { background: var(--highlighter-green); }
.action-list li:nth-child(3n+2) .action-list__row:not(.action-list__row--static):hover { background: var(--highlighter-blue); }
.action-list li:nth-child(3n+3) .action-list__row:not(.action-list__row--static):hover { background: var(--highlighter-yellow); }
.action-list__row:not(.action-list__row--static):hover { color: var(--on-highlighter); }
.action-list__row:not(.action-list__row--static):hover .action-list__label { color: var(--on-highlighter); }
.action-list__row:not(.action-list__row--static):hover .action-list__icon { border-color: var(--on-highlighter); }
.action-list__row:hover .action-list__arrow { transform: translateX(4px); }

/* Article — the article header (in the page theme, ruled off from the text) and the reading column */
.article-hero { padding-block: var(--space-16); border-bottom: var(--stroke-hairline) solid var(--rule); }
.article-hero__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.article-hero__date { font: var(--text-body); color: var(--ink-muted); }
.article-hero__title { font: var(--text-heading-1); letter-spacing: -0.01em; }
.article-hero__strapline { margin-top: var(--space-6); font: var(--text-lead); color: var(--ink-muted); }
.prose-section { padding-block: var(--space-16); }
.prose { display: grid; gap: 1.2em; font: var(--text-article); }
.prose__footer { margin-top: var(--space-12); padding-top: var(--space-6); border-top: var(--stroke-hairline) solid var(--rule); }
@media (min-width: 1024px) {
  .article-hero { padding-block: var(--space-24); }
  .prose-section { padding-block: var(--space-24); }
}

/* Dialog — a square panel over a flat scrim. Light, whatever the page around it */
.dialog { position: fixed; inset: 0; z-index: var(--layer-overlay); display: grid; place-items: center; padding: var(--space-4); background: none; }
.dialog__scrim { position: absolute; inset: 0; background: var(--scrim); animation: dialog-fade var(--duration-base) var(--ease-standard); }
.dialog__panel { position: relative; width: min(100%, 480px); max-height: calc(100dvh - 2 * var(--space-4)); overflow-y: auto;
  padding: var(--space-6); background: var(--ground); color: var(--main-char); border: var(--stroke-hairline) solid var(--rule);
  animation: dialog-in var(--duration-base) var(--ease-standard); }
.dialog__panel--md { width: min(100%, 640px); }
.dialog__panel:focus { outline: none; }
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.dialog__title { font: var(--text-heading-3); }
.dialog__close { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0 0;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.dialog__body { display: flex; flex-direction: column; gap: var(--space-6); }
@keyframes dialog-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 520px) { .dialog__panel { padding: var(--space-8); } }

/* Booking — calendar, time slots, form fields, error and success. Square, outlined, no fills but the selection */

/* Calendar */
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.calendar__month { font: var(--text-control); letter-spacing: 0.04em; }
.calendar__nav { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: var(--stroke-hairline) solid var(--rule); background: none; color: inherit; cursor: pointer; }
.calendar__nav:disabled { opacity: 0.3; cursor: default; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar__dow { padding-block: var(--space-2); text-align: center; font: var(--text-body); color: var(--ink-muted); }
.calendar__day { position: relative; aspect-ratio: 1; min-height: 36px; padding: 0; border: var(--stroke-hairline) solid transparent;
  background: none; color: inherit; font: var(--text-body-lg); font-variant-numeric: lining-nums tabular-nums; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.calendar__day:hover:not(:disabled) { border-color: var(--rule); }
.calendar__day:disabled { color: var(--ink-muted); opacity: 0.35; cursor: default; }
/* Today: a short rule under the number */
.calendar__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 12px; height: var(--stroke-stamp);
  transform: translateX(-50%); background: currentColor; }
.calendar__day.is-selected { background: var(--main-char); border-color: var(--main-char); color: var(--ground); }

/* Time slots */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.slots__slot { min-height: 40px; padding: var(--space-2); border: var(--stroke-hairline) solid var(--rule); background: none; color: inherit;
  font: var(--text-control); letter-spacing: 0.04em; font-variant-numeric: lining-nums tabular-nums; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard); }
.slots__slot:hover:not(:disabled) { background: var(--highlighter-green); color: var(--on-highlighter); }
.slots__slot:disabled { color: var(--ink-muted); text-decoration: line-through; opacity: 0.45; cursor: default; }
.slots__slot.is-selected { background: var(--main-char); border-color: var(--main-char); color: var(--ground); }
.slots__skeleton { min-height: 40px; background: var(--paper); border: var(--stroke-hairline) solid var(--rule);
  animation: slots-pulse 1.2s var(--ease-standard) infinite alternate; }
@keyframes slots-pulse { from { opacity: 0.35; } to { opacity: 0.8; } }
@media (max-width: 400px) { .slots { grid-template-columns: repeat(3, 1fr); } }

/* Fields */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font: var(--text-body); font-weight: 500; letter-spacing: 0.02em; }
.field__input { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: var(--stroke-hairline) solid var(--rule); border-radius: var(--radius-none);
  background: var(--paper); color: var(--main-char); font: var(--text-body-lg); }
.field__input:focus-visible { outline: var(--stroke-stamp) solid var(--focus); outline-offset: 0; }
.field__input:user-invalid { border-color: var(--annotation); }

/* Error: annotation blue, with a rule so colour isn't the only signal */
.form-error { padding-left: var(--space-3); border-left: var(--stroke-stamp) solid var(--annotation); font: var(--text-body-lg); color: var(--annotation); }

/* Success */
.success { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding-block: var(--space-4); text-align: center; }
.success__mark { display: grid; place-items: center; width: 64px; height: 64px; background: var(--highlighter-green);
  border: var(--stroke-stamp) solid var(--on-highlighter); color: var(--on-highlighter); font-size: 1.5rem; }
.success__title { font: var(--text-heading-3); }
.success__text { font: var(--text-body-lg); color: var(--ink-muted); }
.success__text strong { color: var(--main-char); font-weight: 500; }

/* Showcase — BrowserFrame, TileGrid, StageCards, SplitCallout, NodeDiagram */

/* BrowserFrame: a plain window, square, outlined */
.browser-frame { border: var(--stroke-hairline) solid var(--rule); background: var(--paper); }
.browser-frame__bar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4);
  border-bottom: var(--stroke-hairline) solid var(--rule); }
.browser-frame__dots { display: flex; gap: var(--space-2); }
.browser-frame__dots i { width: 10px; height: 10px; border: var(--stroke-hairline) solid var(--rule); }
.browser-frame__url { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-muted); }
.browser-frame__view { display: block; width: 100%; height: 520px; border: 0; pointer-events: none; }
@media (max-width: 760px) { .browser-frame__view { height: 320px; } }

/* TileGrid: dark tiles; hover fills with the tile's highlighter and the type goes dark */
.tile-grid__label { padding-top: var(--space-3); margin-bottom: var(--space-4); border-top: var(--stroke-stamp) solid var(--rule);
  font: var(--text-body); color: var(--ink-muted); }
.tile-grid__tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.tile-grid__tile { display: flex; align-items: flex-end; min-height: 120px; padding: var(--space-4);
  background: var(--ground); color: var(--main-char); font: var(--text-heading-3); text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.tile-grid__tile:hover { color: var(--on-highlighter); }
.tile-grid__tile--green:hover  { background: var(--highlighter-green); }
.tile-grid__tile--blue:hover   { background: var(--highlighter-blue); }
.tile-grid__tile--yellow:hover { background: var(--highlighter-yellow); }
.tile-grid__tile--pink:hover   { background: var(--highlighter-pink); }
.tile-grid__tile--purple:hover { background: var(--highlighter-purple); }
.tile-grid__tile--orange:hover { background: var(--highlighter-orange); }
@media (max-width: 760px) { .tile-grid__tiles { grid-template-columns: repeat(3, 1fr); } .tile-grid__tile { min-height: 96px; font: var(--text-control); } }

/* StageCards: the platform UI kit's stage track, with icon tiles */
.stage-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.stage-card { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--stroke-stamp) solid var(--rule); }
.stage-card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-2); color: var(--on-highlighter); }
.stage-card__icon--green  { background: var(--highlighter-green); }
.stage-card__icon--blue   { background: var(--highlighter-blue); }
.stage-card__icon--yellow { background: var(--highlighter-yellow); }
.stage-card__icon--pink   { background: var(--highlighter-pink); }
.stage-card__icon--purple { background: var(--highlighter-purple); }
.stage-card__icon--orange { background: var(--highlighter-orange); }
.stage-card__number { font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: var(--ink-muted); }
.stage-card__name { font: var(--text-heading-3); }
.stage-card__blurb { font: var(--text-body-lg); color: var(--ink-muted); }
@media (max-width: 760px) { .stage-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stage-cards { grid-template-columns: 1fr; } }

/* SplitCallout: a light half beside a dark half */
.split-callout { display: grid; grid-template-columns: 1fr 1fr; border: var(--stroke-hairline) solid var(--rule); }
.split-callout__half { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-12) var(--space-8); }
.split-callout__half--inverse { background: var(--ground); color: var(--main-char); }
.split-callout__body { font: var(--text-lead); }
.split-callout__footnote { margin-top: auto; font: var(--text-heading-3); }
.split-callout__title { font: var(--text-heading-2); }
.split-callout__text { font: var(--text-body-lg); color: var(--ink-muted); }
@media (max-width: 760px) { .split-callout { grid-template-columns: 1fr; } .split-callout__half { padding: var(--space-8) var(--space-6); } }

/* NodeDiagram: nodes and scroll-drawn connectors */
.node-diagram { width: 100%; max-width: 380px; }
.node-diagram__node { display: inline-flex; align-items: center; gap: var(--space-3); }
.node-diagram__icon { display: grid; place-items: center; width: 48px; height: 48px; border: var(--stroke-stamp) solid var(--on-highlighter); color: var(--on-highlighter); }
.node-diagram__icon--green  { background: var(--highlighter-green); }
.node-diagram__icon--blue   { background: var(--highlighter-blue); }
.node-diagram__icon--yellow { background: var(--highlighter-yellow); }
.node-diagram__icon--pink   { background: var(--highlighter-pink); }
.node-diagram__icon--purple { background: var(--highlighter-purple); }
.node-diagram__icon--orange { background: var(--highlighter-orange); }
.node-diagram__label { font: var(--text-control); letter-spacing: 0.04em; }
.node-diagram__conn { display: block; width: 100%; height: 80px; overflow: visible; }
.node-diagram__conn path, .node-diagram__conn rect { vector-effect: non-scaling-stroke; }
.node-diagram__conn path { fill: none; stroke: var(--main-char); stroke-width: var(--stroke-icon); }
.node-diagram__conn rect { fill: var(--main-char); transition: opacity var(--duration-base) var(--ease-standard); }

/* LeaseReveal — a full-screen first section: the strapline at the centre of the screen, and the lease intro
   that plays into it on a full load of the front page */
.lease-reveal { position: relative; display: grid; place-items: center;
  /* Starts at the very top, under the sticky header, and stops intro-peek short of the bottom of the screen so the
     next section shows. With a lead or actions, LeaseReveal instead ends it space-24 below them (their bottom margin). */
  min-height: calc(100vh - var(--intro-peek)); min-height: calc(100dvh - var(--intro-peek));
  margin-top: calc(-1 * var(--header-height)); padding: var(--intro-peek) var(--gutter) 0; }
.strapline { position: relative; z-index: 1; margin: 0; font: var(--text-strapline); text-align: center; }
.strapline__line { display: block; }
@media (max-width: 759px) { .strapline { font: var(--text-strapline-sm); } }
/* The optional lead and actions: just under the wall's last line, the top margin being the gap above, and the bottom
   margin the gap to the next section (LeaseReveal sets the top and the section's height). Two panels, as wide as their
   content and centred together on the screen (within the container's margins): the lead on the left, left aligned,
   and the buttons on the right, one above the other. Below 760px the buttons go under the lead. */
.lease-reveal__below { position: absolute; left: max(var(--gutter), (100% - var(--container-max)) / 2); right: max(var(--gutter), (100% - var(--container-max)) / 2); z-index: 1; margin: var(--space-8) 0 var(--space-24); display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: var(--space-8) var(--intro-actions-gap); text-align: left; }
.lease-reveal__lead { margin: 0; font: var(--text-lead); color: var(--ink-muted); }
.lease-reveal__actions { display: grid; gap: var(--space-3); }
@media (max-width: 759px) { .lease-reveal__below { grid-template-columns: 1fr; justify-content: stretch; } .lease-reveal__actions { justify-self: start; } }
/* With panel: the block is a panel with no background (George removed the tint), centred on the screen, laid out as CtaPanel is but centred: the lead, then the buttons in a row under it. space-8 padding and between the lead and the buttons. From 760px the sides are space-16 and the box
   container-narrow plus space-16 wide at most, so its content stays container-narrow less space-16 (the text keeps its width). */
.lease-reveal__below--panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-8);
  margin-inline: auto; padding: var(--space-8); }
@media (min-width: 760px) { .lease-reveal__below--panel { max-width: calc(var(--container-narrow) + var(--space-16)); padding-inline: var(--space-16); } }
.lease-reveal__below--panel .lease-reveal__lead { max-width: 36em; }
.lease-reveal__below--panel .lease-reveal__actions { display: flex; flex-wrap: wrap; justify-content: center; justify-self: auto; gap: var(--space-3); }

/* One span per word. Its box is the stroke: line height 1.1, so a highlighter sits on the words, not the leading */
.lr-word { position: relative; display: inline-block; padding: 0 0.04em; margin: 0 -0.04em; line-height: 1.1; white-space: nowrap; }
.lr-word--green  { background-color: var(--hl-green-fill);  color: var(--hl-green-ink); }
.lr-word--blue   { background-color: var(--hl-blue-fill);   color: var(--hl-blue-ink); }
.lr-word--yellow { background-color: var(--hl-yellow-fill); color: var(--hl-yellow-ink); }
.lr-word--pink   { background-color: var(--hl-pink-fill);   color: var(--hl-pink-ink); }
.lr-word--purple { background-color: var(--hl-purple-fill); color: var(--hl-purple-ink); }
.lr-word--orange { background-color: var(--hl-orange-fill); color: var(--hl-orange-ink); }

/* The wall: the band from the header's rule down to the lead (or the bottom of the section), inside the same side
   margins as .container (the gutter, or wider once the content reaches container-max), every line justified.
   LeaseReveal sets its height and puts its lines on the strapline's grid, so the strapline sits exactly on them.
   The height here only holds until then. */
.lease-reveal__wall { position: absolute; top: var(--header-height); left: 0; right: 0; z-index: 2;
  height: calc(100% - var(--header-height)); display: flex; align-items: flex-start;
  padding-inline: max(var(--gutter), (100% - var(--container-max)) / 2); overflow: hidden; }
.lease-reveal__text { position: relative; width: 100%; pointer-events: none; font: var(--text-strapline); line-height: 1.5; text-align: justify; text-align-last: justify; user-select: none; }
@media (max-width: 759px) { .lease-reveal__text { font: var(--text-strapline-sm); line-height: 1.8; } }

/* Tracked-edit marks: an annotation-blue underline under a run of words, and a dd.mm.yy date below the first */
.lr-mark { position: absolute; z-index: 1; pointer-events: none; font-style: normal; color: var(--annotation); }
.lr-u { left: 0; right: 0; bottom: 0.1em; height: max(1px, 0.03em); background: currentColor; }
.lr-date { left: 0; top: 100%; margin-top: 0.06em; font-family: var(--font-mono); font-weight: 400; font-size: max(8px, 0.3em);
  line-height: 1; letter-spacing: 0.06em; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* On a full load, only the page's ground shows until the intro is ready (the strapline placed, the fonts loaded,
   the wall built). Then the whole page, the wall in its first state included, fades in together over duration-reveal,
   and the intro plays. If the script never runs, the page appears after 3s. */
html[data-intro="play"] body > * { opacity: 0; animation: lr-fallback 0s linear 3s forwards; }
html[data-intro="play"][data-intro-in] body > * { opacity: 1; animation: none; transition: opacity var(--duration-reveal) var(--ease-reveal); }
/* The strapline waits for the wall's words to travel to it. If the script never runs, it appears after 10s. */
html[data-intro="play"] .strapline__word { opacity: 0; animation: lr-fallback 0s linear 10s forwards; }
@keyframes lr-fallback { to { opacity: 1; } }

/* Features — section heading, ruled items, split panels, image placeholder and swatch panel */
.section-heading { display: flex; flex-direction: column; gap: var(--space-4); max-width: 40em; margin-bottom: var(--space-12); }
.section-heading__title { font: var(--text-heading-2); }
.section-heading__lead { margin-top: var(--space-4); font: var(--text-lead); color: var(--ink-muted); }   /* 32px below the title in all */
.section-heading__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }   /* 32px below the lead, as in the hero */

/* Ruled items: a grid of columns, or one per row in a half-width panel */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-8) var(--space-6);
  margin: 0; padding: 0; list-style: none; }
.feature-grid--list { grid-template-columns: 1fr; gap: 0; }
.feature-grid__item { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--stroke-stamp) solid var(--rule); }
.feature-grid--list .feature-grid__item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); row-gap: var(--space-1);
  padding-block: var(--space-4); border-top-width: var(--stroke-hairline); }
.feature-grid--list .feature-grid__item:first-child { border-top-width: var(--stroke-stamp); }
.feature-grid--list .feature-grid__mark { grid-row: span 2; margin: 0.35em 0 0; }
.feature-grid--list .feature-grid__title, .feature-grid--list .feature-grid__desc { grid-column: 2; }
.feature-grid--list:not(:has(.feature-grid__mark)) .feature-grid__item { grid-template-columns: 1fr; }
.feature-grid--list:not(:has(.feature-grid__mark)) .feature-grid__title,
.feature-grid--list:not(:has(.feature-grid__mark)) .feature-grid__desc { grid-column: 1; }
.feature-grid__mark, .feature-grid-assemble__decoy { width: 16px; height: 16px; }
.feature-grid__mark { margin-bottom: var(--space-2); }
.feature-grid__mark--green  { background: var(--highlighter-green); }
.feature-grid__mark--blue   { background: var(--highlighter-blue); }
.feature-grid__mark--yellow { background: var(--highlighter-yellow); }
.feature-grid__mark--pink   { background: var(--highlighter-pink); }
.feature-grid__mark--purple { background: var(--highlighter-purple); }
.feature-grid__mark--orange { background: var(--highlighter-orange); }
.feature-grid__title { font: var(--text-heading-3); }
.feature-grid__desc { font: var(--text-body-lg); color: var(--ink-muted); }

/* Assembling (FeatureGrid animate): on first view the squares float loose among pale highlighter squares, settle into
   their column while the pale ones drift off and fade, then the rules and text fade in. The script sets data-state
   (static, ready, play, done) and each square's path (--x0/--y0 start, --x1/--y1 after drifting, --x2/--y2 gone) */
.feature-grid-assemble { position: relative; display: flex; align-items: center; overflow: clip; --assemble-pale: 0.35; }
.feature-grid-assemble > .feature-grid { flex: 1; min-width: 0; }
.feature-grid-assemble:is([data-state="ready"], [data-state="play"]) .feature-grid__item { border-top-color: transparent; }
.feature-grid-assemble:is([data-state="ready"], [data-state="play"]) :is(.feature-grid__title, .feature-grid__desc),
.feature-grid-assemble[data-state="ready"] .feature-grid__mark { opacity: 0; }
.feature-grid-assemble[data-state="done"] .feature-grid__item { transition: border-top-color var(--duration-assemble-fade) var(--ease-reveal); }
.feature-grid-assemble[data-state="done"] :is(.feature-grid__title, .feature-grid__desc) { transition: opacity var(--duration-assemble-fade) var(--ease-reveal); }
.feature-grid-assemble:is([data-state="play"], [data-state="done"]) .feature-grid__mark {
  animation: assemble-float var(--duration-assemble-float) var(--ease-reveal) both,
             assemble-settle var(--duration-assemble-settle) var(--ease-standard) var(--duration-assemble-float) forwards; }
.feature-grid-assemble__decoys { position: absolute; inset: 0; pointer-events: none; }
.feature-grid-assemble__decoy { position: absolute; top: 0; left: 0;
  animation: assemble-float-pale var(--duration-assemble-float) var(--ease-reveal) both,
             assemble-drift-off var(--duration-assemble-settle) var(--ease-reveal) var(--duration-assemble-float) forwards; }
@keyframes assemble-float { from { transform: translate(var(--x0), var(--y0)); opacity: 0; } to { transform: translate(var(--x1), var(--y1)); opacity: 1; } }
@keyframes assemble-settle { from { transform: translate(var(--x1), var(--y1)); } to { transform: none; } }
@keyframes assemble-float-pale { from { transform: translate(var(--x0), var(--y0)); opacity: 0; }
  to { transform: translate(var(--x1), var(--y1)); opacity: var(--assemble-pale); } }
@keyframes assemble-drift-off { from { transform: translate(var(--x1), var(--y1)); opacity: var(--assemble-pale); }
  to { transform: translate(var(--x2), var(--y2)); opacity: 0; } }

/* Split panels: text and image side by side from 1024px, stacked below */
.split-panels { display: grid; gap: var(--space-12); align-items: stretch; }
.split-panels__media { display: flex; min-height: 320px; }
.split-panels__media > * { flex: 1; }
/* Ruled items as the panel: their natural height, centred in the panel top to bottom.
   Stacked (below 1024px) the panel drops its minimum height, so no empty space opens around the rows */
.split-panels__media > .feature-grid { align-self: center; }
@media (max-width: 1023px) { .split-panels__media:has(> .feature-grid, > .feature-grid-assemble) { min-height: 0; } }
@media (min-width: 1024px) {
  .split-panels { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .split-panels__media { min-height: 480px; }
  /* Bleed: the image panel runs through the section's padding, meeting its top and bottom edges (the rule lines) */
  .split-panels--bleed .split-panels__media { margin-block: calc(-1 * var(--section-pad, 0px)); }
  /* ...and on through the gutter to the screen edge. --bleed-x: the gap from the container's content edge to the screen edge.
     --bleed-mask hands the panel's content a fade towards that edge (the RibbonPanel's text uses it: lighter and lighter);
     it runs over --bleed-fade, settling at --bleed-floor of full strength --bleed-inset short of the screen edge. The panel's own ground does not fade */
  .split-panels--bleed { --bleed-x: calc(var(--gutter) + max(0px, (100vw - var(--container-max) - 2 * var(--gutter)) / 2));
    --bleed-fade: calc(2 * var(--space-32)); --bleed-inset: 110px; --bleed-floor: 0.25; }
  .split-panels--bleed .split-panels__media:last-child { margin-right: calc(-1 * var(--bleed-x));
    --bleed-mask: linear-gradient(to right, black calc(100% - var(--bleed-inset) - var(--bleed-fade)), rgb(0 0 0 / var(--bleed-floor)) calc(100% - var(--bleed-inset))); }
  .split-panels--bleed .split-panels__media:first-child { margin-left: calc(-1 * var(--bleed-x));
    --bleed-mask: linear-gradient(to left, black calc(100% - var(--bleed-inset) - var(--bleed-fade)), rgb(0 0 0 / var(--bleed-floor)) calc(100% - var(--bleed-inset))); }
  .section:has(.split-panels--bleed) { overflow-x: clip; }   /* 100vw counts the scrollbar: never a sideways scroll */
}

/* Image placeholder: paper, a hairline frame and cross, and a mono label */
.image-placeholder { position: relative; display: grid; place-items: center; min-height: 320px;
  background: var(--paper); border: var(--stroke-hairline) solid var(--rule); }
.image-placeholder__cross { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--rule); stroke-width: var(--stroke-hairline);
  vector-effect: non-scaling-stroke; opacity: 0.35; }
.image-placeholder__cross line { vector-effect: non-scaling-stroke; }
.image-placeholder__label { position: relative; padding: var(--space-1) var(--space-2); background: var(--paper);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-muted); }

/* Swatch panel: highlighter tiles in two columns, all the same size. With an odd count the last tile sits bottom right
   and the bottom-left cell stays empty */
.swatch-panel { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, 1fr); gap: var(--space-2); }
.swatch-panel__tile { display: flex; align-items: flex-end; padding: var(--space-4); color: var(--on-highlighter); }
.swatch-panel__tile:last-child:nth-child(odd) { grid-column: 2; }
/* Sliding (SwatchPanel animate): the script sets data-state (static, ready, play, done) and offsets each tile from its
   own cell by whole cells (--dr rows, --dc columns); every tile is one cell plus one gap from the next */
.swatch-panel[data-state="ready"] .swatch-panel__tile,
.swatch-panel[data-state="play"] .swatch-panel__tile {
  transform: translate(calc(var(--dc, 0) * (100% + var(--space-2))), calc(var(--dr, 0) * (100% + var(--space-2)))); }
.swatch-panel[data-state="play"] .swatch-panel__tile { transition: transform var(--duration-swatch-slide) var(--ease-standard); }
.swatch-panel__label { font: var(--text-heading-3); }
.swatch-panel__tile--green  { background: var(--highlighter-green); }
.swatch-panel__tile--blue   { background: var(--highlighter-blue); }
.swatch-panel__tile--yellow { background: var(--highlighter-yellow); }
.swatch-panel__tile--pink   { background: var(--highlighter-pink); }
.swatch-panel__tile--purple { background: var(--highlighter-purple); }
.swatch-panel__tile--orange { background: var(--highlighter-orange); }
@media (max-width: 519px) { .swatch-panel { grid-auto-rows: minmax(96px, 1fr); } .swatch-panel__label { font: var(--text-control); letter-spacing: 0.04em; } }
.split-panels .section-heading { margin-bottom: var(--space-8); }
/* A line in a heading that starts after a small gap, e.g. the closing line of a stacked statement */
.title-break { display: block; margin-top: 0.4em; }
.title-break--small { font-size: 0.8em; margin-top: 0.8em; }   /* a slightly smaller closing line, set further apart */
.title-large { font-size: 1.2em; }          /* a slightly larger run within a heading */

/* Statement panel: the brand's hero pattern (kicker, then the display line indented beneath it) in the upper part of
   a quiet panel. On a surface section the panel takes the page ground, so it reads as a panel */
.statement-panel { display: flex; flex-direction: column; justify-content: flex-start; min-height: 320px;
  padding: var(--space-16) var(--space-8); background: var(--ground); }
.section--surface .statement-panel { background: var(--main-light); }
[data-theme="dark"] .section--surface .statement-panel, :root[data-theme="dark"] .section--surface .statement-panel { background: var(--ground); }
.statement-panel__kicker { font: var(--text-kicker); }
.statement-panel__statement { margin-left: 1em; font: var(--text-display); font-size: clamp(2.5rem, 1.2rem + 3vw, 4rem); letter-spacing: -0.01em; white-space: nowrap; }
@media (min-width: 1024px) { .statement-panel { padding: var(--space-24) var(--space-12); } }

/* Accordion — ruled question rows that open one at a time: highlighter square, question, plus/minus; the answer beneath */
.accordion { margin: 0; padding: 0; border-top: var(--stroke-stamp) solid var(--rule); interpolate-size: allow-keywords; }
.accordion__item { border-bottom: var(--stroke-hairline) solid var(--rule); }
.accordion__summary { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--space-4); align-items: start;
  padding-block: var(--space-6); cursor: pointer; list-style: none; }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion--plain .accordion__summary { grid-template-columns: 1fr auto; }
.accordion__mark { width: 16px; height: 16px; margin-top: 0.35em; }
.accordion__mark--green  { background: var(--highlighter-green); }
.accordion__mark--blue   { background: var(--highlighter-blue); }
.accordion__mark--yellow { background: var(--highlighter-yellow); }
.accordion__mark--pink   { background: var(--highlighter-pink); }
.accordion__mark--purple { background: var(--highlighter-purple); }
.accordion__mark--orange { background: var(--highlighter-orange); }
.accordion__question { font: var(--text-heading-3); text-decoration-thickness: var(--stroke-hairline); text-underline-offset: 0.2em; }
.accordion__summary:hover .accordion__question { text-decoration-line: underline; }
.accordion__toggle { display: flex; margin-top: 0.1em; }
.accordion__toggle .icon:last-child, .accordion__item[open] .accordion__toggle .icon:first-child { display: none; }
.accordion__item[open] .accordion__toggle .icon:last-child { display: inline-block; }
/* The answer sits under the question, clear of the square, at reading width */
.accordion__answer { display: flex; flex-direction: column; gap: var(--space-4); max-width: 40em;
  padding: 0 0 var(--space-6) calc(16px + var(--space-4)); font: var(--text-body-lg); color: var(--ink-muted); }
.accordion--plain .accordion__answer { padding-left: 0; }
.accordion__answer > * { margin: 0; }
/* Opening and closing: the answer's height eases where the browser can animate it; elsewhere it opens at once */
.accordion__item::details-content { block-size: 0; overflow-y: clip;
  transition: block-size var(--duration-base) var(--ease-standard), content-visibility var(--duration-base) allow-discrete; }
.accordion__item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .accordion__item::details-content { transition: none; } }

/* RibbonPanel — rows of small lease text drifting sideways like ribbons, with a still highlighted phrase on one row
   and a still statement below it. Their backgrounds are the panel's, so the moving text passes behind them */
.ribbon-panel { --ribbon-row: 17px; --ribbon-bg: var(--ground);
  position: relative; overflow: hidden; min-height: 320px; background: var(--ribbon-bg); color: var(--main-char);
  font: var(--text-document-dense); line-height: var(--ribbon-row); }
.section--surface .ribbon-panel { --ribbon-bg: var(--main-light); }
:root[data-theme="dark"] .section--surface .ribbon-panel { --ribbon-bg: var(--ground); }
.ribbon-panel__rows { position: absolute; inset: 0; mask-image: var(--bleed-mask, none); }   /* in a bleeding SplitPanels, the text grows lighter towards the screen edge */
.ribbon-panel__row { height: var(--ribbon-row); overflow: hidden; white-space: nowrap; }
.ribbon-panel__track { display: inline-block; will-change: transform; animation: ribbon-left 60s linear infinite; }
.ribbon-panel__row--reverse .ribbon-panel__track { animation-name: ribbon-right; }
.ribbon-panel.is-paused .ribbon-panel__track { animation-play-state: paused; }
@keyframes ribbon-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ribbon-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* The still phrase sits exactly on the ninth row; the statement four rows below, its left edge a little further in */
.ribbon-panel__mark { position: absolute; top: calc(var(--ribbon-row) * 8); left: 28%; padding: 0 var(--space-1);
  background: var(--ribbon-bg); white-space: nowrap; }
.ribbon-panel__statement { position: absolute; top: calc(var(--ribbon-row) * 11); left: 50%; transform: translateX(-38%);
  padding: 0.04em 0.2em 0.12em; background: var(--ribbon-bg); font: var(--text-display); font-size: clamp(2.25rem, 1rem + 2.6vw, 3.5rem);
  line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
@media (max-width: 519px) { .ribbon-panel__statement { left: var(--space-4); transform: none; } }
/* Reduced motion: base.css cuts animations to an instant, so the rows simply stand still */

/* SignIn — a full-screen sign-in page: a brand panel in the page theme beside a ruled form card on ground-tint */
/* Its own scroll box, so it works on a page whose body doesn't scroll */
.sign-in { display: grid; grid-template-rows: auto 1fr; height: 100dvh; overflow-y: auto; background: var(--ground); color: var(--main-char); }
.sign-in__panel { display: flex; flex-direction: column; padding: var(--space-4) var(--gutter); }
.sign-in__brand { display: inline-flex; align-self: flex-start; color: inherit; text-decoration: none; font-size: 1.75rem; }
.sign-in__brand .lockup { font-size: inherit; }
.sign-in__intro, .sign-in__note { display: none; }
.sign-in__title { max-width: 14em; font: var(--text-heading-2); letter-spacing: -0.01em; }
.sign-in__lead { margin-top: var(--space-6); max-width: 32em; font: var(--text-lead); color: var(--ink-muted); }
.sign-in__note { margin-top: auto; padding-top: var(--space-12); font: var(--text-body-lg); color: var(--ink-muted); }

.sign-in__main { position: relative; display: grid; place-items: center; padding: var(--space-16) var(--gutter); }
/* Doubled up to beat base.css's [data-theme] ground, which loads later */
.sign-in .sign-in__main { background: var(--ground-tint); }
.sign-in__toggle { position: absolute; top: var(--space-2); right: var(--gutter); }
.sign-in__card { width: 100%; max-width: 30rem; padding: var(--space-8) var(--space-6); border: var(--stroke-hairline) solid var(--rule); background: var(--paper); }
.sign-in__heading { font: var(--text-heading-2); letter-spacing: -0.01em; }
.sign-in__text { margin-top: var(--space-3); font: var(--text-body-lg); color: var(--ink-muted); }
.sign-in__body { margin-top: var(--space-8); }
.sign-in__footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-6);
  font: var(--text-body); color: var(--ink-muted); text-align: center; }
.sign-in__footer a { color: var(--main-char); }

@media (min-width: 520px) { .sign-in__card { padding: var(--space-12); } }
@media (min-width: 1024px) {
  .sign-in { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  /* The panel stays put while a tall form scrolls */
  .sign-in__panel { position: sticky; top: 0; height: 100dvh; padding: var(--space-12) var(--space-16); }
  .sign-in__intro { display: block; margin-top: var(--space-16); }
  .sign-in__note { display: block; }
  .sign-in__toggle { top: var(--space-4); }
}