/* Base: reset, document defaults, typography, layout primitives. Colours only through tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 var(--text-md)/var(--leading-body) var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; }
/* Film grain over the whole page; it never takes clicks. */
body::before { content: ""; position: absolute; inset: 0; z-index: 90; pointer-events: none; background: var(--grain); opacity: var(--grain-opacity); mix-blend-mode: multiply; }
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; } }
img, svg { max-width: 100%; }
a { color: var(--color-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-accent); color: var(--color-on-primary); }
.skip { position: absolute; left: var(--space-3); top: -4rem; z-index: 100; background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-2) var(--space-4); font: 500 var(--text-sm)/1.2 var(--font-mono); text-transform: uppercase; }
.skip:focus { top: var(--space-3); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-snug); margin: 0 0 var(--space-3); text-wrap: balance; }
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); margin-top: var(--space-7); font-weight: 400; }
h3 { font-size: var(--text-lg); margin-top: var(--space-5); }
p { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.3rem; margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-1); }
hr { border: 0; border-top: var(--border-w) solid var(--color-border); margin: var(--space-6) 0; }
.lead { font-size: var(--text-lg); color: var(--color-text); max-width: 40rem; line-height: 1.5; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.n { font-variant-numeric: tabular-nums; }
/* Section label: a four-point star and a small mono caption. */
.eyebrow { font: 400 var(--text-xs)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.eyebrow::before { content: "\2726"; font-size: 0.95rem; line-height: 1; }

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: var(--container-narrow); }
.page { padding: var(--space-8) 0 var(--space-9); }
.page > .wrap > h1:first-child, .page > .wrap > .eyebrow + h1 { margin-top: 0; }
/* Plain pages open like a drawing sheet: centred label, title and lead. */
.page:not(.app) > .wrap > :is(.eyebrow, h1, .lead) { text-align: center; margin-inline: auto; }
.page:not(.app) > .wrap > .eyebrow { justify-content: center; }
.page:not(.app) > .wrap > h1 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.page:not(.app) > .wrap > .lead { margin-bottom: var(--space-7); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-4) 0; }
.stack > * + * { margin-top: var(--space-4); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid > .card { margin: 0; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.86em; }
code { background: var(--color-accent-tint); border: var(--border-w) solid var(--color-border); padding: 0.05em 0.35em; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
pre { margin: var(--space-3) 0 var(--space-4); overflow-x: auto; line-height: 1.55; }
pre code { background: none; border: 0; padding: 0; font-size: 1em; overflow-wrap: normal; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-5); margin: 0; }
dl.kv dt { color: var(--color-text-muted); } dl.kv dd { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Components: buttons, frames, cards, badges, inputs, code panels, tables, accordion, notices, charts, header and footer. */

/* Button: solid accent, square, mono caps with a chevron. .plain / .ghost is the outlined one, .lg for hero and call-to-action. */
.btn, button { font: 500 var(--text-sm)/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 2.6rem; padding: 0 var(--space-5); border-radius: var(--radius-md); border: var(--border-w) solid var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); text-decoration: none; transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); box-shadow: var(--shadow-glow); }
.btn::before, button[type=submit]::before { content: "\203A"; font-size: 1.25em; line-height: 0.8; margin-right: -0.2rem; transition: transform var(--duration-fast) var(--ease); }
.btn:hover, button:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); text-decoration: none; }
.btn:hover::before, button[type=submit]:hover::before { transform: translateX(3px); }
.btn:active, button:active { transform: translateY(1px); }
.btn.plain, button.plain, .btn.ghost { background: transparent; color: var(--color-text); border-color: var(--color-text); box-shadow: none; }
.btn.plain:hover, button.plain:hover, .btn.ghost:hover { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
button.plain::before { content: none; }
button.danger { background: transparent; color: var(--color-bad); border-color: var(--color-bad); box-shadow: none; }
button.danger:hover { background: var(--color-bad-soft); }
button.danger::before { content: none; }
.btn.lg { min-height: 3rem; padding: 0 var(--space-6); font-size: var(--text-sm); }
.btn.on-band { background: var(--color-on-band); color: var(--color-band); border-color: var(--color-on-band); box-shadow: none; }
.btn.on-band:hover { background: var(--color-band-hover); color: var(--color-on-band); border-color: var(--color-on-band); }

/* Frame: a hairline box with small squares at its corners, like a mark on a drawing. Add .accent for the accent border. */
.frame { position: relative; border: var(--border-w) solid var(--color-border-strong); background: var(--color-panel); }
.frame.accent { border-color: var(--color-accent); }
.frame::before { content: ""; position: absolute; inset: calc(var(--marker) / -2); pointer-events: none; background:
  linear-gradient(var(--color-accent), var(--color-accent)) top left / var(--marker) var(--marker) no-repeat,
  linear-gradient(var(--color-accent), var(--color-accent)) top right / var(--marker) var(--marker) no-repeat,
  linear-gradient(var(--color-accent), var(--color-accent)) bottom left / var(--marker) var(--marker) no-repeat,
  linear-gradient(var(--color-accent), var(--color-accent)) bottom right / var(--marker) var(--marker) no-repeat; }

/* Card. */
.card { position: relative; background: var(--color-panel); border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-5); margin: var(--space-4) 0; transition: border-color var(--duration) var(--ease); }
.card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; }
.card h2, .card h3 { margin-top: 0; }
.card.tint { background: var(--color-accent-tint); border-color: var(--color-accent-soft); }
.card.feature { display: flex; flex-direction: column; gap: var(--space-2); }
.card.feature:hover { border-color: var(--color-accent); }
.card.feature .icon { width: 2.6rem; height: 2.6rem; border: var(--border-w) solid var(--color-accent); color: var(--color-accent); display: grid; place-items: center; margin-bottom: var(--space-3); }
.card.feature p { color: var(--color-text-muted); margin: 0; font-size: var(--text-sm); }
.stat { font: 400 var(--text-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }

/* Badge / tag: a small mono chip. */
.badge, .tag { display: inline-flex; align-items: center; gap: var(--space-1); font: 400 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.03em; padding: 0.35rem 0.55rem; border-radius: var(--radius-sm); border: var(--border-w) solid var(--color-border-strong); color: var(--color-text-muted); background: var(--color-panel); white-space: nowrap; }
.badge.accent { background: var(--color-accent-tint); border-color: var(--color-accent-soft); color: var(--color-text); }
.badge.accent b { color: var(--color-accent); font-weight: 500; }
.tag.ok, .badge.ok { color: var(--color-ok); border-color: var(--color-ok); background: var(--color-ok-soft); }
.tag.bad, .badge.bad { color: var(--color-bad); border-color: var(--color-bad); background: var(--color-bad-soft); }
.tag.warn, .badge.warn, .badge.soon { color: var(--color-warn); border-color: var(--color-warn); background: var(--color-warn-soft); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* Inputs. */
label { display: block; font: 400 var(--text-xs)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-2); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { font: inherit; width: 100%; max-width: 100%; min-height: 2.75rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-md); border: var(--border-w) solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--color-text-faint); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
textarea { min-height: 7.5rem; font-family: var(--font-mono); font-size: var(--text-sm); resize: vertical; }
input[type=checkbox] { accent-color: var(--color-primary); width: 1.05rem; height: 1.05rem; margin: 0.2rem var(--space-2) 0 0; flex: none; }
.check { font: 400 var(--text-sm)/1.5 var(--font-text); text-transform: none; letter-spacing: 0; display: flex; align-items: flex-start; color: var(--color-text-muted); }
.hint { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.hp { position: absolute; left: -5000px; }
.field-row { display: grid; gap: 0 var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Code panel: a light drawing-sheet panel with an accent frame, mono text and a title bar with an id and a square. */
pre { background: var(--color-surface-sunk); color: var(--color-text); border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4); }
.codewin { margin: 0; position: relative; background: var(--color-panel); color: var(--color-text); border: var(--border-w) solid var(--color-accent); box-shadow: var(--shadow-md); text-align: left; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.codewin-bar { display: flex; align-items: center; gap: var(--space-2); padding: 0.55rem var(--space-4); border-bottom: var(--border-w) solid var(--color-accent); font: 400 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.04em; color: var(--color-accent); }
.codewin-bar i { order: 99; width: 0.95rem; height: 0.95rem; border: var(--border-w) solid var(--color-accent); margin-left: var(--space-2); }
.codewin-bar i + i, .codewin-bar i + i + i { display: none; }
.codewin-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codewin pre { margin: 0; border: 0; border-radius: 0; background: transparent; font-size: 0.78rem; padding: var(--space-4); white-space: pre-wrap; overflow-wrap: anywhere; }
.codewin .status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-block: var(--border-w) dashed var(--color-border-strong); font: 400 var(--text-xs)/1.4 var(--font-mono); color: var(--color-text-muted); }
.status .ok { color: var(--color-ok); } .status .dot { width: 0.5rem; height: 0.5rem; background: var(--color-success-dot); display: inline-block; margin-right: 0.35rem; }
.copy { display: none; min-height: 1.6rem; padding: 0 var(--space-3); font: 400 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.03em; text-transform: none; background: transparent; color: var(--color-accent); border-color: var(--color-accent); box-shadow: none; }
.copy::before { content: none; }
.copy:hover { background: var(--color-accent); color: var(--color-on-primary); border-color: var(--color-accent); }
.js .copy { display: inline-flex; }
.t-k { color: var(--code-key); } .t-s { color: var(--code-string); } .t-n { color: var(--code-number); } .t-kw { color: var(--code-keyword); font-weight: 500; } .t-c { color: var(--code-comment); }
.cursor::after { content: ""; display: inline-block; width: 0.55em; height: 1em; vertical-align: -0.12em; margin-left: 2px; background: var(--color-accent); animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* Table: hairlines, square. */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: 0.75rem var(--space-3); border-bottom: var(--border-w) solid var(--color-border); vertical-align: top; }
th { font: 400 var(--text-xs)/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-surface-sunk); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: var(--color-accent-tint); }
.table-scroll { overflow-x: auto; border: var(--border-w) solid var(--color-border-strong); background: var(--color-panel); -webkit-overflow-scrolling: touch; }
.table-scroll table th:first-child, .table-scroll table td:first-child { padding-left: var(--space-4); }
tbody th[scope="row"] { text-transform: none; letter-spacing: 0; font: 500 var(--text-sm)/1.4 var(--font-text); color: var(--color-text); background: transparent; }
td:first-child code { white-space: nowrap; overflow-wrap: normal; }

/* Accordion (details/summary, no script). */
details.acc { border-bottom: var(--border-w) solid var(--color-border-strong); }
details.acc:first-of-type { border-top: var(--border-w) solid var(--color-border-strong); }
details.acc > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; font: 400 var(--text-lg)/1.4 var(--font-display); }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary:hover { color: var(--color-accent); }
details.acc > summary::after { content: "+"; font: 300 1.5rem/1 var(--font-mono); color: var(--color-accent); transition: transform var(--duration) var(--ease); }
details.acc[open] > summary::after { transform: rotate(45deg); }
details.acc > div { padding: 0 0 var(--space-4); color: var(--color-text-muted); max-width: 46rem; }
details.acc > div p:last-child { margin-bottom: 0; }
details.card > summary { cursor: pointer; font-weight: 500; }

