/* /css/site.css */
/* Maincode — site.css
   Dark, calm, centred: the Matilda site's layout language with Maincode's flair.
   Manrope (the wordmark's shapes) for argument, Berkeley Mono for data,
   one accent: phosphor green. */

/* ---------- fonts ---------- */
/* Inter carries an optical-size axis (opsz 14–32): font-optical-sizing:auto
   gives headlines the tighter Display cut and body copy the Text cut. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/GeistVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/HankenGroteskVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('/fonts/OnestVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('/fonts/MonaSansVariable-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGroteskVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSansVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/BricolageGrotesqueVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Host Grotesk';
  src: url('/fonts/HostGroteskVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Funnel Display';
  src: url('/fonts/FunnelDisplayVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/SchibstedGroteskVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/ArchivoVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('/fonts/SoraVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geologica';
  src: url('/fonts/GeologicaVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/BerkeleyMono-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/BerkeleyMono-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* Dark by default. Names are roles, not colours: "paper" is the page,
     "ink" the strongest text. Contrast (on page / on card): ink 17.6 / 16.6,
     ink-2 10.5 / 9.9, muted 6.0 / 5.6, green 8.7 / 8.1. */
  --paper: #0b0b0b;
  --paper-2: #0e0e0e;
  --card: #151515;
  --rule: #212121;
  --rule-strong: #313131;

  --ink: #fafafa;
  --ink-2: #b3b3b3;
  --muted: #8c8c8c;
  --dim-ink: #6f6f6f; /* second half of two-tone headlines; large text only (3.9:1) */

  --night: #070707;
  --night-2: #111111;
  --night-3: #181818;
  --night-rule: #1f1f1f;
  --night-line: #2e2e2e;
  --night-fg: #b3b3b3;
  --night-dim: #8c8c8c;
  --night-hi: #fafafa;
  --night-grid: rgba(255, 255, 255, 0.07);

  --green: #00c47c; /* Maincode green */
  --green-rgb: 0 196 124; /* same colour as channels, for alpha mixes */
  --glow-a: 0.45; /* strength of the slight glow on green elements */
  --green-ink: var(--green);
  --green-wash: rgb(var(--green-rgb) / 0.12);
  --matilda: #e8c547;
  --matilda-ink: #e8c547;
  --warn: #e8854a;
  --err: #d16060;

  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --container: 1200px;
  --gutter: 24px;
  --radius: 12px;
  --space-section: clamp(80px, 9vw, 136px);
  --header-h: 68px;
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* The colour scheme and ground live on <html>, not <body>: the browser takes
   its canvas from the root, and that canvas shows through mid page-transition.
   On <body> the root stayed light, so a browser could flash white between pages. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); color-scheme: dark; background-color: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 16.5px/1.6 var(--font-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
button { font: inherit; color: inherit; }
main { display: block; }
main:focus { outline: none; }
::selection { background: rgb(var(--green-rgb) / 0.24); color: var(--ink); }
:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 2px 5px;
  font: 500 11px/1.3 var(--font-mono);
  text-align: center;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  font: 500 13px var(--font-mono); text-decoration: none; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--text { max-width: calc(720px + 2 * var(--gutter)); }
.wrap--media { max-width: calc(1040px + 2 * var(--gutter)); }

.section { padding: var(--space-section) 0; position: relative; }
.section--tight { padding: calc(var(--space-section) * 0.55) 0; }
.section--flush { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--rule { }
.section--tint { background: transparent; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--top { align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 900px) {
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
}
/* :not(:first-child) lifts specificity above single-class margin resets like .lede */
.stack-sm > :not(:first-child) { margin-top: 12px; }
.stack-md > :not(:first-child) { margin-top: 24px; }
.stack-lg > :not(:first-child) { margin-top: 40px; }
.stack-md > .kicker + .h2, .stack-md > .kicker + .h3 { margin-top: 20px; }

/* ---------- type ---------- */
.display {
  font-size: calc(clamp(38px, 5.2vw, 76px) * var(--hs, 1));
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.h1 { font-size: calc(clamp(36px, 4.6vw, 64px) * var(--hs, 1)); line-height: 1.05; letter-spacing: -0.035em; }
.h2 { font-size: calc(clamp(28px, 3.2vw, 46px) * var(--hs, 1)); line-height: 1.08; letter-spacing: -0.03em; }
.h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; letter-spacing: -0.02em; }
.lede { font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 54ch; margin: 0; }
.body-lg { font-size: 18px; line-height: 1.6; }
.prose { max-width: 62ch; }
.prose p { color: var(--ink-2); }
.prose a, .text-link { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover, .text-link:hover { color: var(--ink); }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.accent { color: var(--green-ink); }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
  font: 400 13.5px/1.2 var(--font-mono); color: var(--ink-2);
}
.kicker::before { content: '///'; color: var(--green); font-weight: 700; letter-spacing: -0.14em; margin-right: 2px; }
.kicker--matilda::before { color: var(--matilda); }
/* the second half of a headline: no accent colour (Nov 9: Kees didn't want
   green text in headlines; grey two-tone was rejected earlier too) */
.dim { color: inherit; }
.num { font: 400 12px/1 var(--font-mono); color: var(--muted); letter-spacing: 0.02em; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px;
  font: 600 15px/1 var(--font-sans);
  letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.2s;
}
.btn--lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn--sm { height: 38px; padding: 0 17px; font-size: 14px; gap: 8px; }
@property --a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
/* Dark pill; a short arc of light travels its 1px border, trailed by a soft
   green halo; on hover a highlight sweeps across the face. */
.btn--primary, .btn--green {
  position: relative; isolation: isolate;
  color: var(--ink); border-radius: 999px;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%) padding-box,
    linear-gradient(180deg, #1c1c1c, #0c0c0c) padding-box,
    conic-gradient(from var(--a), rgba(255, 255, 255, 0.1) 0deg, rgba(255, 255, 255, 0.1) 200deg, rgb(var(--green-rgb) / 0.85) 260deg, color-mix(in srgb, var(--green) 18%, white) 285deg, rgb(var(--green-rgb) / 0.85) 305deg, rgba(255, 255, 255, 0.1) 340deg) border-box;
  background-size: 260% 100%, 100% 100%, 100% 100%;
  background-position: 130% 0, 0 0, 0 0;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  animation: btn-orbit 4.5s linear infinite;
  transition: background-position 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, color 0.2s;
}
.btn--primary:hover, .btn--green:hover {
  background-position: -30% 0, 0 0, 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
@keyframes btn-orbit { to { --a: 360deg; } }

/* primary button options (html[data-btn], site.config btn). orbit is the one
   above; the others share a dark face, keep still at rest and answer the
   cursor in 0.3–0.45s. */
:is([data-btn='slash'], [data-btn='bracket'], [data-btn='charge']) :is(.btn--primary, .btn--green) {
  animation: none;
  background: linear-gradient(180deg, #1b1b1b, #0d0d0d);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 0.3s, box-shadow 0.3s, color 0.2s;
}
:is([data-btn='slash'], [data-btn='bracket'], [data-btn='charge']) :is(.btn--primary, .btn--green):is(:hover, :focus-visible) {
  border-color: rgb(var(--green-rgb) / 0.6);
}
/* slash: the /// mark leads the label; on hover the slashes run forward */
[data-btn='slash'] :is(.btn--primary, .btn--green) { padding-left: 17px; gap: 12px; }
[data-btn='slash'] .btn--lg:is(.btn--primary, .btn--green) { padding-left: 21px; }
/* a window three slashes wide over six; text-indent parks it on the second
   three, and soft edges hide the neighbours' overhang */
[data-btn='slash'] :is(.btn--primary, .btn--green)::before {
  content: '//////'; order: -2; flex: none; overflow: hidden; white-space: nowrap;
  width: calc(3ch - 0.42em + 4px);
  font: 700 0.95em/1 var(--font-mono); letter-spacing: -0.14em; color: var(--green);
  text-indent: calc(0.42em - 3ch + 2px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4px, #000 calc(100% - 4px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4px, #000 calc(100% - 4px), transparent);
}
[data-btn='slash'] :is(.btn--primary, .btn--green)::after {
  content: ''; order: -1; flex: none; width: 1px; height: 1.1em; background: rgba(255, 255, 255, 0.13);
}
[data-btn='slash'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 22px rgb(var(--green-rgb) / 0.12);
}
[data-btn='slash'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible)::before {
  text-indent: 2px; transition: text-indent 0.42s cubic-bezier(0.19, 1, 0.22, 1);
}
/* bracket: blueprint corners stand off the button and snap in; a scan
   crosses the face */
[data-btn='bracket'] :is(.btn--primary, .btn--green) {
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent, rgb(var(--green-rgb) / 0.24), transparent) no-repeat -80% 0 / 40% 100%,
    linear-gradient(180deg, #1b1b1b, #0d0d0d);
}
[data-btn='bracket'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible) {
  background-position: 180% 0, 0 0;
  transition: background-position 0.45s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.3s, box-shadow 0.3s;
}
[data-btn='bracket'] :is(.btn--primary, .btn--green)::before {
  content: ''; position: absolute; inset: -6px; pointer-events: none; opacity: 0.6;
  --c: var(--green); --l: 7px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l) no-repeat;
  transition: inset 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s;
}
[data-btn='bracket'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible)::before { inset: -3px; opacity: 1; }
/* charge: a green line along the bottom; on hover deep green fills upward */
[data-btn='charge'] :is(.btn--primary, .btn--green) {
  background:
    linear-gradient(0deg, #0f4430, #0a261c) no-repeat 0 100% / 100% 0%,
    linear-gradient(180deg, #1b1b1b, #0d0d0d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgb(var(--green-rgb) / 0.75);
  transition: background-size 0.38s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.3s, box-shadow 0.3s, color 0.2s;
}
[data-btn='charge'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible) {
  background-size: 100% 100%, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 var(--green);
}

/* sans options (html[data-font], site.config font) */
[data-font='inter'] { --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='geist'] { --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='hanken'] { --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='onest'] { --font-sans: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='mona'] { --font-sans: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='space'] { --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='instrument'] { --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='bricolage'] { --font-sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='host'] { --font-sans: 'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='funnel'] { --font-sans: 'Funnel Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='schibsted'] { --font-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='archivo'] { --font-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='sora'] { --font-sans: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='geologica'] { --font-sans: 'Geologica', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font='space'] :is(.display, .h1, .h2, .statement__text) { letter-spacing: -0.03em; }
[data-font='archivo'] :is(.display, .h1, .h2, .statement__text) { font-stretch: 112%; letter-spacing: -0.025em; }
[data-font='funnel'] :is(.display, .h1, .h2, .statement__text) { letter-spacing: -0.02em; }
/* Maincode heritage: headlines in Berkeley Mono, body in Space Grotesk */
[data-font='mono'] { --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
[data-font='mono'] :is(.display, .h1, .h2, .h3, .statement__text, .post__title) { font-family: var(--font-mono); font-weight: 400; letter-spacing: -0.045em; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 15px/1 var(--font-sans);
  color: var(--ink); text-decoration: none;
  padding-bottom: 6px; border-bottom: 1px solid var(--rule-strong);
  transition: border-color 0.15s, color 0.15s;
}
.link-arrow:hover { border-color: var(--green); }
.link-quiet {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: color 0.2s;
}
.link-quiet:hover { color: var(--green); }
/* as a <button> (copy actions): drop the browser's box, keep the link look */
button.link-quiet { padding-top: 0; padding-left: 0; padding-right: 0; border: 0; cursor: pointer; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ---------- announcement bar ---------- */
.announce { background: var(--card); border-bottom: 1px solid var(--rule); color: var(--night-fg); font: 12.5px/1 var(--font-mono); }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: 12px; height: 38px; min-width: 0; }
.announce__label { color: var(--night-dim); flex: none; }
.announce__link { color: var(--night-hi); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.announce__link:hover { color: var(--green); }
.dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--green); box-shadow: 0 0 0 3px rgb(var(--green-rgb) / 0.18);
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 11, 0.78);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 0; /* no line under the nav, ever */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; color: var(--ink); flex: none; }
.logo { height: 21px; width: auto; }
.logo__mark { fill: var(--green); }

.nav { justify-self: center; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 11px;
  font: 450 14.5px/1 var(--font-sans); color: var(--ink-2);
  text-decoration: none; background: none; border: 0; border-radius: 8px; cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.nav__link:hover { color: var(--ink); }
.nav__link, .header-talk { white-space: nowrap; }
[data-glitching] { overflow: hidden; }
/* underline draws in from the left on hover (polish.css keeps it off the current page) */
.nav__link::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 1px; background: var(--green);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.28s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }
/* glitch: a brief green/white split while the label scrambles (site.js) */
.is-glitch { animation: glitch 0.26s steps(2) 1; }
@keyframes glitch {
  0% { text-shadow: 1.5px 0 rgb(var(--green-rgb) / 0.9), -1.5px 0 rgba(255, 255, 255, 0.5); transform: translateX(0.5px); }
  50% { text-shadow: -1.5px 0 rgb(var(--green-rgb) / 0.9), 1.5px 0 rgba(255, 255, 255, 0.5); transform: translateX(-0.5px); }
  100% { text-shadow: none; transform: none; }
}
.nav__link[aria-current='page'], .nav__toggle[data-current] { color: var(--ink); }
.nav__link[aria-current='page']::after, .nav__toggle[data-current]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 18px; justify-self: end; }
.header-talk { font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.header-talk:hover { color: var(--ink); }

.menu-toggle {
  display: none; position: relative;
  width: 40px; height: 40px; margin-right: -8px;
  background: none; border: 0; cursor: pointer;
}
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform 0.2s, top 0.2s; }
.menu-toggle span:first-child { top: 16px; }
.menu-toggle span:last-child { top: 23px; }
.menu-toggle[aria-expanded='true'] span:first-child { top: 19.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:last-child { top: 19.5px; transform: rotate(-45deg); }

.mobile-nav { border-top: 1px solid var(--rule); background: var(--paper); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }

@media (max-width: 1180px) { .header-talk { display: none; } }
@media (max-width: 1060px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .menu-toggle { display: inline-block; }
  .header-actions { gap: 10px; }
}
@media (max-width: 420px) { .header-actions .btn--sm { padding: 0 11px; } }

/* ---------- hero & page heroes (centred, the Matilda site's layout) ---------- */
.home-hero, .page-hero { position: relative; isolation: isolate; text-align: center; }
/* Home hero lockups (site.config homeHero; all three render in dev with a switcher).
   Each keeps its graphic inside the first screen. */
.home-hero { display: flex; align-items: stretch; min-height: min(100svh, 1000px); padding: clamp(40px, 7vh, 96px) 0 clamp(28px, 4vh, 48px); }
.home-hero > .wrap { width: 100%; }
.home-hero--stage .home-hero__inner { justify-content: flex-start; height: 100%; }
.home-hero--stage .display { margin-top: 18px; }
.home-hero--stage .lede { margin-top: 18px; }
.home-hero--stage .cta-row { margin-top: 26px; }
.home-hero--stage .display { max-width: 16ch; }
.hero-art--flow { position: relative; width: 100%; max-width: 1060px; margin-top: clamp(22px, 3.4vh, 40px); padding: clamp(14px, 2vw, 22px); background: rgba(16, 16, 16, 0.72); border: 1px solid var(--rule); border-radius: var(--radius); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.home-hero--split { align-items: center; }
.home-hero__split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; text-align: left; }
.home-hero__split .display { margin-top: 24px; max-width: 13ch; }
.home-hero__split .lede { margin: 24px 0 0; max-width: 46ch; color: #cfcfcf; }
.home-hero .home-hero__split .cta-row { justify-content: flex-start; margin-top: 34px; }
.home-hero__split .hero-art { display: flex; justify-content: center; }
.home-hero__split .layers__svg { max-width: 540px; width: 100%; }
.home-hero--mark { align-items: center; }
.hero-art--mark { position: relative; height: min(68vh, 600px); min-height: 360px; cursor: grab; }
.ascii3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 960px) { .hero-art--mark { height: 46vh; min-height: 280px; width: 100%; } }
@media (max-width: 960px) {
  .home-hero__split { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .home-hero__split > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .home-hero__split .lede { margin-left: auto; margin-right: auto; }
  .home-hero .home-hero__split .cta-row { justify-content: center; }
  .home-hero__split .layers__svg { max-width: 300px; }
}
.layers--solo { display: block; }
.home-hero--stage:not([hidden]) ~ .flow-section .panel { display: none; }
.home-hero--stage:not([hidden]) ~ .flow-section { padding-top: clamp(24px, 4vw, 48px); }
.home-hero__inner, .page-hero .wrap { display: flex; flex-direction: column; align-items: center; }
.home-hero .display { margin-top: 26px; }
.home-hero .lede { margin: 22px auto 0; max-width: 58ch; color: #cfcfcf; }
.home-hero .cta-row { justify-content: center; margin-top: 34px; }

.page-hero { padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 104px); }
.page-hero--compact { padding-bottom: clamp(40px, 5vw, 64px); }
.page-hero .wrap > div, .page-hero .stack-md { display: flex; flex-direction: column; align-items: center; }
/* ...except a hero's button row, which stays a row (it used to be patched page by page) */
.page-hero .wrap > :is(.cta-row, .mtl-cta, .pd-install-row) { flex-direction: row; justify-content: center; }
.page-hero .h1, .page-hero .display { margin: 26px auto 0; max-width: 15ch; }
.page-hero .lede { margin: 28px auto 0; max-width: 62ch; color: #cfcfcf; }
.page-hero .stack-md > .lede { margin-top: 28px; }
.page-hero .cta-row, .page-hero .stack-md > .cta-row { justify-content: center; margin-top: 36px; }
.page-hero .checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 30px; text-align: left; }
.page-hero .infra-art { margin-top: clamp(40px, 5vw, 64px); }

.hero-chip {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 5px 14px 5px 5px; border-radius: 10px;
  border: 1px solid var(--rule-strong); background: rgba(255, 255, 255, 0.03);
  font-size: 14px; color: var(--ink-2); text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.hero-chip:hover { border-color: rgb(var(--green-rgb) / 0.5); background: rgb(var(--green-rgb) / 0.06); color: var(--ink); }
.hero-chip__tag { flex: none; padding: 5px 9px; border-radius: 6px; background: rgb(var(--green-rgb) / 0.14); color: var(--green); font: 500 12px/1 var(--font-mono); }
.hero-chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-chip__arrow { transition: transform 0.2s; }
.hero-chip:hover .hero-chip__arrow { transform: translateX(3px); }

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; margin-bottom: clamp(40px, 5vw, 72px); flex-wrap: wrap; }
.section-head .h2 { max-width: 20ch; }
.section-head .kicker + .h2 { margin-top: 20px; }
/* intro blocks centre, as on the Matilda site */
.section-head--split { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; }
.section-head--split > div { display: flex; flex-direction: column; align-items: center; }
.section-head--split .h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.section-head--split .lede { margin: 22px auto 0; max-width: 60ch; }
.section-head--split > .stack-md { align-items: center; margin-top: 22px; }
.section-head--split > .stack-md > .lede { margin-top: 0; }

/* ---------- panel (abliteration-style explainer box) ---------- */
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.panel__head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--rule);
  font: 500 11.5px/1.2 var(--font-mono); color: var(--muted);
}
.panel__head code { font: 12px var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--muted); }
.panel__body { padding: clamp(24px, 3.4vw, 48px); }

/* animated independence flow (templates/partials/flow-art.html):
   a plate of open weights lifts off the stack, passes through the training
   chamber (scan plane, your material dropping in), comes out aligned (green)
   and slots into a rack inside "your walls". One 8s loop. */
.fx-flow { display: block; width: 100%; height: auto; overflow: visible; }
.fx-flow path, .fx-flow rect, .fx-flow circle { vector-effect: non-scaling-stroke; }
.fx-top { fill: #1a1a1a; stroke: #8f8f8f; stroke-width: 1.25; stroke-linejoin: round; }
.fx-side { fill: #0e0e0e; stroke: #8f8f8f; stroke-width: 1.25; stroke-linejoin: round; }
.fx-side--r { fill: #101010; }
.fx-line { fill: none; stroke: #3d3d3d; stroke-width: 1; }
.fx-edge { fill: none; stroke: #8f8f8f; stroke-width: 1.25; }
.fx-edge--back { stroke: #2a2a2a; stroke-dasharray: 3 4; }
.fx-floor { fill: rgb(var(--green-rgb) / 0.035); stroke: #262626; }
.fx-face { fill: #0e0e0e; stroke: #8f8f8f; stroke-width: 1.25; stroke-linejoin: round; }
.fx-face--r { fill: #101010; }
.fx-face--top { fill: #1a1a1a; }
.fx-walls { fill: none; stroke: #4a4a4a; stroke-dasharray: 4 5; }
.fx-mask { fill: var(--card); }
.fx-label { font: 17px var(--font-mono); fill: var(--ink); letter-spacing: -0.01em; }
.fx-label--sm { font-size: 13px; fill: var(--muted); }
.fx-sub { font: 12.5px var(--font-mono); fill: var(--muted); }
.fx-track { fill: none; stroke: #3a3a3a; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1.5 7.5; animation: fx-track 0.9s linear infinite; }
.fx-scan { fill: rgb(var(--green-rgb) / 0.07); stroke: rgb(var(--green-rgb) / 0.7); stroke-width: 1; animation: fx-scan 2.6s ease-in-out infinite alternate; }
.fx-traveller { opacity: 0; animation: fx-travel 8s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.fx-aligned { fill: rgb(var(--green-rgb) / 0.26); stroke: var(--green); stroke-width: 1.2; opacity: 0; animation: fx-align 8s linear infinite; }
.fx-sheet { opacity: 0; animation: fx-drop 8s ease-in infinite; }
.fx-sheet--2 { animation-delay: 0.3s; }
.fx-sheet--3 { animation-delay: 0.6s; }
.fx-led { fill: #262626; animation: fx-led 8s linear infinite; }
.fx-flow.is-paused, .fx-flow.is-paused * { animation-play-state: paused; }

@keyframes fx-track { to { stroke-dashoffset: -9; } }
@keyframes fx-scan { from { transform: translateY(0); } to { transform: translateY(-104px); } }
@keyframes fx-travel {
  0%   { transform: translate(180px, 148px); opacity: 0; }
  5%   { transform: translate(180px, 148px); opacity: 1; }
  12%  { transform: translate(180px, 120px); opacity: 1; }
  30%  { transform: translate(540px, 132px); }
  50%  { transform: translate(540px, 132px); }
  57%  { transform: translate(720px, 132px); }
  67%  { transform: translate(901px, 4px); }
  72%  { transform: translate(901px, 4px) scale(0.9); }
  80%  { transform: translate(901px, 60px) scale(0.6); opacity: 1; }
  85%  { transform: translate(901px, 64px) scale(0.6); opacity: 0; }
  100% { transform: translate(901px, 64px) scale(0.6); opacity: 0; }
}
@keyframes fx-align { 0%, 34% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes fx-drop {
  0%, 14% { transform: translateY(-24px); opacity: 0; }
  18% { opacity: 1; }
  32% { transform: translateY(64px); opacity: 0.9; }
  36%, 100% { transform: translateY(72px); opacity: 0; }
}
@keyframes fx-led { 0%, 79% { fill: #262626; } 82%, 97% { fill: var(--green); } 100% { fill: #262626; } }

.flow-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; text-align: center; }
.flow-cap__title { margin: 0; font-size: 16.5px; font-weight: 500; color: var(--ink); }
.flow-cap__sub { margin: 6px auto 0; max-width: 32ch; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) {
  .fx-label, .fx-mask, .fx-sub { display: none; }
  .flow-caps { grid-template-columns: 1fr; text-align: left; gap: 18px; }
  .flow-cap__sub { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* a composed still: the aligned plate sitting in the chamber, rack lit */
  .fx-traveller { opacity: 1; transform: translate(540px, 132px); }
  .fx-aligned { opacity: 1; }
  .fx-led { fill: var(--green); }
  .fx-scan { transform: translateY(-52px); }
}

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat { padding: 32px 28px 28px 0; display: flex; flex-direction: column; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--rule); }
.stat__value { margin: 0; font: 400 clamp(30px, 3.4vw, 46px)/1 var(--font-mono); letter-spacing: -0.04em; color: var(--ink); }
.stat__value small { font-size: 0.45em; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.stat__label { margin: 16px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.stat__src { margin-top: auto; padding-top: 14px; font: 12px var(--font-mono); color: var(--green-ink); text-decoration: none; }
.stat__src:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: 24px 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--rule); }
}

/* ---------- by the numbers: proof cards with real-data mini charts ---------- */
.proof-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: clamp(56px, 8vw, 112px) 0 clamp(32px, 4vw, 48px); }
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.proof__card { display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 24px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; }
.proof__label { font: 12.5px var(--font-mono); color: var(--muted); }
.proof__viz { width: 100%; height: 78px; margin: 10px 0 8px; overflow: visible; }
.proof__viz .bar { fill: #2a2a2a; transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
.proof__viz .bar--h { transform-origin: 0 50%; }
.proof__viz .bar.hi { fill: var(--green); }
.proof__viz .bar:nth-of-type(2) { transition-delay: 0.06s; }
.proof__viz .bar:nth-of-type(3) { transition-delay: 0.12s; }
.proof__viz .bar:nth-of-type(4) { transition-delay: 0.18s; }
.proof__viz .base { stroke: var(--rule-strong); stroke-width: 1; }
.proof__viz text { font: 8.5px var(--font-mono); fill: var(--muted); }
.proof__viz .ring-track { fill: none; stroke: #2a2a2a; stroke-width: 6; }
.proof__viz .ring { fill: none; stroke: var(--green); stroke-width: 6; stroke-dasharray: 150.8; stroke-dashoffset: 36.2; transition: stroke-dashoffset 1s cubic-bezier(0.19, 1, 0.22, 1); }
html.mo .proof__viz:not(.is-in) .bar { transform: scaleY(0); }
html.mo .proof__viz:not(.is-in) .bar--h { transform: scaleX(0); }
html.mo .proof__viz:not(.is-in) .ring { stroke-dashoffset: 150.8; }
.proof__card .stat__value { font-size: clamp(30px, 2.8vw, 40px); color: var(--ink); }
.proof__desc { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.proof__go { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--ink); }
@media (max-width: 1000px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .proof { grid-template-columns: 1fr; } .proof__card { min-height: 0; } }

/* ---------- hairline cell grids ---------- */
.cells {
  --cols: 3;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden;
}
.cells--2 { --cols: 2; }
.cells--4 { --cols: 4; }
.cell { background: var(--card); padding: 28px 28px 32px; display: flex; flex-direction: column; }
.cell__num { display: block; margin-bottom: 36px; }
.cell__title { font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 10px; }
.cell__body { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.cell__body + .cell__body { margin-top: 10px; }
.cell__foot { margin-top: auto; padding-top: 22px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 18px 0 0; padding: 0; }
.tags li { font: 11.5px/1 var(--font-mono); color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 10px; }
@media (max-width: 960px) { .cells, .cells--4 { --cols: 2; } }
@media (max-width: 600px) { .cells, .cells--2, .cells--4 { --cols: 1; } .cell__num { margin-bottom: 20px; } }

/* ---------- product cards (Matilda family) ---------- */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.products--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.products--5 .product:nth-child(-n + 2) { grid-column: span 3; }
.products--5 .product:nth-child(n + 3) { grid-column: span 2; }
.product {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 28px; min-height: 280px;
  transition: border-color 0.15s;
}
.product:hover { border-color: var(--rule-strong); }
.product__glyph {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper);
  font: 500 15px var(--font-mono); color: var(--matilda-ink);
}
.product__name { margin: 28px 0 8px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.product__desc { margin: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; max-width: 44ch; }
.product__label { margin: auto 0 10px; padding-top: 28px; font: 500 11px var(--font-mono); color: var(--muted); }
.product__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.product__links a { font-size: 15px; color: var(--ink); text-decoration: none; display: inline-flex; gap: 6px; }
.product__links a::after { content: '↗'; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.product__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.product__links a.is-internal::after { content: '→'; }
@media (max-width: 960px) {
  .products, .products--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products--5 .product:nth-child(n) { grid-column: auto; }
}
@media (max-width: 600px) { .products, .products--5 { grid-template-columns: 1fr; } }

/* ---------- checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.checklist--1 { grid-template-columns: 1fr; }
.checklist li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.checklist li::before {
  content: ''; width: 13px; height: 7px; margin-top: 5px;
  border-left: 2px solid var(--green-ink); border-bottom: 2px solid var(--green-ink);
  transform: rotate(-45deg);
}
@media (max-width: 600px) { .checklist { grid-template-columns: 1fr; } }

/* ---------- product window (Matilda transcript) ---------- */
.window {
  background: var(--night); color: var(--night-fg);
  border: 1px solid var(--night-line); border-radius: var(--radius); overflow: hidden;
  font: 13.5px/1.7 var(--font-mono);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgb(var(--green-rgb) / 0.04);
}
.window__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--night-rule); color: var(--night-dim); font-size: 12px; }
.window__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--night-line); }
.window__title { margin-left: 10px; }
.window__status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.window__body { padding: 22px 22px 26px; min-height: 360px; }
.t { margin: 0 0 10px; }
.t--user { color: var(--night-hi); }
.t--user::before { content: '> '; color: var(--green); }
.t--think { color: var(--night-dim); }
.t--think::before { content: '✻ '; color: var(--matilda); }
.t--step { color: var(--night-fg); padding-left: 18px; position: relative; margin-bottom: 4px; }
.t--step::before { content: '·'; position: absolute; left: 4px; color: var(--night-dim); }
.t--step.is-done::before { content: '✓'; left: 2px; color: var(--green); }
.t--ask { color: var(--matilda); border-left: 2px solid var(--matilda); padding-left: 12px; }
.t--answer { color: var(--night-hi); }
.t--answer em { color: var(--green); font-style: normal; }
.t--cite { display: inline-block; margin: 2px 6px 0 0; padding: 1px 8px; border: 1px solid var(--night-line); border-radius: 999px; font-size: 11.5px; color: var(--night-fg); }
.t--input {
  margin-top: 18px; padding: 10px 12px; border: 1px solid var(--night-line); border-radius: 4px;
  color: var(--night-dim); display: flex; gap: 8px; align-items: center;
}
.t--input .caret { color: var(--green); width: 0.5em; }
.window.is-playing .t:not(.is-shown) { visibility: hidden; }
/* streaming (site.js): live token count, block cursor, spinners */
.window__meter { margin-right: 14px; font: 11.5px var(--font-mono); color: var(--green); font-variant-numeric: tabular-nums; }
.window.is-streaming .window__status .dot { animation: live-dot 0.5s steps(2) infinite; }
@keyframes live-dot { 50% { opacity: 0.35; } }
.stream-cursor { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px; vertical-align: -0.17em; background: var(--green); }
.t--think.is-spinning::before { content: attr(data-spin) '  '; color: var(--matilda); }
.t--step.is-spinning::before { content: attr(data-spin); left: 2px; color: var(--matilda); }

/* ---------- night bands ---------- */
.section--night { background: transparent; color: var(--night-fg); }
.section--night h2, .section--night h3, .section--night .h2, .section--night .h3 { color: var(--night-hi); }
.section--night .lede, .section--night p { color: var(--night-fg); }
.section--night .num { color: var(--night-dim); }
.section--night .kicker { color: var(--night-fg); }
.section--night .muted { color: var(--night-dim); }
.section--night :focus-visible { outline-color: var(--green); }
.section--night .btn--ghost { color: var(--night-hi); border-color: var(--night-line); }
.section--night .btn--ghost:hover { border-color: var(--green); }
.section--night .link-arrow { color: var(--night-hi); border-color: var(--night-line); }
.section--night .link-arrow:hover { border-color: var(--green); color: var(--green); }
.section--night .text-link, .section--night .prose a { color: var(--green); }
.section--night .cells { background: var(--night-rule); border-color: var(--night-rule); }
.section--night .cell { background: var(--night-2); }
.section--night .cell__title { color: var(--night-hi); }
.section--night .cell__body { color: var(--night-fg); }
.section--night .checklist li { color: var(--night-hi); }
.section--night .checklist li::before { border-color: var(--green); }

/* metal-to-model stack: one row per layer, top to bottom as the plates sit.
   No numbers: the plates beside it already give the order. */
.stack { overflow: hidden; border: 1px solid var(--night-line); border-radius: var(--radius); background: rgba(15, 20, 18, 0.7); }
.stack__layer {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 24px; align-items: center;
  padding: 22px 28px; border-top: 1px solid var(--night-rule); text-decoration: none;
  transition: background-color 0.15s;
}
.stack__layer:first-child { border-top: 0; }
a.stack__layer:hover { background: var(--night-3); }
.stack__name { font: 500 12.5px var(--font-mono); color: var(--green); }
.stack__what { color: var(--night-hi); font-size: 16px; }
.stack__what span { display: block; color: var(--night-dim); font-size: 14px; margin-top: 2px; }
.stack__go { font: 12px var(--font-mono); color: var(--night-dim); transition: color 0.15s, transform 0.2s; }
a.stack__layer:hover .stack__go { color: var(--green); transform: translateX(2px); }
/* phones: the layer name sits over its title; the arrow stays so the row reads as a link */
@media (max-width: 760px) {
  .stack__layer { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 20px; }
  .stack__name { grid-column: 1; }
  .stack__what { grid-column: 1; }
  .stack__go { grid-column: 2; grid-row: 1 / span 2; }
}

/* ascii mark used in night bands and the footer */
.ascii-mark { font: 10px/1.05 var(--font-mono); color: #1d2a24; white-space: pre; margin: 0; user-select: none; }
.ascii-mark .on { color: var(--green); }
.ascii-mark .trail { color: #0b6b47; }

/* metal-to-model: exploded isometric stack beside the layer list.
   site.js lights one layer at a time, bottom to top; hovering a row pins it.
   The plates carry no labels: the lit plate and its row light together. */
.layers { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.layers__art { display: flex; justify-content: center; }
.layers__svg { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.plate { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.plate path { stroke: var(--night-line); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill 0.45s, stroke 0.45s; }
.plate .top { fill: #101010; }
.plate .side-l { fill: #090909; }
.plate .side-r { fill: #0d0d0d; }
.plate .detail { fill: none; stroke: #2b2b2b; }
.plate.is-active { transform: translateY(-10px); }
.plate.is-active .top { fill: color-mix(in srgb, var(--green) 14%, #0b0b0b); stroke: var(--green); }
.plate.is-active .side-l, .plate.is-active .side-r { stroke: rgb(var(--green-rgb) / 0.55); }
.plate.is-active .detail { stroke: var(--green); }
.stack__layer.is-active { background: var(--night-3); }
.stack__layer.is-active .stack__go { color: var(--green); }
/* One column: the art would sit a screen above rows it can't point at, so
   the list stands alone (the hero's solo plates keep theirs). */
@media (max-width: 900px) {
  .layers { grid-template-columns: 1fr; }
  .layers__svg { max-width: 300px; }
  .layers:not(.layers--solo) .layers__art { display: none; }
}

/* ---------- FAQ (native details) ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__intro .h2 { margin-top: 20px; }
.faq__intro .lede { margin-top: 24px; }
.faq__list { display: grid; gap: 8px; }
.faq__item { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.faq__item summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 24px; align-items: center; /* unnumbered since Nov 10 */
  padding: 18px 20px; list-style: none; cursor: pointer;
  font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: rgba(255, 255, 255, 0.025); }
.faq__icon { position: relative; width: 22px; height: 22px; border: 1px solid var(--rule); border-radius: 2px; }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 6px; right: 6px; top: 10px; height: 1px; background: var(--ink); transition: transform 0.2s, opacity 0.2s; }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); opacity: 0; }
.faq__answer { padding: 0 20px 22px 66px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer a { color: var(--green-ink); text-underline-offset: 3px; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .faq__answer { padding-left: 20px; } }

/* ---------- quote ---------- */
.quote { margin: 0; }
.quote p { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.025em; color: var(--ink); max-width: 30ch; margin: 0; }
.quote p::before { content: '“'; }
.quote p::after { content: '”'; }
.quote footer { margin-top: 22px; max-width: 72ch; font: 12.5px/1.6 var(--font-mono); color: var(--muted); }
.quote footer a { color: inherit; }
.section--night .quote p { color: var(--night-hi); }

/* ---------- posts: cards, rows, feeds ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(20px, 2.4vw, 32px); }
.post-card__link { display: flex; flex-direction: column; gap: 20px; height: 100%; text-decoration: none; color: inherit; }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.post-card__link:hover .post-card__media img { transform: scale(1.025); }
.post-card__meta { margin: 0 0 10px; font: 12px var(--font-mono); color: var(--muted); letter-spacing: 0.02em; }
.post-card__title { margin: 0 0 10px; font-size: 21px; line-height: 1.22; letter-spacing: -0.022em; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-card__excerpt {
  margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__by { margin: 0; font-size: 13.5px; color: var(--muted); }
.post-card--feature .post-card__link { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.post-card--feature .post-card__title { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.035em; }
.post-card--feature .post-card__excerpt { font-size: 17px; -webkit-line-clamp: 4; }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .post-card--feature .post-card__link { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

.cover--type {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 22px; background: var(--night); border-color: var(--night-rule);
  font-family: var(--font-mono); color: var(--night-dim); font-size: 12px;
  background-image:
    linear-gradient(var(--night-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--night-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.cover__tag { position: absolute; left: 22px; top: 18px; color: var(--green); }
.cover__mark { position: absolute; right: 20px; top: 14px; color: var(--green); font-size: 18px; letter-spacing: -0.12em; font-weight: 700; }
.cover__out { display: grid; gap: 10px; }
.cover__cmd { color: var(--night-dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover__text {
  color: var(--night-hi); font-size: 13px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cover__text::after { content: ''; display: inline-block; width: 0.55em; height: 1.05em; margin-left: 3px; vertical-align: -0.15em; background: var(--green); }
.post-card--feature .cover--type { padding: clamp(24px, 3vw, 40px); }
.post-card--feature .cover__tag { left: clamp(24px, 3vw, 40px); top: clamp(22px, 2.6vw, 36px); }
.post-card--feature .cover__text { font-size: clamp(15px, 1.5vw, 20px); line-height: 1.5; -webkit-line-clamp: 4; max-width: 34ch; }
.post-card--feature .cover__cmd { font-size: 12.5px; }

.post-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.post-row a {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto 18px; gap: 20px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
}
.post-row__date { font: 12.5px var(--font-mono); color: var(--muted); }
.post-row__title { font-size: 17px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.post-row__meta { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.post-row__arrow { font: 13px var(--font-mono); color: var(--muted); transition: transform 0.15s, color 0.15s; }
.post-row a:hover .post-row__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-row a:hover .post-row__arrow { transform: translateX(3px); color: var(--ink); }
@media (max-width: 700px) {
  .post-row a { grid-template-columns: minmax(0, 1fr) 18px; gap: 4px 12px; }
  .post-row__date { grid-column: 1; grid-row: 1; }
  .post-row__title { grid-column: 1; grid-row: 2; }
  .post-row__meta { display: none; }
  .post-row__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

.feed-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.feed-feature .post-card--feature .post-card__link { display: flex; flex-direction: column; align-items: stretch; }
.feed-feature .post-card__media { width: 100%; }
.feed-feature .post-card--feature .post-card__title { font-size: clamp(26px, 2.6vw, 34px); }
.feed-feature .post-rows { border-top: 0; }
.feed-feature .post-row a { grid-template-columns: 104px minmax(0, 1fr) 18px; }
.feed-feature .post-row:first-child a { padding-top: 0; }
.feed-feature .post-row__meta { display: none; }
@media (max-width: 900px) { .feed-feature { grid-template-columns: 1fr; } .feed-feature .post-row:first-child a { padding-top: 20px; } .feed-feature .post-rows { border-top: 1px solid var(--rule); } }

/* blog index filter */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: clamp(56px, 7vw, 96px) 0 40px; padding-top: 32px; border-top: 1px solid var(--rule); }
.filter__label { font: 500 11.5px var(--font-mono); color: var(--muted); margin-right: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent;
  font: 500 12px/1 var(--font-mono); color: var(--ink-2); cursor: pointer; transition: all 0.15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip__n { color: var(--muted); }
.chip[aria-pressed='true'] .chip__n { color: #555555; }
.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--rule-strong); color: var(--ink-2); }
.post-grid--index { margin-top: 8px; }
.filter-empty { color: var(--muted); }
.page-hero + .section--flush .post-card--feature { padding-bottom: 8px; }

/* ---------- post page ---------- */
.post__header { padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(36px, 4vw, 56px); }
.back-link { display: flex; width: fit-content; gap: 8px; margin-bottom: clamp(36px, 5vw, 64px); font: 500 12px var(--font-mono); color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.post__title { margin-top: 20px; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -0.038em; }
.post__subtitle { margin: 22px 0 0; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; color: var(--ink-2); }
.post__meta { margin: 28px 0 0; font: 13px var(--font-mono); color: var(--muted); }
.post__feature { margin: 0 auto clamp(40px, 5vw, 64px); }
.post__feature img { width: 100%; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper-2); }

.post-body { font-size: 18px; line-height: 1.72; color: var(--ink-2); }
.legal .post-body { padding-bottom: clamp(80px, 10vw, 140px); }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.25em; }
.post-body h2 { margin: 2.1em 0 0.65em; font-size: clamp(25px, 2.4vw, 31px); line-height: 1.2; letter-spacing: -0.028em; }
.post-body h3 { margin: 1.8em 0 0.55em; font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; }
.post-body h4 { margin: 1.6em 0 0.5em; font-size: 18px; }
.post-body a { color: var(--green-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-body a:hover { color: var(--ink); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body ul, .post-body ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.post-body li { margin: 0.45em 0; padding-left: 0.2em; }
.post-body li::marker { color: var(--muted); }
.post-body blockquote { margin: 2em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--green); font-size: 20px; line-height: 1.55; color: var(--ink); }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body code { font: 0.84em var(--font-mono); background: var(--paper-2); border: 1px solid var(--rule); padding: 0.12em 0.38em; border-radius: 3px; color: var(--ink); }
.post-body pre { border: 1px solid var(--rule); position: relative; margin: 2em 0; padding: 20px 22px; overflow-x: auto; background: var(--night); color: #dedede; border-radius: 12px; font: 13.5px/1.65 var(--font-mono); }
.post-body pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.post-body hr { border: 0; border-top: 1px solid var(--rule); margin: 3em 0; }
.post-body img { border-radius: 4px; margin: 0 auto; }
.post-body figure { margin: 2.4em 0; }
.post-body figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; }
.post-body table { display: block; width: 100%; overflow-x: auto; margin: 2em 0; border-collapse: collapse; font-size: 15px; }
.post-body th, .post-body td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.post-body th { font: 500 11.5px var(--font-mono); color: var(--muted); border-bottom-color: var(--rule-strong); }
.post-body td { font-variant-numeric: tabular-nums; }
.post-body .kg-width-wide { width: min(1040px, 100vw - 2 * var(--gutter)); margin-left: 50%; transform: translateX(-50%); }
.post-body .kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.post-body .kg-width-full img { border-radius: 0; width: 100%; }
.post-body .subtitle { font-size: 21px; color: var(--ink); }

.post__footer { padding-top: 40px; padding-bottom: clamp(72px, 9vw, 128px); }
.post__tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.post__pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.pager { display: grid; gap: 8px; text-decoration: none; }
.pager--next { text-align: right; }
.pager__dir { font: 500 11.5px var(--font-mono); color: var(--muted); }
.pager__title { font-weight: 500; color: var(--ink); line-height: 1.35; }
.pager:hover .pager__title { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- latest from the lab: compact cards ---------- */
.lab-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lab-card {
  display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 18px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; transition: border-color 0.2s;
}
.lab-card:hover { border-color: var(--rule-strong); }
.lab-card__cover { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #0d0d0d; display: grid; place-items: center; }
.lab-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.lab-card:hover .lab-card__cover img { transform: scale(1.04); }
.lab-card__meta { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px 0; font: 12px var(--font-mono); color: var(--muted); }
.lab-card__title { padding: 0 6px; font-size: 16.5px; line-height: 1.32; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.lab-card__go { margin-top: auto; padding: 4px 6px 0; font-size: 13.5px; color: var(--muted); transition: color 0.2s; }
.lab-card:hover .lab-card__go { color: var(--green); }
@media (max-width: 1000px) {
  .lab-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 46%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .lab-card { scroll-snap-align: start; }
}
@media (max-width: 600px) { .lab-cards { grid-auto-columns: 78%; } }

/* generated ASCII covers */
.cover--ascii { display: grid; place-items: center; background: #0d0d0d; overflow: hidden; container-type: inline-size; }
/* 100 columns across the frame: the glyphs scale with the card, so the art always reaches its edges */
.ascii-cover { margin: 0; font: 400 calc(100cqw / 58)/1.12 var(--font-mono); color: #5c5c5c; white-space: pre; user-select: none; transition: color 0.35s; }
a:hover .ascii-cover { color: #a3a3a3; }

/* careers: one line and a marquee of the real open roles */
.careers-band { text-align: center; overflow: hidden; }
.careers-band__inner { display: flex; flex-direction: column; align-items: center; }
.careers-band .lede { margin-top: 18px; }
.careers-band .cta-row { justify-content: center; margin-top: 30px; }
.marquee {
  margin-top: clamp(48px, 6vw, 80px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; }
.marquee__item { display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 26px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; transition: color 0.2s; }
.marquee__item::before { content: '///'; font: 700 13px var(--font-mono); letter-spacing: -0.14em; color: var(--green); margin-right: 6px; }
.marquee__item span { font: 12px var(--font-mono); color: var(--muted); }
.marquee__item:hover { color: var(--green); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- open roles ---------- */
.roles { display: grid; gap: 48px; }
.roles__dept { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 12px var(--font-mono); color: var(--muted); }
.roles__n { color: var(--green-ink); }
.roles__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.role { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 20px; align-items: center; padding: 20px 8px; border-bottom: 1px solid var(--rule); text-decoration: none; transition: background-color 0.15s; }
.role:hover { background: var(--card); }
.role__title { font-size: 18px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.role__meta { font: 12.5px var(--font-mono); color: var(--muted); text-align: right; }
.role__arrow { font: 13px var(--font-mono); color: var(--muted); }
.role:hover .role__arrow { color: var(--ink); }
.roles--empty { padding: 32px; border: 1px solid var(--rule); background: var(--card); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.roles--empty p { margin: 0; }
@media (max-width: 700px) {
  .role { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 12px; }
  .role__meta { grid-column: 1; text-align: left; }
  .role__arrow { grid-row: 1 / span 2; grid-column: 2; }
}

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.timeline__date { font: 13px var(--font-mono); color: var(--muted); }
.timeline__what { font-size: 18px; color: var(--ink); font-weight: 500; letter-spacing: -0.012em; }
.timeline__what span { display: block; font-size: 15px; font-weight: 400; color: var(--ink-2); margin-top: 4px; letter-spacing: 0; }
.timeline a { font: 12px var(--font-mono); color: var(--green-ink); text-decoration: none; white-space: nowrap; }
.timeline a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .timeline li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- spec list ---------- */
.spec { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); border-top: 1px solid var(--rule); }
.spec dt, .spec dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.spec dt { padding-right: 32px; font: 500 11.5px/1.9 var(--font-mono); color: var(--muted); }
.spec dd { color: var(--ink); font-size: 16px; }
.section--night .spec { border-color: var(--night-rule); }
.section--night .spec dt, .section--night .spec dd { border-color: var(--night-rule); }
.section--night .spec dt { color: var(--night-dim); }
.section--night .spec dd { color: var(--night-hi); }

/* ---------- diagrams (inline SVG line art) ---------- */
.diagram { color: var(--ink); }
.diagram text { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); letter-spacing: 0.04em; }
.diagram .d-ink { stroke: #6b6b6b; }
.diagram .d-rule { stroke: var(--rule-strong); }
.diagram .d-green { stroke: var(--green); }
.diagram .f-green { fill: var(--green); }
.diagram .f-card { fill: #161616; }
.diagram .f-paper { fill: var(--paper); }
.diagram .f-paper2 { fill: #0c0c0c; }
.diagram .f-ink { fill: var(--ink); }
.section--night .diagram { color: var(--night-fg); }
.section--night .diagram text { fill: var(--night-dim); }
.section--night .diagram .d-ink { stroke: var(--night-fg); }
.section--night .diagram .d-rule { stroke: var(--night-line); }
.section--night .diagram .f-card { fill: var(--night-2); }
.section--night .diagram .f-paper { fill: var(--night); }

/* pipeline (the 14 steps) */
.pipeline { border-radius: var(--radius); overflow: hidden; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); counter-reset: step; }
.pipeline li { background: var(--card); padding: 18px 18px 22px; min-height: 120px; display: flex; flex-direction: column; gap: 10px; }
.pipeline__n { font: 12px var(--font-mono); color: var(--muted); }
.pipeline__name { font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.pipeline li.is-model { background: color-mix(in srgb, var(--green) 9%, var(--paper)); box-shadow: inset 0 0 0 1px rgb(var(--green-rgb) / 0.4); }
.pipeline li.is-model .pipeline__name { color: var(--night-hi); }
.pipeline li.is-model .pipeline__n { color: var(--green); }
.pipeline li.is-more { background: var(--paper); }
.pipeline li.is-more .pipeline__name { color: var(--muted); font-weight: 400; }
@media (max-width: 960px) { .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* jurisdiction compare */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compare__col { border: 1px solid var(--night-line); border-radius: var(--radius); padding: 28px; background: rgba(15, 20, 18, 0.6); }
.compare__col--good { border-color: rgb(var(--green-rgb) / 0.45); box-shadow: inset 0 0 0 1px rgb(var(--green-rgb) / 0.12); }
.compare__label { font: 500 11.5px var(--font-mono); color: var(--night-dim); margin: 0 0 18px; }
.compare__col--good .compare__label { color: var(--green); }
.compare__chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.compare__chain li { position: relative; padding: 12px 0 12px 22px; color: var(--night-hi); font-size: 15.5px; border-top: 1px dashed var(--night-line); }
.compare__chain li:first-child { border-top: 0; }
.compare__chain li::before { content: ''; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border: 1px solid var(--night-dim); }
.compare__chain li.is-risk::before { border-color: var(--warn); background: rgba(232, 133, 74, 0.2); }
.compare__chain li.is-ok::before { border-color: var(--green); background: rgb(var(--green-rgb) / 0.25); }
.compare__chain li span { display: block; font: 12px var(--font-mono); color: var(--night-dim); margin-top: 3px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* ---------- logos-as-text list (no invented logos) ---------- */
.textlist { display: flex; flex-wrap: wrap; gap: 10px 0; list-style: none; margin: 0; padding: 0; }
.textlist li { font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.02em; color: var(--ink); font-weight: 500; }
.textlist li:not(:last-child)::after { content: '/'; margin: 0 14px; color: var(--rule-strong); font-weight: 300; }

/* ---------- contact cards ---------- */
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.route {
  display: flex; flex-direction: column; gap: 10px; min-height: 220px;
  padding: 28px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; transition: border-color 0.15s;
}
.route:hover { border-color: var(--ink); }
.route__title { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.route__desc { color: var(--ink-2); font-size: 15.5px; margin: 0; max-width: 42ch; }
.route__go { margin-top: auto; padding-top: 18px; font: 12.5px var(--font-mono); color: var(--green-ink); }
.route--primary { grid-column: 1 / -1; background: color-mix(in srgb, var(--green) 9%, var(--paper)); border-color: rgb(var(--green-rgb) / 0.35); min-height: 260px; }
.route--primary .route__title { color: var(--night-hi); font-size: clamp(26px, 2.6vw, 34px); }
.route--primary .route__desc { color: var(--night-fg); }
.route--primary .route__go { color: var(--green); }
.route--primary:hover { border-color: var(--green); }
@media (max-width: 700px) { .routes { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band > .wrap { display: flex; flex-direction: column; align-items: center; }
.cta-band .h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta-band .lede { margin-left: auto; margin-right: auto; }
.cta-band .cta-row { margin-top: 36px; justify-content: center; }
.cta-band__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.cta-band__mark { justify-self: end; }
@media (max-width: 900px) { .cta-band__grid { grid-template-columns: 1fr; } .cta-band__mark { display: none; } }

/* ---------- infrastructure page ---------- */
.infra-art { margin: 0; display: flex; justify-content: center; }
.infra-art svg { width: 100%; max-width: 440px; height: auto; overflow: visible; }
.infra-art path { vector-effect: non-scaling-stroke; }
/* status lights on MC-2: each rack breathes on its own clock */
.infra-art circle { animation: fx-blink 3.2s ease-in-out infinite; }
.infra-art circle:nth-of-type(2n) { animation-duration: 4.1s; animation-delay: 0.6s; }
.infra-art circle:nth-of-type(3n) { animation-duration: 2.7s; animation-delay: 1.3s; }
.infra-art circle:nth-of-type(5n) { animation-duration: 5.3s; animation-delay: 0.2s; }
@keyframes fx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.diagram text.t-sub { fill: var(--muted); font-size: 10px; }
.bench { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bench__fig { margin: 0; padding: 24px 24px 12px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.bench__fig .mc-chart { border: 0; background: none; padding: 0; margin: 0; }
.bench__cap { margin-bottom: 18px; font: 13px/1.4 var(--font-mono); color: var(--ink-2); }
.bench__cap .num { margin-right: 6px; }
.bench__note { max-width: 72ch; margin-top: 28px; font-size: 15px; }
@media (max-width: 900px) { .bench { grid-template-columns: 1fr; } }
.engine { display: grid; gap: 16px; }
.engine__stat { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--night-rule); }
.engine__stat:first-child { border-top: 0; padding-top: 0; }
.engine__stat .stat__value { color: var(--night-hi); }
.engine__stat p:last-child { margin: 0; color: var(--night-fg); font-size: 15.5px; }
.engine__code { margin: 8px 0 0; padding: 20px 22px; background: var(--night-2); border: 1px solid var(--night-rule); border-radius: 6px; font: 13px/1.7 var(--font-mono); color: var(--night-hi); overflow-x: auto; }
.engine__code .k { color: var(--green); }
.engine__code .c { color: var(--night-dim); }
@media (max-width: 600px) { .engine__stat { grid-template-columns: 1fr; gap: 10px; } }
.cell--link { text-decoration: none; transition: background-color 0.15s; }
.cell--link:hover { background: var(--night-3); }
.cell--link:hover .cell__title { color: var(--green); }
.cta-band__solo { max-width: 760px; }

/* ---------- research highlights ---------- */
.highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.highlight {
  display: flex; flex-direction: column; gap: 12px; min-height: 260px;
  padding: 26px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; transition: border-color 0.15s, background-color 0.15s;
}
.highlight:hover { border-color: var(--rule-strong); background: #191919; }
.highlight__meta { font: 13px var(--font-mono); color: var(--muted); }
.highlight__title { font-size: 21px; line-height: 1.22; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.highlight__body { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.highlight__go { margin-top: auto; padding-top: 12px; font-size: 14.5px; color: var(--green); }
.highlight--feature { grid-column: span 2; grid-row: span 2; justify-content: flex-start; min-height: 536px; padding: clamp(28px, 3vw, 44px);
  background: var(--card);
}
.highlight--feature .highlight__title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.035em; }
.highlight--feature .highlight__body { font-size: 17px; max-width: 46ch; }
.highlight__stat { margin: 28px 0 auto; font: 400 15px var(--font-mono); color: var(--muted); }
.highlight__stat b { display: block; font-weight: 400; font-size: clamp(56px, 6vw, 88px); line-height: 1; letter-spacing: -0.05em; color: var(--green); margin-bottom: 6px; }
.research-note { margin-top: 28px; font-size: 15px; }
@media (max-width: 1000px) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .highlight--feature { min-height: 420px; } }
@media (max-width: 600px) { .highlights { grid-template-columns: 1fr; } .highlight--feature { grid-column: auto; grid-row: auto; min-height: 0; } }

.panel--residency { background: var(--card); }
.panel--residency .panel__body { padding: clamp(32px, 5vw, 72px); }

/* ---------- careers ---------- */
.roles-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
.roles-intro { position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 900px) { .roles-layout { grid-template-columns: 1fr; } .roles-intro { position: static; } }

/* ---------- about ---------- */
.principles .cell--link-out { justify-content: flex-end; background: var(--paper-2); }

/* ---------- contact ---------- */
/* the address copies on click, exactly like the footer's (.footer-email), just larger */
.contact-direct { display: flex; margin: 0; }
.contact-direct .footer-email { font-size: clamp(16px, 1.5vw, 19px); gap: 11px; }
.contact-direct .footer-email__icon { width: 16px; height: 16px; }
.contact-direct .footer-email.is-copied { color: var(--ink); }
.route .num { display: block; }

/* ---------- 404 ---------- */
.notfound { padding: clamp(96px, 14vw, 200px) 0 clamp(96px, 12vw, 180px); }

/* ---------- footer ---------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--rule); overflow: hidden; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 56px; padding-top: 88px; padding-bottom: 64px; }
.footer-brand p { max-width: 34ch; margin: 22px 0 26px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
/* social: the site's secondary pill, smaller (refine.css "rounded buttons") */
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.footer-social a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--ghost-line, var(--rule-strong)); background: transparent;
  color: var(--ink-2); text-decoration: none; font-size: 13.5px; letter-spacing: -0.005em;
  transition: border-color 0.16s var(--ease-out), background-color 0.16s var(--ease-out), color 0.12s;
}
.footer-social a:is(:hover, :focus-visible) { color: var(--ink); border-color: var(--ghost-line-hi, var(--ink-2)); background: var(--ghost-face-hi, transparent); }
.footer-social a:focus-visible { outline: none; }
.footer-dir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.footer-col__title { margin: 0 0 18px; font: 400 12.5px var(--font-mono); color: var(--muted); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a { font-size: 15px; color: var(--ink); text-decoration: none; transition: color 0.15s; }
.footer-col a:hover { color: var(--green); }
/* external links: a small ↗ sitting on the cap line, not the baseline
(polish.js turns that span into the .arw swap, so only the outer one is sized) */
.footer-col a > span { font-size: 0.8em; vertical-align: 0.12em; color: var(--muted); transition: color 0.15s; }
.footer-col a:hover > span { color: inherit; }
/* The footer's columns of pages sit beside the brand block: the logo,
   the one-liner, the email (click it to copy) and the social links. Two
   classes beat refine.css's padding, which left an empty band above. */
.footer-top.footer-top--split { gap: clamp(40px, 6vw, 96px); padding-top: clamp(56px, 6vw, 80px); padding-bottom: clamp(48px, 5vw, 64px); }
.footer-dir--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* the email is the copy control: hover draws its underline and lifts the
   glyph after it to ink with a "Copy" hint; a click swaps the glyph for a
   tick that draws in green and the hint for "Copied" (site.js .is-copied).
   The hint hangs off the end, so nothing beside it shifts. */
.footer-brand .footer-contact { margin: -4px 0 26px; }
.footer-email {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none;
  font: 13px/1.4 var(--font-mono); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.footer-email__addr { padding-bottom: 1px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s var(--ease-out); }
.footer-email:is(:hover, :focus-visible) .footer-email__addr { background-size: 100% 1px; }
.footer-email__icon { position: relative; flex: none; width: 14px; height: 14px; color: var(--muted); transition: color 0.15s; }
.footer-email:is(:hover, :focus-visible) .footer-email__icon { color: var(--ink); }
.footer-email__icon svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 0.18s var(--ease-out), transform 0.25s var(--ease-out);
}
.footer-email__icon .i-tick { opacity: 0; color: var(--green); stroke-width: 1.6; }
.footer-email__icon .i-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.footer-email::after {
  content: 'Copy'; position: absolute; left: 100%; top: 50%; margin-left: 2px; transform: translateY(-50%);
  font: 11.5px var(--font-mono); color: var(--muted); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.18s var(--ease-out);
}
.footer-email:is(:hover, :focus-visible)::after { opacity: 1; }
.footer-brand .footer-email.is-copied { color: var(--ink); } /* refine.css greens every [data-copy].is-copied */
.footer-email.is-copied .i-copy { opacity: 0; transform: scale(0.7); }
.footer-email.is-copied .i-tick { opacity: 1; }
.footer-email.is-copied .i-tick path { animation: copy-tick 0.35s var(--ease-out) 0.05s both; }
.footer-email.is-copied::after { content: 'Copied'; color: var(--green); opacity: 1; }
.footer-email:focus-visible { outline: 1px solid var(--ghost-line-hi, var(--ink-2)); outline-offset: 0; }
@media (hover: none) { .footer-email:not(.is-copied)::after { opacity: 0; } }
@media (max-width: 640px) {
  .footer-dir--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the cookie choice (analytics.js): a quiet bar, bottom right ---------- */
.consent {
  position: fixed; z-index: 60; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px));
  padding: 18px 18px 16px; border: 1px solid var(--hair-2, var(--rule-strong)); border-radius: var(--radius);
  background: var(--card); color: var(--ink); box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.45);
  animation: consent-in 0.3s var(--ease-out, ease-out) both;
}
.consent[hidden] { display: none; }
.consent__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.consent__text a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: rgb(var(--green-rgb) / 0.5); }
.consent__actions { display: flex; gap: 10px; margin-top: 14px; }
@keyframes consent-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }

/* ---------- one open role (/careers/<slug>, lib/roles.js) ---------- */
.role-page__cta { margin-top: 28px; }
.role-page .post__footer .cta-row { margin-top: 8px; }

/* ---------- sovereign AI (/sovereign-ai) ---------- */
.define { margin: 0; padding: 28px; border: 1px solid var(--hair, var(--rule)); border-radius: var(--radius); background: var(--card); }
.define dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.define dfn { font-style: normal; }
.define__say { font: 13px var(--font-mono); letter-spacing: 0; color: var(--muted); }
.define dd { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.cells--5 { --cols: 5; }
@media (max-width: 1100px) { .cells--5 { --cols: 3; } }
@media (max-width: 960px) { .cells--5 { --cols: 2; } }
@media (max-width: 600px) { .cells--5 { --cols: 1; } }
.press-facts.shore > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.press-facts.shore dt { font-size: 12.5px; }

/* ---------- deployment options (/deployment) ---------- */
/* even columns: the row label, then the three places to run it. On a phone
   the table keeps its shape and scrolls sideways inside its own box. */
.deploy-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.deploy-table { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.deploy-table col.deploy-table__label { width: 19%; }
.deploy-table th, .deploy-table td { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--hair, var(--rule)); text-align: left; vertical-align: top; }
.deploy-table thead th { padding-top: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.deploy-table thead th small { display: block; margin-top: 6px; font: 12px/1.4 var(--font-mono); color: var(--muted); }
.deploy-table tbody th { font: 12.5px/1.5 var(--font-mono); font-weight: 400; color: var(--muted); }
.deploy-table td { color: var(--ink-2); }
.levels { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair, var(--rule)); }
.levels li { display: grid; grid-template-columns: 4em minmax(0, 1fr) minmax(0, 14em); gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--hair, var(--rule)); }
.levels__n { font: 13px var(--font-mono); color: var(--green-ink, var(--green)); }
.levels__name { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.levels__body { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.levels__who { font: 12.5px/1.5 var(--font-mono); color: var(--muted); }
@media (max-width: 760px) { .levels li { grid-template-columns: 3em minmax(0, 1fr); } .levels__who { grid-column: 2; } }

/* ---------- trust and security (/trust), pricing (/pricing) ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trust-card { padding: 24px; border: 1px solid var(--hair, var(--rule)); border-radius: var(--radius); background: var(--card); }
.trust-card h3 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.018em; color: var(--ink); }
.trust-card ul { margin: 14px 0 0; padding-left: 1.1em; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.trust-card li + li { margin-top: 6px; }
.trust-card li::marker { color: var(--muted); }
.trust-card p.trust-card__src { margin: 14px 0 0; font: 11.5px/1.5 var(--font-mono); color: var(--muted); }
.trust-card a, .plan a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; text-decoration-color: rgb(var(--green-rgb) / 0.5); }
/* ---------- pricing (/pricing) ----------
   Rounded cards (never squarer than 16px, whatever --radius is), each one:
   glyph and name, the price, one full-width button, then what's in it. The
   buttons line up across the row because they sit above the lists. */
.plans { --plan-r: max(16px, var(--radius)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 28px;
  border: 1px solid var(--hair, var(--rule)); border-radius: var(--plan-r);
  background: linear-gradient(180deg, var(--card), var(--paper-2) 75%);
  transition: border-color 0.3s var(--ease-out, ease);
}
.plan:hover { border-color: var(--hair-2, var(--rule-strong)); }
.plan__head { display: flex; align-items: center; gap: 14px; }
.plan__icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border: 1px solid var(--hair-2, var(--rule-strong)); border-radius: 12px; background: var(--paper); color: var(--ink);
}
.plan__icon svg, .plan-all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plan__name { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.018em; color: var(--ink); }
.plan__for { margin: 3px 0 0; font: 12px/1.5 var(--font-mono); color: var(--muted); }
/* the price: a big amount, its period small beside it, then the weekly pool
   (Nov 10: "should be Free"; AUD only, so a bare $) */
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 26px 0 0; color: var(--ink); }
.plan__amt { font-size: 44px; line-height: 1; font-weight: 500; letter-spacing: -0.045em; transition: opacity 0.2s; }
.plan__per { font-size: 14px; letter-spacing: -0.005em; color: var(--muted); }
.plan__price small { flex-basis: 100%; margin-top: 10px; font: 12px/1.5 var(--font-mono); letter-spacing: 0; color: var(--muted); }
.btn.plan__cta { width: 100%; justify-content: center; margin-top: 26px; }
.plan__list { list-style: none; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--hair, var(--rule)); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.plan__list li { position: relative; padding-left: 26px; }
.plan__list li + li { margin-top: 12px; }
.plan__list li::before {
  content: ''; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px; background: var(--green-ink, var(--green));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 2.8 6-6.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 2.8 6-6.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan a:not(.btn), .plan-api__copy p a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; text-decoration-color: rgb(var(--green-rgb) / 0.5); }

/* what holds whichever plan you pick: one rounded band, four cells */
.plan-all { margin-top: 16px; padding: 22px 28px 26px; border: 1px solid var(--hair, var(--rule)); border-radius: max(16px, var(--radius)); }
.plan-all__label { margin: 0 0 18px; font: 12px/1.5 var(--font-mono); color: var(--muted); }
.plan-all ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; margin: 0; padding: 0; list-style: none; }
.plan-all li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; }
.plan-all li svg { grid-row: span 2; margin-top: 1px; color: var(--ink-2); }
.plan-all b { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.plan-all span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* the API: copy on the left, a few lines of it on the right */
.plan-api {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center;
  margin-top: 16px; padding: 32px; border: 1px solid var(--hair, var(--rule)); border-radius: max(16px, var(--radius));
  background: linear-gradient(180deg, var(--card), var(--paper-2) 75%);
}
.plan-api__title { margin: 8px 0 0; font-size: 24px; font-weight: 500; letter-spacing: -0.025em; color: var(--ink); }
.plan-api__copy > p:not(.plan__for) { max-width: 46ch; margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.plan-api .cta-row { margin-top: 24px; }
/* stays dark in both themes, like the other code on the site */
.plan-api__code {
  margin: 0; padding: 22px 24px; overflow-x: auto; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 12px;
  background: #0b0b0b; color-scheme: dark; font: 13px/1.85 var(--font-mono); color: #a8a8ad;
}
.plan-api__code b { font-weight: 400; color: #f5f5f7; }
.plan-api__code i { font-style: normal; color: #6e6e74; }
/* the API's rate card: the model and unit as its caption, then a row per rate,
   with a stronger rule where the prompt-caching rates start */
.api-rates { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.api-rates caption { padding: 0 0 12px; text-align: left; font: 12px/1.5 var(--font-mono); color: var(--muted); }
.api-rates caption code { font: inherit; font-size: 13px; color: var(--ink); }
.api-rates caption span { display: block; }
.api-rates th, .api-rates td { padding: 12px 0; border-top: 1px solid var(--hair, var(--rule)); vertical-align: baseline; }
.api-rates th { text-align: left; font-weight: 400; color: var(--ink-2); }
.api-rates td { padding-left: 16px; text-align: right; white-space: nowrap; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.api-rates__group :is(th, td) { border-top-color: var(--hair-2, var(--rule-strong)); }

/* Personal | Business: two radios, panels switched by :has (no JS) */
.price-switch { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 28px; }
.price-tabs { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--hair, var(--rule)); border-radius: 999px; background: var(--paper-2); }
.price-tabs input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.price-tabs label { padding: 8px 20px; border-radius: 999px; cursor: pointer; font-size: 14.5px; letter-spacing: -0.01em; color: var(--muted); transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.price-tabs label:hover { color: var(--ink); }
.price-tabs input:checked + label { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--hair-2, var(--rule-strong)); }
.price-tabs input:focus-visible + label { outline: 2px solid var(--green-ink); outline-offset: 2px; }
.price-note { margin: 0; font: 12px/1.5 var(--font-mono); color: var(--muted); }
.price-panel { display: none; }
.pricing:has(#pf-personal:checked) .price-panel[data-for='personal'],
.pricing:has(#pf-business:checked) .price-panel[data-for='business'] { display: block; animation: price-in 0.3s var(--ease-out, ease) both; }
@keyframes price-in { from { opacity: 0; } }
/* Business: organisations, then your own model, each copy beside a list */
.plan-own { margin-top: 16px; }
.plan-own--first { margin-top: 0; }
.plan-own__list { margin: 0; padding: 0; border-top: 0; }

@media (max-width: 960px) {
  .plans, .plan-api { grid-template-columns: minmax(0, 1fr); }
  .plan-all ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .plan, .plan-api { padding: 24px; }
  .plan-all { padding: 20px 22px 24px; }
  .plan-all ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- news (/news): the press note under the posts ---------- */
.news-contact {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px; border-top: 1px solid var(--hair, var(--rule)); font-size: 14.5px; color: var(--ink-2);
}
.news-contact p { margin: 0; }
.news-contact b { font-weight: 500; color: var(--ink); }
.news-contact a { color: var(--ink); text-underline-offset: 0.22em; text-decoration-thickness: 1px; text-decoration-color: rgb(var(--green-rgb) / 0.5); }
.news-contact a:hover { text-decoration-color: currentColor; }

/* ---------- open weights (/models): see models.css ---------- */
.press-facts code { font: 13px var(--font-mono); }

/* ---------- fact rows (/sovereign-ai, /news; /press has its own, press.css) ---------- */
.press-facts { display: grid; margin: 0; border-top: 1px solid var(--hair, var(--rule)); }
.press-facts > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair, var(--rule)); }
.press-facts dt { font: 12.5px/1.6 var(--font-mono); color: var(--muted); }
.press-facts dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.press-facts a { color: inherit; text-decoration: underline; text-decoration-color: rgb(var(--green-rgb) / 0.5); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.press-facts a:hover { text-decoration-color: currentColor; }
@media (max-width: 900px) {
  .press-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* The footer's last line: the caption and the legal links. (The ASCII logo
   above them, and the rule over it, were cut on Nov 10.) */
.footer-mark { padding: 0 0 clamp(28px, 4vw, 48px); }
.footer-mark__caption { margin: clamp(18px, 2.4vw, 28px) 0 0; font: 12.5px var(--font-mono); color: var(--muted); }
@media (max-width: 960px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- toast (copy feedback) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 80; transform: translate(-50%, 20px);
  padding: 10px 16px; background: var(--night); color: var(--night-hi); border-radius: 4px;
  font: 12.5px var(--font-mono); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast::before { content: '✓ '; color: var(--green); }

/* ---------- statement (scroll-scrubbed) ---------- */
.statement { padding: clamp(120px, 22vh, 240px) 0; text-align: center; }
.statement__text { margin: 0 auto; max-width: 22ch; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.14; letter-spacing: -0.032em; font-weight: 500; color: var(--ink); text-wrap: balance; }
.statement__text .sw { transition: color 0.2s; }
.statement__by { margin: 36px 0 0; font: 12.5px var(--font-mono); color: var(--muted); }
.statement__by a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.statement__by a:hover { color: var(--green); border-color: var(--green); }


/* ---------- blueprint layer ----------
   Hairline rails down the content column, crosshairs and a section number
   where sections meet, corner brackets on figures, mono readouts. The marks
   are injected by site.js (aria-hidden); the rails are pure CSS. */
main { position: relative; isolation: isolate; }
main > section { position: relative; }
/* rails sit behind everything: cards and figures always cover them */
main::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --edge: max(calc(var(--gutter) - 1px), calc(50% - var(--container) / 2 - 1px));
  background:
    linear-gradient(var(--rule), var(--rule)) left var(--edge) top / 1px 100% no-repeat,
    linear-gradient(var(--rule), var(--rule)) right var(--edge) top / 1px 100% no-repeat;
}
.bp-mark { position: absolute; top: 0; left: 0; right: 0; z-index: 4; pointer-events: none; }
.bp-mark__in { position: relative; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; height: 0; }
.bp-mark__in::before, .bp-mark__in::after {
  content: ''; position: absolute; top: -5px; width: 11px; height: 11px;
  background: linear-gradient(var(--green), var(--green)) center / 11px 1px no-repeat, linear-gradient(var(--green), var(--green)) center / 1px 11px no-repeat;
  opacity: 0.8;
}
.bp-mark__in::before { left: calc(var(--gutter) - 6px); }
.bp-mark__in::after { right: calc(var(--gutter) - 6px); }
.bp-mark__label { position: absolute; top: 12px; left: calc(var(--gutter) + 14px); font: 11px/1 var(--font-mono); color: var(--muted); letter-spacing: 0.02em; }
.bp-mark__label b { font-weight: 400; color: var(--green); }
@media (max-width: 760px) { .bp-mark__label { display: none; } }


.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 26px; font: 11.5px/1.3 var(--font-mono); color: var(--muted); }
.hero-meta span::before { content: '+ '; color: var(--green); }
.home-hero__split .hero-meta { justify-content: flex-start; }
@media (max-width: 960px) { .home-hero__split .hero-meta { justify-content: center; } }

/* ---------- motion (site.js + Motion) ----------
   boot.js adds html.mo before first paint; these start hidden and Motion
   brings them in. Keep this list in step with REVEAL/SPLIT in site.js. */
html.mo :is(main h1, main h2.h2, main h2.h3, main h3.h3,
  .hero-chip, .home-hero .lede, .home-hero .cta-row, .hero-art,
  .page-hero .kicker, .page-hero .lede, .page-hero .cta-row, .page-hero .checklist > li, .page-hero .infra-art, .page-hero .contact-direct,
  main .section .kicker, main .section .lede, main .section .prose > *, main .section .cta-row, main .section-head .link-arrow,
  .stats > .stat, .proof > *, .cells > *, .post-grid > *, .post-card--feature, .products > *, .highlights > *, .panel, .layers,
  .faq__item, .timeline > li, .roles__group, .routes > *, .bench__fig, .compare__col, .pipeline > li, main .window,
  .quote, .spec, .post-rows > li, .flow-caps > *, .engine__stat, .section .checklist > li, .filter, .textlist) { opacity: 0; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.05em 0.04em 0.16em; margin: -0.05em -0.04em -0.16em; }
.wi { display: inline-block; transform-origin: 0 100%; will-change: transform; }

/* page-to-page: a quick cross-fade with a rise (View Transitions, where supported) */
/* TEST (Nov 9): cross-fade off while we check it's what flashes white in
   Chrome between pages. Put back `@view-transition { navigation: auto; }`
   if it isn't. */
@view-transition { navigation: none; }
::view-transition { background-color: var(--paper); } /* what shows mid cross-fade: never the browser's white */
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out 0.14s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* card hover: border brightens, blueprint corner ticks slide out; no glow */
.spot { position: relative; transition: border-color 0.2s, background-color 0.2s; }
.spot::after {
  content: ''; position: absolute; inset: 7px; border-radius: 0; pointer-events: none; z-index: 1;
  --t: rgb(var(--green-rgb) / 0.9);
  background:
    linear-gradient(var(--t), var(--t)) top left / 9px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) top left / 1px 9px no-repeat,
    linear-gradient(var(--t), var(--t)) top right / 9px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) top right / 1px 9px no-repeat,
    linear-gradient(var(--t), var(--t)) bottom left / 9px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) bottom left / 1px 9px no-repeat,
    linear-gradient(var(--t), var(--t)) bottom right / 9px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) bottom right / 1px 9px no-repeat;
  opacity: 0; transition: opacity 0.18s, inset 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}
.spot:hover::after { opacity: 1; inset: 4px; }
.spot:hover { border-color: rgba(255, 255, 255, 0.22); }
.cells > .spot:hover { background: #1b1b1b; }

[data-rails='off'] main::after, [data-rails='off'] .bp-mark { display: none; }

/* a slight glow on the green itself (never on backgrounds); --glow-a sets it */
.kicker::before, .proof__go, .highlight__go, .stat__src, .text-link, .hero-chip__tag, .bp-mark__label b, .stack__layer.is-active .stack__name, .marquee__item::before {
  text-shadow: 0 0 10px rgb(var(--green-rgb) / var(--glow-a));
}
.nav__link::after { box-shadow: 0 0 8px rgb(var(--green-rgb) / var(--glow-a)); }
.plate.is-active, .proof__viz .bar.hi, .proof__viz .ring { filter: drop-shadow(0 0 6px rgb(var(--green-rgb) / calc(var(--glow-a) * 0.8))); }
.ch { display: inline-block; will-change: transform; }

/* ---------- the screen: faint curved scanlines and a soft vignette ----------
   A fixed overlay over everything (it never takes clicks). The lines bow
   outward like a CRT; --scan-a sets their strength; html[data-screen=off] hides it. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background: url('/assets/fx/scanlines.svg') 0 0 / 100% 100% no-repeat;
  opacity: var(--scan-a, 0.05);
}
body::before {
  /* the vignette at full strength while the lines stay faint */
  content: ''; position: fixed; inset: 0; z-index: 94; pointer-events: none;
  background: radial-gradient(ellipse 125% 110% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.38) 100%);
}
[data-screen='off'] body::after, [data-screen='off'] body::before { display: none; }
@media print { body::after, body::before { display: none; } }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .caret { opacity: 0.9; }
}

/* /css/iso.css */
/* Maincode — iso.css
   Isometric blueprint figures: lib/iso.js draws them, public/js/iso.js
   animates them. The palette is the MC-2 rack's: #161616 faces, #0c0c0c
   sides, #6b6b6b edges, #2e2e2e rules and phosphor-green lights.
   Short class names because a figure repeats them hundreds of times:
   i-f front, i-s side, i-t top, i-r rule. */

/* colours as tokens, so light.css can re-ink every figure in one place */
:root {
  --iso-face: #161616; --iso-side: #0c0c0c; --iso-edge: #6b6b6b; --iso-rule: #2e2e2e;
  --iso-slot: #0f0f0f; --iso-slot-line: #262626; --iso-ghost: #3d3d3d; --iso-stencil: #3a3a3a;
  --iso-tray: #4a4a4a; --iso-label: #a3a3a3; --iso-hot-2: #0f2e22;
  --iso-board: #0d0d0d; --iso-board-top: #111111; --iso-trace: #1a1a1a; --iso-die: #4d4d4d;
  --iso-arc-busy: #3d3d3d; --iso-pad: rgba(255, 255, 255, 0.012); --iso-pad-line: #242424;
  --iso-quad-line: #2b2b2b; --iso-row-hot: #0d1a14;
}

.iso { --iso-ease: cubic-bezier(0.19, 1, 0.22, 1); position: relative; width: 100%; margin: 0 auto; }
.iso__svg { display: block; width: 100%; height: auto; overflow: visible; -webkit-user-select: none; user-select: none; }
.iso__svg path, .iso__svg circle, .iso__svg rect { vector-effect: non-scaling-stroke; }
.iso__svg text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; fill: var(--muted); }

.page-hero .iso { margin-top: clamp(44px, 6vw, 80px); }
.iso--hall { max-width: 720px; }
.iso--board { max-width: 640px; }
.iso--build { max-width: 600px; }
.iso--pipeline { max-width: 660px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.iso--surface { max-width: 660px; }
.iso--steps { max-width: 560px; }

/* ---------- faces and lines ---------- */
.i-f, .i-s, .i-t { stroke: var(--iso-edge); stroke-width: 1.1; stroke-linejoin: round; transition: fill 0.3s, stroke 0.3s; }
.i-f, .i-t { fill: var(--iso-face); }
.i-s { fill: var(--iso-side); }
.i-r { fill: none; stroke: var(--iso-rule); stroke-width: 1; }
.i-slot { fill: var(--iso-slot); stroke: var(--iso-slot-line); }
.i-floor { fill: none; stroke: var(--iso-rule); stroke-dasharray: 2 4; }
.i-ghost { fill: var(--paper); stroke: var(--iso-ghost); stroke-dasharray: 3 3; stroke-linejoin: round; transition: opacity 0.3s, stroke 0.3s; }
.iso__svg .i-stencil { font-size: 8.5px; letter-spacing: 0.1em; fill: var(--iso-stencil); }
.iso__svg .i-note { font-size: 10px; fill: var(--muted); }
.i-led { fill: var(--green); transition: opacity 0.1s; }
.i-led.is-off { opacity: 0.2; }

/* callout: the dot, the leader, two lines of label */
.iso-lead { fill: none; stroke: var(--iso-edge); stroke-width: 1; }
.iso-dot { fill: var(--green); }
.iso__svg .iso-l1 { font-size: 12.5px; fill: var(--iso-label); }
.iso__svg .iso-l2 { font-size: 10.5px; fill: var(--muted); }
.iso-bar { fill: var(--green); opacity: 0.75; }
.iso-pkt { fill: color-mix(in srgb, var(--green) 18%, white); stroke: var(--green); stroke-width: 1.5; paint-order: stroke; }

/* packets drawn on a path: a short dash travelling its length */
.iso-flow { fill: none; stroke: var(--green); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 45; opacity: 0.6; animation: iso-flow 1.8s linear infinite; }
@keyframes iso-flow { to { stroke-dashoffset: -48; } }

/* ---------- on the way in: parts rise into place, fast ---------- */
.iso .iso-rise { transition: opacity 0.3s ease-out calc(var(--i, 0) * 45ms), transform 0.5s var(--iso-ease) calc(var(--i, 0) * 45ms); }
.iso :is(.iso-callout, .iso-bars) { transition: opacity 0.3s ease-out 0.45s; }
html.mo .iso:not(.is-in) .iso-rise { opacity: 0; transform: translateY(16px); animation: iso-show 0s 3.2s forwards; }
html.mo .iso:not(.is-in) .iso-rise--late { transform: translateY(-16px); }
html.mo .iso:not(.is-in) :is(.iso-callout, .iso-bars) { opacity: 0; animation: iso-show 0s 3.2s forwards; }
/* the drawing draws itself: edges trace in, then the faces fill (iso.js
   gives every solid stroke pathLength="1" and .i-draw) */
.iso .i-draw { stroke-dasharray: 1; }
html.mo .iso:not(.is-in) .i-draw { stroke-dashoffset: 1; fill-opacity: 0; }
.iso.is-in .i-draw {
  transition: stroke-dashoffset 0.9s var(--iso-ease) calc(var(--i, 0) * 60ms), fill-opacity 0.45s ease-out calc(var(--i, 0) * 60ms + 0.35s), fill 0.3s, stroke 0.3s;
}
/* if iso.js never arrives, show the drawing anyway */
@keyframes iso-show { to { opacity: 1; transform: none; stroke-dashoffset: 0; fill-opacity: 1; } }

/* ---------- MC-2 hall ---------- */
.iso-rack { cursor: pointer; transition: transform 0.35s var(--iso-ease); }
.iso-rack.is-hot { transform: translateY(-8px); }
.iso-rack.is-hot :is(.i-f, .i-s) { stroke: rgb(var(--green-rgb) / 0.7); }
.iso-rack.is-hot .i-t { fill: color-mix(in srgb, var(--green) 14%, var(--paper)); stroke: var(--green); }
.iso-rack.is-hot .i-led:not(.i-act) { opacity: 1; }
.i-tray { fill: none; stroke: var(--iso-tray); stroke-width: 1; }
.iso-drop { fill: none; stroke: var(--iso-rule); stroke-dasharray: 2 3; transition: stroke 0.25s, transform 0.35s var(--iso-ease); }
.iso-drop.is-hot { stroke: var(--green); stroke-dasharray: none; }

/* ---------- GPU board ---------- */
.i-board.i-f, .i-board.i-s { fill: var(--iso-board); }
.i-board.i-t { fill: var(--iso-board-top); }
.i-trace { fill: none; stroke: var(--iso-trace); }
.i-die { fill: var(--iso-side); stroke: var(--iso-die); transition: fill 0.2s, stroke 0.2s; }
.iso-wire { fill: none; stroke: var(--iso-tray); stroke-dasharray: 3 3; }
.iso-gpu { cursor: pointer; transition: transform 0.35s var(--iso-ease); }
.iso-gpu.is-hot { transform: translateY(-6px); }
.iso-gpu.is-hot :is(.i-f, .i-s, .i-t) { stroke: rgb(var(--green-rgb) / 0.75); }
.iso-gpu.is-sum .i-t, .iso-gpu.is-hot .i-t { fill: color-mix(in srgb, var(--green) 14%, var(--paper)); }
.iso-gpu.is-sum .i-die, .iso-gpu.is-hot .i-die { stroke: var(--green); fill: var(--iso-hot-2); }
.iso-arc { fill: none; stroke: var(--iso-rule); stroke-width: 1; transition: stroke 0.25s, opacity 0.25s; }
.iso--board.is-busy .iso-arc { stroke: var(--iso-arc-busy); }
.iso--board.has-hot .iso-arc:not(.is-hot) { opacity: 0.3; }
.iso-arc.is-hot, .iso--board.is-busy .iso-arc.is-hot { stroke: rgb(var(--green-rgb) / 0.7); }

/* ---------- MC-3 build-out ---------- */
.iso-slot { cursor: pointer; }
.i-pad { fill: var(--iso-pad); stroke: var(--iso-pad-line); transition: stroke 0.25s, fill 0.25s; }
.iso-unit { opacity: 0; transform: translateY(-36px); transition: opacity 0.25s ease-out, transform 0.45s var(--iso-ease); }
.iso-slot.is-built .iso-unit { opacity: 1; transform: none; }
.iso-slot.is-built .i-ghost { opacity: 0; }
.iso-slot.is-peek:not(.is-built) .iso-unit { opacity: 0.45; transform: translateY(-6px); }
.iso-slot.is-peek .i-ghost, .iso-slot.is-peek .i-pad { stroke: var(--green); }
.iso-slot.is-new .i-pad { stroke: var(--green); fill: rgb(var(--green-rgb) / 0.08); }
.iso-slot.is-new .i-t { fill: color-mix(in srgb, var(--green) 14%, var(--paper)); stroke: var(--green); }

/* ---------- the fourteen steps ---------- */
.i-track { fill: none; stroke: var(--iso-rule); }
.iso-flow--track { stroke: var(--iso-ghost); stroke-width: 1.2; stroke-dasharray: 2 10; opacity: 1; animation-duration: 2.4s; }
/* stations light in place (edges and top), never jump; once passed, the
   inner square keeps a faint green mark until the run ends */
.iso-stn { cursor: pointer; transition: opacity 0.3s; }
.iso-stn.is-model .i-t { fill: color-mix(in srgb, var(--green) 14%, var(--paper)); stroke: rgb(var(--green-rgb) / 0.65); }
.iso-stn.is-model .i-r { stroke: rgb(var(--green-rgb) / 0.5); }
.iso-stn.is-done .i-r { stroke: rgb(var(--green-rgb) / 0.55); }
.iso-stn.is-hot :is(.i-f, .i-s) { stroke: var(--green); }
.iso-stn.is-hot .i-t { fill: color-mix(in srgb, var(--green) 16%, var(--paper)); stroke: var(--green); }
.iso-stn.is-hot .i-r { stroke: var(--green); }
.iso-stn.is-skip { opacity: 0.35; }
/* the request: a green chip riding the station roofs, its shadow on the floor */
.iso-chip__t { fill: var(--green); }
.iso-chip__f { fill: color-mix(in srgb, var(--green) 62%, #000); }
.iso-chip__s { fill: color-mix(in srgb, var(--green) 44%, #000); }
.iso-shadow { fill: var(--iso-edge); }

/* ---------- the readout under the fourteen steps ----------
   One line names the step the request is at (number, name, phase); under it
   a bar of fourteen segments, a small gap between phases, fills green behind
   the request as it travels (iso.js sets --f on each segment). The model's
   segment stands a little taller. Point along the bar to read any step. */
.steprail { max-width: 660px; margin: 0 auto; } /* the figure's width, so it sits under the caption */
.steprail + p { max-width: 660px; margin-left: auto; margin-right: auto; }
.steprail__now {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px;
  margin: 0 0 14px; font-size: 17px; letter-spacing: -0.012em; color: var(--ink);
}
.steprail__n, .steprail__of, .steprail__phase { font: 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.steprail__n { color: var(--green-ink, var(--green)); }
.steprail__of { color: var(--muted); margin-right: 6px; }
.steprail__name, .steprail__phase { transition: opacity 0.16s var(--ease-out), transform 0.22s var(--ease-out); }
.steprail__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steprail__phase { color: var(--muted); text-transform: lowercase; }
.steprail__phase[data-phase='model'] { color: var(--green-ink, var(--green)); }
.steprail__now .is-out { opacity: 0; transform: translateY(4px); transition-duration: 0.12s; }
.steprail__track {
  display: flex; align-items: flex-end; gap: 3px; height: 14px; margin: 0; padding: 0; list-style: none;
  cursor: ew-resize; touch-action: pan-y;
}
.steprail__track li { --f: 0; position: relative; flex: 1; height: 3px; border-radius: 1px; background: var(--hair-2); overflow: hidden; transition: height 0.25s var(--ease-out), background-color 0.25s; }
.steprail__track li[data-gap] { margin-left: 7px; }
.steprail__track li::after {
  content: ''; position: absolute; inset: 0; background: var(--green);
  transform: scaleX(var(--f)); transform-origin: 0 50%;
}
.steprail__track li.is-model { height: 7px; }
.steprail__track li.is-now { height: 7px; }
.steprail__track li.is-model.is-now { height: 11px; }
.steprail__track li.is-skip { background: repeating-linear-gradient(90deg, var(--hair-2) 0 2px, transparent 2px 4px); }
.steprail__track li.is-skip::after { opacity: 0; }
.steprail.is-reset .steprail__track li::after { opacity: 0; transition: opacity 0.4s; }

/* ---------- loss surface ---------- */
.iso--surface .iso__svg { cursor: pointer; }
.i-quad { fill: var(--paper); stroke: var(--iso-quad-line); stroke-width: 0.9; stroke-linejoin: round; }
.i-post { fill: none; stroke: var(--iso-rule); stroke-dasharray: 2 4; }
.iso-trail { fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.iso-trail--old { opacity: 0.25; }
.iso-ball { fill: color-mix(in srgb, var(--green) 18%, white); stroke: var(--green); stroke-width: 2; paint-order: stroke; }

/* ---------- timeline steps ---------- */
.iso-step { cursor: pointer; transition: transform 0.35s var(--iso-ease); }
.iso-step.is-hot { transform: translateY(-8px); }
.iso-step.is-hot :is(.i-f, .i-s) { stroke: rgb(var(--green-rgb) / 0.7); }
.iso-step.is-hot .i-t { fill: color-mix(in srgb, var(--green) 14%, var(--paper)); stroke: var(--green); }
.iso-step.is-hot .i-r { stroke: var(--green); }
.iso-step.is-next .i-ghost { stroke: var(--iso-tray); }
.iso-step.is-next.is-hot .i-ghost { stroke: var(--green); }

@media (max-width: 600px) {
  .iso__svg .iso-l1 { font-size: 14px; }
  .iso__svg .iso-l2 { font-size: 12px; }
}

/* where the figures sit in existing layouts */
.engine--after-fig { margin-top: clamp(32px, 4vw, 48px); }
.next-split { align-items: center; }

/* ---------- metal-to-model stack (templates/partials/layers.html) ----------
   Sized to stand about a third taller than the list beside it; the plates
   answer to the pointer too. */
.layers__svg { max-width: 360px; }
.plate { cursor: pointer; }

/* /css/polish.css */
/* Maincode — polish.css
   The refinement pass, loaded after site.css and iso.css (light.css follows).
   Calmer surfaces and hairlines, tighter corners and type, margins drawn
   like a technical sheet, and buttons, links and cards that answer in light
   and stroke rather than by moving. It overrides site.css where the pass
   changed its mind; fold it in once the look settles. Colours it introduces
   are tokens, so light.css only has to re-point them. */

@property --bc { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.5); }
@property --l { syntax: '<length>'; inherits: false; initial-value: 0px; }

:root {
  --ink: #f5f5f7;
  --ink-2: #a8a8ad;
  --muted: #86868b;
  --night-hi: var(--ink);
  --night-fg: var(--ink-2);
  --night-dim: var(--muted);
  --hair: rgb(255 255 255 / calc(0.08 * var(--line-k, 1)));
  --hair-2: rgb(255 255 255 / calc(0.16 * var(--line-k, 1)));
  --sheen: rgba(255, 255, 255, 0.022);
  --rail: rgb(255 255 255 / calc(0.05 * var(--mark-k, 1)));
  --mark: rgb(255 255 255 / calc(0.3 * var(--mark-k, 1)));
  --mark-2: rgb(255 255 255 / calc(0.13 * var(--mark-k, 1)));
  --mark-text: #5f5f63;
  --btn-face: rgba(255, 255, 255, 0.045);
  --btn-line: rgb(255 255 255 / calc(0.09 * var(--line-k, 1)));
  --btn-corner: rgba(255, 255, 255, 0.5);
  --ghost-line: rgb(255 255 255 / calc(0.12 * var(--line-k, 1)));
  --ghost-line-hi: rgba(255, 255, 255, 0.3);
  --ghost-face-hi: rgba(255, 255, 255, 0.04);
  --glass: rgba(8, 8, 8, 0.72);
  --ascii-rgb: 242, 242, 242; /* canvas ink (site.js) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --space-section: calc(clamp(76px, 8.5vw, 128px) * var(--space-k, 1));
  /* page margins: the gutter grows with the screen, and the rails sit out in
     it, clear of the copy and the cards (--rail-in on narrow screens, then
     --rail-gap outside the content once there's room) */
  --gutter: clamp(22px, 3.2vw, 40px);
  --rail-in: clamp(8px, 1.1vw, 14px);
  --rail-gap: 32px;
  interpolate-size: allow-keywords; /* lets <details> animate to height: auto */
  scrollbar-color: #2c2c2e transparent;
}

/* ---------- type ---------- */
body { letter-spacing: -0.003em; }
p, li, .lede { text-wrap: pretty; }
.display { line-height: 1; letter-spacing: -0.042em; }
.h2 { line-height: 1.06; }
[data-font='space'] :is(.display, .h1) { letter-spacing: -0.045em; }
[data-font='space'] :is(.h2, .statement__text) { letter-spacing: -0.035em; }
.h3 { letter-spacing: -0.018em; }
.lede { font-size: clamp(17px, 1.4vw, 20.5px); line-height: 1.48; letter-spacing: -0.008em; }
.kicker { font-size: 13px; }
:is(.display, .h1, .h2, .h3, .statement__text, .post__title) { font-weight: var(--hw, 500); }

/* proof charts: viewBoxes are 78 tall so axis labels sit clear of the baseline */
.proof__viz { height: 84px; }

/* kickers glitch in (site.js decode): hidden until on screen, then a few
   hard-cut frames of green/ink split and slice while the label scrambles */
html.mo main .kicker { opacity: 0; }
.kicker::before { content: var(--kpre, '///'); }
.kicker.is-glitch-in { animation: kicker-glitch 0.64s steps(1) 1; }
@keyframes kicker-glitch {
  0% { text-shadow: 2px 0 rgb(var(--green-rgb) / 0.9), -2px 0 rgba(var(--ascii-rgb), 0.5); clip-path: inset(0 -6px 46% -6px); }
  7% { text-shadow: -2px 0 rgb(var(--green-rgb) / 0.9), 2px 0 rgba(var(--ascii-rgb), 0.5); clip-path: inset(54% -6px 0 -6px); }
  14% { text-shadow: 1.5px 0 rgb(var(--green-rgb) / 0.85), -1.5px 0 rgba(var(--ascii-rgb), 0.4); clip-path: none; }
  24% { text-shadow: -1.5px 0 rgb(var(--green-rgb) / 0.8), 1px 0 rgba(var(--ascii-rgb), 0.35); clip-path: inset(0 -6px 30% -6px); }
  30% { text-shadow: 1px 0 rgb(var(--green-rgb) / 0.7), -1px 0 rgba(var(--ascii-rgb), 0.3); clip-path: none; }
  48% { text-shadow: -1px 0 rgb(var(--green-rgb) / 0.55), 0.5px 0 rgba(var(--ascii-rgb), 0.2); }
  66%, 100% { text-shadow: none; clip-path: none; }
}

/* ---------- corners: crisp, not soft ---------- */
.hero-chip, .tags li, .t--cite { border-radius: var(--r-sm, 3px); }
/* the /news filter chips and post tags are pills, like the buttons (Nov 9), focus ring included */
.chip, .chip:focus-visible { border-radius: 999px; }
.nav__link { border-radius: var(--r-sm, 3px); }
.hero-chip__tag { border-radius: 2px; }
.post-card__media, .post__feature img, .post-body pre, .lab-card__cover, .engine__code { border-radius: var(--radius); }
.product__glyph, .t--input, .post-body img, .toast { border-radius: var(--r-sm, 3px); }

/* ---------- surfaces: one hairline, a faint top sheen, no tint ---------- */
:is(.panel, .proof__card, .window, .product, .highlight, .route, .compare__col, .bench__fig, .lab-card, .stack) {
  border-color: var(--hair);
}
:is(.panel, .proof__card, .product, .highlight, .route, .bench__fig, .lab-card) {
  background-image: linear-gradient(180deg, var(--sheen), transparent 42%);
}
:is(.stack, .compare__col) { background-color: var(--card); }
.cells { border-color: var(--hair); background: var(--hair); }

/* the light that follows the cursor round a card's border (site.js sets --mx/--my) */
.spot::after { display: none; }
.spot::before {
  content: ''; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--green-rgb) / calc(0.95 * var(--spot-k, 1))), rgb(var(--green-rgb) / calc(0.35 * var(--spot-k, 1))) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.spot:hover::before { opacity: 1; }
.spot:hover { border-color: var(--hair-2); }
.cells > .spot:hover { background: var(--card); }
/* blog cards have no border of their own, so the light draws a frame a
   little way outside them: a hairline all round, green near the cursor,
   clear of the image and the words */
.post-grid { column-gap: clamp(24px, 3vw, 40px); }
.post-card.spot { --pad: clamp(10px, 1.2vw, 16px); }
.post-card.spot::before {
  inset: calc(-1 * var(--pad)); border-radius: var(--radius);
  background:
    radial-gradient(320px circle at calc(var(--mx, 50%) + var(--pad)) calc(var(--my, 50%) + var(--pad)), rgb(var(--green-rgb) / calc(0.95 * var(--spot-k, 1))), rgb(var(--green-rgb) / calc(0.35 * var(--spot-k, 1))) 35%, transparent 70%),
    linear-gradient(var(--hair-2), var(--hair-2));
}

/* ---------- margins: drawn like a technical sheet ----------
   The rails belong to each section and stop short of the joins, so the
   verticals break where sections meet. polish.js gives each join one mark:
   a crosshair, a ruled line with ticks, or crop marks round a registration
   target, and hangs a running note in the right margin of every other
   section. All of it sits behind the content. */
main::after { display: none; }
.bp-mark { bottom: 0; z-index: -1; overflow-x: clip; }
/* full width, so the marks can sit out in the margin: --edge is where the
   content starts, --rx where the rail runs (the % is of the page width) */
.bp-mark__in {
  height: 100%; max-width: none; display: flow-root; /* flow-root: the note's margin mustn't drag the marks down */
  --edge: max(var(--gutter), calc(50% - var(--container) / 2));
  --rx: max(var(--rail-in), calc(var(--edge) - var(--rail-gap)));
}
.bp-rails {
  position: absolute; top: 30px; bottom: 30px; left: var(--rx); right: var(--rx); pointer-events: none;
  border-inline: 1px solid var(--rail);
  -webkit-mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent);
  mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent);
}
.bp-mark__in::before, .bp-mark__in::after {
  background:
    linear-gradient(var(--mark), var(--mark)) center / 9px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) center / 1px 9px no-repeat;
  opacity: 1;
}
.bp-mark__in::before { left: calc(var(--rx) - 5px); }
.bp-mark__in::after { right: calc(var(--rx) - 5px); }
.bp-mark__label { left: var(--edge); font-size: 10.5px; color: var(--mark-text); }
.bp-mark__label b { color: inherit; text-shadow: none; }

/* ruled: a plain hairline between the crosshairs (its scale ticks went Nov 10: "not lines vertical in this divider") */
.bp-ruler {
  position: absolute; top: -4px; left: calc(var(--rx) + 14px); right: calc(var(--rx) + 14px); height: 9px;
  background: linear-gradient(var(--mark-2), var(--mark-2)) 0 50% / 100% 1px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ease-out);
}
/* crop: dashes out into the margin, a registration target on the centre line */
.bp-mark--crop .bp-mark__in::before, .bp-mark--crop .bp-mark__in::after { top: 0; width: 18px; height: 1px; background: var(--mark); }
.bp-mark--crop .bp-mark__in::before { left: calc(var(--rx) - 27px); }
.bp-mark--crop .bp-mark__in::after { right: calc(var(--rx) - 27px); }
.bp-reg {
  position: absolute; top: 0; left: 50%; width: 13px; height: 13px; translate: -50% -50%;
  border: 1px solid var(--mark); border-radius: 50%;
  transition: rotate 0.9s var(--ease-out), scale 0.9s var(--ease-out), opacity 0.4s;
}
.bp-reg::before {
  content: ''; position: absolute; inset: -7px;
  background:
    linear-gradient(var(--mark), var(--mark)) center / 100% 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) center / 1px 100% no-repeat;
}
/* a running note, sticky in the right margin while its section passes */
.bp-note {
  position: sticky; top: calc(50vh - 80px);
  display: block; width: max-content; margin: 140px calc(var(--rx) - 24px) 140px auto;
  writing-mode: vertical-rl;
  font: 10px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--mark-text); white-space: nowrap;
}
.bp-note b { font-weight: 400; color: var(--green); }
/* the note and the crop dashes live out past the rail, so they need a real margin */
@media (max-width: 1339px) { .bp-note, .bp-mark--crop .bp-mark__in::before, .bp-mark--crop .bp-mark__in::after { display: none; } }
[data-notes='off'] .bp-note { display: none; }
@media (max-width: 760px) { .bp-ruler, .bp-reg, .bp-mark--crop .bp-mark__in::before, .bp-mark--crop .bp-mark__in::after { display: none; } }
/* on the way in: the scale draws across, the target turns into register */
html.mo .bp-mark:not(.is-in) .bp-ruler { clip-path: inset(0 100% 0 0); }
html.mo .bp-mark:not(.is-in) .bp-reg { rotate: -90deg; scale: 0.4; opacity: 0; }


/* ---------- buttons: still, light, the stroke does the moving ---------- */
.btn { font-weight: 500; letter-spacing: -0.01em; }
.btn--primary, .btn--green, .btn--ghost, .btn--outline { transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.2s; }

/* bracket: four corner marks sit on the outline; on hover they run along the
   edges until they meet, drawing the whole border in green */
[data-btn='bracket'] :is(.btn--primary, .btn--green) {
  --bc: var(--btn-corner);
  height: 46px; padding: 0 22px; border-radius: var(--r-sm, 3px);
  color: var(--ink);
  background: var(--btn-face);
  border: 1px solid var(--btn-line);
  box-shadow: none;
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), --bc 0.35s var(--ease-out), color 0.2s;
}
[data-btn='bracket'] .btn--lg:is(.btn--primary, .btn--green) { height: 52px; padding: 0 26px; font-size: 16px; }
[data-btn='bracket'] .btn--sm:is(.btn--primary, .btn--green) { height: 36px; padding: 0 16px; }
[data-btn='bracket'] :is(.btn--primary, .btn--green)::before {
  inset: -1px; opacity: 1;
  background:
    linear-gradient(var(--bc), var(--bc)) top left no-repeat,
    linear-gradient(var(--bc), var(--bc)) top left no-repeat,
    linear-gradient(var(--bc), var(--bc)) top right no-repeat,
    linear-gradient(var(--bc), var(--bc)) top right no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom left no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom left no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right no-repeat;
  background-size: 8px 1px, 1px 8px, 8px 1px, 1px 8px, 8px 1px, 1px 8px, 8px 1px, 1px 8px;
  transition: background-size 0.5s var(--ease-out);
}
[data-btn='bracket'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible) {
  --bc: var(--green);
  background: rgb(var(--green-rgb) / 0.07);
  border-color: transparent;
  box-shadow: none;
}
[data-btn='bracket'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible)::before {
  inset: -1px; opacity: 1;
  background-size: 51% 1px, 1px 51%, 51% 1px, 1px 51%, 51% 1px, 1px 51%, 51% 1px, 1px 51%;
}
[data-btn='bracket'] :is(.btn--primary, .btn--green):active { background: rgb(var(--green-rgb) / 0.13); transition-duration: 0.08s; }
[data-btn='bracket'] :is(.btn--primary, .btn--green):focus-visible { outline: none; }

/* secondary: the same shape, just a hairline that brightens */
[data-btn='bracket'] :is(.btn--ghost, .btn--outline) {
  height: 46px; border-radius: var(--r-sm, 3px); background: transparent; border-color: var(--ghost-line); color: var(--ink);
}
[data-btn='bracket'] .btn--lg:is(.btn--ghost, .btn--outline) { height: 52px; }
[data-btn='bracket'] .btn--sm:is(.btn--ghost, .btn--outline) { height: 34px; padding: 0 14px; }
[data-btn='bracket'] :is(.btn--ghost, .btn--outline):hover,
[data-btn='bracket'] .section--night .btn--ghost:hover { border-color: var(--ghost-line-hi); background: var(--ghost-face-hi); }

/* links: an underline draws itself in from the left */
.link-arrow {
  padding-bottom: 7px; border-bottom: 0;
  background:
    linear-gradient(var(--green), var(--green)) 0 100% / 0% 1px no-repeat,
    linear-gradient(var(--hair-2), var(--hair-2)) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.3s var(--ease-out), color 0.15s;
}
.link-arrow:hover, .section--night .link-arrow:hover { color: var(--ink); background-size: 100% 1px, 100% 1px; }
.cta-row > .link-quiet { padding-top: 5px; } /* centred beside a button, the underline's room no longer lifts the words */
.cta-row > .link-arrow { padding-top: 7px; }
.link-quiet {
  padding-bottom: 5px;
  background: linear-gradient(var(--green), var(--green)) 0 100% / 0% 1px no-repeat;
  transition: background-size 0.3s var(--ease-out), color 0.15s;
}
.link-quiet:hover { color: var(--ink); background-size: 100% 1px; }
.text-link, .prose a { text-decoration-color: rgb(var(--green-rgb) / 0.45); transition: text-decoration-color 0.25s, color 0.2s; }
.text-link:hover, .prose a:hover { text-decoration-color: currentColor; }

/* ---------- header: frosted once you scroll ---------- */
.site-header.is-scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
}
/* nav: hover is colour only, and the current page's line (.nav__bar) is
   simply there (refine.css) */
.nav__link { font-size: 14px; }
.header-talk {
  padding-bottom: 3px;
  background: linear-gradient(var(--green), var(--green)) 0 100% / 0% 1px no-repeat;
  transition: background-size 0.45s var(--ease-out), color 0.2s;
}
.header-talk:hover { color: var(--ink); background-size: 100% 1px; }
.hero-chip { border-color: var(--hair-2); }
.hero-chip:hover { border-color: rgb(var(--green-rgb) / 0.45); }

/* light / dark: the moon's shadow slides off and the sun's rays draw in */
.theme-toggle {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; flex: none;
  color: var(--ink-2); background: none; border: 1px solid transparent; border-radius: var(--r-sm, 3px); cursor: pointer;
  transition: color 0.2s, border-color 0.3s var(--ease-out);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--hair-2); }
.theme-toggle[hidden] { display: none; }
.theme-toggle svg { width: 17px; height: 17px; overflow: visible; }
.tt-core { fill: currentColor; transform-box: view-box; transform-origin: 12px 12px; transition: transform 0.55s var(--ease-out); }
.tt-cut { transition: transform 0.55s var(--ease-out); }
.tt-rays line { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.35s var(--ease-out); }
[data-theme='light'] .tt-core { transform: scale(0.6); }
[data-theme='light'] .tt-cut { transform: translate(9px, -9px); }
[data-theme='light'] .tt-rays line { stroke-dashoffset: 0; }
[data-theme='light'] .tt-rays line:nth-child(2) { transition-delay: 0.04s; }
[data-theme='light'] .tt-rays line:nth-child(3) { transition-delay: 0.08s; }
[data-theme='light'] .tt-rays line:nth-child(4) { transition-delay: 0.12s; }
[data-theme='light'] .tt-rays line:nth-child(5) { transition-delay: 0.16s; }
[data-theme='light'] .tt-rays line:nth-child(6) { transition-delay: 0.2s; }
[data-theme='light'] .tt-rays line:nth-child(7) { transition-delay: 0.24s; }
[data-theme='light'] .tt-rays line:nth-child(8) { transition-delay: 0.28s; }
/* the switch itself: the new theme opens as a circle from the toggle (polish.js) */
html.theme-vt .site-header { view-transition-name: none; }
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- FAQ: a hairline list that opens smoothly ---------- */
.faq__list { gap: 0; border-top: 1px solid var(--hair); }
.faq__item { background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; }
.faq__item.spot::before { display: none; }
.faq__item summary { padding: 22px 4px; font-size: 17.5px; transition: color 0.2s; }
.faq__item summary:hover { background: none; }
.faq__item:not([open]) summary:hover { color: var(--ink); }
.faq__icon { width: 20px; height: 20px; border: 0; transition: transform 0.45s var(--ease-out); }
.faq__icon::before, .faq__icon::after { left: 4px; right: 4px; top: 9.5px; background: var(--ink-2); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item[open] .faq__icon::after { transform: rotate(90deg); opacity: 1; }
.faq__item::details-content { height: 0; overflow: clip; transition: height 0.45s var(--ease-out), content-visibility 0.45s allow-discrete; }
.faq__item[open]::details-content { height: auto; }
.faq__answer { padding: 0 46px 26px 4px; } /* under the question, clear of the icon */
@media (max-width: 520px) { .faq__answer { padding-left: 4px; } }

/* ---------- the example sessions (site.js plays them) ----------
   Quick but believable: a small spinner while a step runs, a
   soft shimmer while Matilda thinks, a status dot that breathes rather than
   blinks. */
.window.is-streaming .window__status .dot { animation: t-breathe 1.8s ease-in-out infinite; }
@keyframes t-breathe { 50% { opacity: 0.35; } }
.t--step.is-spinning::before {
  content: ''; left: 1px; top: 0.52em; width: 9px; height: 9px;
  border: 1.5px solid rgb(255 255 255 / 0.16); border-top-color: var(--green); border-radius: 50%;
  animation: t-spin 0.8s linear infinite;
}
@keyframes t-spin { to { transform: rotate(360deg); } }
.t--think.is-thinking {
  color: transparent;
  background: linear-gradient(90deg, var(--night-dim) 35%, var(--night-hi) 50%, var(--night-dim) 65%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: t-shimmer 1.8s linear infinite;
}
@keyframes t-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* streamed words fade up into place, each a beat behind the last */
.window.is-playing .tw { opacity: 0; filter: blur(3px); transition: opacity 0.32s var(--ease-out), filter 0.32s var(--ease-out); }
.window.is-playing .tw.is-in { opacity: 1; filter: none; }
/* a finished step's tick lands with a small pop */
.t--step.is-done::before { animation: t-tick 0.32s var(--ease-out); }
@keyframes t-tick { from { transform: scale(0.4); opacity: 0; } }
/* on a phone the title bar stays one line: the place drops off first, then
   the title trims; the body gives the transcript a little more width */
.window__bar { white-space: nowrap; }
.window__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.window__status { flex: none; }
@media (max-width: 560px) {
  .window__where { display: none; }
  .window__bar { padding: 12px 14px; }
  .window__body { padding: 18px 16px 22px; }
}

/* ---------- on load: the readout under the hero arrives with the rest ---------- */
html.mo .hero-meta { animation: polish-in 0.5s var(--ease-out) 0.55s both; }
@keyframes polish-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- small things ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.stat__value, .proof__card .stat__value, .highlight__stat b { font-variant-numeric: tabular-nums; }

html.mo .steprail { opacity: 0; }

/* /css/refine.css */
/* Maincode — refine.css
   The type-and-motion pass (Nov 2026), loaded after polish.css and before
   light.css. Three jobs:
   1. A calmer, more neutral type system: Inter (Display cut for headlines via
      its optical-size axis) on the scale the Matilda site uses: a ~64px top
      headline, 48px section heads, 20px ledes, 18px card titles, 14.5px card
      copy, 12px mono labels. Tracking tightens as size grows.
   2. One rhythm: the same gaps between kicker, headline, lede and actions on
      every page, and card interiors that match each other.
   3. Small motion done properly: arrows that swap on hover, a nav underline
      that slides between pages, a menu that unfolds, a chip that catches the
      light once. Buttons and cards still never move; light and stroke do.
   Colours come from tokens, so light.css still re-inks everything. */

:root {
  --fs-display: calc(clamp(40px, 4.7vw, 66px) * var(--hs, 1));
  --lh-display: 1.1; /* every page's h1 (Nov 9: Kees asked for more leading; was 1.02) */
  --fs-h1: calc(clamp(38px, 4.3vw, 60px) * var(--hs, 1));
  --fs-h2: calc(clamp(30px, 3.2vw, 46px) * var(--hs, 1));
  --fs-h3: clamp(19px, 1.45vw, 21px);
  --fs-lede: clamp(17px, 1.32vw, 19.5px);
  --fs-body: 16px;
  --fs-card: 14.5px;
  --fs-meta: 12px;
  --ease-swift: cubic-bezier(0.32, 0.72, 0, 1); /* quick off the mark, long soft settle */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* ---------- 1. type ---------- */
body {
  font-size: var(--fs-body); line-height: 1.6; letter-spacing: -0.009em;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-feature-settings: 'kern', 'calt';
}
h1, h2, h3, h4 { font-optical-sizing: auto; }

/* .display is every page's h1, /matilda's included: one size, one leading */
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.021em; }
.h1 { font-size: var(--fs-h1); line-height: 1.03; letter-spacing: -0.02em; }
.h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.018em; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.016em; }
.lede { font-size: var(--fs-lede); line-height: 1.5; letter-spacing: -0.013em; color: var(--ink-2); }
.body-lg { font-size: 17.5px; line-height: 1.65; letter-spacing: -0.012em; }
.statement__text { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.16; letter-spacing: -0.02em; }
.quote p { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; letter-spacing: -0.02em; }
.kicker { font-size: 12.5px; letter-spacing: 0.01em; }
.num { font-size: 11.5px; letter-spacing: 0.04em; }
/* hero copy sits a step back from the headline, as on the Matilda site */
.home-hero .lede, .home-hero__split .lede, .page-hero .lede { color: var(--ink-2); }

/* ---------- 2. rhythm ---------- */
/* heroes: kicker → 22 → headline → 24 → lede → 36 → actions */
.page-hero { padding: clamp(48px, 5.5vw, 80px) 0 clamp(60px, 7vw, 104px); }
.page-hero .h1, .page-hero .display { margin-top: 22px; max-width: 22ch; }
.page-hero .lede, .page-hero .stack-md > .lede { margin-top: 24px; max-width: 58ch; }
/* centred ledes balance their lines, so a last word ("MC-2.") never sits alone (Nov 10) */
:is(.page-hero, .home-hero, .section-head--split) .lede { text-wrap: balance; }
.page-hero .cta-row, .page-hero .stack-md > .cta-row { margin-top: 36px; }
.home-hero .display { margin-top: 26px; }
.home-hero__split .display { max-width: 14ch; }
.home-hero__split .lede { margin-top: 24px; max-width: 44ch; }
@media (min-width: 961px) { .home-hero__split .lede { margin-left: 0; margin-right: 0; } }
.home-hero .home-hero__split .cta-row { margin-top: 36px; }
.hero-meta { margin-top: 30px; }

.section-head { margin-bottom: clamp(40px, 4.8vw, 64px); }
.section-head .h2 { max-width: 18ch; }
.section-head--split .lede { margin-top: 20px; max-width: 56ch; }
.cta-band .h2 { max-width: 22ch; }
.cta-band .cta-row, .careers-band .cta-row { margin-top: 32px; }
.proof-head .h2 { max-width: 20ch; }
.stack-md > :not(:first-child) { margin-top: 22px; }
.stack-md > .kicker + .h2, .stack-md > .kicker + .h3 { margin-top: 18px; }
.prose { max-width: 64ch; }

/* ---------- cards: one interior ---------- */
/* title 18 / medium; copy 14.5 / 1.6 in the second ink; labels 12 mono */
.cell { padding: 28px 28px 30px; }
.cell__num { margin-bottom: 32px; }
.cell__title { font-size: 18px; line-height: 1.35; letter-spacing: -0.016em; margin-bottom: 8px; }
.cell__body { font-size: var(--fs-card); line-height: 1.6; }

.proof__card { padding: 24px 24px 22px; }
.proof__label { font-size: var(--fs-meta); }
.proof__desc { font-size: 14px; line-height: 1.5; text-wrap: balance; }
.proof__go { font-size: 13.5px; }

.product__name { font-size: 20px; letter-spacing: -0.018em; margin-top: 26px; }
.product__desc { font-size: var(--fs-card); line-height: 1.6; }
.product__links a { font-size: 14.5px; }

.highlight { padding: 26px; }
.highlight__meta { font-size: var(--fs-meta); }
.highlight__title { font-size: 19.5px; line-height: 1.25; letter-spacing: -0.018em; }
.highlight__body { font-size: var(--fs-card); line-height: 1.6; }
.highlight__go { font-size: 14px; }
.highlight--feature .highlight__title { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.06; letter-spacing: -0.022em; }
.highlight--feature .highlight__body { font-size: 16.5px; }

.route { padding: 28px; }
.route__title { font-size: 20px; letter-spacing: -0.018em; }
.route__desc { font-size: 15px; line-height: 1.55; }
.route--primary .route__title { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.024em; }

.lab-card__title { font-size: 16px; line-height: 1.38; font-weight: 500; letter-spacing: -0.012em; }
.lab-card__meta { font-size: 11.5px; letter-spacing: 0.02em; }
.lab-card__go { font-size: 13px; }

.post-card__title { font-size: 20px; line-height: 1.25; letter-spacing: -0.018em; }
.post-card__excerpt { font-size: 15px; line-height: 1.6; }
.post-card__meta { font-size: 11.5px; letter-spacing: 0.03em; }
.post-card--feature .post-card__title { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.022em; }
.post-row__title { font-size: 16.5px; letter-spacing: -0.012em; }
.post-row__date { font-size: var(--fs-meta); }

.flow-cap__title { font-size: 15.5px; letter-spacing: -0.012em; }
.flow-cap__sub { font-size: 14px; }
.stat__label { font-size: 14.5px; }
.timeline__what { font-size: 17px; letter-spacing: -0.014em; }
.timeline__what span { font-size: 14.5px; }
.role__title { font-size: 17px; letter-spacing: -0.014em; }
.stack__what { font-size: 15.5px; letter-spacing: -0.01em; }
.stack__what span { font-size: 13.5px; }
.compare__chain li { font-size: 15px; }
.checklist li { font-size: 15.5px; letter-spacing: -0.01em; }
.spec dd { font-size: 15.5px; }
.faq__item summary { font-size: 16.5px; letter-spacing: -0.012em; }
.faq__answer { font-size: 15.5px; line-height: 1.65; }
.textlist li { font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -0.018em; }

/* post pages: 18px text at a comfortable measure */
.post__title { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.024em; }
.post__subtitle { font-size: clamp(18px, 1.55vw, 21px); letter-spacing: -0.014em; }
.post-body { font-size: 17.5px; line-height: 1.7; letter-spacing: -0.011em; }
.post-body h2 { font-size: clamp(24px, 2.2vw, 29px); letter-spacing: -0.022em; }
.post-body h3 { font-size: 20.5px; letter-spacing: -0.016em; }
.post-body blockquote { font-size: 19px; letter-spacing: -0.014em; hanging-punctuation: first; }

/* ---------- 3. header ---------- */
.logo { height: 22px; }
.nav__link { padding: 0 12px; font-size: 14.5px; font-weight: 450; letter-spacing: -0.008em; }
.nav__link::after { left: 12px; right: 12px; }
.header-talk { font-size: 14.5px; letter-spacing: -0.008em; }

/* the current page: a standing line under its label, simply there (it no
   longer draws in or slides between pages) */
.nav__bar {
  position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1px; pointer-events: none;
  background: var(--green);
}

/* hover (Nov 6): colour only, the way Claude's and xAI's headers do it. The
   label brightens and nothing draws, rolls or moves (a gliding line, bracket
   corners, a glitch and a letter roll were all tried and dropped). */
.nav__link::after { display: none; }
.header-talk { position: relative; align-items: center; height: 36px; padding: 0 12px; margin: 0 -12px; background: none; } /* no polish.css underline */
@media (min-width: 1181px) { .header-talk { display: inline-flex; } } /* hidden below that (site.css) */
:is(.nav__link, .header-talk) { transition: color 0.15s; }



/* ---------- buttons ---------- */
.btn { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.btn--lg { font-size: 15.5px; }
.btn--sm { font-size: 14px; }
[data-btn='bracket'] :is(.btn--primary, .btn--green) { height: 44px; padding: 0 22px; }
[data-btn='bracket'] .btn--lg:is(.btn--primary, .btn--green) { height: 50px; padding: 0 26px; font-size: 15.5px; }
[data-btn='bracket'] :is(.btn--ghost, .btn--outline) { height: 44px; }
[data-btn='bracket'] .btn--lg:is(.btn--ghost, .btn--outline) { height: 50px; }

/* ---------- rounded buttons (Nov 9): trace | lamp | solid ----------
   Pills that never move. The primary answers in light along its edge (trace,
   lamp) or is the one solid shape on the page (solid). Secondary buttons
   share one quiet pill: a hairline that brightens.
   Timing (Nov 10, "sleeker and quicker"): faces and hairlines answer in
   ~0.16s; the trace draws in 0.3s on --ease-swift and fades out in 0.18s. */
:is([data-btn='trace'], [data-btn='lamp'], [data-btn='solid']) :is(.btn--primary, .btn--green, .btn--ghost, .btn--outline) {
  height: 44px; padding: 0 22px; border-radius: 999px; animation: none; box-shadow: none;
}
:is([data-btn='trace'], [data-btn='lamp'], [data-btn='solid']) .btn--lg:is(.btn--primary, .btn--green, .btn--ghost, .btn--outline) { height: 50px; padding: 0 28px; }
:is([data-btn='trace'], [data-btn='lamp'], [data-btn='solid']) .btn--sm:is(.btn--primary, .btn--green, .btn--ghost, .btn--outline) { height: 36px; padding: 0 17px; }
:is([data-btn='trace'], [data-btn='lamp'], [data-btn='solid']) :is(.btn--ghost, .btn--outline) {
  color: var(--ink); background: transparent; border: 1px solid var(--ghost-line);
  transition: border-color 0.16s var(--ease-out), background-color 0.16s var(--ease-out), color 0.12s;
}
:is([data-btn='trace'], [data-btn='lamp'], [data-btn='solid']) :is(.btn--ghost, .btn--outline):is(:hover, :focus-visible) {
  border-color: var(--ghost-line-hi); background: var(--ghost-face-hi);
}

/* trace and lamp: a dark face and a hairline; their light is ::before, masked to the 1px edge */
:is([data-btn='trace'], [data-btn='lamp']) :is(.btn--primary, .btn--green) {
  color: var(--ink); background: var(--btn-face); border: 1px solid var(--ghost-line);
  transition: background-color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), color 0.12s;
}
:is([data-btn='trace'], [data-btn='lamp']) :is(.btn--primary, .btn--green)::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:is([data-btn='trace'], [data-btn='lamp']) :is(.btn--primary, .btn--green):is(:hover, :focus-visible) { background-color: rgb(var(--green-rgb) / 0.06); }

/* trace: the outline draws itself in green from the left end, top and bottom
   at once, closing at the right. Only the width animates (anchored left), so
   the line grows cleanly rather than sliding in. On leaving it fades in a
   blink and resets unseen; a quick pass over the button just fades what
   was drawn, and coming back mid-fade picks the line up where it was. */
[data-btn='trace'] :is(.btn--primary, .btn--green)::before {
  background: linear-gradient(var(--green), var(--green)) no-repeat 0 0 / 0% 100%;
  opacity: 0;
  transition: opacity 0.18s var(--ease-out), background-size 0s linear 0.18s;
}
[data-btn='trace'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible)::before {
  background-size: 100% 100%; opacity: 1;
  transition: background-size 0.3s var(--ease-swift), opacity 0.06s;
}
[data-btn='trace'] :is(.btn--primary, .btn--green):focus-visible { outline: none; }

/* lamp: the cards' cursor light (polish.css .spot), sized for a button: a
   green glint rides the edge under the pointer and the face warms beneath it */
[data-btn='lamp'] :is(.btn--primary, .btn--green)::before {
  background: radial-gradient(80px circle at var(--mx, 50%) var(--my, 50%), var(--green), rgb(var(--green-rgb) / 0.3) 45%, transparent 75%);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
}
[data-btn='lamp'] :is(.btn--primary, .btn--green)::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--green-rgb) / 0.08), transparent 70%);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
}
[data-btn='lamp'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible)::before,
[data-btn='lamp'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible)::after { opacity: 1; }

/* solid: an ink pill (white on dark, black on light); on hover a green
   hairline ring eases out around it */
[data-btn='solid'] :is(.btn--primary, .btn--green) {
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  outline: 1px solid transparent; outline-offset: 0;
  transition: background-color 0.3s var(--ease-out), outline-color 0.3s var(--ease-out), outline-offset 0.35s var(--ease-out);
}
[data-btn='solid'] :is(.btn--primary, .btn--green):is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--ink) 94%, var(--paper));
  outline: 1px solid rgb(var(--green-rgb) / 0.85); outline-offset: 3px; border-radius: 999px;
}
.link-arrow { font-size: 14.5px; letter-spacing: -0.008em; }
.link-quiet { font-size: 15px; letter-spacing: -0.008em; }

/* ---------- arrows that swap ----------
   polish.js wraps the → / ↗ / ← inside links as .arw with two copies: on
   hover the first leaves in its own direction and the second arrives from
   behind. Only the glyph moves, never the link. */
.arw {
  display: inline-grid; vertical-align: -0.08em; line-height: 1;
  overflow: hidden; padding: 0.14em 0.1em; margin: -0.14em -0.1em;
}
.arw > span { grid-area: 1 / 1; transition: transform 0.28s var(--ease-swift); }
.arw > span + span { transform: translateX(-120%); }
.arw[data-dir='ne'] > span + span { transform: translate(-120%, 120%); }
.arw[data-dir='w'] > span + span { transform: translateX(120%); }
:is(a, button):is(:hover, :focus-visible) .arw > span:first-child { transform: translateX(120%); }
:is(a, button):is(:hover, :focus-visible) .arw[data-dir='ne'] > span:first-child { transform: translate(120%, -120%); }
:is(a, button):is(:hover, :focus-visible) .arw[data-dir='w'] > span:first-child { transform: translateX(-120%); }
:is(a, button):is(:hover, :focus-visible) .arw > span + span { transform: none; }
/* the old nudges give way to the swap */
.hero-chip:hover .hero-chip__arrow, .post-row a:hover .post-row__arrow { transform: none; }

/* ---------- hero chip: mono tag, a live dot, one pass of light ---------- */
.hero-chip { gap: 12px; padding: 4px 14px 4px 4px; font-size: 13.5px; letter-spacing: -0.006em; overflow: hidden; position: relative; }
.hero-chip__tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; font-size: 11.5px; letter-spacing: 0.02em; text-shadow: none; }
.hero-chip__tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 0 rgb(var(--green-rgb) / 0.5);
  animation: chip-ping 2.4s var(--ease-out) infinite;
}
@keyframes chip-ping { 0% { box-shadow: 0 0 0 0 rgb(var(--green-rgb) / 0.45); } 70%, 100% { box-shadow: 0 0 0 5px rgb(var(--green-rgb) / 0); } }
.hero-chip::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgb(var(--green-rgb) / 0.9) 48%, rgba(var(--ascii-rgb), 0.6) 52%, transparent 70%) -150% 0 / 220% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.mo .hero-chip::after { animation: chip-sweep 1.3s var(--ease-swift) 0.9s both; }
@keyframes chip-sweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }
/* ---------- announcement bar (Nov 10) ----------
   Heroes carry no badges or kickers: the headline stands alone. The one
   pinned message (site.config `announcement`) is a single quiet line above
   the header on the home page (views.js announceBar). It scrolls away with
   the page while the header below stays sticky. Closing it is remembered
   (site.js; boot.js hides it before paint next time). A Matilda one has the
   Matilda mark, and its foot catches a faint line of Matilda yellow. */
.ann { --ann-rgb: var(--green-rgb); position: relative; z-index: 51; background: var(--paper); }
.ann[data-brand='matilda'] { --ann-rgb: 232 197 71; }
html[data-theme='light'] .ann[data-brand='matilda'] { --ann-rgb: 176 138 18; }
html.ann-off .ann { display: none; }
.ann::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 160% at 50% 100%, rgb(var(--ann-rgb) / 0.06), transparent 72%);
}
.ann::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 12%, rgb(var(--ann-rgb) / 0.28) 50%, transparent 88%);
}
.ann__inner { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 12px; height: 40px; }
.ann__link {
  grid-column: 2; justify-self: center; display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%;
  font-size: 13.5px; letter-spacing: -0.006em; color: var(--ink-2); text-decoration: none; transition: color 0.2s;
}
.ann__link:hover { color: var(--ink); }
.ann__mark { flex: none; width: 13px; height: 13px; color: rgb(var(--ann-rgb)); }
.ann__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann__arw { flex: none; color: var(--muted); transition: transform 0.25s var(--ease-out), color 0.2s; }
.ann__link:hover .ann__arw { transform: translateX(3px); color: var(--ink); }
.ann__x {
  grid-column: 3; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; margin-right: -6px;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.ann__x:hover { background: var(--hair); color: var(--ink); }
.ann__x:focus-visible { outline: 1.5px solid var(--green); outline-offset: 1px; }
.ann__x svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
/* in: a soft fade as the page opens; out: it folds away (site.js) */
html.mo .ann { animation: ann-in 0.6s var(--ease-out) 0.2s both; }
@keyframes ann-in { from { opacity: 0; } }
.ann.is-closing { overflow: hidden; transition: height 0.34s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s; }
@media (prefers-reduced-motion: reduce) { .ann.is-closing { transition: none; } }
/* home hero top: lowered Nov 9 (from 40px / 7vh / 96px), raised a little Nov 10 (from 64px / 11vh / 128px) now the announcement bar sits above the header */
.home-hero--stage { padding-top: clamp(44px, 7vh, 88px); }

/* ---------- links in running text ---------- */
.prose a, .text-link, .post-body a, .faq__answer a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* ---------- footer: quieter links that light on hover ---------- */
.footer-top { padding-top: clamp(64px, 7vw, 96px); }
.footer-brand p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.footer-col__title { font-size: var(--fs-meta); letter-spacing: 0.02em; margin-bottom: 16px; }
.footer-col ul { gap: 10px; }
.footer-col li { line-height: 1.5; }
.footer-col a {
  font-size: 14.5px; color: var(--ink-2); letter-spacing: -0.008em;
  padding-bottom: 2px;
  background: linear-gradient(var(--green), var(--green)) 0 100% / 0% 1px no-repeat;
  transition: background-size 0.45s var(--ease-out), color 0.2s;
}
.footer-col a:hover { color: var(--ink); background-size: 100% 1px; }

/* ---------- page to page ----------
   The old page steps back and fades in a blink; the new one rises out of a
   soft focus. The header holds still. */
::view-transition-old(root) { animation: vt-out 0.16s var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 0.42s var(--ease-out) 0.04s both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }
::view-transition-group(site-header) { animation-duration: 0.3s; }

/* ---------- Matilda product glyphs ----------
   Line drawings in place of the old characters, still at rest; hovering the
   card gives each its own small act: the mark turns, the caret blinks, the
   window fills in, a packet crosses the braces, the slashes light in turn. */
.product__glyph { color: var(--matilda-ink); border-color: var(--hair); transition: border-color 0.35s var(--ease-out); }
.product:hover .product__glyph { border-color: color-mix(in srgb, var(--matilda) 38%, transparent); }
.pg { width: 22px; height: 22px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pg path, .pg rect, .pg circle { vector-effect: non-scaling-stroke; }
.product:hover .pg-caret { animation: pg-blink 1s steps(1) infinite; }
@keyframes pg-blink { 50% { opacity: 0; } }
.pg-ln { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.55; }
.product:hover .pg-ln { animation: pg-draw 0.5s var(--ease-out) both; opacity: 1; }
.product:hover .pg-ln--2 { animation-delay: 0.12s; }
@keyframes pg-draw { from { stroke-dashoffset: 1; } }
.pg-pkt { fill: currentColor; stroke: none; opacity: 0; }
.product:hover .pg-pkt { animation: pg-pkt 1.4s var(--ease-swift) infinite; }
@keyframes pg-pkt { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 60% { opacity: 1; transform: translateX(4px); } 80%, 100% { opacity: 0; transform: translateX(4px); } }
.pg-s { transition: stroke 0.2s; }
.product:hover .pg-s { animation: pg-lit 1.2s steps(1) infinite; }
.product:hover .pg-s:nth-child(2) { animation-delay: 0.15s; }
.product:hover .pg-s:nth-child(3) { animation-delay: 0.3s; }
@keyframes pg-lit { 0%, 55% { stroke: var(--green); } 56%, 100% { stroke: currentColor; } }

/* ---------- proof cards: the highlighted figure comes forward on hover ---------- */
.proof__viz .bar, .proof__viz text { transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.35s var(--ease-out), fill 0.35s; }
.proof__card:hover .proof__viz .bar:not(.hi) { opacity: 0.55; }
.proof__card:hover .proof__viz text { fill: var(--ink-2); }

/* ---------- copy: the button confirms in place ---------- */
[data-copy] { position: relative; }
[data-copy].is-copied { color: var(--green); border-color: rgb(var(--green-rgb) / 0.45); }
.copy-tick { width: 12px; height: 12px; margin-right: 2px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.copy-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: copy-tick 0.35s var(--ease-out) 0.05s both; }
@keyframes copy-tick { to { stroke-dashoffset: 0; } }

/* ---------- checklist ticks draw themselves as their line arrives ----------
   (site.js marks each revealed item with data-revealed) */
html.mo .checklist > li::before { clip-path: inset(0 100% 0 0); }
html.mo .checklist > li[data-revealed]::before { clip-path: inset(0 0 0 0); transition: clip-path 0.45s var(--ease-out) 0.18s; }

/* ---------- page-hero checklists wrap two by two, not three and one ---------- */
.page-hero .checklist { max-width: 780px; margin-left: auto; margin-right: auto; }

/* ---------- links inside long-form posts: quiet until hovered ---------- */
.post-body a { text-decoration-color: rgb(var(--green-rgb) / 0.4); transition: text-decoration-color 0.25s, color 0.2s; }
.post-body a:hover { color: var(--green-ink); text-decoration-color: currentColor; }

/* ---------- small things ---------- */
:focus-visible { outline-width: 1.5px; outline-offset: 3px; border-radius: var(--r-sm, 2px); }
.chip { font-size: 11.5px; letter-spacing: 0.02em; transition: border-color 0.2s, color 0.2s, background-color 0.2s; }
.back-link { font-size: 12px; letter-spacing: 0.02em; }
.window { font-size: 13px; }
.window__title, .window__status { font-size: 11.5px; }
img { -webkit-user-drag: none; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
.stat__value, .proof__card .stat__value { font-size: clamp(30px, 2.9vw, 42px); letter-spacing: -0.03em; }

@media (prefers-reduced-motion: reduce) {
  .hero-chip__tag::before { animation: none; }
  .mega, .mega-bg, .mnav__panel { transition: none !important; }
}

/* ---------- polish pass (Nov 6): one scale, calmer details ----------
   Every headline sits on the same scale, big numbers stop shouting, links in
   running text read as text, covers share one tone, and the margins carry
   less. */
.highlight__stat b { font-size: clamp(44px, 4.2vw, 60px); letter-spacing: -0.03em; }
.route__title { line-height: 1.15; text-wrap: balance; }

/* links inside copy: ink with a green rule under them, which strengthens on
   hover; a paragraph full of links no longer reads as green */
:is(.prose, .post-body, .faq__answer) a, .text-link { color: var(--ink); text-decoration-color: rgb(var(--green-rgb) / 0.5); transition: text-decoration-color 0.15s, color 0.15s; }
:is(.prose, .post-body, .faq__answer) a:hover, .text-link:hover { color: var(--ink); text-decoration-color: var(--green); }
html[data-theme='light'] :is(.prose, .post-body, .faq__answer) a, html[data-theme='light'] .text-link { color: var(--ink); }

/* covers: one greyscale tone side by side; colour comes back on the card
   you point at. They no longer zoom (cards stay still) */
:is(.post-card__media, .lab-card__cover) img { filter: grayscale(1) contrast(1.06) brightness(0.8); transform: none; transition: filter 0.45s var(--ease-out); }
:is(.post-card__link:hover .post-card__media, .lab-card:hover .lab-card__cover) img { filter: none; transform: none; }

/* margins: with notes off (the default now) the section numbers go too,
   leaving just the quiet join marks */
[data-notes='off'] .bp-mark__label { display: none; }


/* contact: the main route leads by size and position, not by a green wash */
.route--primary { background: var(--card); border-color: var(--hair-2); }
.route--primary:hover { border-color: rgb(var(--green-rgb) / 0.5); }

/* footer: the bar above the mark is gone (Nov 9); the legal line sits small at
   the end of the caption's row, and the ASCII field keeps clear of both */
.footer-mark__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; margin-top: clamp(18px, 2.4vw, 28px); }
.footer-mark__row .footer-mark__caption { margin: 0; }
.footer-fine { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font: 12px/1.4 var(--font-mono); color: var(--muted); }
.footer-fine a, .footer-fine button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: none; cursor: pointer; transition: color 0.15s; }
.footer-fine a:hover, .footer-fine button:hover { color: var(--ink); }
/* the light/dark toggle closes the fine print (polish.css draws the icon) */
.footer-fine .theme-toggle { width: 22px; height: 22px; align-self: center; margin: -3px 0 -3px -3px; }
.footer-fine .theme-toggle svg { width: 14px; height: 14px; }

/* ---------- the menus (Nov 9): wide panels, like a product site ----------
   Each menu opens a panel under the header: a card for the section (a small
   preview on top, the page's name and line under it), then its pages as
   links with a line icon (views.js navItem). With JS (site.js adds
   html.has-mega) one surface, .mega-bg, sits behind every panel and glides to
   the size of whichever is open while the contents slide across; without it
   each panel shows on hover with a surface of its own.
   Geometry is concentric: the panel's corner (--mega-r) less its padding
   (--mega-p) is the card's and the link highlight's corner (--mega-ri), and
   the icon tiles step down again by the link's padding, so every curve runs
   parallel to the one around it. The menu keeps these corners whatever the
   page's card corners are set to. Motion is quick and settles softly. */
:root {
  --mega-r: 20px; --mega-p: 6px; --mega-ri: 14px;
  --mega-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --mega-hi: rgba(255, 255, 255, 0.06);
  --mega-line: rgba(255, 255, 255, 0.1);
  --mega-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 24px 56px -16px rgba(0, 0, 0, 0.7);
}
[data-theme='light'] {
  --mega-hi: rgba(0, 0, 0, 0.045);
  --mega-line: rgba(0, 0, 0, 0.08);
  --mega-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 44px -14px rgba(0, 0, 0, 0.18);
}
.site-header__inner { position: relative; }
.nav__item--menu { position: static; }
/* Each menu keeps its own accent on every page (Nov 10): Matilda's (its label
   line, panel and phone panel; site.config nav `accent`) is Matilda yellow,
   the rest Maincode green, Matilda pages included. Values match matilda.css;
   mtlAccent 'green' turns it off with the page's. */
[data-mtl='gold'] [data-accent='matilda'] {
  --green: #e8c547; --green-rgb: 232 197 71; --green-ink: #e8c547; --green-wash: rgb(232 197 71 / 0.12);
}
[data-mtl='gold'][data-theme='light'] [data-accent='matilda'] {
  --green: #b08a12; --green-rgb: 176 138 18; --green-ink: #8a6a00; --green-wash: rgb(176 138 18 / 0.12);
}
.mega, .mega-bg { width: min(620px, calc(100vw - 48px)); border-radius: var(--mega-r); }
.mega {
  position: absolute; top: 100%; left: 50%; z-index: 6; padding: var(--mega-p);
  background: var(--card); border: 1px solid var(--mega-line); box-shadow: var(--mega-shadow);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -4px);
  transition: opacity 0.14s ease, transform 0.22s var(--mega-ease), visibility 0s linear 0.22s;
}
.mega::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; } /* bridge from the label */
html:not(.has-mega) .nav__item--menu:is(:hover, :focus-within) .mega,
.mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
html.has-mega .mega { background: none; border-color: transparent; box-shadow: none; transform: translate(calc(-50% + var(--dx, 0px)), 0); }
html.has-mega .mega.is-open { transform: translate(-50%, 0); }
.mega-bg {
  position: absolute; top: 100%; left: 50%; z-index: 5; height: var(--mh, 0px); pointer-events: none;
  background: var(--card); border: 1px solid var(--mega-line); box-shadow: var(--mega-shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, -4px) scale(0.985); transform-origin: 50% 0;
  transition: height 0.26s var(--mega-ease), opacity 0.14s ease, transform 0.24s var(--mega-ease), visibility 0s linear 0.24s;
}
.mega-bg.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.mega-bg.is-first { transition-property: opacity, transform, visibility; } /* opening fresh: no height glide */
.nav__toggle[aria-expanded='true'] { color: var(--ink); }

.mega__panel { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--mega-p); }

/* the card: a preview flush along the top (it takes the card's corners, so
   nothing inside fights them), then the page's name and line. Pointing at a
   link swaps all three for that link's (site.js); the box keeps its size */
.mega__feature {
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  border: 1px solid var(--hair); border-radius: var(--mega-ri); background: var(--paper);
  text-decoration: none; transition: border-color 0.15s;
}
.mega__feature:is(:hover, :focus-visible) { border-color: var(--hair-2); }
.mega__feature:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; border-radius: var(--mega-ri); }
.mega__assets { position: relative; display: block; height: 168px; border-bottom: 1px solid var(--hair); }
.mega__text { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.mega__go { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.mega__arw { color: var(--muted); transition: color 0.15s; }
.mega__feature:hover .mega__arw { color: var(--ink); }
/* one line, always (the lines are written to fit), so the card never changes height */
.mega__title { overflow: hidden; font-size: 13px; line-height: 1.35; letter-spacing: -0.006em; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.mega__feature[aria-current='page'] .mega__go > span:first-child, [aria-current='page'] .mnav__ov-title { color: var(--green-ink, var(--green)); }
/* the swap: words blink out and back in a breath; the preview cross-fades
   with a little focus pull */
:is(.mega__title, .mega__go > span:first-child) { transition: opacity 0.12s ease, filter 0.12s ease; }
.mega__feature.is-swap :is(.mega__title, .mega__go > span:first-child) { opacity: 0; filter: blur(2px); transition-duration: 0.06s; }
.mega__asset { position: absolute; inset: 0; display: block; opacity: 0; transform: scale(0.97); filter: blur(4px); transition: opacity 0.16s ease, transform 0.26s var(--mega-ease), filter 0.2s ease; }
.mega__asset.is-on { opacity: 1; transform: none; filter: none; }

/* the links: a name and a quiet icon in a tile, nothing else */
/* one column (Nov 10 polish): two columns left Company two-thirds empty and a
   band under every menu. The list starts at the top, level with the card (he
   asked for top-aligned, Nov 10) */
.mega__links { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mega__link { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: var(--mega-ri); color: var(--ink-2); text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease; }
.mega__link:is(:hover, :focus-visible, .is-preview) { background: var(--mega-hi); color: var(--ink); }
.mega__link:focus-visible { outline: none; }
.mega__icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: calc(var(--mega-ri) - 6px); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink-2); transition: color 0.12s ease, box-shadow 0.12s ease;
}
.mega__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mega__link:is(:hover, :focus-visible, .is-preview) .mega__icon { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.mega__name { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.mega__link[aria-current='page'] { color: var(--green-ink, var(--green)); }
.mega__link[aria-current='page'] .mega__icon { color: currentColor; box-shadow: inset 0 0 0 1px rgb(var(--green-rgb) / 0.4); }

/* ---------- the previews: small, exact glimpses of each page ----------
   One family of parts (views.js megaAsset): a grouped list with inset
   separators, a window (dark in both themes when it holds code), pills, soft
   bars, and round marks. Surfaces sit 16px in from the card's edge with a
   10px corner; light mode lifts them on a hairline shadow. */
.mv {
  --mv-r: 10px; --mv-face: var(--card); --mv-lift: 0 0 #0000;
  --mv-fill: color-mix(in srgb, var(--ink) 12%, transparent);
  display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; padding: 16px;
  font-size: 11.5px; line-height: 1.35; color: var(--ink); overflow: hidden;
}
[data-theme='light'] .mv { --mv-lift: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px -8px rgba(0, 0, 0, 0.12); }
.mv b { font-weight: 500; }
.mv-faint { color: var(--muted); }
.mv-mono { font: 10.5px/1.5 var(--font-mono); }
.mv--center { align-items: center; text-align: center; gap: 6px; }

/* marks: a filled green circle with a tick for done, a green ring for under way */
.mv-ok, .mv-ring { flex: none; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; }
/* the tick is near-black, not white (Nov 10, Kees): it reads as cut into
   the dot, in both themes and on the Matilda gold */
.mv-ok { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 6.2l1.6 1.6 3.2-3.5' fill='none' stroke='%230b0b0c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.mv-ring { box-sizing: border-box; border: 1.5px solid rgb(var(--green-rgb) / 0.22); border-top-color: var(--green); }
.mv-chev { width: 6px; height: 6px; margin-right: 2px; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); }

/* grouped list: rows on one surface, separators inset from the left */
.mv-list { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: var(--mv-r); background: var(--mv-face); box-shadow: var(--mv-lift); overflow: hidden; }
.mv-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; padding: 0 12px; }
.mv-row + .mv-row::before { content: ''; position: absolute; top: 0; left: 12px; right: 0; height: 1px; background: var(--hair); }
.mv-k { display: flex; align-items: center; min-width: 0; overflow: hidden; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.mv-v { flex: none; display: flex; align-items: center; font: 10.5px var(--font-mono); color: var(--ink); }
.mv-v .mv-ok { margin: 0; }
.mv-t { flex: none; margin-right: 10px; font: 10.5px var(--font-mono); color: var(--muted); }
.mv-row--foot { font: 10.5px var(--font-mono); color: var(--muted); }
.mv--readout .mv-k { color: var(--muted); }

/* window: a title bar of three dots over a body */
.mv-win { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid var(--hair); border-radius: var(--mv-r); background: var(--mv-face); box-shadow: var(--mv-lift); overflow: hidden; }
.mv-win__bar { flex: none; display: flex; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--hair); }
.mv-win__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-2); }
.mv-win__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 12px; }
/* terminal lines: a mark or a prompt, then the words; code lines stay plain
   text so their spaces hold */
.mv-mono > span { display: flex; align-items: center; color: var(--ink-2); white-space: nowrap; }
.mv-mono > span.is-now { color: var(--ink); }
.mv-mono .mv-ok, .mv-mono .mv-ring { width: 10px; height: 10px; margin-right: 8px; }
.mv-mono b { font-weight: 400; color: var(--green); }
.mv-mono > span > b:first-child { margin-right: 8px; }
.mv-code > span { display: block; }
.mv-code > span > b:first-child { margin-right: 0; }
.mv-code { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
/* code stays dark in both themes, like the site's terminals */
.mv-win--dark {
  --hair: rgba(255, 255, 255, 0.09); --hair-2: rgba(255, 255, 255, 0.2);
  --ink: #f5f5f7; --ink-2: #b4b4b9; --muted: #85858a; --green: #00c47c;
  background: #111112; border-color: rgba(255, 255, 255, 0.1); color: var(--ink);
}
.mv-win__split { flex-direction: row; justify-content: flex-start; gap: 0; padding: 0; }
.mv-win__side { display: flex; flex-direction: column; gap: 7px; width: 58px; padding: 11px 9px; border-right: 1px solid var(--hair); }
.mv-win__side b { height: 5px; border-radius: 999px; background: var(--mv-fill); }
.mv-win__side b.is-on { background: rgb(var(--green-rgb) / 0.6); }
.mv-win__main { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 12px; }
.mv-input { display: block; margin-top: auto; height: 18px; border: 1px solid var(--hair-2); border-radius: 999px; }

/* chat: the question as a bubble, its sources as pills, the answer as bars */
.mv--chat { gap: 7px; }
.mv-bubble { align-self: flex-end; padding: 6px 11px; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.mv-bar { display: block; width: calc(var(--w, 0.94) * 100%); height: 6px; border-radius: 999px; background: var(--mv-fill); }
.mv-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.mv--center .mv-pills { justify-content: center; }
.mv-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 999px; background: var(--mv-face); font: 400 10.5px var(--font-mono); color: var(--ink-2); }
.mv-pill--green { margin-top: 6px; border-color: rgb(var(--green-rgb) / 0.3); background: rgb(var(--green-rgb) / 0.1); color: var(--green-ink, var(--green)); }
.mv-big { font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: -0.035em; }

/* download: six platforms as tiles */
.mv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mv-tiles b { display: grid; place-items: center; height: 40px; border: 1px solid var(--hair); border-radius: 8px; background: var(--mv-face); box-shadow: var(--mv-lift); font-size: 11.5px; color: var(--ink); }

/* deployment: two choices, one picked */
.mv-choice { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mv-choice > span {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 10px 11px;
  border: 1px solid var(--hair); border-radius: var(--mv-r); background: var(--mv-face); box-shadow: var(--mv-lift);
  font-size: 10.5px; line-height: 1.35; color: var(--muted);
}
.mv-choice b { font-size: 12.5px; line-height: 1.25; color: var(--ink); }
.mv-choice > .is-on { border-color: rgb(var(--green-rgb) / 0.6); box-shadow: 0 0 0 3px rgb(var(--green-rgb) / 0.12), var(--mv-lift); }
.mv-radio { position: absolute; top: 10px; left: 11px; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hair-2); }
.is-on > .mv-radio { background: var(--green); box-shadow: inset 0 0 0 1.5px var(--green), inset 0 0 0 3.5px var(--mv-face); }

/* infrastructure: four bars, the last one green */
.mv--chart { gap: 10px; }
.mv-bars { display: flex; align-items: flex-end; justify-content: space-around; height: 80px; margin-bottom: 14px; padding: 0 6px; border-bottom: 1px solid var(--hair-2); }
.mv-bars i { position: relative; flex: 0 0 30px; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 5px 5px 0 0; background: var(--mv-fill); }
.mv-bars i.is-hi { background: var(--green); }
.mv-bars em { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font: normal 9.5px var(--font-mono); color: var(--muted); }
.mv-note { font-size: 11px; color: var(--muted); }
.mv-note b { color: var(--ink); }

/* press and contact */
.mv--press { gap: 14px; }
.mv-logo .logo { height: 22px; width: auto; }
.mv-mail { font: 14px var(--font-mono); letter-spacing: -0.01em; color: var(--ink); }
/* Matilda's overview: its mark alone, in the menu's accent (Matilda yellow) */
.mv-mark { width: 56px; height: 56px; color: var(--green); }

/* ---------- the previews move: each plays its idea once ----------
   When a preview comes on (the menu opens, or a link is pointed at) its parts
   arrive in order: steps tick off, an answer streams in, bars rise, a log
   writes itself, a choice is made. All under a second, then still; only the
   "under way" ring keeps turning. The resting state is the finished picture,
   so with reduced motion (or before JS) nothing is missing. */
@keyframes mv-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes mv-fade { from { opacity: 0; } }
@keyframes mv-grow { from { transform: scaleX(0); } }
@keyframes mv-rise { from { height: 0; } }
@keyframes mv-pop { from { opacity: 0; transform: scale(0.3); } 70% { opacity: 1; transform: scale(1.12); } }
@keyframes mv-focus { from { opacity: 0; filter: blur(6px); transform: scale(0.94); } }
@keyframes mv-bubble { from { opacity: 0; transform: translateX(10px) scale(0.96); } }
@keyframes mv-tile { from { opacity: 0; transform: scale(0.92); } }
@keyframes mv-spin { to { transform: rotate(1turn); } }
@keyframes mv-select { from { border-color: var(--hair); box-shadow: 0 0 0 0 rgb(var(--green-rgb) / 0), var(--mv-lift); } }
@keyframes mv-radio { from { background: transparent; box-shadow: inset 0 0 0 1.5px var(--hair-2), inset 0 0 0 6px var(--mv-face); } }

/* order within a group: the nth row, tile, pill, bar or line */
:is(.mv-row, .mv-tiles > *, .mv-pill, .mv-mono > *, .mv-bars > *, .mv-choice > *, .mv-win__side > *, .mv-win__main > *, .mv--chat > *):nth-child(2) { --i: 1; }
:is(.mv-row, .mv-tiles > *, .mv-pill, .mv-mono > *, .mv-bars > *, .mv-choice > *, .mv-win__side > *, .mv-win__main > *, .mv--chat > *):nth-child(3) { --i: 2; }
:is(.mv-row, .mv-tiles > *, .mv-pill, .mv-mono > *, .mv-bars > *, .mv-choice > *, .mv-win__side > *, .mv-win__main > *, .mv--chat > *):nth-child(4) { --i: 3; }
:is(.mv-row, .mv-tiles > *, .mv-pill, .mv-mono > *, .mv-bars > *, .mv-choice > *, .mv-win__side > *, .mv-win__main > *, .mv--chat > *):nth-child(5) { --i: 4; }
:is(.mv-row, .mv-tiles > *, .mv-pill, .mv-mono > *, .mv-bars > *, .mv-choice > *, .mv-win__side > *, .mv-win__main > *, .mv--chat > *):nth-child(6) { --i: 5; }

/* lists: rows land top-down, a tick pops as each one lands, values follow */
.mega.is-open .is-on .mv-row { animation: mv-in 0.36s var(--mega-ease) calc(60ms + var(--i, 0) * 70ms) both; }
.mega.is-open .is-on .mv-row .mv-ok { animation: mv-pop 0.34s var(--mega-ease) calc(220ms + var(--i, 0) * 70ms) both; }
.mega.is-open .is-on .mv--readout .mv-v { animation: mv-fade 0.3s ease calc(200ms + var(--i, 0) * 70ms) both; }
/* the working: one step at a time, the last still going */
.mega.is-open .is-on .mv--steps .mv-row { animation-delay: calc(60ms + var(--i, 0) * 240ms); }
.mega.is-open .is-on .mv--steps .mv-row .mv-ok { animation-delay: calc(260ms + var(--i, 0) * 240ms); }
/* an audit trail writes itself, a line at a time */
.mega.is-open .is-on .mv--log .mv-row { animation-delay: calc(60ms + var(--i, 0) * 150ms); }
.mega.is-open .is-on .mv--log .mv-row .mv-ok { animation-delay: calc(200ms + var(--i, 0) * 150ms); }
.mega.is-open .is-on .mv-ring { animation: mv-spin 0.9s linear infinite; }

/* chat: the question slides in, sources appear, the answer streams */
.mega.is-open .is-on .mv-bubble { animation: mv-bubble 0.4s var(--mega-ease) 60ms both; }
.mega.is-open .is-on .mv--chat .mv-pill { animation: mv-in 0.3s var(--mega-ease) calc(300ms + var(--i, 0) * 70ms) both; }
.mega.is-open .is-on .mv--chat > .mv-bar { transform-origin: 0 50%; animation: mv-grow 0.5s var(--mega-ease) calc(420ms + (var(--i, 2) - 2) * 110ms) both; }

/* terminal: the prompt, then each task ticks off in turn */
.mega.is-open .is-on .mv-mono > span { animation: mv-in 0.3s var(--mega-ease) calc(80ms + var(--i, 0) * 180ms) both; }
.mega.is-open .is-on .mv-mono > span .mv-ok { animation: mv-pop 0.32s var(--mega-ease) calc(220ms + var(--i, 0) * 180ms) both; }
.mega.is-open .is-on .mv-code > span { animation-delay: calc(80ms + var(--i, 0) * 110ms); }

/* desktop: the window fills in, sidebar first */
.mega.is-open .is-on .mv-win__side b { animation: mv-fade 0.3s ease calc(80ms + var(--i, 0) * 60ms) both; }
.mega.is-open .is-on .mv-win__main .mv-bar { transform-origin: 0 50%; animation: mv-grow 0.5s var(--mega-ease) calc(200ms + var(--i, 0) * 90ms) both; }
.mega.is-open .is-on .mv-input { animation: mv-in 0.35s var(--mega-ease) 480ms both; }

/* one big word comes into focus */
.mega.is-open .is-on .mv--price .mv-big { animation: mv-focus 0.5s var(--mega-ease) 60ms both; }
.mega.is-open .is-on .mv--price .mv-faint { animation: mv-fade 0.3s ease 240ms both; }
.mega.is-open .is-on .mv--price .mv-pill { animation: mv-pop 0.36s var(--mega-ease) 380ms both; }

/* download: the platforms set down one by one */
.mega.is-open .is-on .mv-tiles > b { animation: mv-tile 0.34s var(--mega-ease) calc(60ms + var(--i, 0) * 50ms) both; }

/* deployment: both options arrive, then Melbourne is picked */
.mega.is-open .is-on .mv-choice > span { animation: mv-in 0.36s var(--mega-ease) calc(60ms + var(--i, 0) * 80ms) both; }
.mega.is-open .is-on .mv-choice > .is-on { animation: mv-in 0.36s var(--mega-ease) 60ms both, mv-select 0.36s ease 440ms both; }
.mega.is-open .is-on .mv-choice > .is-on > .mv-radio { animation: mv-radio 0.32s var(--mega-ease) 440ms both; }

/* infrastructure: the bars rise in turn, then the number */
.mega.is-open .is-on .mv-bars > i { animation: mv-rise 0.6s var(--mega-ease) calc(60ms + var(--i, 0) * 90ms) both; }
.mega.is-open .is-on .mv--chart .mv-note { animation: mv-fade 0.3s ease 520ms both; }

/* press and contact */
.mega.is-open .is-on .mv--press .mv-logo { animation: mv-focus 0.5s var(--mega-ease) 60ms both; }
.mega.is-open .is-on .mv--press .mv-pill { animation: mv-in 0.3s var(--mega-ease) calc(260ms + var(--i, 0) * 70ms) both; }
@keyframes mv-mark { from { opacity: 0; filter: blur(4px); transform: rotate(-60deg) scale(0.7); } }
.mega.is-open .is-on .mv-mark { animation: mv-mark 0.6s var(--mega-ease) 60ms both; }
.mega.is-open .is-on .mv-mail { animation: mv-in 0.4s var(--mega-ease) 60ms both; }
.mega.is-open .is-on .mv-mail + .mv-faint { animation: mv-fade 0.3s ease 240ms both; }

@media (prefers-reduced-motion: reduce) {
  .mega__asset *, .mega__asset *::before, .mega__asset *::after { animation: none !important; }
}

/* not in a menu at the moment (Research is a plain link), kept for when one is */
.mv-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.mv-months i { padding: 22px 0 6px; border-top: 2px solid var(--mv-fill); font: normal 10.5px var(--font-mono); color: var(--muted); text-align: center; }
.mv-months i.is-in { border-top-color: var(--green); color: var(--ink); }
.mv--post { padding: 0; gap: 0; justify-content: flex-start; }
.mv--post .mv-cover { flex: 1; min-height: 0; aspect-ratio: auto; }
.mv-cap { padding: 8px 14px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-cover { overflow: hidden; background: var(--paper-2); }
.mv-cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(0.8); transition: filter 0.45s var(--ease-out); }
.mega__feature:hover .mv-cover img { filter: none; }
.mv-cover .ascii-cover { margin: 0; font-size: 4px; line-height: 1.1; color: var(--muted); }

/* ---------- the phone menu: sections drill down ----------
   Each section row opens its own panel, which slides in from the right; Back
   slides it away again (site.js). Rows are real links to the overview. */
.mobile-nav { max-height: none; overflow: hidden; }
.mnav { position: relative; height: calc(100dvh - var(--header-h)); overflow: hidden; }
.mnav__panel {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--paper);
  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}
.mnav__panel.is-right { transform: translateX(100%); }
.mnav__panel.is-left { transform: translateX(-20%); opacity: 0; }
.mnav__list { margin: 0; padding: 6px 0 0; list-style: none; }
.mnav__row {
  display: flex; justify-content: space-between; align-items: center; padding: 17px 0;
  border-bottom: 1px solid var(--hair); font-size: 21px; font-weight: 450; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.mnav__row:is([data-current], [aria-current='page']) span:first-child { color: var(--green-ink, var(--green)); }
.mnav__chev { width: 7px; height: 12px; color: var(--muted); }
.mnav__arrow { font: 14px var(--font-mono); color: var(--muted); }
.mnav__back {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; margin: 4px 0 6px; padding: 0;
  border: 0; background: none; font: 500 14.5px var(--font-sans); color: var(--ink-2); cursor: pointer;
}
.mnav__back svg { width: 6px; height: 10px; }
.mnav__overview { display: grid; gap: 6px; margin-bottom: 8px; padding: 16px; border: 1px solid var(--hair); border-radius: var(--mega-ri); background: var(--card); text-decoration: none; }
.mnav__ov-title { font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.mnav__overview .mega__go { padding-top: 6px; }
.mnav__items { margin: 0; padding: 0 0 36px; list-style: none; }
.mnav__items .mega__link { gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--hair); border-radius: 0; color: var(--ink); }
.mnav__items .mega__link:is(:hover, :focus-visible) { background: none; }
.mnav__items .mega__name { font-size: 17px; }


/* header fit: the logo never gives way; on small phones the button tightens */
@media (max-width: 380px) { .header-actions { gap: 4px; } .header-actions .btn--sm { padding: 0 9px; font-size: 13.5px; } }

/* /css/deploy.css */
/* Maincode — deploy.css (/deployment and /trust)
   Nov 10 showcase pass. Kees said these pages were long-winded, so each now
   leads with one live card that proves the headline, then says the rest
   once, in short lines. /deployment: a map of where your model runs
   (Melbourne, on-premises, air-gapped), what never changes, and a rollout
   rail that lights as you read. /trust: a map of where your data goes and
   the exits that are closed, then every commitment with its source.
   Site rules: hairlines, var(--radius) cards, pill controls, nothing moves on
   hover, fast motion, and without JS or with reduced motion everything rests
   on a finished frame. deploy.js plays the requests and lights the rail. */

/* shared: the hero card frame (the /organisations and /sovereign-ai hero cards' face) */
:is(.dep-hero, .trust-hero) .wrap > .cta-row { flex-direction: row; justify-content: center; } /* page-hero stacks the .wrap's child divs */
.dep-card, .trust-map {
  position: relative; width: 100%; margin: clamp(40px, 5vw, 64px) auto 0; text-align: left;
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 55%, var(--paper)) 70%);
  border: 1px solid var(--hair); border-radius: var(--radius);
}
[data-theme='light'] :is(.dep-card, .trust-map) { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px -32px rgba(0, 0, 0, 0.16); }
html.mo :is(.dep-card, .trust-map) { animation: dep-card 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.15s both; }
@keyframes dep-card { from { opacity: 0; transform: translateY(12px); } }
@keyframes dep-fade { from { opacity: 0; } }

/* packets, shared by both maps */
.dep-pkt { position: absolute; z-index: 3; top: 0; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgb(var(--green-rgb) / 0.16); pointer-events: none; }
.dep-pkt--ring { background: var(--card); border: 1.5px solid var(--green); box-shadow: none; }
.dep-pkt--fade { transition: opacity 0.5s ease-out; opacity: 0; }

/* ======================= /deployment ======================= */

/* ---------- the switch: Melbourne | On-premises | Air-gapped ---------- */
.dep-pick {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(480px, calc(100% - 32px)); min-width: 0; margin: 22px auto 0; padding: 4px;
  border: 1px solid var(--hair-2); border-radius: 999px; background: color-mix(in srgb, var(--paper) 55%, transparent);
}
.dep-pick label {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 38px; padding: 0 10px;
  border-radius: 999px; font-size: 14.5px; font-weight: 500; letter-spacing: -0.008em; color: var(--ink-2);
  white-space: nowrap; cursor: pointer; transition: color 0.2s;
}
.dep-pick label:hover { color: var(--ink); }
.dep-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dep-pick label:has(input:checked) { color: var(--paper); }
.dep-pick label:has(input:focus-visible) { outline: 2px solid var(--green-ink, var(--green)); outline-offset: 2px; }
.dep-pick__thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3);
  border-radius: 999px; background: var(--ink); transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.dep-card:has(input[value='dc']:checked) .dep-pick__thumb { transform: translateX(100%); }
.dep-card:has(input[value='gap']:checked) .dep-pick__thumb { transform: translateX(200%); }

/* only the chosen option's words show */
.dep-card [class*='dep-say--'] { display: none; }
.dep-card:has(input[value='mel']:checked) .dep-say--mel,
.dep-card:has(input[value='dc']:checked) .dep-say--dc,
.dep-card:has(input[value='gap']:checked) .dep-say--gap { display: inline; animation: dep-fade 0.35s ease-out; }
@supports not selector(:has(*)) { .dep-card .dep-say--mel { display: inline; } }

/* ---------- the map: your walls, the link, Maincode in Melbourne ----------
   The model chip slides between the two zones (left/top by state), so it
   moves with no JS at all; deploy.js only adds the requests. */
.dep-stage {
  --mx: 80.4%; --my: 50%;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 0.55fr) minmax(0, 1fr);
  height: clamp(220px, 22vw, 268px); margin: 22px 22px 0; cursor: pointer;
}
.dep-card:has(input:is([value='dc'], [value='gap']):checked) .dep-stage { --mx: 26.6%; }
.dep-zone { position: relative; border: 1px solid var(--hair-2); border-radius: 14px; transition: border-color 0.5s, background-color 0.5s, outline-color 0.5s; outline: 1px solid transparent; outline-offset: 5px; }
.dep-zone__name { position: absolute; top: 14px; left: 16px; font: 11.5px var(--font-mono); color: var(--muted); }
/* the zone holding the model lights; air-gapped, your walls double */
.dep-card:has(input[value='mel']:checked) .dep-zone--mc,
.dep-card:has(input:is([value='dc'], [value='gap']):checked) .dep-zone--you { border-color: rgb(var(--green-rgb) / 0.5); background: rgb(var(--green-rgb) / 0.035); }
.dep-card:has(input[value='gap']:checked) .dep-zone--you { outline-color: rgb(var(--green-rgb) / 0.3); }

/* your people: four small figures down the left of your walls */
.dep-people { position: absolute; left: 13%; top: 50%; display: grid; gap: 16px; transform: translateY(-46%) scale(1.4); transform-origin: 0 50%; } /* larger: four 14px figures were lost in the box (Nov 10) */
.dep-people i { position: relative; display: block; width: 14px; height: 16px; color: var(--ink-2); transition: color 0.15s; }
.dep-people i::before { content: ''; position: absolute; left: 3.5px; top: 0; width: 7px; height: 7px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; }
.dep-people i::after { content: ''; position: absolute; left: 0; bottom: 0; width: 14px; height: 7px; box-sizing: border-box; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 7px 7px 0 0; }
.dep-people i.is-on { color: var(--green); }

/* the wires (deploy.js draws them): one per person, out through the port in
   your wall, along the link, into the model's edge. A request lights its wire.
   They sit over the zones, under the packets, and the model sits over all of it. */
.dep-wires { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dep-wires path { fill: none; stroke: color-mix(in srgb, var(--ink) 15%, transparent); stroke-width: 1.25; stroke-linecap: round; transition: stroke 0.6s ease-out; }
.dep-wires path.is-hot { stroke: rgb(var(--green-rgb) / 0.62); transition-duration: 0.12s; }
.dep-stage .dep-pkt { z-index: 1; }
/* the port where your wires leave your walls: open (and lit by traffic) only when the model lives in Melbourne */
.dep-gate { position: absolute; z-index: 2; right: -6px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; box-sizing: border-box; border: 1.5px solid var(--hair-2); border-radius: 3px; background: var(--card); transition: border-color 0.4s, background-color 0.25s, box-shadow 0.25s; }
.dep-card:has(input[value='mel']:checked) .dep-gate { border-color: rgb(var(--green-rgb) / 0.7); }
.dep-gate.is-on { background: var(--green); box-shadow: 0 0 0 4px rgb(var(--green-rgb) / 0.16); }
.dep-card:has(input[value='gap']:checked) .dep-gate { opacity: 0; }

/* the link: solid for Melbourne, dashed for updates only, gone when air-gapped */
.dep-link { position: relative; }
.dep-link__line { position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); transition: opacity 0.4s; }
.dep-card:has(input[value='dc']:checked) .dep-link__line { border-top-style: dashed; }
.dep-card:has(input[value='gap']:checked) .dep-link__line { opacity: 0; }
.dep-link__say { position: absolute; left: 0; right: 0; top: calc(50% + 14px); padding: 0 10px; text-align: center; font: 11.5px/1.45 var(--font-mono); color: var(--ink-2); }
.dep-card:has(input[value='gap']:checked) .dep-link__say { top: calc(50% + 26px); }
.dep-artefact { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; border: 1px solid rgb(var(--green-rgb) / 0.55); border-radius: 9px; background: var(--card); opacity: 0; transform: scale(0.6); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
.dep-artefact svg { width: 17px; height: 17px; fill: none; stroke: var(--green); stroke-width: 1.4; stroke-linejoin: round; }
.dep-card:has(input[value='gap']:checked) .dep-artefact { opacity: 1; transform: none; }

/* your model: one chip that moves house */
.dep-model {
  position: absolute; z-index: 3; left: var(--mx); top: var(--my); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px;
  border: 1px solid rgb(var(--green-rgb) / 0.6); border-radius: 999px; background: var(--card);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
  transition: left 0.8s cubic-bezier(0.65, 0, 0.35, 1), top 0.8s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.3s;
}
.dep-model__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.dep-model.is-busy { box-shadow: 0 0 0 5px rgb(var(--green-rgb) / 0.15); }
[data-theme='light'] .dep-model { background: #fff; }
/* once your model has moved into your walls, Melbourne still holds its next version, waiting for your approval */
.dep-next {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 999px;
  font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
  opacity: 0; transition: opacity 0.4s 0.5s;
}
.dep-next i { box-sizing: border-box; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--muted); }
.dep-card:has(input:is([value='dc'], [value='gap']):checked) .dep-next { opacity: 1; }

/* ---------- three facts, by option ---------- */
.dep-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 0; border-top: 1px solid var(--hair); }
.dep-facts > div { padding: 18px 22px 22px; border-left: 1px solid var(--hair); }
.dep-facts > div:first-child { border-left: 0; }
.dep-facts dt { font: 11.5px var(--font-mono); color: var(--muted); }
.dep-facts dd { min-height: 4.5em; margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }

/* ---------- what never changes: four statements in one card ---------- */
.dep-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.dep-four li { padding: clamp(24px, 2.6vw, 34px); border-left: 1px solid var(--hair); }
.dep-four li:first-child { border-left: 0; }
.dep-four h3 { margin: 22px 0 0; font-size: clamp(20px, 1.8vw, 25px); font-weight: 500; line-height: 1.2; letter-spacing: -0.022em; color: var(--ink); }
.dep-four p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.dep-ic { display: block; width: 26px; height: 26px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dep-ic :is(path, circle) { stroke-dasharray: 1; transition: stroke-dashoffset 0.7s var(--ease-out); }
html.dep-js .dep-four:not(.is-in) .dep-ic :is(path, circle) { stroke-dashoffset: 1; }
.dep-four li:nth-child(2) .dep-ic :is(path, circle) { transition-delay: 0.08s; }
.dep-four li:nth-child(3) .dep-ic :is(path, circle) { transition-delay: 0.16s; }
.dep-four li:nth-child(4) .dep-ic :is(path, circle) { transition-delay: 0.24s; }
[data-theme='light'] .dep-four { background: #fff; }

/* ---------- the rollout: a rail that lights as you read ---------- */
@media (min-width: 901px) { .dep-roll__head { position: sticky; top: calc(var(--header-h) + 40px); } }
.dep-steps { --r0: 7px; position: relative; list-style: none; margin: 0; padding: 0; }
.dep-steps::before, .dep-steps::after { content: ''; position: absolute; left: 5.5px; top: var(--r0); width: 1px; }
.dep-steps::before { bottom: var(--r1, 60px); background: var(--hair-2); }
.dep-steps::after { height: var(--fill, calc(100% - var(--r0) - var(--r1, 60px))); background: var(--green); transition: height 0.6s cubic-bezier(0.33, 1, 0.68, 1); }
.dep-steps li { position: relative; padding: 0 0 clamp(34px, 4vw, 52px) 44px; transition: opacity 0.45s var(--ease-out); }
.dep-steps li:last-child { padding-bottom: 0; }
.dep-steps li:not(.is-lit) { opacity: 0.32; }
.dep-steps__dot { position: absolute; z-index: 1; left: 0; top: 1px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--hair-2); background: var(--paper); transition: border-color 0.4s, background-color 0.4s; }
.dep-steps li.is-lit .dep-steps__dot { border-color: var(--green); background: var(--green); }
.dep-steps__n { display: block; font: 12px var(--font-mono); color: var(--green-ink, var(--green)); font-variant-numeric: tabular-nums; }
.dep-steps h3 { margin: 6px 0 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); }
.dep-steps p { margin: 10px 0 0; max-width: 40ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .dep-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dep-four li:nth-child(3) { border-left: 0; }
  .dep-four li:nth-child(n + 3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 700px) {
  /* the map turns on its side: your walls on top, Melbourne below */
  .dep-stage { --mx: 50%; --my: 84%; grid-template-columns: minmax(0, 1fr); grid-template-rows: 170px 96px 150px; height: auto; margin: 18px 14px 0; }
  .dep-card:has(input:is([value='dc'], [value='gap']):checked) .dep-stage { --mx: 50%; --my: 27%; }
  .dep-people { left: 50%; top: 40px; grid-auto-flow: column; gap: 22px; transform: translateX(-50%); }
  .dep-gate { right: auto; top: auto; left: 50%; bottom: -6px; margin: 0 0 0 -5.5px; }
  .dep-link__line { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
  .dep-card:has(input[value='dc']:checked) .dep-link__line { border-left-style: dashed; }
  .dep-link__say, .dep-card:has(input[value='gap']:checked) .dep-link__say { left: calc(50% + 14px); right: 0; top: 50%; padding: 0; text-align: left; transform: translateY(-50%); }
  .dep-card:has(input[value='gap']:checked) .dep-link__say { left: calc(50% + 26px); }
  .dep-facts { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  .dep-facts > div { padding: 14px 16px 16px; border-left: 0; border-top: 1px solid var(--hair); }
  .dep-facts > div:first-child { border-top: 0; }
  .dep-facts dd { min-height: 0; }
}
@media (max-width: 640px) {
  .dep-four { grid-template-columns: minmax(0, 1fr); }
  .dep-four li { border-left: 0; }
  .dep-four li + li { border-top: 1px solid var(--hair); }
  .dep-steps li { padding-left: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.dep-card, .trust-map), .dep-card [class*='dep-say--'] { animation: none !important; }
  .dep-pick__thumb, .dep-model, .dep-artefact, .dep-steps li, .dep-steps::after, .dep-ic :is(path, circle) { transition: none; }
}

/* ======================= /trust ======================= */

/* ---------- the route map: where your data goes, and the exits that are closed ----------
   Wide: the route runs across the top and three closed exits fan down from
   your workspace. Phones: the route runs down the left and the exits fan
   right. Positions are CSS (--x wide, --y tall), so it reads without JS;
   deploy.js sends data along it and bounces probes off the closed exits. */
.tm-stage { --ly: 38%; position: relative; height: clamp(320px, 28vw, 350px); margin: 0 clamp(22px, 3vw, 40px); }
.tm-fan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tm-fan line { stroke: color-mix(in srgb, var(--ink) 24%, transparent); stroke-width: 1.2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.tm-fan--tall { display: none; }
.tm-line { position: absolute; left: 4%; right: 4%; top: var(--ly); border-top: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.tm-stop, .tm-exit { position: absolute; left: var(--x); }
.tm-stop { top: var(--ly); }
.tm-exit { top: 74%; }
.tm-dot { position: absolute; z-index: 1; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--ink-2); background: var(--card); transition: border-color 0.3s, box-shadow 0.3s; }
.tm-stop--home .tm-dot { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-color: var(--green); background: var(--green); box-shadow: 0 0 0 5px rgb(var(--green-rgb) / 0.14); }
.tm-stop.is-on .tm-dot { border-color: var(--green); box-shadow: 0 0 0 6px rgb(var(--green-rgb) / 0.2); }
.tm-x { position: absolute; z-index: 1; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; box-sizing: border-box; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); background: var(--card); transition: box-shadow 0.3s, border-color 0.3s; }
.tm-x::before, .tm-x::after { content: ''; position: absolute; left: 7.5px; right: 7.5px; top: 50%; margin-top: -0.75px; border-top: 1.5px solid var(--warn); transform: rotate(45deg); }
.tm-x::after { transform: rotate(-45deg); }
.tm-exit.is-hit .tm-x { border-color: var(--warn); box-shadow: 0 0 0 7px color-mix(in srgb, var(--warn) 16%, transparent); }
[data-theme='light'] :is(.tm-dot, .tm-x) { background: #fff; }
[data-theme='light'] .tm-stop--home .tm-dot { background: var(--green); }

.tm-say { position: absolute; left: 0; width: max-content; max-width: 230px; margin: 0; transform: translateX(-50%); text-align: center; }
.tm-stop .tm-say { top: -98px; } /* titles share one line, whatever the length below them */
.tm-exit .tm-say { top: 24px; }
.tm-stop--first .tm-say { left: -6px; transform: none; text-align: left; }
.tm-stop--last .tm-say { left: 6px; transform: translateX(-100%); text-align: right; }
.tm-say b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.tm-say span { display: block; margin-top: 3px; font: 11.5px/1.45 var(--font-mono); color: var(--muted); }
.tm-say b + span { margin-top: 5px; }
.tm-exit .tm-say span { color: var(--ink-2); }

.dep-pkt--probe { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }

/* ---------- the register: every commitment, with its source ---------- */
/* the register: six cards in a 3×2 grid (Nov 10 polish; it was six full-width
   rows, about 1,100px of ticked lines). Same words, read at a glance: heading,
   ticks, then where it's written down. */
.trust-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trust-row { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 2vw, 26px); border: 1px solid var(--hair); border-radius: var(--radius); background: var(--card); }
.trust-row__head { display: contents; }
.trust-row h3 { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.016em; color: var(--ink); }
.trust-row__src { order: 2; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--hair); font: 11.5px/1.6 var(--font-mono); color: var(--muted); }
.trust-row__src a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; transition: color 0.15s, text-decoration-color 0.15s; }
.trust-row__src a:hover { color: var(--ink); text-decoration-color: var(--green); }
.trust-row ul { order: 1; display: grid; gap: 11px; list-style: none; margin: 0; padding: 0; }
.trust-row li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.trust-row li::before { content: ''; position: absolute; left: 1px; top: 0.4em; width: 11px; height: 6px; border-left: 1.6px solid var(--green); border-bottom: 1.6px solid var(--green); transform: rotate(-45deg); }
@media (max-width: 1060px) { .trust-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- contact: three ways in ---------- */
.trust-asks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--hair); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.trust-ask__card { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); border-left: 1px solid var(--hair); }
.trust-ask__card:first-child { border-left: 0; }
.trust-ask__what { margin: 0; font: 11.5px var(--font-mono); color: var(--muted); }
.trust-ask__to { align-self: flex-start; margin-top: 14px; font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; letter-spacing: -0.015em; color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.trust-ask__to:hover { text-decoration-thickness: 2px; }
.trust-ask__note { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.trust-asks__foot { margin: 22px 0 0; font: 12px var(--font-mono); color: var(--muted); }
.trust-asks__foot a { color: var(--ink-2); }
.trust-asks__foot a:hover { color: var(--ink); }
[data-theme='light'] .trust-asks { background: #fff; }

@media (max-width: 900px) {
  .trust-rows { grid-template-columns: minmax(0, 1fr); }
  .trust-asks { grid-template-columns: minmax(0, 1fr); }
  .trust-ask__card { border-left: 0; }
  .trust-ask__card + .trust-ask__card { border-top: 1px solid var(--hair); }
}
@media (max-width: 700px) {
  .tm-stage { height: 600px; margin: 0 16px; }
  .tm-fan--wide { display: none; }
  .tm-fan--tall { display: block; left: 0; top: 0; width: 80px; height: 600px; }
  .tm-line { left: 14px; right: auto; top: 18px; bottom: 64px; border-top: 0; border-left: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
  .tm-stop { left: 14px; top: var(--y); }
  .tm-exit { left: 64px; top: var(--y); }
  .tm-say, .tm-stop--first .tm-say, .tm-stop--last .tm-say { left: 22px; right: auto; transform: none; text-align: left; max-width: calc(100vw - 150px); }
  .tm-stop .tm-say { bottom: auto; top: -10px; }
  .tm-exit .tm-say { top: -10px; left: 24px; }
}

/* /css/light.css */
/* Maincode — light.css
   The light theme: html[data-theme='light'], from the footer toggle
   (polish.js; boot.js applies a saved choice before paint). Dark stays the
   default. Tokens carry most of it; the rest are the few places that paint a
   colour directly. Some tokens are !important because site.config sets them
   inline on <html>. */

[data-theme='light'] {
  color-scheme: light;
  --paper: #f7f7f8 !important;
  --paper-2: #efeff1 !important;
  --card: #ffffff !important;
  --rule: #e3e3e6 !important;
  --rule-strong: #cfcfd4 !important;
  --night: #efeff1 !important;
  --green: #00a36b !important;
  --green-rgb: 0 163 107 !important;
  --glow-a: 0 !important;
  --green-ink: #007a50;
  --matilda: #b08a12;
  --ink: #111113;
  --ink-2: #4a4a50;
  --muted: #6e6e74;
  --dim-ink: #8a8a90;
  --night-2: #ffffff;
  --night-3: #f2f2f4;
  --night-rule: #e3e3e6;
  --night-line: #d4d4d8;
  --night-grid: rgba(0, 0, 0, 0.06);
  --hair: rgb(0 0 0 / calc(0.09 * var(--line-k, 1)));
  --hair-2: rgb(0 0 0 / calc(0.18 * var(--line-k, 1)));
  --sheen: rgba(255, 255, 255, 0);
  --rail: rgb(0 0 0 / calc(0.07 * var(--mark-k, 1)));
  --mark: rgb(0 0 0 / calc(0.32 * var(--mark-k, 1)));
  --mark-2: rgb(0 0 0 / calc(0.14 * var(--mark-k, 1)));
  --mark-text: #9a9aa0;
  --btn-face: #ffffff;
  --btn-line: rgb(0 0 0 / calc(0.1 * var(--line-k, 1)));
  --btn-corner: rgba(0, 0, 0, 0.55);
  --ghost-line: rgb(0 0 0 / calc(0.14 * var(--line-k, 1)));
  --ghost-line-hi: rgba(0, 0, 0, 0.32);
  --ghost-face-hi: rgba(0, 0, 0, 0.03);
  --glass: rgba(247, 247, 248, 0.74);
  --ascii-rgb: 22, 22, 26;
  /* the isometric figures, re-inked: white faces, grey sides, graphite edges */
  --iso-face: #ffffff; --iso-side: #ececef; --iso-edge: #8b8b92; --iso-rule: #d3d3d8;
  --iso-slot: #f3f3f5; --iso-slot-line: #d8d8dc; --iso-ghost: #b8b8be; --iso-stencil: #a9a9b0;
  --iso-tray: #a0a0a7; --iso-label: #3a3a40; --iso-hot-2: #d9f3e8;
  --iso-board: #e9e9ec; --iso-board-top: #f4f4f6; --iso-trace: #e2e2e6; --iso-die: #9a9aa1;
  --iso-arc-busy: #b9b9c0; --iso-pad: rgba(0, 0, 0, 0.015); --iso-pad-line: #dcdce0;
  --iso-quad-line: #cdcdd2; --iso-row-hot: #e8f6ef;
  scrollbar-color: #c8c8cc transparent;
}

/* the terminal and code stay dark, like a screen on a desk */
[data-theme='light'] :is(.window, .post-body pre, .engine__code) {
  color-scheme: dark;
  --night: #0b0b0b; --night-2: #111111; --night-3: #181818; --night-rule: #1f1f1f; --night-line: #2e2e2e;
  --night-fg: #a8a8ad; --night-dim: #86868b; --night-hi: #f5f5f7;
  --ink: #f5f5f7; --ink-2: #a8a8ad; --muted: #86868b;
  --paper: #0b0b0b; --card: #151515; --rule: #212121; --rule-strong: #313131;
  --hair: rgba(255, 255, 255, 0.08); --hair-2: rgba(255, 255, 255, 0.16);
  --green: #00c47c; --green-rgb: 0 196 124; --matilda: #e8c547;
}
[data-theme='light'] .window { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35); }

/* no screen haze on paper */
[data-theme='light'] body::before, [data-theme='light'] body::after { display: none; }

/* copy that site.css colours directly */
[data-theme='light'] :is(.home-hero .lede, .page-hero .lede, .home-hero__split .lede) { color: var(--ink-2); }
[data-theme='light'] .hero-chip { background: #ffffff; }
[data-theme='light'] .hero-art--flow { background: var(--card); border-color: var(--hair); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px -32px rgba(0, 0, 0, 0.18); }
[data-theme='light'] :is(.stat__src, .highlight__go, .stack__name, .hero-chip__tag, .bp-note b) { color: var(--green-ink); }
[data-theme='light'] .footer-col a:hover { color: var(--green-ink); }
/* links in running text stay ink with a green underline in light too (refine.css); this list used to hold
   .text-link/.prose a/.faq__answer a/.proof__go, and .footer-col a:hover inside the :is() lifted it past refine.css */

/* depth comes from a soft shadow instead of a lighter fill */
[data-theme='light'] :is(.panel, .proof__card, .product, .highlight, .route, .bench__fig, .lab-card, .stack, .compare__col, .cells) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -16px rgba(0, 0, 0, 0.12);
}
[data-theme='light'] .highlight:hover { background: #ffffff; }
/* ASCII covers on the blog: ink on paper rather than black slabs */
[data-theme='light'] :is(.cover--ascii, .lab-card__cover) { background: #ececef; }
[data-theme='light'] .ascii-cover { color: #a2a2a8; }
[data-theme='light'] a:hover .ascii-cover { color: #3a3a40; }

/* figures in site.css: the independence flow, the layer stack, proof charts, diagrams */
[data-theme='light'] :is(.fx-top, .fx-face--top) { fill: #ffffff; }
[data-theme='light'] :is(.fx-side, .fx-face) { fill: #ececef; }
[data-theme='light'] :is(.fx-side--r, .fx-face--r) { fill: #f3f3f5; }
[data-theme='light'] :is(.fx-top, .fx-side, .fx-edge, .fx-face) { stroke: #8b8b92; }
[data-theme='light'] :is(.fx-line, .fx-edge--back, .fx-floor) { stroke: #d0d0d5; }
[data-theme='light'] :is(.fx-walls, .fx-track) { stroke: #b8b8be; }
[data-theme='light'] .plate .top { fill: #ffffff; }
[data-theme='light'] .plate .side-l { fill: #e9e9ec; }
[data-theme='light'] .plate .side-r { fill: #f1f1f3; }
[data-theme='light'] .plate .detail { stroke: #cfcfd4; }
[data-theme='light'] .plate.is-active .top { fill: color-mix(in srgb, var(--green) 12%, #ffffff); }
[data-theme='light'] .proof__viz .bar { fill: #dcdce0; }
[data-theme='light'] .proof__viz .bar.hi { fill: var(--green); }
[data-theme='light'] .proof__viz .ring-track { stroke: #e4e4e8; }
[data-theme='light'] .diagram .d-ink { stroke: #8b8b92; }
[data-theme='light'] .diagram .f-card { fill: #ffffff; }
[data-theme='light'] .diagram .f-paper2 { fill: #ececef; }