/* Ontos landing: Fraunces for the voice, IBM Plex Sans for the body, one emerald accent, and
   four looks behind one switch. <html data-theme> names the look (partials/head.html sets it;
   ?theme= previews another in one browser):
     receipt   the default (B): the console's Graphite for the dark sections, a warm receipt white
               for the light ones
     graphite  (A) the same Graphite with the console's own cool paper
     paper     (C) paper-led: the page is paper; the product, the story and a few bands stay dark
               (.ink, .proof and the footer)
     pine      the original deep pine and parchment, kept as it was
   Without JavaScript the page is receipt: :root below is Graphite and .paper is receipt paper. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/fraunces-latin.woff2) format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/plex-sans-latin.woff2) format("woff2");
}

/* Type, measure and the colours that never change with the look. */
:root {
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Aptos", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* The code editor drawn in "Ask from Claude Code…" is dark on every ground. */
  --ide-bg: #0b0c0e;
  --ide-bar: #121416;
  --ide-dots: rgba(232, 234, 237, 0.14);
  --ide-text: #c4c9d0;
  --ide-strong: #e8eaed;
  --ide-muted: #979ea8;
  /* Demo screenshots in the articles: the colour behind one still loading, and its shadow. */
  --shot-bg: #0e0f11;
  --shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 16px 40px -14px rgba(0, 0, 0, 0.32);
  /* Shades for drop shadows on every ground, the mask colour (only its alpha counts), and the
     near-black behind a film while it loads. */
  --shade-22: rgba(0, 0, 0, .22);
  --shade-25: rgba(0, 0, 0, .25);
  --shade-35: rgba(0, 0, 0, .35);
  --shade-45: rgba(0, 0, 0, .45);
  --mask: #000;
  --film-bg: #0a0b0d;

  --wrap: 1200px;
  --gutter: 24px;
  --radius: 8px;
}

/* The looks' raw palettes. The look blocks below only point at these, so every colour on the page
   is declared once, here, and the looks pick from it. */
:root {
  /* Graphite, dark */
  --graphite-bg: #0e0f11;
  --graphite-bg-deep: #0a0b0d;
  --graphite-surface: #16181b;
  --graphite-surface-2: #121416;
  --graphite-surface-3: #1c1f23;
  --graphite-field: #0b0c0e;
  --graphite-ink: #e8eaed;
  --graphite-muted: #8f96a0;
  --graphite-faint: #838a94;
  --graphite-line: rgba(232, 234, 237, 0.08);
  --graphite-line-strong: rgba(232, 234, 237, 0.15);
  --graphite-accent: #3ecf8e;
  --graphite-accent-ink: #08120d;
  --graphite-accent-2: rgba(62, 207, 142, 0.13);
  --graphite-surface-active: rgba(62, 207, 142, 0.14);
  --graphite-grid-dot: rgba(232, 234, 237, 0.06);
  --graphite-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.30);
  --graphite-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.30), 0 40px 80px -20px rgba(0, 0, 0, 0.60);
  --graphite-green: #3ecf8e;
  --graphite-amber: #e3b35c;
  --graphite-red: #f08a7e;
  --graphite-k-start: #c9ced6;
  --graphite-k-trust: #b39ddb;
  --graphite-k-definitions: #86aee0;
  --graphite-k-estate: #5ec8c8;
  --graphite-k-security: #a3adba;

  /* Receipt paper */
  --receipt-bg: #f6f4ef;
  --receipt-bg-deep: #eeebe4;
  --receipt-surface: #fcfbf8;
  --receipt-surface-2: #eeebe4;
  --receipt-surface-3: #ffffff;
  --receipt-field: #fffefb;
  --receipt-ink: #16171a;
  --receipt-muted: #5d5c56;
  --receipt-faint: #67665f;
  --receipt-line: rgba(22, 23, 26, 0.10);
  --receipt-line-strong: rgba(22, 23, 26, 0.18);
  --receipt-accent: #0c7753;
  --receipt-accent-ink: #ffffff;
  --receipt-accent-2: #dcefe5;
  --receipt-surface-active: rgba(12, 119, 83, 0.08);
  --receipt-grid-dot: rgba(22, 23, 26, 0.07);
  --receipt-shadow: 0 1px 2px rgba(22, 23, 26, 0.05), 0 10px 28px rgba(22, 23, 26, 0.07);
  --receipt-shadow-lg: 0 2px 6px rgba(22, 23, 26, 0.07), 0 32px 64px -24px rgba(22, 23, 26, 0.24);
  --receipt-green: #107a4b;
  --receipt-amber: #835c0f;
  --receipt-red: #ad392e;
  --receipt-k-start: #4f555d;
  --receipt-k-trust: #6a4fb3;
  --receipt-k-definitions: #2f63a6;
  --receipt-k-estate: #0f7479;
  --receipt-k-security: #55606e;

  /* The console's cool paper (graphite look) */
  --console-paper-bg: #f4f5f6;
  --console-paper-bg-deep: #eceef0;
  --console-paper-surface: #fbfbfc;
  --console-paper-surface-2: #eceef0;
  --console-paper-surface-3: #ffffff;
  --console-paper-field: #ffffff;
  --console-paper-ink: #15181c;
  --console-paper-muted: #5f6670;
  --console-paper-faint: #636a74;
  --console-paper-line: rgba(21, 24, 28, 0.10);
  --console-paper-line-strong: rgba(21, 24, 28, 0.18);
  --console-paper-accent-2: #dff1e8;
  --console-paper-grid-dot: rgba(21, 24, 28, 0.07);
  --console-paper-shadow: 0 1px 2px rgba(21, 24, 28, 0.05), 0 10px 28px rgba(21, 24, 28, 0.07);
  --console-paper-shadow-lg: 0 2px 6px rgba(21, 24, 28, 0.07), 0 32px 64px -24px rgba(21, 24, 28, 0.24);
  --console-paper-red: #b03a2f;

  /* Pine's parchment */
  --pine-paper-bg: #efe9db;
  --pine-paper-bg-deep: #e8e1d1;
  --pine-paper-surface: #f7f2e7;
  --pine-paper-surface-2: #e8e1d1;
  --pine-paper-surface-3: #fbf7ee;
  --pine-paper-field: #fdfbf5;
  --pine-paper-ink: #1c2b22;
  --pine-paper-muted: #5c6b5f;
  --pine-paper-faint: #7a887c;
  --pine-paper-line: rgba(28, 43, 34, 0.12);
  --pine-paper-line-strong: rgba(28, 43, 34, 0.20);
  --pine-paper-accent: #146a4f;
  --pine-paper-accent-ink: #fbf7ee;
  --pine-paper-accent-2: #dcebe1;
  --pine-paper-surface-active: rgba(20, 106, 79, 0.10);
  --pine-paper-grid-dot: rgba(236, 227, 208, 0.07);
  --pine-paper-shadow: 0 1px 2px rgba(28, 43, 34, 0.05), 0 10px 28px rgba(28, 43, 34, 0.07);
  --pine-paper-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.25), 0 40px 80px -20px rgba(0, 0, 0, 0.55);
  --pine-paper-green: #1f7447;
  --pine-paper-amber: #8a6516;
  --pine-paper-red: #a83a30;
  --pine-paper-k-start: #5ec8c8;
  --pine-paper-k-trust: #a83a30;
  --pine-paper-k-definitions: #8a6516;
  --pine-paper-k-estate: #7fb2e5;
  --pine-paper-k-security: #c39be0;
}

/* Graphite, dark (the console's Graphite, apps/web/styles.css): the ground of every look but
   pine, and the dark bands of the paper-led one. */
:root,
[data-theme="paper"] :is(.ink, .proof, .foot) {
  color-scheme: dark;
  --bg: var(--graphite-bg);
  --bg-deep: var(--graphite-bg-deep);
  --surface: var(--graphite-surface);
  --surface-2: var(--graphite-surface-2);
  --surface-3: var(--graphite-surface-3);
  --field: var(--graphite-field);
  --ink: var(--graphite-ink);
  --muted: var(--graphite-muted);
  --faint: var(--graphite-faint);
  --line: var(--graphite-line);
  --line-strong: var(--graphite-line-strong);
  --accent: var(--graphite-accent);
  --accent-ink: var(--graphite-accent-ink);
  --accent-2: var(--graphite-accent-2);
  --surface-active: var(--graphite-surface-active);
  --grid-dot: var(--graphite-grid-dot);
  --shadow: var(--graphite-shadow);
  --shadow-lg: var(--graphite-shadow-lg);

  --green: var(--graphite-green);
  --amber: var(--graphite-amber);
  --red: var(--graphite-red);

  /* Article categories: one calm hue each, never the status colours (red, amber). */
  --k-start: var(--graphite-k-start);
  --k-trust: var(--graphite-k-trust);
  --k-definitions: var(--graphite-k-definitions);
  --k-estate: var(--graphite-k-estate);
  --k-security: var(--graphite-k-security);
}

/* Receipt paper: a warm white with graphite ink and the console's deep emerald, a shade deeper so
   link text clears 4.5:1 on every light surface. The light sections of every look but pine and
   graphite, and the page itself in the paper-led look. */
.paper,
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: var(--receipt-bg);
  --bg-deep: var(--receipt-bg-deep);
  --surface: var(--receipt-surface);
  --surface-2: var(--receipt-surface-2);
  --surface-3: var(--receipt-surface-3);
  --field: var(--receipt-field);
  --ink: var(--receipt-ink);
  --muted: var(--receipt-muted);
  --faint: var(--receipt-faint);
  --line: var(--receipt-line);
  --line-strong: var(--receipt-line-strong);
  --accent: var(--receipt-accent);
  --accent-ink: var(--receipt-accent-ink);
  --accent-2: var(--receipt-accent-2);
  --surface-active: var(--receipt-surface-active);
  --grid-dot: var(--receipt-grid-dot);
  --shadow: var(--receipt-shadow);
  --shadow-lg: var(--receipt-shadow-lg);
  --green: var(--receipt-green);
  --amber: var(--receipt-amber);
  --red: var(--receipt-red);
  --k-start: var(--receipt-k-start);
  --k-trust: var(--receipt-k-trust);
  --k-definitions: var(--receipt-k-definitions);
  --k-estate: var(--receipt-k-estate);
  --k-security: var(--receipt-k-security);
  background: var(--bg);
  color: var(--ink);
}

/* Paper-led (C): the page is a whiter sheet; its .paper bands keep the receipt tone above, and
   the dark bands take Graphite (see the first block). */
:root[data-theme="paper"] {
  --bg: #fbfaf7;
  --bg-deep: #f1eee7;
  --surface: #ffffff;
  --surface-2: #f1eee7;
  --field: #ffffff;
}
[data-theme="paper"] :is(.ink, .proof, .foot) { color: var(--ink); }
[data-theme="paper"] section.ink { background: var(--bg); }
/* The guide floats over paper and dark bands alike, so it carries its own disc. */
[data-theme="paper"] .guide-mark { border-radius: 50%; background: var(--surface-3); }

/* Graphite + console paper (A): the console's own cool light side for the light sections. */
[data-theme="graphite"] .paper {
  --bg: var(--console-paper-bg);
  --bg-deep: var(--console-paper-bg-deep);
  --surface: var(--console-paper-surface);
  --surface-2: var(--console-paper-surface-2);
  --surface-3: var(--console-paper-surface-3);
  --field: var(--console-paper-field);
  --ink: var(--console-paper-ink);
  --muted: var(--console-paper-muted);
  --faint: var(--console-paper-faint);
  --line: var(--console-paper-line);
  --line-strong: var(--console-paper-line-strong);
  --accent-2: var(--console-paper-accent-2);
  --grid-dot: var(--console-paper-grid-dot);
  --shadow: var(--console-paper-shadow);
  --shadow-lg: var(--console-paper-shadow-lg);
  --red: var(--console-paper-red);
}

/* Pine, the original: deep pine ground, parchment counterpart (the console's green palette). */
:root[data-theme="pine"] {
  color-scheme: dark;
  --bg: #0d2b21;
  --bg-deep: #0a2219;
  --surface: #11342a;
  --surface-2: #0f2f26;
  --surface-3: #143a2f;
  --field: #0b241b;
  --ink: #ece3d0;
  --muted: #8ca093;
  --faint: #6f8577;
  --line: rgba(236, 227, 208, 0.10);
  --line-strong: rgba(236, 227, 208, 0.18);
  --accent: #54c894;
  --accent-ink: #0b241b;
  --accent-2: rgba(84, 200, 148, 0.14);
  --surface-active: rgba(84, 200, 148, 0.16);
  --grid-dot: rgba(236, 227, 208, 0.07);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 32px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.25), 0 40px 80px -20px rgba(0, 0, 0, 0.55);
  --green: #63d29b;
  --amber: #d6ab55;
  --red: #e58b7f;
  --k-start: #5ec8c8;
  --k-trust: #e58b7f;
  --k-definitions: #d6ab55;
  --k-estate: #7fb2e5;
  --k-security: #c39be0;
  --ide-bg: #081a13;
  --ide-bar: #0c2219;
  --ide-dots: rgba(236, 227, 208, 0.14);
  --ide-text: #cfc6b3;
  --ide-strong: #ece3d0;
  --ide-muted: #9fb0a4;
  --shot-bg: #0d2b21;
  --shot-shadow: 0 1px 2px rgba(28, 43, 34, 0.10), 0 16px 40px -14px rgba(28, 43, 34, 0.40);
}
[data-theme="pine"] .paper {
  --bg: var(--pine-paper-bg);
  --bg-deep: var(--pine-paper-bg-deep);
  --surface: var(--pine-paper-surface);
  --surface-2: var(--pine-paper-surface-2);
  --surface-3: var(--pine-paper-surface-3);
  --field: var(--pine-paper-field);
  --ink: var(--pine-paper-ink);
  --muted: var(--pine-paper-muted);
  --faint: var(--pine-paper-faint);
  --line: var(--pine-paper-line);
  --line-strong: var(--pine-paper-line-strong);
  --accent: var(--pine-paper-accent);
  --accent-ink: var(--pine-paper-accent-ink);
  --accent-2: var(--pine-paper-accent-2);
  --surface-active: var(--pine-paper-surface-active);
  --grid-dot: var(--pine-paper-grid-dot);
  --shadow: var(--pine-paper-shadow);
  --shadow-lg: var(--pine-paper-shadow-lg);
  --green: var(--pine-paper-green);
  --amber: var(--pine-paper-amber);
  --red: var(--pine-paper-red);
  --k-start: var(--pine-paper-k-start);
  --k-trust: var(--pine-paper-k-trust);
  --k-definitions: var(--pine-paper-k-definitions);
  --k-estate: var(--pine-paper-k-estate);
  --k-security: var(--pine-paper-k-security);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 68px; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }

code, .mono { font-family: var(--mono); font-size: 0.86em; }

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ type */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.h2 {
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.08;
}