/* Notices. */
.notice { border: var(--border-w) solid var(--color-accent-soft); border-left: 3px solid var(--color-accent); background: var(--color-accent-tint); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; font-size: var(--text-sm); }
.notice.err { border-color: var(--color-bad); border-left-width: 3px; background: var(--color-bad-soft); color: var(--color-text); }

/* Meter and charts of the platform. */
.meter { height: 6px; background: var(--color-border); overflow: hidden; margin: var(--space-2) 0 var(--space-1); } .meter > i { display: block; height: 100%; background: var(--color-accent); } .meter.over > i { background: var(--color-warn); }
svg.chart { width: 100%; height: auto; display: block; } svg.chart .bar { fill: var(--color-accent); } svg.chart .line { fill: none; stroke: var(--color-accent); stroke-width: 2; } svg.chart text { fill: var(--color-text-muted); font-size: 11px; font-family: var(--font-mono); } svg.chart .axis { stroke: var(--color-line); }
svg.chart circle { fill: var(--color-bg); stroke: var(--color-accent); stroke-width: 1.5; }

/* Demo notice strip: always visible, sticky together with the header. A thin mono line with the accent dot. */
.site-top { position: sticky; top: 0; z-index: 50; }
.demo { background: var(--color-bg-alt); color: var(--color-text-muted); font: 400 var(--text-xs)/1.4 var(--font-mono); letter-spacing: 0.03em; text-align: center; padding: 0.4rem var(--gutter); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.1rem 0.8rem; border-bottom: var(--border-w) solid var(--color-border); }
.demo strong { font-weight: 500; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 0.5rem; }
.demo strong::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--color-accent); }
.demo span { color: var(--color-text-muted); }

/* Header and navigation: paper-coloured, no box, mono caps on the right. */
header.top { background: color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--border-w) solid var(--color-border); }
.bar { display: flex; align-items: center; gap: var(--space-5); min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font: 500 1.45rem/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-text); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand svg { width: 1.75rem; height: 1.75rem; flex: none; }
.brand .dot { color: var(--color-accent); }
.brand .mark-bg { fill: var(--color-accent); } .brand .mark-fg { fill: var(--color-on-primary); }
nav.main { display: none; gap: var(--space-5); margin-left: auto; font: 400 var(--text-sm)/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
nav.main a { color: var(--color-text); text-decoration: none; padding: 0.5rem 0; border-bottom: var(--border-w) solid transparent; }
nav.main a:hover { color: var(--color-accent); }
nav.main a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.bar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
nav.main + .bar-actions { margin-left: var(--space-5); }
.bar-actions .btn { min-height: 2.3rem; padding: 0 var(--space-4); font-size: var(--text-xs); }
.bar-actions .signin { font: 400 var(--text-sm)/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text); text-decoration: none; padding: 0.5rem 0; display: none; }
.bar-actions .signin:hover { color: var(--color-accent); }
.theme { display: none; width: 2.3rem; min-height: 2.3rem; padding: 0; background: transparent; color: var(--color-text); border-color: var(--color-border-strong); box-shadow: none; }
.theme::before { content: none; }
.theme:hover { background: var(--color-accent-tint); color: var(--color-accent); border-color: var(--color-accent); }
.js .theme { display: inline-flex; }
.theme svg { width: 1.1rem; height: 1.1rem; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border: var(--border-w) solid var(--color-border-strong); color: var(--color-text); }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--color-accent-tint); border-color: var(--color-accent); }
.menu nav { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(18rem, calc(100vw - 2 * var(--gutter))); background: var(--color-surface); border: var(--border-w) solid var(--color-accent); box-shadow: var(--shadow-lg); padding: var(--space-2); display: flex; flex-direction: column; }
.menu nav a { padding: 0.8rem var(--space-3); color: var(--color-text); text-decoration: none; font: 400 var(--text-sm)/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.menu nav a:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.menu nav a[aria-current="page"] { color: var(--color-accent); }
.who { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.who form { display: inline; } .who button { min-height: 2rem; padding: 0 var(--space-3); }
.sub { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: 0 0 var(--space-2); font: 400 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.sub a { color: var(--color-text-muted); text-decoration: none; padding: 0.5rem 0; border-bottom: var(--border-w) solid transparent; }
.sub a:hover { color: var(--color-accent); }
.sub a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
@media (min-width: 62rem) { nav.main { display: flex; } .menu { display: none; } .bar-actions .signin { display: inline-block; } }
@media (max-width: 40rem) { .bar-actions .btn { display: none; } .who > span { display: none; } }

/* Footer: paper, a faint drawing behind, columns with a hairline on the left. */
footer.foot { position: relative; overflow: hidden; background: var(--color-bg-alt); border-top: var(--border-w) solid var(--color-border-strong); padding: var(--space-8) 0 var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
footer.foot .wrap { position: relative; z-index: 1; }
footer.foot a { color: var(--color-text); text-decoration: none; } footer.foot a:hover { color: var(--color-accent); }
.foot-art { position: absolute; left: -4rem; bottom: -9rem; width: 40rem; max-width: 90%; color: var(--color-line); opacity: 0.55; pointer-events: none; }
.foot-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.foot-grid .foot-brand { grid-column: 1 / -1; max-width: 26rem; }
@media (min-width: 62rem) { .foot-grid { grid-template-columns: 1.6fr repeat(4, 1fr); } .foot-grid .foot-brand { grid-column: auto; } }
.foot-grid nav { border-left: var(--border-w) solid var(--color-border-strong); padding-left: var(--space-5); }
.foot .brand { margin-bottom: var(--space-4); }
.foot h2 { font: 400 var(--text-lg)/1.2 var(--font-display); color: var(--color-text-faint); margin: 0 0 var(--space-4); letter-spacing: 0; }
.foot ul { list-style: none; padding: 0; margin: 0; } .foot li { margin-bottom: var(--space-3); }
.foot nav a { font: 400 var(--text-sm)/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.foot .badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.foot-legal { margin-top: var(--space-9); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-faint); }
@media print { .site-top, footer.foot, .noprint, body::before { display: none; } body { background: #fff; color: #000; } }

/* Sections of the marketing pages. Layout only; colours and sizes come from the tokens. */
.section { padding: var(--space-8) 0; position: relative; }
.section.alt { background: var(--color-bg-alt); border-block: var(--border-w) solid var(--color-border); }
.section-head { max-width: 46rem; margin-bottom: var(--space-7); }
.section-head h2 { margin-top: 0; font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: 400; }
.section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head.center .lead { margin-inline: auto; }
.section-head .lead { color: var(--color-text-muted); }

/* Drawing parts used in the hero. */
.blueprint { width: 100%; height: 100%; color: var(--color-text-faint); }
.blueprint > :not(.bp-grid) { opacity: 0.85; }
.blueprint .bp-mark { fill: var(--color-bg); stroke: var(--color-accent); }
.blueprint .bp-label { fill: var(--color-accent); stroke: none; font: 400 9px var(--font-mono); letter-spacing: 0.04em; }
.blueprint .bp-t { fill: var(--color-text-faint); stroke: none; font: 400 9px var(--font-mono); }
.blueprint .bp-grid { color: var(--color-line); }

/* Hero: text left and low, drawing right with the panel laid over it. */
.hero { padding: var(--space-7) 0 var(--space-8); overflow: hidden; background: var(--glow); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.hero h1 em { font-style: normal; }
.hero h1 { font-size: var(--text-hero); line-height: 1.12; letter-spacing: -0.015em; font-weight: 500; color: var(--color-accent); margin-bottom: var(--space-4); }
.hero .lead { font-size: var(--text-xl); max-width: 33rem; color: var(--color-text); }
.hero-announce { margin: 0 0 var(--space-5); }
.hero-announce a { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: var(--space-3); padding: 0.55rem 0.85rem; border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-panel); font: 400 var(--text-sm)/1.2 var(--font-text); max-width: 100%; }
.hero-announce a::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-round); background: var(--color-accent); flex: none; }
.hero-announce a:hover { border-color: var(--color-accent); }
.hero-announce b { font: 500 var(--text-xs)/1 var(--font-mono); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.06em; }
.hero-form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 var(--space-3); max-width: 34rem; }
.hero-form .field { flex: 1 1 14rem; } .hero-form input { min-height: 3rem; }
.hero-form .btn { min-height: 3rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font: 400 var(--text-xs)/1.4 var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-muted); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.hero-meta li { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.hero-meta li::before { content: "\2726"; color: var(--color-accent); }
.hero-art { position: relative; padding-bottom: 1rem; }
.hero-art .blueprint { display: block; width: 100%; height: auto; aspect-ratio: 640 / 520; }
.hero-art .codewin { position: relative; margin: -9rem 0.5rem 0; }
.hero .codewin .status ~ pre { max-height: 8rem; overflow: auto; }
@media (min-width: 62rem) { .hero { padding: var(--space-8) 0 var(--space-8); } .hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-7); } .hero-art { margin-bottom: 5rem; } .hero-art .codewin { position: absolute; left: 14%; right: -1.5rem; bottom: -6rem; margin: 0; } }

/* Logo strip: hairline strip, drawn wordmarks in the faint ink colour. */
.logos { padding: var(--space-5) 0; border-block: var(--border-w) solid var(--color-border); background: var(--color-panel); }
.logos-label { text-align: center; font: 400 var(--text-xs)/1.5 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-faint); margin: 0 0 var(--space-4); }
.logo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-4) var(--space-5); align-items: center; list-style: none; padding: 0; margin: 0; }
.logo-row li { margin: 0; display: flex; justify-content: center; }
.logo { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-text-faint); font-size: 1.05rem; line-height: 1; white-space: nowrap; transition: color var(--duration) var(--ease); }
.logo:hover { color: var(--color-text); }
.logo svg { width: 1.4rem; height: 1.4rem; flex: none; }
.logo.l-brandt { font: 700 1.1rem/1 var(--font-display); letter-spacing: -0.04em; }
.logo.l-nordwerk { font: 500 0.85rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.logo.l-pixel { font: 400 1.1rem/1 var(--font-mono); letter-spacing: -0.06em; }
.logo.l-halden { font: 700 1.2rem/1 Georgia, "Times New Roman", serif; font-style: italic; }
.logo.l-veritas { font: 600 1.1rem/1 var(--font-text); letter-spacing: -0.02em; }
.logo.l-atlas { font: 500 0.85rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }

/* The accent band: full-bleed colour, fine grid on one side, ghost numeral, white text. */
.band { position: relative; color: var(--color-on-band); background: linear-gradient(180deg, var(--color-band), color-mix(in srgb, var(--color-band) 78%, var(--paper-0))); overflow: hidden; padding: var(--space-8) 0; }
.band::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.35; mix-blend-mode: overlay; pointer-events: none; }
.band .wrap { position: relative; z-index: 1; }
.band-frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border: var(--border-w) solid var(--color-band-line); }
.band-frame::before { content: ""; position: absolute; inset: calc(var(--marker) / -2); pointer-events: none; background:
  linear-gradient(var(--color-on-band), var(--color-on-band)) top left / var(--marker) var(--marker) no-repeat,
  linear-gradient(var(--color-on-band), var(--color-on-band)) top right / var(--marker) var(--marker) no-repeat,
  linear-gradient(var(--color-on-band), var(--color-on-band)) bottom left / var(--marker) var(--marker) no-repeat,
  linear-gradient(var(--color-on-band), var(--color-on-band)) bottom right / var(--marker) var(--marker) no-repeat; opacity: 0.8; }