.h2 em, .hero-title em { font-style: normal; }
.hero-title em { color: var(--accent); }

.h2 em.line { display: block; }

.lede {
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  max-width: 60ch;
}

.lede strong { color: var(--ink); font-weight: 600; }

/* Section rhythm scales with the viewport's height as well as its width, so on a desktop each
   section's heading and its main visual land on one screen. */
.section { padding: clamp(72px, min(11vw, 11vh), 128px) 0; position: relative; }

.section-head {
  display: grid;
  gap: 18px;
  max-width: 760px;
  margin-bottom: clamp(32px, min(5vw, 5.5vh), 56px);
}

.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn svg { width: 16px; height: 16px; flex: none; }

.btn:hover { border-color: var(--accent); color: var(--accent); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, white);
  border-color: color-mix(in srgb, var(--accent) 86%, white);
  color: var(--accent-ink);
}

.btn-primary:hover svg { transform: translateX(2px); }
.btn-primary svg { transition: transform 160ms ease; }

/* "Watch the pitch": a play mark in the accent and the film's length, quieter than the label */
.btn-watch svg { color: var(--accent); }
.btn-meta { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.btn-watch:hover .btn-meta { color: inherit; }

.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: 9px; }

/* ------------------------------------------------------------------- nav */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
}

.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg-deep) 82%, transparent);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.brand-mark { width: 28px; height: 28px; flex: none; color: var(--ink); --mark-accent: var(--accent); }
.brand .os { color: var(--accent); }
.brand-name { text-transform: lowercase; }  /* the public name, from partials/name.html, set as the wordmark */

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: 8px;
  font-size: 14.5px;
  color: var(--muted);
}

.nav-links a { transition: color 140ms ease; }
.nav-links a:hover { color: var(--ink); }

.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; }

.nav-cta .text-link { font-size: 14.5px; color: var(--muted); font-weight: 500; }
.nav-cta .text-link:hover { color: var(--ink); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding: clamp(112px, min(15vw, 15vh), 168px) 0 0;
  overflow: hidden;
  isolation: isolate;
}

.hero-copy { display: grid; gap: 26px; }

.hero-title {
  font-size: clamp(40px, 5.3vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 500;
}

.hero-title em { display: block; }

.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 64px;
  margin-top: 6px;
}

.hero-sub { max-width: 58ch; color: var(--muted); font-size: clamp(17px, 1.45vw, 19px); line-height: 1.6; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The public name's one honest line (under the hero's buttons and in the footer), and the hero the founder flips. */
.name-note { max-width: 62ch; color: var(--muted); font-size: 14px; line-height: 1.5; }
[data-hero-variant][hidden] { display: none !important; }

.assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.assurances li { display: inline-flex; align-items: center; gap: 9px; }
.assurances svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

.hero-shot {
  position: relative;
  margin-top: clamp(36px, min(6vw, 5vh), 72px);
  margin-bottom: -2px;
}

/* ------------------------------------------ screenshots (real demo screens) */

.frame {
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--field);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.frame-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.dots { display: flex; gap: 7px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }

.url {
  margin: 0 auto;
  padding: 4px 14px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font: 12px/1.3 var(--mono);
  transform: translateX(-26px);
}

.frame img, .shot img { display: block; width: 100%; height: auto; }

.shot {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.shot figcaption, .hero-shot figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.hero-shot figcaption { border: 0; padding: 18px 0 0; text-align: center; background: none; }
.hero-shot { margin-bottom: 40px; }

.shot-wide { margin-top: 40px; background: var(--surface); }

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}

.badge.good { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.badge.warn { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.badge.bad { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.badge.accent { background: var(--accent-2); color: var(--accent); }
.badge svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------- sources */

.sources {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
}

.sources-inner {
  display: flex;
  align-items: center;
  gap: 20px 40px;
  padding-block: 26px;
  flex-wrap: wrap;
}

.sources-label {
  color: var(--muted);
  font-size: 13px;
  max-width: 190px;
  line-height: 1.45;
}

.sources-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 28px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.sources-list li { display: inline-flex; align-items: center; gap: 9px; }
.sources-list svg { width: 18px; height: 18px; color: var(--muted); }

/* --------------------------------------------------------------- problem */

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.problem-copy { display: grid; gap: 22px; }
.problem-copy .lede + .lede { margin-top: -4px; }






/* ---------------------------------------------------------- how it works */

.steps { display: grid; gap: clamp(48px, 7vw, 88px); }

.step {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 24px clamp(32px, 5vw, 64px);
  align-items: center;
}

.step:nth-child(even) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); }
.step:nth-child(even) .step-text { order: 2; }
.step .shot-portrait { max-width: 640px; justify-self: center; }

.step-text { display: grid; gap: 12px; align-content: start; }

.step-num { color: var(--accent); font: 600 13px/1 var(--mono); letter-spacing: 0.04em; }

.step h3 { font-size: clamp(26px, 2.6vw, 32px); }

.step p { color: var(--muted); font-size: 17px; }

/* ---------------------------------------------------------- cite or abstain */

.proof { background: var(--bg-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.checks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; color: var(--muted); }
.checks li b { color: var(--ink); font-weight: 600; }
.checks .tick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-2); color: var(--accent); }
.checks .tick svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------- security */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.trust-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.trust-card .icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border-radius: 11px;
  background: var(--accent-2);
  color: var(--accent);
}

.trust-card .icon svg { width: 21px; height: 21px; }
.trust-card h3 { font-size: 21px; }
.trust-card p { color: var(--muted); font-size: 15px; }

/* -------------------------------------------------------------- lifecycle */

.lifecycle {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  counter-reset: stage;
}

.lifecycle li {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px 18px 24px;
  border-left: 1px solid var(--line);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}

.lifecycle li:first-child { border-left: 0; }

.lifecycle li span {
  color: var(--accent);
  font: 600 12px/1 var(--mono);
}

.lifecycle li.is-key { background: var(--surface-active); }

/* ------------------------------------------------------------------ video */

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  /* as wide as the column, but never taller than the screen under the section heading */
  width: min(100%, calc((100vh - 480px) * 16 / 9), 1200px);
  min-width: min(100%, 640px);
  margin-inline: auto;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}

.video-slot { position: absolute; inset: 0; }
.video-slot iframe, .video-slot video { width: 100%; height: 100%; border: 0; display: block; background: var(--film-bg); }

/* -------------------------------------------------------------------- cta */

.cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: end;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.cta-card .h2 { font-size: clamp(34px, 4.6vw, 56px); }
.cta-copy { display: grid; gap: 18px; }
.cta-side { display: grid; gap: 22px; justify-items: start; }
.cta-side p { color: var(--muted); font-size: 14px; }
.cta-side p a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.cta-side p a:hover { border-color: var(--accent); }

/* ----------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  color: var(--muted);
  font-size: 14px;
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  padding-block: 36px;
}

.foot .brand { font-size: 18px; }
.foot .brand-mark { width: 22px; height: 22px; }
.foot-tag { flex: 1; min-width: 220px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ story */
/* One stage, six beats. main.js sets data-step on #stage from whichever beat is centred; every
   state below is a pure function of that number, so scrolling back replays cleanly. Tiles and
   the SVG share one 500 × 400 coordinate space (--x / --y), so lines meet tiles at any size. */

.story { padding: clamp(72px, min(11vw, 11vh), 128px) 0 clamp(40px, 6vw, 80px); position: relative; }

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.story-stage-col {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
}

.stage {
  --ease: cubic-bezier(.2, .75, .2, 1);
  position: relative;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background:
    radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(var(--grid-dot) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--field);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  container-type: inline-size;
}

.stage-inner { position: absolute; inset: 0; }
/* The stage's inner height in its own container units: border-box 5:4, less the 1px border. The
   card and the evidence chips move by transform in these, never by left and top. */
.stage { --h: calc((100cqi + 2px) * .8 - 2px); }

.stage-caption { color: var(--faint); font-size: 12.5px; text-align: center; letter-spacing: .02em; }

.story-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.story-progress button {
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  font: 600 11.5px/1.2 var(--sans);
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
}
.story-progress button::before {
  content: "";
  height: 3px;
  border-radius: 3px;
  background: var(--line-strong);
  transition: background 300ms ease;
}
.story-progress button.is-done::before { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.story-progress button.is-active { color: var(--ink); }
.story-progress button.is-active::before { background: var(--accent); }

/* lines */
.stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.edge {
  /* No vector-effect here: Chrome scales pathLength dashes by the stage's own scale when
     non-scaling-stroke is on, which cut long lines short by exactly that factor. */
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.15;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: .7;
  transition: stroke-dashoffset 900ms var(--ease) calc(var(--i) * 90ms + 500ms), opacity 400ms ease;
}
.edge.dark { stroke: var(--amber); stroke-dasharray: .02 .025; }
.scan {
  fill: none;
  stroke: var(--accent);
  stroke-width: .8;
  stroke-dasharray: .04 .05;
  opacity: 0;
}

/* systems */
.sys {
  position: absolute;
  left: calc(var(--x) / 500 * 100%);
  top: calc(var(--y) / 400 * 100%);
  width: 20.5%;
  display: grid;
  gap: 1px;
  padding: 1.3cqi 1.5cqi 1.4cqi;
  border: 1px solid var(--line-strong);
  border-radius: 1.6cqi;
  background: var(--surface);
  transform: translate(-50%, -50%) scale(.6);
  transition: transform 600ms var(--ease) calc(var(--i) * 70ms), opacity 500ms ease calc(var(--i) * 70ms), border-color 400ms ease, box-shadow 400ms ease;
}
:where(html[data-js]) .sys { opacity: 0; }
.sys b { font-size: max(8.5px, 2.2cqi); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys span { font-size: max(7.5px, 1.75cqi); color: var(--muted); line-height: 1.2; }
.sys em {
  position: absolute;
  right: -1.2cqi;
  top: -1.4cqi;
  padding: .3cqi 1cqi;
  border-radius: 99px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 max(7.5px, 1.7cqi)/1.3 var(--mono);
  font-style: normal;
  transform: scale(.6);
  transition: opacity 400ms ease calc(var(--i) * 80ms + 700ms), transform 400ms var(--ease) calc(var(--i) * 80ms + 700ms);
}
:where(html[data-js]) .sys em { opacity: 0; }
.sys em.blind { background: var(--amber); }
.sys.is-dark { border-style: dashed; border-color: color-mix(in srgb, var(--amber) 55%, transparent); background: transparent; }
.sys.is-dark b { color: var(--muted); }
.sys.is-hub { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.agent-node {
  position: absolute;
  left: 50%;
  top: 93%;
  transform: translate(-50%, -50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 1cqi;
  padding: .8cqi 2cqi;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 99px;
  background: var(--accent-2);
  color: var(--accent);
  font: 600 max(8px, 1.9cqi)/1.3 var(--sans);
  white-space: nowrap;
  transition: opacity 500ms ease, transform 600ms var(--ease);
}
:where(html[data-js]) .agent-node { opacity: 0; }
.pulse { width: 1.3cqi; height: 1.3cqi; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--accent); }

/* evidence chips */
.ev {
  position: absolute;
  left: calc(var(--sx) / 500 * 100%);
  top: calc(var(--sy) / 400 * 100%);
  transform: translate(-50%, -50%);
  padding: .5cqi 1.3cqi;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--surface-3);
  color: var(--ink);
  font: 600 max(7.5px, 1.7cqi)/1.3 var(--mono);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
:where(html[data-js]) .ev { opacity: 0; }

/* the concept card */
.concept-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  display: grid;
  gap: 1.2cqi;
  padding: 2.4cqi 2.8cqi;
  border: 1px solid var(--line-strong);
  border-radius: 2cqi;
  background: var(--surface-3);
  box-shadow: 0 2cqi 6cqi var(--shade-45);
  transform: translate(-50%, -50%) scale(.85);
  z-index: 2;
  transition: transform 700ms var(--ease), opacity 500ms ease, border-color 400ms ease;
}
:where(html[data-js]) .concept-card { opacity: 0; }
.cc-head { display: flex; align-items: center; justify-content: space-between; }
.cc-kind { color: var(--muted); font: 600 max(8px, 1.7cqi)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: .8cqi;
  padding: .5cqi 1.4cqi;
  border-radius: 99px;
  font: 700 max(8px, 1.8cqi)/1.2 var(--sans);
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber);
  transition: background 400ms ease, color 400ms ease;
}
.cc-badge i { width: 1cqi; height: 1cqi; min-width: 6px; min-height: 6px; border-radius: 50%; background: currentColor; }
.concept-card h4 { font: 500 max(14px, 3.6cqi)/1.1 var(--serif); letter-spacing: -.01em; }
.concept-card dl { display: grid; gap: .5cqi; }
.concept-card .row {
  display: grid;
  grid-template-columns: 26% 1fr;
  gap: 1.2cqi;
  font-size: max(8px, 1.85cqi);
  transform: translateX(-8px);
  transition: opacity 400ms ease calc(var(--i) * 140ms + 900ms), transform 400ms var(--ease) calc(var(--i) * 140ms + 900ms);
}
:where(html[data-js]) .concept-card .row { opacity: 0; }
.concept-card dt { color: var(--muted); }
.concept-card dd { margin: 0; font-family: var(--mono); font-size: .95em; }
.cc-sign {
  display: flex;
  align-items: center;
  gap: 1.6cqi;
  padding-top: 1.3cqi;
  border-top: 1px solid var(--line);
  font-size: max(8px, 1.8cqi);
  opacity: 0;
  transition: opacity 400ms ease;
}
.signer { display: inline-flex; align-items: center; gap: .9cqi; white-space: nowrap; }
.av { display: grid; place-items: center; width: 3.4cqi; height: 3.4cqi; min-width: 18px; min-height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 max(7px, 1.4cqi)/1 var(--sans); }
.sig { flex: 1; height: 3.6cqi; min-height: 18px; overflow: visible; }
.sig path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.pin { color: var(--muted); white-space: nowrap; font-family: var(--mono); }
.pin b { color: var(--ink); font-weight: 600; }

/* Asking in the chat */
.chat {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 30%;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  gap: 1.4cqi;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 500ms ease, transform 600ms var(--ease);
}
:where(html[data-js]) .chat { opacity: 0; }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 1.3cqi; justify-content: flex-end; min-height: 0; }
.msg { transform: translateY(6px); transition: opacity 350ms ease, transform 400ms var(--ease); font-size: max(8.5px, 1.95cqi); }
:where(html[data-js]) .msg { opacity: 0; }
.msg.show { opacity: 1; transform: none; }
.msg.q { align-self: flex-end; max-width: 80%; padding: 1cqi 1.8cqi; border-radius: 1.8cqi 1.8cqi .5cqi 1.8cqi; background: var(--surface-3); border: 1px solid var(--line); font-weight: 500; min-height: 1.6em; }
.msg.q .typed::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--accent); animation: caret 900ms steps(1) infinite; }
.msg.q.done .typed::after { display: none; }
@keyframes caret { 50% { opacity: 0; } }
.msg.a { display: grid; gap: .9cqi; padding: 1.5cqi 1.8cqi; border-radius: 1.6cqi; background: var(--surface); border: 1px solid var(--line); }
.msg.a.abstain { border-color: color-mix(in srgb, var(--amber) 35%, transparent); background: color-mix(in srgb, var(--amber) 6%, var(--surface)); }
.a-line { display: flex; align-items: center; gap: .9cqi; color: var(--muted); }
.a-line b { color: var(--ink); font-weight: 600; }
.a-figure { display: flex; align-items: baseline; gap: 1.4cqi; flex-wrap: wrap; }
.a-figure b { font: 500 max(18px, 4.6cqi)/1 var(--serif); letter-spacing: -.02em; }
.a-figure span, .a-sub { color: var(--muted); font-size: .9em; }
.a-cites { display: flex; flex-wrap: wrap; gap: .7cqi; }
.a-cites span { padding: .3cqi 1.1cqi; border-radius: 99px; border: 1px solid var(--line); background: var(--field); color: var(--muted); font: 600 max(7.5px, 1.55cqi)/1.4 var(--mono); }
.dot { display: inline-block; width: 1.2cqi; height: 1.2cqi; min-width: 7px; min-height: 7px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--green); } .dot.warn { background: var(--amber); } .dot.bad { background: var(--red); }
.composer { display: flex; align-items: center; gap: 1.2cqi; padding: 1.2cqi 1.2cqi 1.2cqi 2cqi; border: 1px solid var(--line-strong); border-radius: 2cqi; background: var(--surface); color: var(--faint); font-size: max(8.5px, 1.85cqi); }
.composer > span:first-child { flex: 1; }
.composer .send { width: 3.6cqi; height: 3.6cqi; min-width: 18px; min-height: 18px; border-radius: 50%; background: var(--accent); }

/* evolve feed */
.feed {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 46%;
  display: grid;
  gap: 1.2cqi;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 4;
}
.feed li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2cqi;
  align-items: start;
  padding: 1.3cqi 1.6cqi;
  border-radius: 1.4cqi;
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  box-shadow: 0 1cqi 4cqi var(--shade-35);
  font-size: max(8.5px, 1.85cqi);
  position: relative;
  z-index: 5;
  line-height: 1.35;
  transform: translateY(-1.2cqi);
  transition: opacity 450ms ease, transform 500ms var(--ease);
}
:where(html[data-js]) .feed li { opacity: 0; }
.feed li .dot { margin-top: .5cqi; }
.feed small { display: block; color: var(--faint); font: 600 max(7px, 1.45cqi)/1.3 var(--mono); letter-spacing: .02em; margin-bottom: .3cqi; }
.feed b { font-family: var(--mono); font-weight: 600; }

/* ---- step states ---- */
.stage[data-step] .sys { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.stage[data-step="2"] .sys em,
.stage[data-step="6"] .sys.is-hub em { opacity: 1; transform: scale(1); }
.stage[data-step="2"] .edge, .stage[data-step="3"] .edge, .stage[data-step="4"] .edge,
.stage[data-step="6"] .edge { stroke-dashoffset: 0; }
.stage[data-step="2"] .agent-node, .stage[data-step="6"] .agent-node { opacity: 1; transform: translate(-50%, -50%); }
.stage[data-step="2"] .scan { animation: scan 1400ms ease-out calc(var(--i) * 110ms) both; }
.stage[data-step="2"] .pulse, .stage[data-step="6"] .pulse { animation: ping 1600ms ease-out infinite; }
@keyframes scan { 0% { opacity: 0; stroke-dashoffset: 0; } 25% { opacity: .9; } 100% { opacity: 0; stroke-dashoffset: -.6; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

.stage[data-step="3"] .sys, .stage[data-step="4"] .sys { opacity: .22; transition-delay: 0ms; }
.stage[data-step="3"] .edge, .stage[data-step="4"] .edge { opacity: .18; }
.stage[data-step="3"] .ev { animation: fly 1100ms var(--ease) calc(var(--i) * 160ms) both; }
@keyframes fly {
  0% { opacity: 0; transform: translate(-50%, -50%); }
  18% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + (.5 - var(--sx) / 500) * 100cqi), calc(-50% + (.5 - var(--sy) / 400) * var(--h))); }
}
.stage[data-step="3"] .concept-card,
.stage[data-step="4"] .concept-card { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 500ms, 500ms; }
.stage[data-step="3"] .row, .stage[data-step="4"] .row,
.stage[data-step="5"] .row, .stage[data-step="6"] .row { opacity: 1; transform: none; }
.stage[data-step="4"] .row { transition-delay: 0ms; }