.band-text { padding: var(--space-7) var(--space-6); }
.band .eyebrow { color: var(--color-on-band); }
.band h2 { margin: 0 0 var(--space-5); color: var(--color-on-band); font-size: var(--text-3xl); line-height: var(--leading-tight); }
.band p { color: var(--color-on-band-muted); font-size: var(--text-lg); max-width: 34rem; }
.band p strong { color: var(--color-on-band); font-weight: 500; }
.band-grid { position: relative; border-top: var(--border-w) solid var(--color-band-line); padding: var(--space-6); min-height: 18rem; background-image: linear-gradient(var(--color-band-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-band-line) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; }
.band-grid .ghost { position: absolute; top: var(--space-4); right: var(--space-5); font: 400 clamp(3rem, 8vw, 6rem)/1 var(--font-mono); color: var(--color-band-line); letter-spacing: -0.05em; }
.band-stats { position: relative; list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.band-stats li { margin: 0; padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--color-band) 70%, transparent); border: var(--border-w) solid var(--color-band-line); }
.band-stats .stat { display: block; font: 400 clamp(1.4rem, 1rem + 1.2vw, 2.1rem)/1.1 var(--font-mono); color: var(--color-on-band); letter-spacing: -0.03em; margin-bottom: var(--space-2); }
.band-stats .l { font: 400 var(--text-xs)/1.4 var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-on-band-muted); }
@media (min-width: 62rem) { .band-frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .band-grid { border-top: 0; border-left: var(--border-w) solid var(--color-band-line); } }
.footnote { font: 400 var(--text-xs)/1.5 var(--font-mono); color: var(--color-text-faint); margin: var(--space-5) 0 0; }