.stage[data-step="4"] .cc-sign, .stage[data-step="5"] .cc-sign, .stage[data-step="6"] .cc-sign { opacity: 1; }
.stage[data-step="4"] .sig path { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms ease 250ms; }
.stage[data-step="5"] .sig path, .stage[data-step="6"] .sig path { stroke-dashoffset: 0; }
.stage.is-certified .cc-badge { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.stage.is-certified .concept-card { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

.stage[data-step="5"] .sys { opacity: 0; transition-delay: 0ms; }
.stage[data-step="5"] .edge { opacity: 0; }
.stage[data-step="5"] .concept-card { opacity: 1; transform: translate(-50%, calc(-50% - .35 * var(--h))) scale(.62); }
.stage[data-step="5"] .chat { opacity: 1; transform: none; }

.stage[data-step="6"] .sys { opacity: .16; transition-delay: 0ms; }
.stage[data-step="6"] .sys.is-hub { opacity: 1; }
.stage.ev1 .sys.is-hub { border-color: var(--red); animation: alarm 1600ms ease-out 2; }
.stage.ev3 .sys.is-hub { border-color: var(--accent); animation: none; opacity: .16; }
@keyframes alarm { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.stage[data-step="6"] .edge { opacity: .2; }
.stage[data-step="6"] .concept-card { opacity: 1; transform: translate(calc(-50% - 23cqi), calc(-50% + .24 * var(--h))) scale(.58); transition-delay: 0ms; }
.stage.is-review .cc-badge { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.stage.is-review .concept-card { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.stage.is-review .sig path { opacity: .3; }
.stage.ev1 .feed .f1, .stage.ev2 .feed .f2, .stage.ev3 .feed .f3, .stage.ev4 .feed .f4 { opacity: 1; transform: none; }
/* earlier events stay readable but step back: dimmer text, same solid card */
.stage.ev3 .feed .f1, .stage.ev3 .feed .f2, .stage.ev4 .feed .f3 { color: var(--faint); box-shadow: none; }
.stage.ev3 .feed .f1 .dot, .stage.ev3 .feed .f2 .dot, .stage.ev4 .feed .f3 .dot { opacity: .45; }
.stage.is-rebound .cc-formula { color: var(--accent); }

/* ---- beats (the text column) ---- */
.story-steps { display: grid; padding: 0; margin: 0; list-style: none; }
.beat {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 78vh;
  padding: 24px 0;
  opacity: .32;
  transition: opacity 400ms ease;
}
.beat:first-child { min-height: 60vh; align-content: start; padding-top: 12vh; }
.beat:last-child { min-height: 70vh; }
.beat.is-active { opacity: 1; }
.beat-num { color: var(--accent); font: 600 13px/1 var(--mono); letter-spacing: .04em; }
.beat h3 { font-size: clamp(26px, 2.6vw, 34px); }
.beat p { color: var(--muted); font-size: 17px; max-width: 40ch; }

@media (prefers-reduced-motion: reduce) {
  .stage *, .stage *::before, .stage *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
  .stage[data-step="3"] .ev { opacity: 0; }
}

@media (max-width: 920px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story-stage-col {
    top: 64px;
    z-index: 5;
    margin: 0 calc(var(--gutter) * -1);
    padding: 10px var(--gutter) 12px;
    background: var(--bg);
    box-shadow: 0 18px 18px -6px var(--bg);
  }
  .stage { aspect-ratio: 5 / 3.6; border-radius: 14px; --h: calc((100cqi + 2px) * .72 - 2px); }
  .stage-caption { display: none; }
  .story-progress button { font-size: 0; gap: 0; }
  .story-progress button::before { height: 4px; }
  /* On a phone the answer needs the whole stage; the certified card stepped in on the beat before. */
  .stage[data-step="5"] .concept-card { opacity: 0; }
  .stage[data-step="5"] .chat { top: 5%; }
  .feed { left: 4%; width: 92%; top: 4%; gap: 1cqi; }
  .stage[data-step="6"] .concept-card { transform: translate(-50%, calc(-50% + .31 * var(--h))) scale(.5); }
  .stage[data-step="6"] .sys, .stage[data-step="6"] .sys.is-hub, .stage[data-step="6"] .edge, .stage[data-step="6"] .agent-node { opacity: 0; }
  .beat, .beat:first-child, .beat:last-child { min-height: 58vh; padding: 20px 0; align-content: start; }
  .beat p { max-width: none; font-size: 16px; }
}


/* ------------------------------------------------ built panels (not screenshots) */

.sources-list svg.logo { width: 20px; height: 20px; color: color-mix(in srgb, var(--ink) 70%, transparent); }

.panel {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 14px;
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.dot.warn { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }

/* Hero: the agent console (console.js replays three real demo exchanges) */
.console { display: grid; grid-template-rows: auto 1fr; background: var(--field); }
.cs-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cs-tabs button { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; border: 0; border-right: 1px solid var(--line); background: none; color: var(--muted); font: 600 13.5px/1.3 var(--sans); text-align: left; cursor: pointer; transition: color 250ms, background 250ms; }
.cs-tabs button:last-child { border-right: 0; }
.cs-tabs button:hover { color: var(--ink); }
.cs-tabs button[aria-selected="true"] { color: var(--ink); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cs-n { color: var(--accent); font: 600 11.5px var(--mono); }
.cs-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.cs-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 470px; }
.cs-chat { display: grid; grid-template-rows: 1fr auto; border-right: 1px solid var(--line); min-width: 0; }
.cs-log { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; overflow: hidden; }
.cs-q { align-self: flex-end; max-width: 85%; padding: 9px 14px; border-radius: 14px 14px 3px 14px; background: var(--accent-2); color: var(--ink); font-size: 14.5px; }
.cs-trace { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.cs-trace li { display: grid; grid-template-columns: 16px 1fr auto; gap: 9px; align-items: center; }
.cs-trace li b { color: var(--ink); font-weight: 600; }
.cs-trace li code { font: 12px var(--mono); color: var(--ink); }
.cs-trace li em { font: normal 11.5px var(--mono); color: var(--faint); }
.cs-trace .st { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); border-top-color: var(--accent); animation: cs-spin .8s linear infinite; }
.cs-trace li.done .st { animation: none; border: 0; background: var(--accent); -webkit-mask: radial-gradient(circle, var(--mask) 38%, transparent 42%); mask: radial-gradient(circle, var(--mask) 38%, transparent 42%); }
.cs-trace li.warn .st { animation: none; border: 0; background: var(--amber); }
.cs-trace li.bad .st { animation: none; border: 0; background: var(--red); }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cs-card { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.cs-card.warn { border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
.cs-card.bad { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.cs-line { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.cs-line b { color: var(--ink); }
.cs-line code { font: 12px var(--mono); color: var(--ink); }
.cs-line .dot { margin-right: 8px; vertical-align: 1px; }
.cs-fig { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cs-fig b { font: 500 clamp(28px, 3.2vw, 40px)/1 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-fig span { color: var(--muted); font-size: 12.5px; }
.cs-text { color: var(--ink); font-size: 14px; line-height: 1.5; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chips span { padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--field); color: var(--muted); font: 12px/1.45 var(--mono); }
.cs-chips span.gap { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.cs-chips span.cs-evl { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
/* The composer, as the app draws it: the prompt on top, send underneath. */
.cs-composer { display: grid; gap: 6px; margin: 0 18px 18px; padding: 11px 12px 10px 14px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 24px var(--shade-22); transition: border-color 300ms; }
.cs-composer.busy { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.cs-input { position: relative; min-width: 0; min-height: 22px; padding: 1px 2px; color: var(--ink); font-size: 15px; line-height: 22px; white-space: nowrap; overflow: hidden; }
.cs-ph { position: absolute; left: 2px; color: var(--faint); pointer-events: none; }
.cs-input:has(.cs-typed:not(:empty)) .cs-ph { display: none; }
.cs-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: cs-blink 1s steps(1) infinite; }
@keyframes cs-blink { 50% { opacity: 0; } }
.cs-actions { display: flex; align-items: center; gap: 8px; }
.cs-send { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: var(--accent); color: var(--accent-ink); flex: none; opacity: .38; transition: opacity 250ms, transform 150ms; }
.cs-send svg { position: absolute; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity 200ms, transform 200ms; }
.cs-send .i-stop { width: 14px; height: 14px; transform: scale(.5); }
:where(html[data-js]) .cs-send .i-stop { opacity: 0; }
.cs-composer.ready .cs-send { opacity: 1; }
.cs-composer.busy .cs-send { opacity: 1; background: var(--surface-active); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.cs-composer.busy .i-send { transform: scale(.5) translateY(-6px); }
:where(html[data-js]) .cs-composer.busy .i-send { opacity: 0; }
.cs-composer.busy .i-stop { opacity: 1; transform: none; }
.cs-send.press { transform: scale(.86); }
.cs-ev { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; background: color-mix(in srgb, var(--bg-deep) 60%, var(--field)); }
.cs-ev-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--faint); font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cs-ev-head span { font: 500 11px var(--sans); letter-spacing: 0; text-transform: none; }
/* The evidence graph: three tiers, edges drawn node edge to node edge (console.js), only for what
   the current question touches. */
.cs-graph { position: relative; margin: 8px 14px 0; min-height: 290px; container-type: inline-size; }
@container (max-width: 440px) { .gn { padding: 6px 7px; font-size: 10px; max-width: 32%; } .gn small { font-size: 9.5px; } }
.cs-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cs-tier { position: absolute; left: 0; top: calc(var(--y) * 1%); color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.cs-edges path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; opacity: 0; transition: opacity 300ms; }
.cs-edges path.lit { opacity: .85; }
.cs-edges path.flow { opacity: 1; stroke-dasharray: 2 6; stroke-width: 2; }
.cs-edges path.clash { opacity: 1; stroke: var(--red); stroke-width: 2; stroke-dasharray: 3 4; }
.cs-ports circle { fill: var(--bg-deep); stroke: var(--accent); stroke-width: 1.5; opacity: 0; transition: opacity 300ms; }
.cs-ports circle.on { opacity: 1; }
.cs-ports circle.bad { stroke: var(--red); }
.gn { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); z-index: 1; display: grid; gap: 1px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font: 600 11px/1.25 var(--mono); max-width: 31%; white-space: nowrap; opacity: .38; transition: opacity 350ms, border-color 350ms, color 350ms, box-shadow 350ms; }
.gn small { color: var(--faint); font: 500 10px var(--sans); }
.gn.lit { opacity: 1; color: var(--ink); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent), 0 6px 18px var(--shade-25); }
.gn.clash { border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent), 0 6px 18px var(--shade-25); }
.gn.gap { border-style: dashed; border-color: color-mix(in srgb, var(--amber) 70%, transparent); color: var(--amber); opacity: 0; background: color-mix(in srgb, var(--amber) 6%, var(--surface)); }
.gn.gap.on { opacity: 1; animation: gn-ask 2.2s ease-in-out infinite; }
@keyframes gn-ask { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--amber) 12%, transparent); } }
.gn.agent { grid-auto-flow: column; align-items: center; gap: 7px; border-radius: 99px; color: var(--accent); background: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 45%, transparent); opacity: 1; font-family: var(--sans); }
.gn.agent i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.gn.agent.lit i { animation: gn-live 1.2s ease-in-out infinite; }
@keyframes gn-live { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); } }
.gv { color: var(--ink); font: 600 12px var(--mono); margin-top: 3px; }
.gn.clash .gv { color: var(--red); }
.gv:empty { display: none; }
.gdelta { position: absolute; left: 0; top: 0; z-index: 2; transform: translate(-50%, -50%) scale(.8); padding: 2px 7px; border-radius: 6px; background: var(--red); color: var(--accent-ink); font: 700 11px var(--mono); white-space: nowrap; box-shadow: 0 0 0 3px var(--bg-deep); }
:where(html[data-js]) .gdelta { opacity: 0; }
.cs-facts { display: grid; gap: 6px; margin: 0; padding: 12px 16px 16px; list-style: none; font-size: 12.5px; color: var(--muted); min-height: 96px; }
.cs-facts li { display: grid; grid-template-columns: 10px 1fr; gap: 8px; line-height: 1.45; }
.cs-facts li::before { content: ""; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.cs-facts li b { color: var(--ink); font-weight: 600; }

@media (max-width: 920px) {
  .cs-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cs-chat { border-right: 0; min-height: 440px; }
  .cs-ev { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .cs-tabs button { flex-direction: column; gap: 2px; padding: 10px 10px; font-size: 12px; }
  .cs-log { padding: 16px 14px; }
  .cs-composer { margin: 0 12px 12px; }
  .cs-graph { display: none; }
  .cs-ev-head { display: none; }
  .cs-chat { min-height: 460px; }
}

/* Four versions of revenue */
.rev { display: grid; gap: 16px; }
.rev-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rev-card {
  position: relative; display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  transform: translateY(10px) rotate(calc((var(--i) - 1.5) * 0.6deg));
  transition: opacity 500ms, transform 600ms cubic-bezier(.2,.7,.2,1), background 500ms, border-color 500ms;
  transition-delay: calc(var(--i) * 140ms);
}
:where(html[data-js]) .rev-card { opacity: 0; }
.rev-who { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.rev-who svg { width: 16px; height: 16px; }
.rev-card b { justify-self: start; font: 500 30px/1.15 var(--serif); letter-spacing: -0.02em; transition: color 500ms; }
.rev-card b::after { content: ""; display: block; height: 2px; margin-top: -18px; margin-bottom: 16px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 500ms; transition-delay: calc(var(--i) * 140ms); }
.rev-why {
  justify-self: start; padding: 3px 9px; border-radius: 7px; font-size: 12.5px; color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  transform: translateY(-4px); transition: opacity 400ms, transform 400ms; transition-delay: calc(var(--i) * 260ms);
}
:where(html[data-js]) .rev-why { opacity: 0; }
.rev-why code { font: 12px var(--mono); }
.rev-note { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 12.5px; opacity: 0; transition: opacity 500ms 900ms; }
.rev-q { text-align: center; color: var(--muted); font: italic 400 18px/1.3 var(--serif); opacity: 0; transition: opacity 500ms 600ms; }
.rev-truth {
  display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--accent); border-radius: 14px; background: var(--surface-3); box-shadow: var(--shadow);
  transform: translateY(16px) scale(.98); transition: opacity 600ms, transform 700ms cubic-bezier(.2,.7,.2,1);
}
:where(html[data-js]) .rev-truth { opacity: 0; }
.rev-truth-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rev-truth-name { font-weight: 650; }
.rev-truth-n { font: 500 40px/1.1 var(--serif); letter-spacing: -0.03em; color: var(--accent); }
.rev-facts { display: grid; gap: 5px; margin-top: 4px; }
.rev-facts li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 13.5px; color: var(--ink); }
.rev-facts span { color: var(--muted); }
.rev-replay { justify-self: center; border: 0; background: none; color: var(--accent); font: 600 13px/1 var(--sans); cursor: pointer; }
.rev[data-phase="1"] .rev-card, .rev[data-phase="2"] .rev-card, .rev[data-phase="3"] .rev-card { opacity: 1; transform: rotate(calc((var(--i) - 1.5) * 0.6deg)); }
.rev[data-phase="1"] .rev-q, .rev[data-phase="2"] .rev-q, .rev[data-phase="3"] .rev-q { opacity: 1; }
.rev[data-phase="3"] .rev-note { opacity: 1; }
.rev[data-phase="2"] .rev-why, .rev[data-phase="3"] .rev-why { opacity: 1; transform: none; }
.rev[data-phase="3"] .rev-card { transform: scale(.97); border-color: var(--line); background: transparent; transition-delay: 0s; }
.rev[data-phase="3"] .rev-card b { color: var(--muted); }
.rev[data-phase="3"] .rev-card b::after { transform: none; }
.rev[data-phase="3"] .rev-truth { opacity: 1; transform: none; }
/* The version the certified definition gives is never struck: it ends marked as the one it is. */
.rev[data-phase="3"] .rev-card.is-match { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.rev[data-phase="3"] .rev-card.is-match b { color: var(--ink); }
.rev[data-phase="3"] .rev-card.is-match b::after { transform: scaleX(0); }
.rev[data-phase="3"] .rev-card.is-match .rev-why { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Connect */
.net { display: grid; grid-template-columns: minmax(0, 1.25fr) 120px minmax(0, 0.8fr); align-items: center; gap: 0; padding: 22px; }
.net-zone { display: grid; gap: 14px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--field); }
.net-zone-label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.net-zone-label svg { width: 15px; height: 15px; }
.net-dbs { display: flex; flex-wrap: wrap; gap: 8px; }
.net-dbs span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; }
.net-dbs svg { width: 16px; height: 16px; color: var(--muted); }
.net-agent, .net-cloud { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-3); }
.net-agent svg, .net-cloud svg { grid-row: span 2; width: 28px; height: 28px; color: var(--ink); --mark-accent: var(--accent); }
.net-agent small, .net-cloud small { color: var(--muted); font-size: 12px; }
.net-link { position: relative; display: grid; justify-items: center; gap: 8px; padding-inline: 6px; }
.net-link i { width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px); background-size: 28px 2px; animation: net-flow 1.1s linear infinite; }
.net-link span { color: var(--muted); font-size: 11.5px; text-align: center; }
@keyframes net-flow { to { background-position: 28px 0; } }

/* Discover: the estate census */
.census { display: grid; gap: 18px; padding: 22px; }
.cz-title { display: grid; gap: 2px; }
.cz-title b { font: 600 20px/1.2 var(--serif); }
.cz-title span { color: var(--muted); font-size: 13px; }
.cz-top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cz-lines { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; }
.cz-dark { display: grid; gap: 6px; padding: 12px 14px; border-left: 3px solid var(--red); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--red) 8%, transparent); font-size: 13px; }
.cz-dark > b { font: 600 14px/1.3 var(--serif); }
.cz-dark ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--muted); }
.cz-dark li b { color: var(--ink); font-weight: 600; }
.cz-top div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.cz-top b { font: 500 clamp(22px, 2.4vw, 30px)/1 var(--serif); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cz-top span { color: var(--muted); font-size: 12.5px; }
.cz-block { display: grid; gap: 9px; align-content: start; }
.cz-label { color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.cz-bars { display: grid; gap: 7px; }
.cz-bar { display: grid; grid-template-columns: 90px minmax(0, 1fr) 30px; gap: 12px; align-items: center; font-size: 13px; }
.cz-bar span { color: var(--muted); }
.cz-bar i { height: 8px; border-radius: 99px; background: var(--accent); width: calc(var(--v) / 77 * 100%); transform: scaleX(0); transform-origin: left; transition: transform 1100ms cubic-bezier(.2,.7,.2,1); }
.census.in .cz-bar i { transform: none; }
.cz-bar b { font: 600 12.5px var(--mono); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.cz-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.cz-stack i { flex: 0 0 calc(var(--v) / 195 * 100% - 2px); transform: scaleX(0); transform-origin: left; transition: transform 1100ms cubic-bezier(.2,.7,.2,1); }
.census.in .cz-stack i { transform: none; }
.cz-stack .k2 { transition-delay: 150ms; } .cz-stack .k3 { transition-delay: 300ms; }
.k1 { --kc: var(--accent); } .k2 { --kc: color-mix(in srgb, var(--accent) 55%, var(--ink)); } .k3 { --kc: var(--amber); }
.cz-stack i { background: var(--kc); }
.cz-keys { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
.cz-keys span { display: inline-flex; align-items: center; gap: 7px; }
.cz-keys span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--kc); }
.cz-keys b { color: var(--ink); font-weight: 650; }
.cz-gaps { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-gaps span { padding: 4px 10px; border-radius: 7px; border: 1.5px dashed color-mix(in srgb, var(--amber) 60%, transparent); color: var(--amber); font-size: 12.5px; }
@media (max-width: 640px) {
  .cz-bar { grid-template-columns: 84px minmax(0, 1fr) 30px; gap: 8px; font-size: 12px; }
  .cz-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cz-lines { grid-template-columns: minmax(0, 1fr); }

}
@media (prefers-reduced-motion: reduce) { .cz-bar i, .cz-stack i { transition: none; } }

/* Govern */
.measures { overflow: hidden; }
.m-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 150px; gap: 14px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); }
.m-row > span:first-child { display: grid; gap: 2px; }
.m-row small { color: var(--muted); font-size: 12px; }
.m-row code { font: 12.5px var(--mono); color: var(--ink); }
.m-row > span:last-child { display: grid; justify-items: start; gap: 4px; }
.m-row .pin { font-family: var(--mono); }
.m-th { border-top: 0; background: var(--surface-2); color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; padding-block: 9px; }
.m-draft { background: color-mix(in srgb, var(--amber) 6%, transparent); }

/* Serve / cite or abstain */
.receipt { display: grid; gap: 12px; padding: 20px; align-content: start; }
.r-q { justify-self: end; max-width: 85%; padding: 9px 13px; border-radius: 12px 12px 3px 12px; background: var(--accent-2); color: var(--ink); }
.r-a { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--field); }
.r-line { line-height: 1.5; }
.r-line .dot { margin-right: 9px; vertical-align: 1px; }
.r-figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.r-figure b { font: 500 34px/1 var(--serif); letter-spacing: -0.02em; }
.r-figure span { color: var(--muted); font-size: 13px; }
.r-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.r-cites span { padding: 3px 9px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font: 12px/1.5 var(--mono); }
.r-abstain { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.r-sub { color: var(--muted); font-size: 13.5px; }
.abstain-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: clamp(24px, 3.5vh, 40px); align-items: stretch; }
.queue { display: grid; align-content: start; gap: 0; padding: 18px 20px; }
.queue-label { color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.q-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.q-row b { color: var(--amber); font-weight: 650; }
.q-row span { color: var(--muted); font-size: 12.5px; }

/* Cite or abstain: the heading and its disciplines on the left, the questions they closed on the
   right; on a phone the ledger comes straight after the heading. */
.answers-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "copy ledger" "checks ledger"; gap: 32px clamp(36px, 5vw, 72px); align-items: start; }
.answers-copy { grid-area: copy; display: grid; gap: 22px; }
.answers-grid .ledger-wrap { grid-area: ledger; }
.answers-grid .checks { grid-area: checks; }
.checks.checks-stack { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.checks-stack li { font-size: 16px; }
.ledger { display: grid; padding: 20px 22px 8px; }
.ledger-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.ledger-label { color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.ledger-score { color: var(--muted); font-size: 14px; }
.ledger-score b { margin-right: 3px; color: var(--accent); font: 500 30px/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ledger-bar { height: 6px; margin: 14px 0 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.ledger-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1200ms cubic-bezier(.2,.7,.2,1) 250ms; }
.ledger-wrap.in .ledger-bar i, .no-js .ledger-bar i { transform: scaleX(calc(var(--v) / var(--of, 8))); }
.ledger-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ledger-rows li:first-child { border-top: 0; }
.lq { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.la { display: grid; justify-items: end; gap: 1px; text-align: right; }
.la b { color: var(--ink); font: 500 21px/1.1 var(--serif); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.la em { color: var(--green); font-size: 13px; font-style: normal; font-weight: 650; }
.la small { color: var(--muted); font-size: 12px; }
.ledger-rows li.no .lq { color: var(--muted); }
.ledger-rows li.no .la em { color: var(--amber); }
/* A number worked out but not certified yet (ROADMAP ruling 52): answered, and says so. */
.ledger-rows li.un .la small { color: var(--amber); }

/* Security: every part of Ontos drawn inside the customer's network */
.net-wrap { margin-bottom: clamp(20px, 3vh, 32px); }
.net.net-home { display: block; }
.net-home .net-zone { gap: 16px; padding: 18px 20px 20px; }
.net-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); align-items: center; }
.net-col { display: grid; gap: 12px; align-content: center; }
.net-model { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface); }
.net-model svg { grid-row: span 2; width: 24px; height: 24px; color: var(--muted); }
.net-model small { color: var(--muted); font-size: 12px; }

@media (max-width: 920px) {
  .net { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .net-link i { width: 2px; height: 40px; background: repeating-linear-gradient(180deg, var(--accent) 0 8px, transparent 8px 14px); background-size: 2px 28px; animation-name: net-flow-v; }
  .abstain-pair { grid-template-columns: minmax(0, 1fr); }
  .answers-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "ledger" "checks"; }
  .net-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .net.net-home { padding: 12px; }
  .net-home .net-zone { padding: 14px; }
  .ledger { padding: 16px 16px 6px; }
}
@keyframes net-flow-v { to { background-position: 0 28px; } }
@media (max-width: 640px) {
  .rev-card b { font-size: 24px; }
  .rev-facts li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .m-row { grid-template-columns: minmax(0, 1fr) auto; }
  .m-row code { display: none; }
  .m-th span:nth-child(2) { display: none; }
  .q-row { grid-template-columns: minmax(0, 1fr) auto; }
  .q-row span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rev-card, .rev-why, .rev-truth, .rev-q, .cov-bar i, .ledger-bar i { transition: none !important; }
  .net-link i { animation: none; }
}


/* ============================================================ motion layer (motion.js, GSAP) */

.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-net { position: absolute; top: 96px; right: max(12px, calc((100vw - var(--wrap)) / 2 - 8px)); width: min(40vw, 560px); aspect-ratio: 620 / 450; pointer-events: none; opacity: .85;
  -webkit-mask-image: radial-gradient(closest-side, var(--mask) 60%, transparent); mask-image: radial-gradient(closest-side, var(--mask) 60%, transparent); }
.hero-net .n-edge { fill: none; stroke: var(--accent); stroke-width: .8; opacity: .28; }
.hero-net .n-node { fill: var(--bg); stroke: var(--accent); stroke-width: 1.2; opacity: .6; }
.hero-net .n-node.hub { fill: var(--accent); opacity: .85; }
.hero-net .n-pulse { fill: var(--accent); }
.hero-net .n-label { fill: var(--faint); font: 10px var(--mono); letter-spacing: .04em; }

/* Split-line reveals: each line slides up out of its own mask (SplitText's mask element, a clip
   box sized to the line). Pad the mask below the line so descenders (g, y, p) stay inside it; the
   negative margin keeps the line spacing as set. */
:is(.hero-title, .page-title, .h2) [class*="mask"] { padding-bottom: 0.22em; margin-bottom: -0.22em; }

/* Section hairline, drawn as the section arrives */
.sec-rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 15%, var(--line-strong) 85%, transparent); transform-origin: left center; }
.section { position: relative; }

/* Findings */
.findings { background: var(--bg-deep); }
.findings-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.findings-copy { display: grid; gap: 22px; position: sticky; top: 110px; }
.findings-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 0; }
.findings-stats div { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.findings-stats dd { margin: 0; order: -1; font: 500 clamp(30px, 3.2vw, 40px)/1 var(--serif); letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.findings-stats dt { color: var(--muted); font-size: 12.5px; }
.log { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--field); box-shadow: var(--shadow-lg); overflow: hidden; }
.log-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font: 12px/1.3 var(--mono); }
.log-count { margin-left: auto; color: var(--faint); }
.log-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); animation: log-live 2s ease-out infinite; }
@keyframes log-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.log-list { margin: 0; padding: 0; list-style: none; }
.finding { position: relative; display: grid; gap: 8px; padding: 18px 20px 18px 22px; border-bottom: 1px solid var(--line); }
.finding:last-child { border-bottom: 0; }
.finding::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fc); }
.finding.bad { --fc: var(--red); } .finding.warn { --fc: var(--amber); } .finding.dark { --fc: var(--faint); } .finding.good { --fc: var(--green); }
.f-where { color: var(--muted); font-size: 12.5px; }
.f-where b { color: var(--accent); font-weight: 600; }
.f-tag { justify-self: start; padding: 2px 8px; border-radius: 6px; color: var(--fc); background: color-mix(in srgb, var(--fc) 13%, transparent); font: 700 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.finding p { color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.finding p b { color: var(--ink); font-weight: 650; }
.finding code { color: var(--faint); font: 12px/1.5 var(--mono); word-break: break-word; }

/* Logo rail */
.sources-list.is-rail { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask) 8%, var(--mask) 92%, transparent); mask-image: linear-gradient(90deg, transparent, var(--mask) 8%, var(--mask) 92%, transparent); }
.rail-track { display: flex; gap: 44px; padding-right: 44px; flex: none; will-change: transform; }
.rail-track li { white-space: nowrap; }

/* Nav tucks away on the way down, returns on the way up */
.nav { transition: transform 350ms cubic-bezier(.2,.7,.2,1), background 250ms ease, border-color 250ms ease; }
.nav.is-tucked { transform: translateY(-100%); }

/* The guide */
.guide { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 10px; pointer-events: none; opacity: 0; transition: visibility 0s; }
.guide.is-away { visibility: hidden; }
.guide-mark { width: 52px; height: 52px; flex: none; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 6px 18px var(--shade-35)); }
.guide .g-ring { stroke: var(--ink); }
.guide .g-arc { stroke: var(--accent); transition: stroke 400ms ease; }
.guide .g-eye { fill: var(--accent); transition: fill 400ms ease; }
.guide.is-alert .g-arc, .guide.is-alert .g-eye { stroke: var(--amber); fill: var(--amber); }
.guide.is-alert .g-arc { fill: none; }
.guide-say { max-width: 280px; padding: 9px 13px; border-radius: 12px 12px 3px 12px; border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-lg); font-size: 13.5px; line-height: 1.4; transform: translateX(8px); }
:where(html[data-js]) .guide-say { opacity: 0; }
.no-motion .guide { display: none; }