/* Feature rows. */
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-6) 0; }
.feature-row + .feature-row { border-top: var(--border-w) solid var(--color-border); }
.feature-row h3 { font-size: var(--text-2xl); margin-top: 0; font-weight: 400; }
.feature-row p { color: var(--color-text-muted); }
.ticks { list-style: none; padding: 0; margin: var(--space-4) 0; } .ticks li { padding-left: 1.6rem; position: relative; margin-bottom: var(--space-2); }
.ticks li::before { content: "\2726"; position: absolute; left: 0; top: 0; color: var(--color-accent); font-size: 0.9rem; }
@media (min-width: 62rem) { .feature-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); } .feature-row.flip > :first-child { order: 2; } }
.visual { padding: var(--space-5); }
.profile { display: grid; gap: var(--space-3); }
.profile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.profile-head h4 { margin: 0; font-size: var(--text-lg); font-weight: 500; }
.profile-head small { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.profile dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--text-sm); }
.profile dt { color: var(--color-text-muted); font: 400 var(--text-xs)/1.8 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; } .profile dd { margin: 0; font-weight: 500; }
.profile .roles { border-top: var(--border-w) dashed var(--color-border-strong); padding-top: var(--space-3); }
.bars { display: grid; gap: var(--space-3); }
.bars .bar-line { display: grid; grid-template-columns: 5.5rem 1fr 3rem; gap: var(--space-3); align-items: center; font: 400 var(--text-xs)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; }
.bars .bar-line b { font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.bars .track { height: 0.7rem; background: var(--color-accent-soft); overflow: hidden; }
.bars .track i { display: block; height: 100%; background: var(--color-accent); }
.visual-title { font: 400 var(--text-xs)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-4); }