/* Look picker: only after ?theme= (partials/head.html), never for a normal visit. */
.look-pick { position: fixed; left: 16px; bottom: 16px; z-index: 70; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-3); color: var(--muted); box-shadow: var(--shadow-lg); font: 600 12.5px/1 var(--sans); }
.look-pick span { padding: 0 6px 0 9px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.look-pick button { min-width: 34px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.look-pick button:hover { background: var(--surface-active); }
.look-pick button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.look-pick .look-close { min-width: 30px; padding: 0; color: var(--muted); font-size: 17px; font-weight: 400; }

@media (max-width: 1080px) {
  .hero-net { display: none; }
}
@media (max-width: 920px) {
  .findings-grid { grid-template-columns: minmax(0, 1fr); }
  .findings-copy { position: static; }
}
@media (max-width: 640px) {
  .findings-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .findings-stats div { padding: 10px; }
  .finding { padding: 16px 16px 16px 18px; }
  .finding p { font-size: 15px; }
  .guide { right: 14px; bottom: 14px; }
  .guide-mark { width: 44px; height: 44px; }
  .guide-say { max-width: 220px; font-size: 12.5px; }
  .hero-net { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .log-dot { animation: none; }
  .cs-caret, .cs-trace .st { animation: none; }
  .guide { display: none; }
}

/* ----------------------------------------------------------------- motion */

.reveal { transform: translateY(14px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
:where(html[data-js]) .reveal { opacity: 0; }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.no-js .census .cz-bar i, .no-js .census .cz-stack i { transform: none; }
/* With scripting off, the story stage holds its first step (data-step="1" in the markup) and the
   console its resting state, so the pieces only a later step brings in stay out of sight. */
html:not([data-js]) :is(.stage .sys em, .agent-node, .ev, .concept-card, .chat, .feed li, .cs-send .i-stop, .gdelta) { visibility: hidden; }
.no-js .rev-card, .no-js .rev-why, .no-js .rev-q, .no-js .rev-truth, .no-js .rev-note { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .btn svg { transition: none; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lifecycle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lifecycle li:nth-child(5) { border-left: 0; }
  .lifecycle li:nth-child(n + 5) { border-top: 1px solid var(--line); }
}

@media (max-width: 920px) {
  .nav-links { display: none; }
  .hero-copy, .split-grid, .cta-card { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: minmax(0, 1fr); }
  .step:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .step:nth-child(even) .step-text { order: 0; }
  .checks { grid-template-columns: minmax(0, 1fr); }
  .url { transform: none; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .nav-cta .text-link { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  .assurances { flex-direction: column; }
  .sources-label { max-width: none; }
  .sources-list { justify-content: flex-start; }
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .lifecycle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lifecycle li:nth-child(odd) { border-left: 0; }
  .lifecycle li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .step p { font-size: 16px; }
  .dots { display: none; }
}

/* ============================================================ shared across pages */

/* Nav: the page you are on, and on phones the page links fold into a menu */
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-menu { display: none; position: relative; }
.nav-menu summary { display: grid; place-content: center; gap: 5px; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform 200ms ease; }
.nav-menu[open] summary span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav-menu[open] summary span:last-child { transform: translateY(-3.3px) rotate(-45deg); }
.nav-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); display: grid; min-width: 230px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-3); box-shadow: var(--shadow-lg); }
.nav-menu-panel a { padding: 11px 12px; border-radius: 9px; color: var(--ink); font-size: 15px; }
.nav-menu-panel a:hover, .nav-menu-panel a[aria-current="page"] { background: var(--surface-active); }
.nav-menu-panel a.js-access { margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; color: var(--accent); }
@media (max-width: 920px) { .nav-menu { display: block; } }

/* Hero receipt: who certified the definition, and when */
.cs-cert { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.cs-cert b { color: var(--ink); font-weight: 600; }

/* "Read more" links from a section to its page */
.more-link { justify-self: start; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 15px; font-weight: 600; }
.more-link svg { width: 16px; height: 16px; transition: transform 160ms ease; }
.more-link:hover svg { transform: translateX(3px); }

/* The walkthrough placeholder (How it works), until VIDEO_URL is set */
.video-placeholder { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; padding: 24px; text-align: center; }
.video-frame.has-video .video-placeholder { display: none; }
.play { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-2); color: var(--accent); }
.play svg { width: 24px; height: 24px; margin-left: 4px; }
.video-placeholder h3 { font-size: clamp(21px, 2.2vw, 26px); }
.video-placeholder p { max-width: 44ch; color: var(--muted); }
@media (max-width: 640px) { .video-frame:not(.has-video) { aspect-ratio: 4 / 5; } }
/* The home page's pitch is the film to watch: it may take more of the screen than the walkthrough's frame */
.video-frame.is-lead { width: min(100%, calc((100vh - 380px) * 16 / 9), 1200px); }
/* The line under a film, pointing to the longer one */
.video-more { margin-top: 22px; text-align: center; }
/* What changed in the product since a film was recorded */
.video-note { max-width: 62ch; margin: 14px auto 0; text-align: center; color: var(--muted); font-size: 14px; }

/* ============================================================ sub-pages */

.page-hero { position: relative; padding: clamp(118px, min(14vw, 15vh), 164px) 0 clamp(44px, 7vh, 80px); overflow: hidden; isolation: isolate; }
.page-hero .wrap { display: grid; gap: 22px; }
.page-title { max-width: 20ch; font-size: clamp(36px, 4.7vw, 60px); line-height: 1.05; letter-spacing: -0.022em; font-weight: 500; }
.page-title em { display: block; font-style: normal; }
.page-hero .lede { max-width: 64ch; }
.page-hero .hero-actions { margin-top: 6px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13.5px; }
.crumbs a { color: var(--accent); }

/* Cards that sit in a row (starting points, boundaries) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.mini-card { display: grid; gap: 10px; align-content: start; padding: 22px 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mini-card small { color: var(--accent); font: 600 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mini-card h3 { font-size: 20px; }
.mini-card p { color: var(--muted); font-size: 15px; }
.trust-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* How it works: the eight steps as one line */
.lifeline { display: grid; max-width: 980px; }
.lstep { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 22px; padding-bottom: clamp(30px, 4.5vh, 48px); }
.lstep::before { content: ""; position: absolute; left: 27.5px; top: 60px; bottom: 6px; width: 1px; background: var(--line-strong); }
.lstep:last-child { padding-bottom: 0; }
.lstep:last-child::before { display: none; }
.lstep-num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-2); color: var(--accent); font: 600 15px/1 var(--mono); }
.lstep-body { display: grid; gap: 10px; align-content: start; padding-top: 6px; min-width: 0; }
.lstep-move { justify-self: start; padding: 2px 9px; border-radius: 6px; background: var(--surface-active); color: var(--accent); font: 600 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lstep-move.human { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.lstep-body h3 { font-size: clamp(23px, 2.3vw, 29px); }
.lstep-body > p { max-width: 70ch; color: var(--muted); font-size: 16.5px; }
.lstep-where { color: var(--faint); font-size: 13.5px; }
.lstep-where b { color: var(--ink); font-weight: 600; }
.lstep-body .panel { margin-top: 10px; }

.laws { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.laws span { padding: 7px 13px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); font: 500 16px/1.3 var(--serif); }

/* Security: what moves where */
.flow-table { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.flow-row { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.7fr) minmax(0, 0.65fr); gap: 8px 26px; align-items: start; padding: 16px 22px; border-top: 1px solid var(--line); }
.flow-row:first-child { border-top: 0; }
.flow-row.head { padding-block: 10px; background: var(--surface-2); color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.flow-row b { font-weight: 650; }
.flow-row > span { color: var(--muted); font-size: 15px; }
.flow-row em { font-style: normal; color: var(--accent); font: 600 12px/1.6 var(--mono); }
.flow-row.stays em { color: var(--green); }

/* Compare: at a glance, then one card per kind of tool */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.glance { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.glance th, .glance td { padding: 14px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.glance thead th { border-top: 0; background: var(--surface-2); color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.glance tbody th { width: 20%; color: var(--ink); font-weight: 600; }
.glance td { color: var(--muted); }
.glance .us { background: var(--surface-active); color: var(--ink); }
.glance thead .us { color: var(--accent); }
.compare-list { display: grid; gap: 16px; }
.compare-card { display: grid; grid-template-columns: minmax(0, 0.85fr) repeat(3, minmax(0, 1fr)); gap: 18px 28px; padding: 26px 26px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.compare-card header { display: grid; gap: 6px; align-content: start; }
.compare-card h3 { font-size: 23px; }
.compare-card .ex { color: var(--faint); font-size: 13px; line-height: 1.5; }
.compare-card .choose { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.compare-card .choose b { display: block; color: var(--ink); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.compare-card div { display: grid; gap: 6px; align-content: start; }
.cmp-label { color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.compare-card div p { color: var(--muted); font-size: 15px; }
.compare-card div.adds p { color: var(--ink); }
.not-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; max-width: 980px; }
.not-list li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--muted); font-size: 16px; }
.not-list li::before { content: ""; width: 12px; height: 1.5px; margin-top: 12px; background: var(--faint); }
.not-list b { color: var(--ink); font-weight: 600; }

/* Articles */
.article-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.article-card { display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding: 0 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color 160ms ease, transform 160ms ease; }
.article-card:hover { border-color: color-mix(in srgb, var(--kind, var(--accent)) 50%, transparent); transform: translateY(-2px); }
.article-card h2 { font-size: 25px; line-height: 1.15; }
.article-card p { color: var(--muted); font-size: 15.5px; }
.article-meta { color: var(--faint); font-size: 13px; }
.article-card .more-link { margin-top: 0; }
/* A dated note at the top of an article that no longer describes the product. */
.article-note { max-width: 64ch; padding: 12px 16px; border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent); border-radius: var(--radius); color: var(--ink); font-size: 15px; line-height: 1.55; }
.article-note b { color: var(--amber); font-weight: 650; }

/* Article kinds: one hue per category (--k-* in each look; never the status red or amber), a
   glyph per article. The label always names the category in text; the hue and glyph only help
   the eye sort.
   Categories: how (How it works), trust, definitions, estate (Your estate), security, start
   (Getting started). The filter chips on /articles appear only with JavaScript. */
:where(.article-card, .kind-tag[data-kind]) { --kind: var(--accent); }
[data-kind="definitions"] { --kind: var(--k-definitions); }
[data-kind="trust"] { --kind: var(--k-trust); }
[data-kind="estate"] { --kind: var(--k-estate); }
[data-kind="security"] { --kind: var(--k-security); }
[data-kind="start"] { --kind: var(--k-start); }
.article-art { position: relative; display: flex; align-items: center; height: 104px; margin: 0 -24px 6px; padding: 0 24px; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle, color-mix(in srgb, var(--kind) 26%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px, color-mix(in srgb, var(--kind) 8%, var(--surface)); }
.article-art svg { color: var(--kind); }
.article-art .glyph { width: 44px; height: 44px; transition: transform 200ms ease; }
.article-art .echo { position: absolute; right: -22px; bottom: -40px; width: 150px; height: 150px; opacity: .1; }
.article-card:hover .article-art .glyph { transform: scale(1.06); }
.kind-tag { display: inline-flex; align-items: center; gap: 7px; color: var(--kind, var(--accent)); font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.kind-tag svg { width: 16px; height: 16px; flex: none; }
.crumbs .kind-tag { font-size: 12px; }
.article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: auto; padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .article-art .glyph { transition: none; } .article-card:hover .article-art .glyph { transform: none; } }
.article-body { padding: clamp(56px, 8vh, 96px) 0; }
.prose { max-width: 68ch; color: color-mix(in srgb, var(--ink) 90%, transparent); font-size: 18px; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.9em; color: var(--ink); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; }
.prose ul, .prose ol { padding-left: 1.25em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .45em; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); color: var(--ink); font: 500 23px/1.45 var(--serif); }
.prose a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.prose h3 { margin-top: 1.6em; color: var(--ink); font: 500 21px/1.3 var(--serif); letter-spacing: -.01em; }
.prose h2 + h3 { margin-top: .9em; }
.prose a.ref { display: inline-block; margin-left: 2px; padding: 0 4px; border: 0; border-radius: 4px; font-size: .68em; font-weight: 650; line-height: 1.4; vertical-align: super; }
.prose a.ref:hover { background: var(--accent-2); }
.prose ol.refs { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.prose ol.refs li:target { border-radius: 4px; background: var(--accent-2); }
.article-end { display: grid; gap: 14px; max-width: 68ch; margin-top: clamp(40px, 6vh, 64px); padding-top: 24px; border-top: 1px solid var(--line); }
.article-end .cmp-label { margin-bottom: 2px; }

/* Screenshots from the demo inside an article. The text column is narrow, so a figure can run
   wider than it, up to the page width (the wrap is the container), and never wider than the screen. */
.article-body .wrap { container-type: inline-size; }
.prose .demo-shot { margin: 2.1em 0 2.3em; }
.demo-shot img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--shot-bg); box-shadow: var(--shot-shadow); }
.demo-shot.mid { width: min(100cqi, 900px); }
.demo-shot.wide { width: 100cqi; }
.demo-shot figcaption { max-width: 68ch; margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.demo-shot figcaption b { color: var(--ink); font-weight: 600; }

/* A guide film at the top of an article: the demo doing what the article explains, about a minute,
   with the moments to look at under it. Each moment is a button that plays the film from there. */
.prose .guide-film { width: min(100cqi, 1080px); margin: 0 0 clamp(36px, 5vh, 52px); }
.guide-frame { width: 100%; min-width: 0; border-radius: 14px; }
.guide-film figcaption { max-width: 68ch; margin-top: 16px; }
.guide-title { color: var(--muted); font-size: 15px; line-height: 1.6; }
.guide-title b { color: var(--ink); font-weight: 600; }
.prose .guide-label { margin-top: 18px; }
.prose .guide-steps { margin-top: 6px; padding: 0; list-style: none; display: grid; gap: 2px; }
.prose .guide-steps li + li { margin-top: 0; }
.guide-steps button { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: color-mix(in srgb, var(--ink) 88%, transparent); font: inherit; font-size: 15px; line-height: 1.5; text-align: left; cursor: pointer; }
.guide-steps button:hover, .guide-steps button[aria-current="true"] { background: var(--accent-2); color: var(--ink); }
.guide-steps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.guide-steps .t { color: var(--accent); font: 600 13px/1.9 var(--mono); font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .trust-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-card header { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .flow-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .flow-row.head { display: none; }
  .not-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .trust-grid.cols-3, .compare-card { grid-template-columns: minmax(0, 1fr); }
  .lstep { grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; }
  .lstep-num { width: 40px; height: 40px; font-size: 13px; }
  .lstep::before { left: 19.5px; top: 46px; }
  .prose { font-size: 17px; }
  .compare-card { padding: 22px 20px; }
}

/* Text for screen readers only (e.g. an empty table corner) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Compare, on a phone: each row of the table becomes a card, with Ontos's answer first */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  .glance { min-width: 0; }
  .glance thead { display: none; }
  .glance, .glance tbody { display: block; }
  .glance tr { display: flex; flex-direction: column; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
  .glance tbody th { order: -2; width: auto; padding: 12px 14px; border-top: 0; background: var(--surface-2); }
  .glance td { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; padding: 10px 14px; }
  .glance td::before { content: attr(data-label); color: var(--faint); font-size: 12.5px; font-weight: 600; }
  .glance td.us { order: -1; border-top: 0; }
  .glance td.us::before { color: var(--accent); }
}

.findings-copy .laws { margin-top: 0; }

/* ============================================================ illustrations
   Drawn diagrams that carry the message. Each one reads complete with no JavaScript and with
   reduced motion; motion.js only animates things into, and along, what is already there. */

/* Keep your stack: evidence in from the tools you keep, a receipt (or "not yet") out. */
.stack-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 40px clamp(40px, 6vw, 88px); align-items: center; margin-bottom: clamp(32px, min(5vw, 5.5vh), 56px); }
.stack-top .section-head { margin-bottom: 0; }
.beams { margin: 0; }
.beams-grid { position: relative; display: grid; grid-template-columns: auto auto auto; justify-content: space-between; align-items: center; gap: 0 28px; padding: 6px 0; }
.beams-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.beams-col { position: relative; display: grid; gap: 18px; justify-items: start; }
.beams-out { gap: 56px; }
.bnode { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: 500 12.5px/1.2 var(--mono); white-space: nowrap; }
.bnode svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.bnode.is-hit { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.bnode.is-no { border-color: color-mix(in srgb, var(--amber) 70%, transparent); }
.beams-hub { position: relative; display: grid; justify-items: center; gap: 6px; padding: 20px 18px 18px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; background: var(--surface-3); text-align: center; box-shadow: var(--shadow); }
.beams-hub svg { width: 38px; height: 38px; color: var(--ink); --mark-accent: var(--accent); }
.beams-hub b { font: 500 22px/1 var(--serif); letter-spacing: -0.01em; }
.beams-hub small { max-width: 11ch; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.b-path { fill: none; stroke: color-mix(in srgb, var(--accent) 42%, transparent); stroke-width: 1.3; }
.b-path.out { stroke-dasharray: 3 4; }
.b-tok { fill: var(--accent); }
.b-rc rect { fill: var(--surface-3); stroke: var(--accent); stroke-width: 1.2; }
.b-rc path { stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round; }
.b-no circle { fill: var(--amber); }
.b-no text { fill: var(--bg); font: 700 7px/1 var(--mono); text-anchor: middle; dominant-baseline: central; }
.beams-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 22px; color: var(--faint); font: 11px/1.4 var(--mono); letter-spacing: .02em; }
.beams-key span { display: inline-flex; align-items: center; gap: 7px; }
.beams-key span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.beams-key .k-rc::before { width: 7px; height: 9px; border-radius: 1.5px; background: var(--surface-3); box-shadow: inset 0 0 0 1.2px var(--accent); }
.beams-key .k-no::before { background: var(--amber); }
@media (max-width: 1080px) {
  .stack-top { grid-template-columns: minmax(0, 1fr); }
  .beams { width: min(100%, 520px); }
}
/* A phone stacks the diagram: the tools on top, Ontos in the middle, who asks at the bottom. */
@media (max-width: 560px) {
  .beams-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 34px 0; }
  .beams-col { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .beams-out { gap: 8px 22px; }
  .bnode { padding: 7px 10px; font-size: 11.5px; }
  .beams-hub { grid-template-columns: auto auto; align-items: center; column-gap: 10px; padding: 12px 16px; text-align: left; }
  .beams-hub svg { grid-row: span 2; width: 30px; height: 30px; }
  .beams-hub b { font-size: 19px; }
  .beams-hub small { max-width: none; }
}

/* Security: what moves inside your network. Rows go from the databases into the agent and stop
   there; results travel on, outbound only, to the control plane. */
.net-zone { position: relative; }
.net-row-dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 1.5px; background: color-mix(in srgb, var(--accent) 75%, var(--ink)); pointer-events: none; z-index: 2; }
.net-sum { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 12px/1 var(--mono); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); pointer-events: none; z-index: 3; }
.net-agent.is-busy, .net-cloud.is-busy { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

/* Start with one domain: one answers, the next one is waiting, the rest come later. */
.domains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 390px); margin-bottom: 6px; }
.dm { display: grid; gap: 3px; align-content: start; min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.dm b { color: var(--faint); font: 600 12.5px/1.2 var(--sans); }
.dm i { color: var(--faint); font: 500 10.5px/1.3 var(--mono); font-style: normal; letter-spacing: .02em; }
.dm em { font-style: normal; }
.dm.is-on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent); }
.dm.is-on b { color: var(--ink); }
.dm.is-on i { color: var(--accent); }
.dm.is-next { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dm.is-next b { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .dm.is-next { animation: dm-next 2.6s ease-in-out infinite; }
}
@keyframes dm-next { 50% { border-color: color-mix(in srgb, var(--accent) 85%, transparent); } }

/* The ledger fills in: each question turns from "not yet" to answered, one after another.
   (motion.js sets the pending state; without it the ledger simply shows the result.) */
.ledger-rows .dot { transition: background-color 300ms ease, box-shadow 300ms ease; }
.ledger-rows li.is-pending .dot.ok { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
.ledger-rows li.is-pending .lq { color: var(--muted); }
.ledger-rows .la { position: relative; }
.ledger-rows li.is-pending .la > * { opacity: 0; }
.ledger-rows li.is-pending .la::after { content: "not yet"; position: absolute; top: 2px; right: 0; color: var(--amber); font-size: 13px; font-weight: 650; }
.ledger-rows li.is-flip .la > * { animation: la-in 520ms cubic-bezier(.2, .7, .2, 1) both; }
.ledger-rows li.is-flip .la > small { animation-delay: 90ms; }
@keyframes la-in { from { opacity: 0; transform: translateY(7px); } }
.ledger.is-filling .ledger-bar i { transition-duration: 380ms; transition-delay: 0ms; }

/* How it works: the line between the steps fills as you read, and each step lights when reached.
   (Without motion the plain line stays, and every step reads the same.) */
.lstep::after { content: ""; position: absolute; left: 27.5px; top: 60px; bottom: 6px; width: 1px; background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--fill, 0)); }
.lstep:last-child::after { display: none; }
.lstep-num { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; }
.lstep.is-on .lstep-num { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
@media (max-width: 640px) {
  .lstep::after { left: 19.5px; top: 46px; }
}

/* Reading an article: a hairline at the very top fills as you go (browsers with scroll-driven
   animations only; elsewhere it isn't shown). */
.read-progress { display: none; }
@supports (animation-timeline: scroll()) {
  body:has(.article-body) .read-progress { display: block; position: fixed; inset: 0 0 auto; z-index: 60; height: 2px; background: var(--accent); transform-origin: 0 50%; animation: read-progress linear both; animation-timeline: scroll(root block); pointer-events: none; }
}
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Moving between pages: a short cross-fade while the nav stays put (where the browser supports
   cross-document view transitions; elsewhere pages load as usual). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: 140ms ease-in both vt-out; }
::view-transition-new(root) { animation: 240ms cubic-bezier(.2, .7, .2, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* A sub-page hero with a picture beside the words (Compare). */
.page-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: 40px clamp(40px, 6vw, 88px); }
.page-hero-copy { display: grid; gap: 22px; }
@media (max-width: 1080px) {
  .page-hero-split { grid-template-columns: minmax(0, 1fr); }
}

/* Pause animations (footer): whatever loops holds still. One-off entrances still finish. */
.motion-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.motion-toggle:hover { color: var(--ink); }
.motion-paused :is(.net-link i, .dm.is-next, .log-dot, .cs-caret, .cs-trace .st, .gn.gap.on, .gn.agent.lit i, .stage .pulse),
.motion-paused .msg.q .typed::after { animation-play-state: paused; }

/* How it works: each step shows the screen, or a plain diagram, where it happens in the product.
   The markup is the finished state; motion.js plays each one in when its step is reached. */
.sp { display: grid; gap: 12px; padding: 18px 20px; }
.sp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.sp-label { color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.sp-meta { color: var(--muted); font-size: 12.5px; }
.sp-meta b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.sp-note { color: var(--faint); font-size: 12px; }
.sp-foot { color: var(--muted); font-size: 13.5px; }

/* 02 domain and question set */
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--muted); font-size: 13px; transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease; }
.sp-chip svg { display: none; width: 13px; height: 13px; color: var(--accent); }
.sp-chip.is-picked { border-color: var(--accent); background: var(--accent-2); color: var(--ink); }
.sp-chip.is-picked svg { display: block; }
.sp-qs { display: grid; gap: 2px; }
.sp-qs li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--faint); font-size: 14px; transition: color 250ms ease, background-color 250ms ease; }
.sp-box { position: relative; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease; }
.sp-qs li.is-in { color: var(--ink); background: var(--field); }
.sp-qs li.is-in .sp-box { border-color: var(--accent); background: var(--accent); }
.sp-qs li.is-in .sp-box::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 8px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* 03 evidence ladder */
.sp-ladder { display: grid; gap: 6px; }
.sp-ladder li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); transition: border-color 250ms ease; }
.sp-rank { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--faint); font: 600 12px/1 var(--mono); transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease; }
.sp-what { display: grid; gap: 1px; min-width: 0; }
.sp-what b { font-size: 14px; font-weight: 600; }
.sp-what small { color: var(--muted); font-size: 12.5px; }
.sp-what em { font-style: normal; font-variant-numeric: tabular-nums; }
.sp-state { color: var(--faint); font: 600 11px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.sp-ladder li.is-in { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.sp-ladder li.is-in .sp-rank { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.sp-ladder li.is-in .sp-state { color: var(--accent); }
.sp-ladder li.is-gap { border-style: dashed; border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.sp-ladder li.is-gap .sp-rank { border-style: dashed; border-color: var(--amber); color: var(--amber); }
.sp-ladder li.is-gap .sp-state { color: var(--amber); }
.sp-btn { margin-left: 6px; padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); font: 500 11.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.sp-trace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); }
.sp-trace code { color: var(--ink); font: 12.5px var(--mono); }
.sp-to { color: var(--accent); font-weight: 700; }

/* 04 a draft */
.sp-card { display: grid; gap: 12px; padding: 16px 18px; border: 1.5px dashed color-mix(in srgb, var(--amber) 55%, transparent); border-radius: 10px; background: var(--field); }
.sp-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sp-card-head b { font: 500 21px/1.2 var(--serif); }
.sp-card-head small { color: var(--muted); font-size: 12.5px; }
.sp-fields { display: grid; gap: 8px; margin: 0; }
.sp-fields > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.sp-fields dt { color: var(--faint); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sp-fields dd { margin: 0; font-size: 14px; }
.sp-fields code { font: 13px var(--mono); }
.sp-ev { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-ev span { padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--muted); font: 12px var(--mono); }
.sp-card-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--amber); font-size: 13px; }
.sp-card-foot svg { width: 15px; height: 15px; flex: none; }

/* 05 a verdict: two numbers, and the bracket between them */
.sp-vrows { position: relative; display: grid; gap: 8px; padding-right: 104px; }
.sp-vrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.sp-vrow > span { display: grid; gap: 1px; }
.sp-vrow > span b { font-size: 14px; font-weight: 600; }
.sp-vrow code { color: var(--muted); font: 12px var(--mono); }
.sp-vnum { font: 500 22px/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sp-bracket { position: absolute; top: 22px; bottom: 22px; right: 84px; width: 12px; border: 1.5px solid var(--amber); border-left: 0; border-radius: 0 6px 6px 0; transform-origin: 0 50%; }
.sp-gap { position: absolute; top: 50%; right: 0; display: grid; width: 72px; transform: translateY(-50%); }
.sp-gap b { color: var(--amber); font: 500 22px/1 var(--serif); }
.sp-gap small { color: var(--muted); font-size: 12px; }

/* 07 serve: the receipt and the refusal, to a person and over MCP */
.sp-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px 20px; }
.sp-col { display: grid; gap: 9px; align-content: start; }
.sp-q { justify-self: end; max-width: 92%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px 12px 3px 12px; background: var(--surface-3); font-size: 13.5px; }
.sp-receipt { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.sp-receipt.no { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.sp-receipt p { color: var(--muted); font-size: 12.5px; }
.sp-rline { color: var(--muted); }
.sp-rline b { color: var(--ink); }
.sp-rline .dot { margin-right: 8px; vertical-align: 1px; }
.sp-rline code { color: var(--ink); font: 12px var(--mono); }
.sp-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sp-fig b { font: 500 26px/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sp-fig span { color: var(--muted); font-size: 12px; }
.sp-rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-rchips span { padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font: 11.5px var(--mono); }
.sp-rchips .gap { border-color: color-mix(in srgb, var(--amber) 60%, transparent); color: var(--amber); }
.sp-mcp { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--muted); font: 12px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-mcp .ln { display: block; min-height: 1.7em; }
.sp-mcp i { font-style: normal; }
.sp-mcp .k { color: var(--accent); }
.sp-mcp .v { color: var(--ink); }
.sp-mcp .no { color: var(--amber); }

/* 08 back to review, and what to learn next */
.sp-event { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--amber) 9%, transparent); font-size: 13.5px; }
.sp-event svg { width: 16px; height: 16px; flex: none; color: var(--amber); }
.sp-event code { font: 12.5px var(--mono); }
.sp-mrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.sp-mrow > span:first-child { display: grid; gap: 1px; }
.sp-mrow small { color: var(--muted); font: 12px var(--mono); }
.sp-status { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); }
.sp-status .was { text-decoration: line-through; opacity: .55; }
.sp-paused { color: var(--muted); font-size: 13.5px; }
.sp-learn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px dashed color-mix(in srgb, var(--amber) 55%, transparent); border-radius: 8px; }
.sp-learn > span:first-child { display: grid; gap: 1px; }
.sp-learn small { color: var(--muted); font-size: 12.5px; }
.sp-asked { color: var(--amber); font: 600 13px var(--mono); white-space: nowrap; }

@media (max-width: 760px) {
  .sp-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sp { padding: 14px; }
  .sp-fields > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sp-vrows { padding-right: 0; }
  .sp-bracket { display: none; }
  .sp-gap { position: static; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; width: auto; transform: none; }
  .sp-ladder li { grid-template-columns: 24px minmax(0, 1fr); }
  .sp-ladder .sp-state { grid-column: 2; }
}

/* Compare: one question, four kinds of answer. Both questions are in the page; without JavaScript
   they show one under the other, each labelled. */
.ways-pick, .vs-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 18px; }
.ways-pick > span, .vs-pick > span { color: var(--faint); font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; }
.ways-pick button, .vs-pick button { padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 99px; background: transparent; color: var(--muted); font: 500 14.5px/1.2 var(--sans); cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.ways-pick button:hover, .vs-pick button:hover { color: var(--ink); }
.ways-pick button[aria-pressed="true"], .vs-pick button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-2); color: var(--ink); }
.ways-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.way { display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
/* The four answers line up under their headings, however the headings wrap. */
@supports (grid-template-rows: subgrid) {
  .ways-grid { grid-auto-rows: auto; }
  .way { grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px; }
}
.way.is-us { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent); }
.way-head { display: flex; align-items: center; gap: 10px; }
.way-head .icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent-2); color: var(--accent); flex: none; }
.way-head svg { width: 17px; height: 17px; --mark-accent: var(--accent); }
.way-head b { font: 500 17px/1.2 var(--serif); }
.way-head small { display: block; margin-top: 2px; color: var(--faint); font: 400 11.5px/1.3 var(--sans); }
.way-say { display: grid; gap: 12px; align-content: start; }
.way-say[hidden] { display: none; }
.way-q { color: var(--faint); font-size: 12px; }
html:not(.no-js) .way-q { display: none; }
.way-lines { display: grid; align-content: start; gap: 3px; min-height: 132px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--muted); font: 11.5px/1.55 var(--mono); overflow-wrap: anywhere; }
.way-lines .v { color: var(--ink); }
.way-lines .ok { color: var(--accent); }
.way-lines .no { color: var(--amber); }
.way-get { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.mk { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; }
.mk.yes { background: var(--green); }
.mk.part { box-shadow: inset 0 0 0 2px var(--amber); }
.mk.no { box-shadow: inset 0 0 0 2px var(--line-strong); }
@media (max-width: 1080px) { .ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ways-grid { grid-template-columns: minmax(0, 1fr); } .way-lines { min-height: 0; } }
.ways-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; color: var(--faint); font-size: 12.5px; }
.ways-key span { display: inline-flex; align-items: center; gap: 8px; }
.ways-key .mk { margin-top: 0; }

/* Compare: head to head with one product at a time, with its sources. */
.vs-panel { display: grid; gap: 14px; }
.vs-panel[hidden] { display: none; }
.vs-name { color: var(--ink); font: 500 20px/1.2 var(--serif); }
html:not(.no-js) .vs-name { display: none; }
.vs-table { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.vs-row { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(0, 1.15fr) minmax(0, 1.15fr); border-top: 1px solid var(--line); }
.vs-row > * { padding: 12px 16px; font-size: 14px; line-height: 1.5; }
.vs-row > :first-child { color: var(--faint); font-size: 12.5px; font-weight: 650; }
.vs-row > :last-child { background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--ink); }
.vs-row > :nth-child(2) { color: var(--muted); }
.vs-th { border-top: 0; background: var(--surface-2); }
.vs-th > * { color: var(--faint) !important; font: 650 11.5px/1.4 var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; }
.vs-th > :last-child { color: var(--accent) !important; }
.vs-together { max-width: 80ch; color: var(--ink); font-size: 15px; }
.vs-together b { color: var(--accent); font-weight: 650; }
.vs-src { color: var(--faint); font-size: 12.5px; }
.vs-src a { color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.vs-src a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .vs-row { grid-template-columns: minmax(0, 1fr); }
  .vs-row > * { padding: 8px 14px; }
  .vs-row > :first-child { padding-top: 12px; padding-bottom: 0; }
  .vs-row > :nth-child(2)::before, .vs-row > :last-child::before { content: attr(data-label); display: block; color: var(--faint); font-size: 11.5px; font-weight: 650; }
  .vs-th { display: none; }
}
.ways-note { max-width: 110ch; margin-top: 18px; color: var(--faint); font-size: 12.5px; line-height: 1.6; }
.ways-note a { color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.ways-note a:hover { color: var(--ink); }

/* Compare: what's standard now, and where Ontos still differs. */
.std-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
.std-col { display: grid; gap: 14px; align-content: start; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.std-us { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.std-label { color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.std-us .std-label { color: var(--accent); }
.std-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.std-list li { display: grid; gap: 2px; padding-left: 22px; position: relative; }
.std-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); }
.std-us .std-list { counter-reset: std; }
.std-us .std-list li::before { counter-increment: std; content: counter(std); top: 1px; width: 16px; height: 16px; display: grid; place-items: center; background: var(--accent); box-shadow: none; color: var(--accent-ink); font: 700 10px/1 var(--mono); }
.std-list b { color: var(--ink); font-weight: 650; }
.std-list span { color: var(--muted); font-size: 14px; }
.std-note { color: var(--faint); font-size: 12.5px; }
.vs-stamp { max-width: 100ch; margin-top: 8px; color: var(--faint); font-size: 12.5px; }
@media (max-width: 900px) { .std-grid { grid-template-columns: minmax(0, 1fr); } }

/* Compare: where each product runs, from the vendor's cloud to air-gapped. */
.runs { display: grid; gap: 12px; margin: 0; }
.runs-track { display: grid; grid-template-columns: 1.35fr .8fr 1.15fr .9fr; gap: 10px; }
.runs-zone { display: grid; gap: 12px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.runs-zone:nth-child(2) { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.runs-zone:nth-child(3) { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.runs-zone:nth-child(4) { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.runs-label { color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.runs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.runs-chips span { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--field); color: var(--ink); font-size: 13px; }
.runs-chips small { color: var(--muted); font-size: 11.5px; }
.runs-chips .us { border-color: var(--accent); background: var(--accent-2); font-weight: 600; }
.runs-axis { position: relative; display: flex; justify-content: space-between; padding-top: 10px; color: var(--faint); font: 11.5px var(--mono); }
.runs-axis::before { content: ""; position: absolute; top: 0; left: 0; right: 8px; height: 1px; background: var(--line-strong); }
.runs-axis::after { content: ""; position: absolute; top: -4px; right: 0; border: 4.5px solid transparent; border-left: 8px solid var(--line-strong); }
@media (max-width: 900px) { .runs-track { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .runs-track { grid-template-columns: minmax(0, 1fr); } .runs-axis { display: none; } }

/* ============================================================ roadmap */
.rm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 99px; font: 600 11.5px/1.3 var(--sans); letter-spacing: .03em; }
.rm-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.rm-chip.now { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.rm-chip.now::before { background: currentColor; }
.rm-chip.next { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.rm-chip.next::before { box-shadow: inset 0 0 0 2px currentColor; }
.rm-chip.later { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.rm-chip.later::before { box-shadow: inset 0 0 0 1.5px currentColor; }
.rm-star { color: var(--faint); font-size: 12.5px; }

.rm-stack { display: grid; gap: 10px; max-width: 980px; margin: 0; }
.rm-layer { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rm-layer b { font: 500 21px/1.25 var(--serif); }
.rm-layer p { max-width: 70ch; margin-top: 6px; color: var(--muted); font-size: 15px; }
.rm-when { padding-top: 5px; color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.rm-layer.l1 { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
.rm-layer.l1 .rm-when { color: var(--accent); }
.rm-layer.l2 { margin-inline: 24px; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rm-layer.l3 { margin-inline: 48px; border-style: dotted; border-color: var(--line-strong); }
.rm-layer.l4 { margin-inline: 72px; border-style: dotted; border-color: var(--line); background: transparent; }
.rm-layer.l4 b { color: var(--muted); }
.rm-here { position: absolute; top: -12px; right: 18px; padding: 3px 10px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 600 11px/1.4 var(--mono); }

.rm-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rm-col { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rm-col.now { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.rm-col.later { border-style: dashed; }
.rm-items { display: grid; gap: 10px; padding: 0; list-style: none; }
.rm-items li { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.rm-items b { color: var(--ink); font-size: 14.5px; font-weight: 650; }
.rm-items span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.rm-items li.star b::after { content: " *"; color: var(--amber); }
.rm-items span a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); white-space: nowrap; }
.rm-rules { display: grid; gap: 14px; max-width: 76ch; padding-left: 1.3em; list-style: decimal; }
.rm-rules li { color: var(--muted); font-size: 17px; line-height: 1.6; }
.rm-rules b { color: var(--ink); }
@media (max-width: 980px) { .rm-board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .rm-layer { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px; }
  .rm-layer.l2 { margin-inline: 10px; }
  .rm-layer.l3 { margin-inline: 20px; }
  .rm-layer.l4 { margin-inline: 30px; }
  .rm-layer b { font-size: 19px; }
}

/* Where your people already work: a coding assistant asking Ontos over MCP (coming soon). */
.ide { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px clamp(36px, 5vw, 72px); align-items: center; margin-top: clamp(44px, 7vh, 72px); padding-top: clamp(36px, 5vh, 56px); border-top: 1px solid var(--line); }
.ide-copy { display: grid; gap: 16px; align-content: start; }
.ide-title { font: 500 clamp(26px, 2.8vw, 36px)/1.12 var(--serif); letter-spacing: -.015em; }
.ide-title sup, .ide-note sup { color: var(--amber); font-size: .6em; }
.ide-copy > p { color: var(--muted); font-size: 16.5px; }
.ide-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.ide-pick button { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 99px; background: transparent; color: var(--muted); font: 500 14px/1.2 var(--sans); cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.ide-pick button:hover { color: var(--ink); }
.ide-pick button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-2); color: var(--ink); }
.ide-note { color: var(--faint) !important; font-size: 13px !important; }
.ide-note a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.ide-window { margin: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--ide-bg); box-shadow: var(--shadow-lg); overflow: hidden; }
.ide-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--ide-bar); color: var(--faint); font: 12px var(--mono); }
.ide-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ide-dots); }
.ide-bar span { margin-left: 8px; }
.ide-bar span[hidden] { display: none; }
.ide-body { display: grid; gap: 12px; min-height: 250px; padding: 18px 18px 22px; color: var(--ide-text); font: 13px/1.6 var(--mono); }
.ide-q { color: var(--ide-strong); }
.ide-prompt { color: var(--accent); }
.ide-tool { display: flex; align-items: center; gap: 8px; color: var(--ide-muted); }
.ide-tool b { color: var(--ide-strong); font-weight: 600; }
.ide-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ide-mcp { padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 5px; color: var(--accent); font-size: 11px; }
.ide-out { display: grid; gap: 3px; margin-left: 16px; padding: 10px 12px; border-left: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 0 8px 8px 0; }
.ide-out b { color: var(--ide-strong); }
.ide-out span { color: var(--ide-muted); }
.ide-out .ok { color: var(--accent); }
.ide-num { font-size: 15px; }
.ide-a { color: var(--ide-strong); font-family: var(--sans); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 980px) { .ide { grid-template-columns: minmax(0, 1fr); } }
.vs-together sup, .vs-stamp sup { color: var(--amber); }
.vs-stamp a { color: var(--muted); border-bottom: 1px solid var(--line-strong); }

/* Access control: who may do what, and how much the AI may see. */
.acl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.acl-table { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.acl-row { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(var(--cols, 5), minmax(0, 1fr)); align-items: center; border-top: 1px solid var(--line); }
.acl-row > * { padding: 11px 14px; font-size: 14px; }
.acl-row > :first-child { color: var(--ink); }
.acl-row small { display: block; color: var(--faint); font-size: 12px; }
.acl-th { border-top: 0; background: var(--surface-2); }
.acl-th > * { color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.acl-th .ai, .acl-row .ai { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.acl-th .ai { color: var(--accent); }
.acl-c { display: grid; place-items: center; }
.acl-c i { display: block; width: 16px; height: 16px; border-radius: 50%; }
.acl-c i.y { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
.acl-c i.n { box-shadow: inset 0 0 0 2px var(--line-strong); }
.acl-c i.h { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 20%, transparent); }
.acl-c i.y, .acl-c i.n, .acl-c i.h { transition: background-color 250ms ease, box-shadow 250ms ease; }
.acl-key { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--faint); font-size: 12.5px; }
.acl-key span { display: inline-flex; align-items: center; gap: 8px; }
.acl-key i { width: 12px; height: 12px; border-radius: 50%; }
.acl-key i.y { background: var(--green); } .acl-key i.n { box-shadow: inset 0 0 0 2px var(--line-strong); } .acl-key i.h { background: var(--amber); }
.acl-note { color: var(--faint); font-size: 12.5px; }
@media (max-width: 760px) {
  /* Phones: the capability on its own line, the six columns of dots underneath. */
  .acl-row { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
  .acl-row > :first-child { grid-column: 1 / -1; padding-bottom: 0; }
  .acl-row > * { padding: 9px 4px; }
  .acl-row > :first-child { padding-left: 14px; padding-right: 14px; }
  .acl-th > :first-child { display: none; }
  .acl-th > * { font-size: 9.5px; letter-spacing: .03em; text-align: center; }
  .acl-long { display: none; }
}

/* The access block (home and Security): copy beside the assistant's tool settings. */
.access { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(36px, 5vw, 72px); align-items: start; margin-top: clamp(44px, 7vh, 72px); padding-top: clamp(36px, 5vh, 56px); border-top: 1px solid var(--line); }
.access-page { margin-top: clamp(36px, 5vh, 56px); padding-top: 0; border-top: 0; }
.access-copy { display: grid; gap: 16px; align-content: start; }
.access-title { font: 500 clamp(26px, 2.8vw, 36px)/1.12 var(--serif); letter-spacing: -.015em; }
.access-copy > p { color: var(--muted); font-size: 16.5px; }
.access-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.access-list li { position: relative; padding-left: 26px; color: var(--muted); font-size: 15.5px; }
.access-list li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
.access-list b { color: var(--ink); font-weight: 600; }
.access-copy > .access-note { color: var(--faint); font-size: 13px; }
.access-note sup, .coming-h sup, .aip sup { color: var(--amber); }
.access-note a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.access-dl { display: grid; gap: 20px; margin: 0; }
.access-dl div { padding-left: 16px; border-left: 2px solid var(--line-strong); }
.access-dl dt { color: var(--ink); font-size: 16px; font-weight: 600; }
.access-dl dd { margin: 4px 0 0; color: var(--muted); font-size: 15px; }

/* The assistant's tool settings, drawn like the operator's Access page. */
.aip { margin: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-3); box-shadow: var(--shadow); overflow: hidden; font-size: 14px; }
.aip-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--faint); font-size: 12.5px; }
.aip-bar i { margin: 0 2px; font-style: normal; opacity: .6; }
.aip-bar b { color: var(--ink); font-weight: 600; }
.aip-bar em { font-style: normal; }
.aip-group { padding: 10px 16px 6px; border-top: 1px solid var(--line); }
.aip-bar + .aip-group { border-top: 0; }
.aip-h { margin: 0 0 2px; color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.aip-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; }
.aip-row > span { color: var(--ink); }
.aip-row small { display: block; color: var(--faint); font-size: 12px; }
.aip-row.soon > span, .aip-group.never .aip-row > span { color: var(--muted); }
.aip-row.soon em { flex: none; padding: 2px 9px; border: 1px dashed color-mix(in srgb, var(--amber) 60%, transparent); border-radius: 99px; color: var(--amber); font-size: 11.5px; font-style: normal; }
.aip-lock { flex: none; width: 18px; height: 18px; margin-right: 8px; color: var(--red); }
.sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 99px; background: var(--line-strong); transition: background-color 250ms ease; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); box-shadow: 0 1px 2px var(--shade-22); transition: transform 250ms ease; }
.sw.on { background: var(--accent); }
.sw.on::after { transform: translateX(14px); }
.sw.lock { opacity: .6; }
.aip-foot { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 12.5px; }

/* The planned certification review queue, drawn as a sketch (articles/sorting-the-pile). */
.queue-sketch { line-height: 1.45; }
.queue-sketch .aip-h { display: flex; justify-content: space-between; gap: 12px; }
.queue-sketch .aip-h b { color: var(--ink); font-size: 12px; letter-spacing: .04em; }
.queue-sketch .aip-row { align-items: flex-start; }
.q-count { flex: none; min-width: 38px; margin-top: 1px; padding: 2px 9px; border-radius: 99px; background: var(--accent-2); color: var(--accent); font: 600 12px/1.5 var(--mono); font-style: normal; text-align: center; }
.aip-group.away .q-count { background: var(--surface-2); color: var(--muted); }
.aip-group.decide .q-count { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.sketch-tag { flex: none; padding: 2px 9px; border: 1px dashed color-mix(in srgb, var(--amber) 60%, transparent); border-radius: 99px; color: var(--amber); font-size: 11.5px; font-style: normal; }

/* What's still to come, marked the way the roadmap marks it. */
.coming { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 28px; align-items: start; margin-top: clamp(28px, 4vh, 44px); padding: 18px 20px; border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent); border-radius: var(--radius); }
.coming-h { margin: 0; color: var(--amber); font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.coming ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.coming li b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.coming li span { color: var(--muted); font-size: 14px; }
.coming .more-link { align-self: center; white-space: nowrap; }
@media (max-width: 980px) {
  .access { grid-template-columns: minmax(0, 1fr); }
  .coming { grid-template-columns: minmax(0, 1fr); }
  .coming ul { grid-template-columns: minmax(0, 1fr); }
}

/* Who it's for (home): the estate, a fit check, the moments, and who it isn't for yet. */
.who-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px clamp(36px, 5vw, 72px); align-items: start; }
.who-top .section-head { margin-bottom: 0; }
.fit { display: grid; gap: 2px; margin: 0; padding: 20px 22px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-3); box-shadow: var(--shadow); }
.fit-h { margin: 0 0 8px; color: var(--ink); font: 500 22px/1.2 var(--serif); }
.fit label { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; cursor: pointer; }
.fit label:first-of-type { border-top: 0; }
.fit label small { display: block; color: var(--faint); font-size: 12.5px; }
.fit input { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--field); appearance: none; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; }
.fit input::after { content: ""; width: 10px; height: 5px; border: solid var(--accent-ink); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 180ms ease; }
.fit input:checked { border-color: var(--accent); background: var(--accent); }
.fit input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.fit input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fit-meter { height: 6px; margin-top: 12px; border-radius: 99px; background: var(--line); overflow: hidden; }
.fit-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(var(--fit, 0)); transform-origin: left; transition: transform 350ms ease; }
.fit-verdict { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }
.fit[data-n="4"] .fit-verdict, .fit[data-n="5"] .fit-verdict { color: var(--accent); font-weight: 600; }
.who-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 5vh, 56px); }
.who-card { display: grid; align-content: start; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.who-n { color: var(--accent); font: 500 13px var(--mono); }
.who-card h3 { font: 500 20px/1.2 var(--serif); letter-spacing: -.01em; }
.who-card p { color: var(--muted); font-size: 15px; }
.who-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(36px, 5vw, 72px); margin-top: clamp(28px, 4vh, 44px); padding-top: clamp(24px, 3vh, 36px); border-top: 1px solid var(--line); }
.who-where .cmp-label, .who-not .cmp-label { margin-bottom: 10px; }
.who-where p:last-child { color: var(--ink); font: 500 clamp(19px, 1.8vw, 23px)/1.4 var(--serif); }
.who-not ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.who-not li { position: relative; padding-left: 24px; color: var(--muted); font-size: 15px; }
.who-not li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); }
.who-not sup { color: var(--amber); }
.who-not-note { margin-top: 12px; color: var(--muted); font-size: 14px; }
@media (max-width: 980px) {
  .who-top, .who-foot { grid-template-columns: minmax(0, 1fr); }
  .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .who-grid { grid-template-columns: minmax(0, 1fr); } }