/* Steps. */
.steps { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: step; }
.steps li { counter-increment: step; margin: 0; position: relative; background: var(--color-panel); border: var(--border-w) solid var(--color-border-strong); padding: var(--space-5); transition: border-color var(--duration) var(--ease); }
.steps li:hover { border-color: var(--color-accent); }
.steps li::before { content: "0" counter(step); font: 400 var(--text-2xl)/1 var(--font-mono); color: var(--color-accent); display: block; margin-bottom: var(--space-4); }
.steps h3 { margin-top: 0; font-weight: 500; } .steps p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* "Try the API": CSS-only switch between pre-rendered answers. */
.try { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.try > input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.try-controls { padding: var(--space-5); align-self: start; background: var(--color-surface); }
.try-controls h3 { margin: 0 0 var(--space-3); font: 400 var(--text-xs)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); }
.try-choice { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.try-choice label { margin: 0; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); padding: 0.7rem var(--space-3); border: var(--border-w) solid var(--color-border-strong); color: var(--color-text); font: 500 var(--text-sm)/1.3 var(--font-text); letter-spacing: 0; text-transform: none; background: var(--color-bg); }
.try-choice label::before { content: ""; width: 0.8rem; height: 0.8rem; border: 1.5px solid var(--color-text-faint); flex: none; }
.try-choice label:hover { border-color: var(--color-accent); }
.try-choice label small { margin-left: auto; font: 400 var(--text-xs)/1 var(--font-mono); color: var(--color-text-muted); }
.try-opt label { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0 0 var(--space-4); cursor: pointer; color: var(--color-text); font: 500 var(--text-sm)/1.3 var(--font-text); letter-spacing: 0; text-transform: none; }
.try-opt label::before { content: ""; width: 2.3rem; height: 1.2rem; background: var(--color-border-strong); flex: none; transition: background var(--duration-fast); box-shadow: inset 0 0 0 0.15rem var(--color-border-strong); }
.try-opt label span { display: block; }
.try-opt label small { display: block; color: var(--color-text-muted); font: 400 var(--text-xs)/1.4 var(--font-mono); }
.try:has(#try-c:checked) .try-opt label::before { background: var(--color-accent); box-shadow: inset 0 0 0 0.15rem var(--color-accent), inset 1.1rem 0 0 -0.01rem var(--color-bg); }
.try:has(#try-1:checked) label[for="try-1"], .try:has(#try-2:checked) label[for="try-2"], .try:has(#try-3:checked) label[for="try-3"] { border-color: var(--color-accent); background: var(--color-accent-tint); }
.try:has(#try-1:checked) label[for="try-1"]::before, .try:has(#try-2:checked) label[for="try-2"]::before, .try:has(#try-3:checked) label[for="try-3"]::before { border-color: var(--color-accent); background: var(--color-accent); }
.try:has(input:focus-visible) .try-controls { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.try-answer { display: none; }
.try:has(#try-1:checked):not(:has(#try-c:checked)) .a-1-0, .try:has(#try-1:checked):has(#try-c:checked) .a-1-1,
.try:has(#try-2:checked):not(:has(#try-c:checked)) .a-2-0, .try:has(#try-2:checked):has(#try-c:checked) .a-2-1,
.try:has(#try-3:checked):not(:has(#try-c:checked)) .a-3-0, .try:has(#try-3:checked):has(#try-c:checked) .a-3-1 { display: block; }
.try .codewin { box-shadow: none; }
.try .codewin .status ~ pre { max-height: 22rem; overflow: auto; }
@media (min-width: 62rem) { .try { grid-template-columns: 20rem minmax(0, 1fr); } }

/* Pricing. */
.pricing-table { min-width: 44rem; }
.pricing-table th, .pricing-table td { padding: 0.9rem var(--space-4); text-align: left; vertical-align: middle; }
.pricing-table thead th { background: var(--color-surface); text-transform: none; letter-spacing: 0; font: 400 var(--text-lg)/1.2 var(--font-display); color: var(--color-text); vertical-align: bottom; padding-top: var(--space-5); border-bottom: 1px solid var(--color-text); }
.pricing-table tbody th { font-weight: 400; color: var(--color-text-muted); }
.pricing-table tbody tr:hover td, .pricing-table tbody tr:hover th { background: transparent; }
.pricing-table .hl { background: var(--color-accent-tint); }
.pricing-table thead th.hl { background: var(--color-accent-tint); border-top: 2px solid var(--color-accent); }
.pricing-table .price { font: 400 var(--text-2xl)/1 var(--font-mono); letter-spacing: -0.04em; display: block; margin-top: var(--space-2); }
.pricing-table .per { font: 400 var(--text-xs)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
.pricing-table td.cta { padding-bottom: var(--space-5); }
.pricing-table td.cta .btn { min-height: 2.3rem; padding: 0 var(--space-3); width: 100%; font-size: var(--text-xs); }
.pricing-table .badge { margin-bottom: var(--space-2); }
.pricing-table th:first-child, .pricing-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface); }
.pricing-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); font: 400 var(--text-xs)/1.5 var(--font-mono); color: var(--color-text-muted); }
.faq { max-width: 50rem; margin-top: var(--space-8); }
.faq h3 { margin-bottom: var(--space-4); font: 400 var(--text-2xl)/1.2 var(--font-display); }

/* Testimonials. */
.quotes { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.quote .badge { align-self: flex-start; }
.quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-panel); border: var(--border-w) solid var(--color-border-strong); padding: var(--space-5); transition: border-color var(--duration) var(--ease); }
.quote:hover { border-color: var(--color-accent); }
.quote blockquote { margin: 0; font: 400 var(--text-lg)/1.5 var(--font-display); flex: 1; }
.quote blockquote::before { content: "\201E"; display: block; font: 400 3rem/0.6 var(--font-display); color: var(--color-accent); margin-bottom: var(--space-2); }
.quote figcaption { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); border-top: var(--border-w) solid var(--color-border); padding-top: var(--space-4); }
.quote .avatar { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font: 400 var(--text-xs)/1 var(--font-mono); border: var(--border-w) solid var(--color-accent); color: var(--color-accent); flex: none; }
.quote figcaption b { display: block; font-weight: 500; } .quote figcaption span { color: var(--color-text-muted); }

/* Security. */
.sec-grid { display: grid; gap: var(--space-5) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.sec-item { border-top: var(--border-w) solid var(--color-text); padding-top: var(--space-4); }
.sec-item .icon { color: var(--color-accent); display: inline-block; margin-bottom: var(--space-2); }
.sec-item h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: 500; }
.sec-item p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.sec-honest { margin-top: var(--space-6); display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.sec-honest .card h3 { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-md); font-weight: 500; }

/* Teasers. */
.teasers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 62rem) { .teasers { grid-template-columns: 1fr 1fr 1fr; } }
.teaser-list { list-style: none; padding: 0; margin: 0; }
.teaser-list li { padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--color-border); margin: 0; }
.teaser-list li:last-child { border-bottom: 0; }
.teaser-list a { font-weight: 500; color: var(--color-text); text-decoration: none; display: block; }
.teaser-list a:hover { color: var(--color-accent); }
.teaser-list small { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.teaser-list p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.teaser-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); }
.teaser-head h3 { margin: 0; font-weight: 400; font-size: var(--text-xl); } .teaser-head a { font: 400 var(--text-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }

/* Closing: an ASCII field with the sign-up card laid over it, then the call-to-action frame and the assurances. */
.ascii-field { position: relative; overflow: hidden; padding: var(--space-8) 0; border-top: var(--border-w) solid var(--color-border); background: var(--color-bg); }
.ascii { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--color-line); font: 400 9px/1 var(--font-mono); letter-spacing: 0; white-space: pre; overflow: hidden; user-select: none; pointer-events: none; }
.ascii-field .wrap { position: relative; z-index: 1; display: flex; justify-content: center; }
.signup-card { position: relative; background: var(--color-surface); color: var(--color-text); border: var(--border-w) solid var(--color-border-strong); padding: var(--space-6); width: 100%; }
.signup-card h2, .signup-card h3 { margin: 0 0 var(--space-3); font-size: var(--text-2xl); font-weight: 400; color: var(--color-text); }
.signup-card > p { color: var(--color-text); margin-bottom: var(--space-2); }
.signup-card label:first-of-type { margin-top: var(--space-3); }
.signup-card .btn, .signup-card button[type=submit] { width: 100%; min-height: 3rem; margin-top: var(--space-5); }
.signup-card .fine { margin: var(--space-4) 0 0; font: 400 var(--text-xs)/1.5 var(--font-mono); color: var(--color-text-muted); text-align: center; }
.ascii-field .signup-card { max-width: 44rem; }
.signup-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: start; }
@media (min-width: 62rem) { .signup-page { grid-template-columns: minmax(0, 1fr) 28rem; } }
.cta-frame-wrap { padding: var(--space-8) 0 var(--space-6); text-align: center; }
.mini-site { width: 7.5rem; color: var(--color-line); display: block; margin: 0 auto -0.2rem; }
.cta-frame { max-width: 50rem; margin: 0 auto; padding: var(--space-6) var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); text-align: left; background: var(--color-panel); }
.cta-frame p { margin: 0; font: 400 var(--text-xl)/1.3 var(--font-display); color: var(--color-text-muted); }
.cta-frame p strong { display: block; font-size: var(--text-3xl); font-weight: 400; color: var(--color-accent); line-height: 1.2; }
.assure { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); padding: var(--space-5) 0 var(--space-8); }
.assure-item { text-align: center; display: grid; justify-items: center; gap: var(--space-2); font: 400 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.assure-item .ring { width: 5.2rem; height: 5.2rem; border-radius: var(--radius-round); border: var(--border-w) solid var(--color-border-strong); display: grid; place-items: center; color: var(--color-accent); position: relative; }
.assure-item .ring::after { content: ""; position: absolute; inset: 0.5rem; border-radius: var(--radius-round); border: var(--border-w) dashed var(--color-accent); opacity: 0.6; }
.assure-item b { font-weight: 500; color: var(--color-text); } .assure-item span.s { color: var(--color-text-faint); }
.assure-cta { text-align: center; padding-bottom: var(--space-8); }

/* Docs layout: sticky contents list beside the text. */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.doc-toc { font-size: var(--text-sm); }
.doc-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.doc-toc a { color: var(--color-text-muted); text-decoration: none; display: block; padding: 0.25rem 0; font: 400 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.doc-toc a:hover { color: var(--color-accent); }
.doc-toc h2 { font: 400 var(--text-xs)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-3); }
.doc-body { min-width: 0; max-width: 50rem; }
.doc-body > h1 { font-size: var(--text-3xl); } .doc-body h2 { scroll-margin-top: 7rem; padding-top: var(--space-3); }
@media (min-width: 62rem) {
  .doc { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-8); }
  .doc-toc { position: sticky; top: 7.5rem; align-self: start; border-left: var(--border-w) solid var(--color-border-strong); padding-left: var(--space-4); } .doc-toc ul { flex-direction: column; gap: 0; }
}