/* Compare: where Cortex and Genie stop, and what Ontos adds. */
.gaps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gap { display: grid; grid-template-columns: minmax(0, 1.15fr) 56px minmax(0, 1fr); align-items: stretch; }
.gap-l, .gap-r { padding: 18px 20px; border-radius: var(--radius); }
.gap-l { border: 1px solid var(--line); background: var(--surface); }
.gap-r { display: grid; align-content: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.gap-on { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gap-on span { padding: 1px 9px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.gap-l h3 { margin-bottom: 6px; font: 500 19px/1.25 var(--serif); letter-spacing: -.01em; }
.gap-l > p:last-child { color: var(--muted); font-size: 14.5px; }
.gap-now { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.gap-now svg { width: 15px; height: 15px; }
.gap-r > p:last-child { color: var(--ink); font-size: 15px; }
.gap-r sup, .gaps-note sup { color: var(--amber); }
.gap-arrow { display: grid; place-items: center; color: var(--accent); }
.gap-arrow svg { width: 40px; height: 14px; overflow: visible; }
.gap-arrow path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gaps-note { margin-top: 18px; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) {
  .gap { grid-template-columns: minmax(0, 1fr); }
  .gap-arrow { height: 30px; }
  .gap-arrow svg { transform: rotate(90deg); }
}

/* Compare: others building toward the same idea. */
.rivals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rival { display: grid; align-content: start; gap: 10px; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rival-tag { justify-self: start; padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.rival-tag.warn { border-color: color-mix(in srgb, var(--amber) 55%, transparent); color: var(--amber); }
.rival h3 { font: 500 22px/1.2 var(--serif); letter-spacing: -.01em; }
.rival > p { color: var(--muted); font-size: 15px; }
.rival dl { display: grid; gap: 8px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.rival dt { color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.rival dd { margin: 2px 0 0; color: var(--ink); font-size: 14.5px; }
.rival-src { color: var(--faint) !important; font-size: 12.5px !important; }
.rival-src a { color: var(--muted); border-bottom: 1px solid var(--line-strong); }
@media (max-width: 980px) { .rivals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rivals { grid-template-columns: minmax(0, 1fr); } }
.rivals + .vs-stamp { margin-top: 20px; }
.rivals-group { margin: 0 0 14px; color: var(--faint); font: 650 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.rivals + .rivals-group { margin-top: 40px; }

/* Article filters (/articles): chips narrow the list by category; hidden without JavaScript. */
.article-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.no-js .article-filter { display: none; }
.article-filter button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 99px; background: transparent; color: var(--muted); font: 600 13px/1 var(--sans); cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
.article-filter button i { width: 8px; height: 8px; border-radius: 50%; background: var(--kind, var(--accent)); }
.article-filter button small { color: var(--faint); font: 500 12px/1 var(--mono); }
.article-filter button:hover { border-color: color-mix(in srgb, var(--kind, var(--accent)) 60%, transparent); color: var(--ink); }
.article-filter button[aria-pressed="true"] { border-color: var(--kind, var(--accent)); background: color-mix(in srgb, var(--kind, var(--accent)) 14%, transparent); color: var(--ink); }
.article-card[hidden] { display: none; }

/* A receipt redrawn with numbered parts (articles/anatomy-of-a-receipt). */
.anatomy { display: grid; gap: 10px; padding: 18px 20px; }
.anatomy .sp-receipt { gap: 10px; font-size: 14px; }
.an { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 6px; border-radius: 50%; background: var(--amber); color: var(--bg); font: 700 11px/1 var(--sans); font-style: normal; vertical-align: 1px; }
.an-evidence, .an-check { color: var(--accent); font-size: 13px; }

/* An attestation card, redrawn (articles/build-mode-and-answer-mode). */
.att-card { gap: 10px; }
.att-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); font-size: 13.5px; }
.att-row small { display: block; color: var(--muted); font-size: 12px; }
.att-box { display: grid; place-items: center; flex: none; width: 17px; height: 17px; margin-top: 1px; border: 1.5px solid var(--line-strong); border-radius: 4px; }
.att-box.on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.att-box svg { width: 12px; height: 12px; }
.att-go { justify-self: start; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 13.5px; font-weight: 600; }
.att-note { color: var(--muted); font-size: 12.5px; }

/* Floor 34: nothing scrolls sideways at 320 (the four answer cards held a long figure on one line). */
@media (max-width: 22rem) { .rev-card { min-width: 0; } .rev-who, .rev-card b { white-space: normal; overflow-wrap: break-word; min-width: 0; } .rev-cards { grid-template-columns: minmax(0, 1fr); } }

/* Floor 34: How it works fits a 320 phone (a step and its evidence panel held their widest line). */
@media (max-width: 22rem) { .sp { grid-template-columns: minmax(0, 1fr); } .lstep, .lstep-body, .sp-harvest, .sp-ladder li, .sp-ladder li > * { min-width: 0; } .sp code { overflow-wrap: anywhere; } .sp-ladder li { overflow-wrap: anywhere; grid-template-columns: 26px minmax(0, 1fr); } .sp-ladder li > :last-child { grid-column: 2; justify-self: start; } }