/* Blog and changelog. */
.post-card h3 { margin: 0 0 var(--space-1); font-weight: 500; } .post-card h3 a { color: var(--color-text); text-decoration: none; } .post-card h3 a:hover { color: var(--color-accent); }
.post-card .meta { font: 400 var(--text-xs)/1 var(--font-mono); color: var(--color-accent); margin-bottom: var(--space-3); text-transform: uppercase; letter-spacing: 0.04em; }
.prose { max-width: 40rem; } .prose p { font-size: var(--text-lg); line-height: 1.7; }
.changelog { list-style: none; padding: 0; margin: var(--space-6) 0 0; border-left: var(--border-w) solid var(--color-border-strong); }
.changelog > li { position: relative; padding: 0 0 var(--space-6) var(--space-6); margin: 0; }
.changelog > li::before { content: ""; position: absolute; left: -0.3rem; top: 0.3rem; width: 0.6rem; height: 0.6rem; background: var(--color-accent); }
.changelog time { font: 400 var(--text-xs)/1 var(--font-mono); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.05em; }
.changelog h2 { margin: var(--space-2) 0; font-size: var(--text-xl); }
.changelog ul { color: var(--color-text-muted); }

/* 404. */
.notfound { text-align: center; padding: var(--space-9) 0; }
.notfound .code { font: 400 clamp(5rem, 22vw, 11rem)/1 var(--font-mono); letter-spacing: -0.08em; color: var(--color-accent); margin: 0; }
.notfound .links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

.page.app h2 { margin-top: var(--space-6); }
.page.app table th:first-child, .page.app table td:first-child { padding-left: var(--space-3); }
@media (max-width: 40rem) { .band-stats .stat { font-size: 1.15rem; } .band-text, .band-grid { padding: var(--space-5); } }