/* little big brain marketing site — the Glow direction (2026-09-15).
   IBM Plex Mono is the one voice, as in the console and the docs: display,
   reading, labels and code. Cobalt is the one accent; depth comes from flat surfaces, shadows and glow. No gradients.
   Colors are the console's tokens (apps/console/src/index.css), both themes.
   Themes: assets/theme.js resolves the stored preference (system, dark, light)
   to data-theme on <html> before paint. Dark is the base palette; the light
   block appears twice so a visitor without JavaScript still follows the system. */
:root {
  /* Dark: the console's .dark palette (apps/console/src/index.css). */
  color-scheme: dark;
  --bg: #17171c;
  --bg-2: #131318;
  --surface: #1f1f26;
  --surface-2: #26262e;
  --code: #131318;
  --ink: #ececee;
  --body: #c5c5ca;
  --muted: #a4a4ab;
  --subtle: #878791;
  --line: #34343e;
  --line-strong: #41414d;
  --blue: #5b86ff;
  --blue-light: #7ba0ff;
  --on-blue: #0a0e1a;
  --blue-line: rgb(91 134 255 / 0.4);
  --blue-tint: rgb(91 134 255 / 0.14);
  --blue-ring: rgb(91 134 255 / 0.2);
  --glow-color: rgb(91 134 255 / 0.55);
  --glow-soft: rgb(91 134 255 / 0.35);
  --header-bg: rgb(23 23 28 / 0.85);
  --shade: rgb(0 0 0 / 0.4);
  --shadow: 0 1px 0 rgb(0 0 0 / 0.5), 0 24px 60px rgb(0 0 0 / 0.5);
  --glow: 0 0 14px var(--glow-color);
  --text-glow: 0 0 14px var(--glow-color);
  --text-glow-lg: 0 0 40px var(--glow-soft);
  --sans: var(--mono);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Light: the console's :root palette, warm paper and charcoal ink. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f2ec;
  --bg-2: #eceae2;
  --surface: #fbfaf6;
  --surface-2: #ffffff;
  --code: #eceae2;
  --ink: #0e0e0c;
  --body: #2a2a28;
  --muted: #4f4d47;
  --subtle: #6b685f;
  --line: #d5d2c7;
  --line-strong: #b7b3a5;
  --blue: #1e54e0;
  --blue-light: #1843b2;
  --on-blue: #ffffff;
  --blue-line: rgb(30 84 224 / 0.32);
  --blue-tint: rgb(30 84 224 / 0.1);
  --blue-ring: rgb(30 84 224 / 0.16);
  --glow-color: rgb(30 84 224 / 0.26);
  --glow-soft: rgb(30 84 224 / 0.16);
  --header-bg: rgb(244 242 236 / 0.88);
  --shade: rgb(20 20 16 / 0.12);
  --shadow: 0 1px 0 rgb(20 20 16 / 0.06), 0 24px 56px rgb(20 20 16 / 0.14);
  --text-glow: none;
  --text-glow-lg: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f4f2ec;
    --bg-2: #eceae2;
    --surface: #fbfaf6;
    --surface-2: #ffffff;
    --code: #eceae2;
    --ink: #0e0e0c;
    --body: #2a2a28;
    --muted: #4f4d47;
    --subtle: #6b685f;
    --line: #d5d2c7;
    --line-strong: #b7b3a5;
    --blue: #1e54e0;
    --blue-light: #1843b2;
    --on-blue: #ffffff;
    --blue-line: rgb(30 84 224 / 0.32);
    --blue-tint: rgb(30 84 224 / 0.1);
    --blue-ring: rgb(30 84 224 / 0.16);
    --glow-color: rgb(30 84 224 / 0.26);
    --glow-soft: rgb(30 84 224 / 0.16);
    --header-bg: rgb(244 242 236 / 0.88);
    --shade: rgb(20 20 16 / 0.12);
    --shadow: 0 1px 0 rgb(20 20 16 / 0.06), 0 24px 56px rgb(20 20 16 / 0.14);
    --text-glow: none;
    --text-glow-lg: none;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  color: var(--body);
  background: var(--bg);
  font: 15px/1.6 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--blue); color: var(--on-blue); }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, summary { cursor: pointer; }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
h1, h2, h3, h4, p, pre { margin: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 600; letter-spacing: -0.02em; }
h1, h2 { font-weight: 700; }
h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.03em; }
h1 em, h2 em { font-style: normal; color: var(--blue-light); }
h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); }
.container { width: min(1296px, calc(100% - 144px)); margin: 0 auto; }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.eyebrow a:hover { color: var(--blue-light); }
.tag { padding: 4px 8px; border: 1px solid var(--blue-line); border-radius: 4px; font: 500 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--blue); }
.lead { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 520px; }
.small { font-size: 13px; color: var(--subtle); }
.muted { color: var(--muted); }
.skip { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 10px 18px; background: var(--blue); color: var(--on-blue); border-radius: 6px; }
.skip:focus { top: 12px; }

/* Header */
.header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--mono); color: var(--ink); white-space: nowrap; }
.brand-mark { color: var(--blue); font-size: 20px; }
.brand-icon { flex: none; width: 26px; height: 26px; }
.brand-icon rect { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 2; }
.brand-icon path { fill: var(--blue); }
.header nav { display: flex; align-items: center; gap: 32px; font-size: 14px; color: var(--muted); }
.header nav a { transition: color 0.15s; white-space: nowrap; }
.header nav a:hover, .header nav a[aria-current] { color: var(--ink); }
.header nav .nav-console { display: flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 6px; background: var(--ink); color: var(--on-blue); font-weight: 500; }
.header nav .nav-console:hover { background: var(--blue-light); color: var(--on-blue); }
.menu-button { display: none; }
.theme-switch { display: none; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 999px; }
.js .theme-switch { display: inline-flex; }
.theme-switch button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--subtle); transition: color 0.15s, background 0.15s; }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.theme-switch svg { width: 14px; height: 14px; display: block; }
.nav-social { display: inline-flex; align-items: center; gap: 18px; }
.nav-social a { display: grid; place-items: center; }
.nav-social svg { width: 18px; height: 18px; display: block; fill: currentColor; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.button { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 6px; background: var(--blue); color: var(--on-blue); font-weight: 600; font-size: 14px; transition: background 0.15s, transform 0.15s; }
.button:hover { background: var(--blue-light); }
.button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); font-weight: 500; }
.button.secondary:hover { border-color: var(--ink); background: transparent; }
.text-link { color: var(--blue); font-weight: 500; }
.text-link:hover { color: var(--blue-light); }

/* Hero */
.hero { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 72px; align-items: center; padding: 120px 0 96px; }
.hero > div { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.hero.compact { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
.hero.compact > div { max-width: 820px; }
.hero.compact.wide > div { max-width: 1040px; }
.hero-scene { min-width: 0; }
.hero-scene svg, .scene svg { width: 100%; height: auto; display: block; }
.hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 104px 0 72px; }
.hero-split h1 { font-size: clamp(44px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.04em; }
.hero-split .lead { font-size: 20px; }
.hero > .hero-scene { align-items: stretch; gap: 0; }
.hero-center { grid-template-columns: minmax(0, 1fr); text-align: center; padding-bottom: 48px; }
.hero-center > div { align-items: center; margin: 0 auto; max-width: 1100px; }
.hero-center h1 { font-size: clamp(40px, 4.5vw, 64px); }
.hero-center .lead { max-width: 640px; }

/* Sections */
.section { padding: 96px 0; }
/* Stacked sections share one gap. The blue band is a full-bleed block: it keeps
   its own padding, and so does the section after it. */
/* Two plain sections in a row share one gap; after a blue band, the next keeps its own. */
.section:not(.band-blue) + .section:not(.band-blue) { padding-top: 0; }
.section-heading { display: flex; flex-direction: column; gap: 18px; margin-bottom: 44px; max-width: 760px; }
.section-heading p { font-size: 17px; color: var(--muted); max-width: 560px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.card .num { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; color: var(--blue); }
.card p { font-size: 15px; color: var(--muted); }
.card-link { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.card-link:hover { border-color: var(--blue-line); box-shadow: 0 20px 60px var(--shade), 0 0 0 1px var(--blue-ring); transform: translateY(-2px); }
.card-link:hover h3 { color: var(--blue-light); }
.card-scene { margin: -12px -12px 4px; padding: 20px 12px 8px; border-radius: 10px; background: var(--bg-2); }
.card-scene svg { width: 100%; height: auto; display: block; }
.card .text-link { margin-top: auto; font-size: 14px; }
.card-body { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.card-wide .card-scene { margin: -12px; }
.card-wide .card-body { flex: none; }
.card-wide h3 { font-size: 28px; }
.card-wide p { font-size: 17px; max-width: 460px; }
.score-line { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 6px; font: 500 20px/1 var(--mono); color: var(--blue); }
.score-line small { font: 400 12px/1 var(--mono); color: var(--subtle); letter-spacing: 0.06em; }
.code { padding: 28px 30px; border-radius: 12px; background: var(--code); border: 1px solid var(--line); box-shadow: var(--shadow); font: 14px/1.7 var(--mono); color: var(--body); white-space: pre; overflow-x: auto; }
.syntax-keyword { color: var(--blue-light); }
.syntax-comment { color: var(--subtle); }
.syntax-string { color: var(--ink); }
.syntax-entity { color: var(--blue); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.two-col .section-heading { margin-bottom: 0; }
.interfaces { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.interfaces .section-heading { margin-bottom: 0; }
.section.interfaces { padding-bottom: 72px; }
.interface-groups { display: grid; gap: 0; padding: 8px 28px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.interface-groups > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.interface-groups > div:first-child { border-top: 0; }
.interface-groups b { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.standards { display: flex; flex-wrap: wrap; gap: 10px; }
.standards span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font: 500 13px/1 var(--mono); color: var(--body); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a, .chips button { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-size: 14px; transition: all 0.15s; }
.chips a:hover, .chips button:hover { color: var(--ink); border-color: var(--ink); }
.chips a small { margin-left: 6px; font: 500 9px/1 var(--mono); letter-spacing: 0.08em; color: var(--blue); }
.chips a[aria-current], .chips button[aria-pressed="true"] { color: var(--blue-light); border-color: var(--blue-line); background: var(--blue-tint); box-shadow: 0 0 0 1px var(--blue-ring); }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.notes > div { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.notes b { font-weight: 600; color: var(--ink); font-size: 17px; }
.notes span { font-size: 15px; color: var(--muted); }
.methodology { margin-top: 28px; }
.methodology summary { font-size: 14px; color: var(--muted); }
.methodology summary:hover { color: var(--ink); }
.methodology p { margin-top: 12px; font-size: 14px; color: var(--muted); max-width: 760px; }
.closing { padding: 120px 0 140px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.closing h2 { font-size: clamp(36px, 4vw, 56px); }
footer { border-top: 1px solid var(--line); padding: 40px 0 48px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-top p { font-size: 14px; color: var(--subtle); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; font-size: 13px; color: var(--subtle); }
.footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; }
.footer-bottom nav a:hover, .footer-link:hover { color: var(--ink); }
.footer-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; }

/* Rotating examples inside one scene */
.scene .ex { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.scene .ex.on { opacity: 1; visibility: visible; transition: opacity 0.4s ease 0.12s; }
.rotator-panel { margin: 0; padding: 28px; border-radius: 14px; }
.example-chips { gap: 8px; }
.example-chips button { height: 32px; padding: 0 14px; font-size: 13px; }
.rotator .example-chips { margin-top: 16px; }
.example-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: -12px 0 24px; }
.example-bar > span { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }


/* Console frame (home hero and feature mockups) */
.console { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); box-shadow: var(--shadow); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg-2); font: 500 12px/1 var(--mono); color: var(--ink); }
.console-bar .brand-mark { font-size: 16px; }
.console-bar-meta { margin-left: auto; font-weight: 400; color: var(--subtle); }
.console-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.console-agent { display: flex; flex-direction: column; background: var(--bg-2); font-size: 13px; border-left: 1px solid var(--line); }
.console-head { padding: 14px 18px; border-bottom: 1px solid var(--line); font: 500 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console-main { display: flex; flex-direction: column; min-width: 0; }
.console-tabs { display: flex; border-bottom: 1px solid var(--line); }
.console-tabs button, .console-tabs span { border: 0; background: transparent; padding: 14px 18px; font: 500 12px/1 var(--mono); color: var(--subtle); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.console-tabs button[aria-pressed="true"], .console-tabs span[aria-current] { color: var(--ink); border-bottom-color: var(--blue); }
.console-question { padding: 22px 24px 8px; display: grid; gap: 8px; }
.console-question p { font-size: 20px; color: var(--ink); font-weight: 500; letter-spacing: -0.02em; }
.console-agent .console-question { padding: 18px 18px 4px; }
.console-agent .console-question p { font-size: 15px; }
.console-view { padding: 10px 24px 16px; display: grid; gap: 14px; align-content: start; }
.console-agent .console-view { padding: 6px 18px 16px; gap: 0; }
.evidence-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; }
.evidence-index { font: 12px/1 var(--mono); color: var(--subtle); }
.evidence-row b { display: block; font-weight: 500; color: var(--ink); }
.evidence-row small { font: 10px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--subtle); }
.term-kind { font: 12px/1 var(--mono); color: var(--muted); border: 1px solid var(--line); padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.evidence-relation { padding: 4px 0 4px 42px; font: 12px/1.4 var(--mono); color: var(--blue); }
.console-view pre, .console-agent pre { font: 13px/1.7 var(--mono); color: var(--body); white-space: pre; overflow-x: auto; }
.console-view pre { padding: 8px 0; }
.console-agent > pre { padding: 18px; white-space: pre-wrap; }
.console-agent .console-view pre { padding: 12px 0 0; white-space: pre-wrap; }
.console-answer { margin-top: auto; display: flex; align-items: center; gap: 16px; padding: 16px 24px; background: var(--blue-tint); border-top: 1px solid var(--line); }
.answer-mark { color: var(--blue); font-size: 18px; }
.console-answer > div { display: flex; flex-direction: column; }
.console-answer b { color: var(--ink); font-weight: 500; }
.console-answer > div > span { font-size: 12px; color: var(--muted); }
.answer-count { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--blue); white-space: nowrap; text-align: right; }
.console .mini-table { font-size: 13px; }
.console .mini-table th, .console .mini-table td { padding: 7px 12px; }
.console .mini-table tr.is-pinned td { color: var(--blue-light); background: var(--blue-tint); }
.mock-status { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 8px; border: 1px dashed var(--line-strong); }
.mock-status.ok { border-style: solid; border-color: var(--blue-line); background: var(--blue-tint); }
.mock-status .answer-mark { color: var(--subtle); }
.mock-status.ok .answer-mark { color: var(--blue); }
.mock-status > div { display: flex; flex-direction: column; }
.mock-status b { color: var(--ink); font-weight: 500; font-size: 14px; }
.mock-status span { font: 12px/1.5 var(--mono); color: var(--muted); }
.mock-status.ok b { color: var(--blue-light); }
.mock-input { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); font: 14px/1 var(--mono); color: var(--ink); }
.mock-input > span:first-child { color: var(--blue); font-size: 16px; }
.mock-input-hint { margin-left: auto; font-size: 11px; color: var(--subtle); white-space: nowrap; }
.mock-bars { display: grid; gap: 14px; padding: 6px 0; }
.mock-recs { display: grid; }
.mock-rec { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.mock-rec:first-child { border-top: 0; }
.mock-rec b { display: block; font-weight: 500; color: var(--ink); font-size: 14px; }
.mock-rec small { font: 12px/1.5 var(--mono); color: var(--muted); }
.mock-rec.is-pinned b { color: var(--blue-light); }
.mock-pill { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--blue-line); font: 500 11px/1 var(--mono); color: var(--blue); white-space: nowrap; }
.mock-section { display: grid; gap: 28px; }

/* Problem, solutions, proof (home) */
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.proof-col { display: grid; gap: 22px; align-content: start; padding: 28px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.proof-label { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; color: var(--subtle); }
.score-row { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.score-name { color: var(--body); }
.score-bar { display: flex; align-items: center; gap: 10px; }
.score-bar > span { display: block; height: 10px; border-radius: 5px; background: var(--line-strong); max-width: 78%; }
.score-bar b { font: 500 14px/1 var(--mono); color: var(--ink); }
.lead-row .score-bar > span { background: var(--blue); box-shadow: var(--glow); }
.lead-row .score-name, .lead-row .score-bar b, .lead-row .score-meta { color: var(--blue-light); }
.score-meta { font: 12px/1.4 var(--mono); }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-top: 32px; }
.stat-strip > div { display: flex; flex-direction: column; gap: 6px; padding: 24px 0; border-top: 1px solid var(--line); }
.stat-strip b { font: 500 44px/1 var(--mono); letter-spacing: -0.03em; color: var(--blue); }
.stat-strip span { font-size: 14px; color: var(--muted); }

/* Solution pages: three lanes */
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lane { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.lane-lbb { border-color: var(--blue-line); box-shadow: 0 0 0 1px var(--blue-ring), 0 30px 80px var(--shade); }
.lane-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lane-head b { font-weight: 600; color: var(--ink); font-size: 16px; }
.lane-head span { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; padding: 5px 8px; border-radius: 4px; background: var(--line); color: var(--muted); }
.lane-lbb .lane-head span { background: var(--blue-tint); color: var(--blue); border: 1px solid var(--blue-line); }
.lane-db { position: relative; display: grid; gap: 10px; padding: 30px 14px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.lane-db-label { position: absolute; top: 10px; right: 14px; font: 500 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--subtle); }
.lane-arrow { color: var(--line-strong); text-align: center; line-height: 1; }
.mini-table { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); overflow: hidden; font: 12px/1.5 var(--mono); }
.mini-table-name { padding: 7px 10px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.mini-table table { border-collapse: collapse; width: 100%; }
.mini-table th, .mini-table td { text-align: left; padding: 5px 10px; white-space: nowrap; font-weight: 400; }
.mini-table th { color: var(--subtle); }
.mini-table td { color: var(--body); }
.mini-chunk { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 10px 12px; display: grid; gap: 4px; }
.mini-chunk span { font: 500 9px/1 var(--mono); letter-spacing: 0.1em; color: var(--subtle); }
.mini-chunk p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.mini-graph { width: 100%; height: auto; display: block; font-family: var(--mono); }
.mini-graph .mg-edges line { stroke: var(--blue); stroke-opacity: 0.6; stroke-width: 1.2; stroke-dasharray: 3 7; animation: flow 1.6s linear infinite; }
.mini-graph .mg-edges text { font-size: 10px; fill: var(--blue-light); }
.mini-graph marker path { fill: var(--blue); }
.mini-graph circle { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.2; }
.mini-graph circle.mg-end { stroke: var(--blue); stroke-width: 1.6; filter: drop-shadow(0 0 8px var(--glow-color)); }
.mini-graph .mg-name { font-size: 10px; fill: var(--ink); }
.mini-extra { font: 11px/1.4 var(--mono); color: var(--muted); text-align: center; }
.lane-meaning { display: grid; gap: 6px; padding: 12px 14px; border-radius: 8px; border: 1px dashed var(--line-strong); }
.lane-meaning span, .lane-verdict span, .lane-score span { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--subtle); }
.lane-meaning code { font: 12px/1.55 var(--mono); color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.lane-meaning-inside { border-style: solid; border-color: var(--blue-line); background: var(--blue-tint); }
.lane-meaning-inside span { color: var(--blue); }
.lane-meaning-inside code { color: var(--ink); }
.lane-verdict { display: grid; gap: 6px; padding: 14px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.lane-verdict small { font-size: 13px; color: var(--muted); line-height: 1.5; }
.lane-verdict b { font-weight: 600; color: var(--muted); font-size: 15px; }
.lane-lbb .lane-verdict { background: var(--blue-tint); border-color: var(--blue-line); }
.lane-lbb .lane-verdict b { color: var(--blue-light); }
.lane-score { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.lane-score b { font: 500 22px/1 var(--mono); color: var(--body); }
.lane-lbb .lane-score b { color: var(--blue); text-shadow: var(--text-glow); }
.lanes-note { margin-top: 24px; max-width: 760px; font-size: 14px; }
.lanes-note a { color: var(--blue); }

/* Pricing */
.price-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: 120px 0 96px; }
.section:not(.band-blue) + .price-hero { padding-top: 0; }
.price-big { font: 500 clamp(72px, 9vw, 128px)/1 var(--mono); letter-spacing: -0.05em; color: var(--blue); text-shadow: var(--text-glow-lg); }
.price-big small { font-size: 0.22em; color: var(--muted); letter-spacing: 0; text-shadow: none; margin-left: 6px; }
.price-lines { display: grid; gap: 6px; font-size: 17px; color: var(--muted); }
.price-lines b { color: var(--ink); font-weight: 500; }
.price-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 32px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.price-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.price-panel label { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--subtle); text-transform: uppercase; }
.price-panel select { height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--body); font-size: 13px; }
/* The stored-data slider: log scale, public datasets as dots and chips */
.price-size { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.price-size output { font: 500 30px/1 var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.price-size span { font: 13px/1.4 var(--mono); color: var(--muted); }
.price-slider { --thumb: 22px; position: relative; height: 32px; }
.price-slider::before, .price-fill { content: ""; position: absolute; top: 50%; left: calc(var(--thumb) / 2); height: 4px; margin-top: -2px; }
.price-slider::before { right: calc(var(--thumb) / 2); background: var(--line-strong); }
.price-fill { width: calc((100% - var(--thumb)) * var(--p, 0)); background: var(--blue); }
.price-dot { position: absolute; top: 50%; left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--at)); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); pointer-events: none; }
.price-dot.passed { border-color: var(--blue); background: var(--blue); }
.price-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.price-range::-webkit-slider-runnable-track { height: 32px; background: transparent; }
.price-range::-moz-range-track { height: 32px; background: transparent; }
.price-range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: 5px; border-radius: 50%; border: 4px solid var(--surface); background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.price-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 4px solid var(--surface); background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.price-range:focus-visible { outline: none; }
.price-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--blue), 0 0 0 6px var(--blue-ring); }
.price-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--blue), 0 0 0 6px var(--blue-ring); }
.scale-note { min-height: 2.9em; font-size: 14px; line-height: 1.45; color: var(--muted); }
.scale-chips { gap: 8px; }
.scale-chips button { height: 32px; padding: 0 12px; font-size: 13px; }
.scale-chips small { margin-left: 6px; font: 11px/1 var(--mono); color: var(--subtle); }
.scale-chips button[aria-pressed="true"] small { color: inherit; }
.price-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.price-total span { font-size: 14px; color: var(--muted); }
.price-total b { font: 500 40px/1 var(--mono); letter-spacing: -0.03em; color: var(--blue); text-shadow: var(--text-glow); }
.price-note { font-size: 13px; color: var(--subtle); }
.lbb-error { font-size: 13px; color: var(--blue-light); }
.faq { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 72px; }
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-size: 17px; color: var(--ink); font-weight: 500; }
.faq details p { margin-top: 12px; font-size: 15px; color: var(--muted); max-width: 640px; }
.faq details a { color: var(--blue); }

/* Headlines whose lines rise in turn on load */
.rise > * { display: block; opacity: 0; transform: translateY(0.4em); animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.rise > :nth-child(2) { animation-delay: 0.12s; }
.rise > :nth-child(3) { animation-delay: 0.24s; }
.rise > :nth-child(4) { animation-delay: 0.36s; }
.rise > :nth-child(5) { animation-delay: 0.48s; }
.rise ~ .statement-foot { opacity: 0; transform: translateY(0.4em); animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
/* A line that draws itself under a phrase when its heading comes into view */
.mark { position: relative; display: inline-block; }
.mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s; }
.reveal.in .mark::after { transform: scaleX(1); }
/* About: the semantic web story as a timeline */
.story-timeline { position: relative; padding-top: 36px; }
.story-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: left; }
.story-line.reveal { opacity: 1; transform: scaleX(0); transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.story-line.reveal.in { transform: scaleX(1); }
.story-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.story-step { position: relative; display: grid; gap: 12px; align-content: start; }
.story-step.reveal { transition-delay: calc(var(--i) * 160ms); }
.story-step::before { content: ""; position: absolute; top: -41px; left: 0; width: 10px; height: 10px; background: var(--blue); }
.story-icon { width: 48px; height: 48px; margin-bottom: 8px; fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.story-icon * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s ease; transition-delay: calc(var(--i) * 160ms + 350ms); }
.story-step.in .story-icon * { stroke-dashoffset: 0; }
.story-step > span { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.story-step h3 { font-size: 18px; line-height: 1.3; }
.story-step p { font-size: 15px; color: var(--muted); }
/* About: the claims. Each claim has its text on the left and a stage on the
   right that tells it in steps (src/claims.mjs). By default the steps are
   listed one under the other. On a wide screen with script, the claim stays in
   place while the visitor scrolls and the stage shows one step at a time: see
   the pinned block further down. */
.tenets { padding: 24px 0 0; }
.tenets + .band-blue { margin-top: 0; }
.tenet { border-top: 1px solid var(--line-strong); }
.tenet-pin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; padding: 48px 0; }
.tenet-text { display: grid; gap: 18px; justify-items: start; }
.tenet-num { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; color: var(--blue); }
.tenet h2 { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -0.03em; }
/* The stage: a frame with a bar that counts the steps, and the steps in it */
.stage { border: 1px solid var(--ink); background: var(--bg); }
.stage-bar { display: none; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--ink); }
.stage-count { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.stage-count b { font-weight: 600; color: var(--ink); }
.stage-ticks { display: flex; gap: 6px; }
.stage-ticks i { position: relative; width: 34px; height: 4px; background: var(--line-strong); }
.stage-ticks i.done { background: var(--blue); }
.stage-ticks i.on::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(var(--t, 1)); transform-origin: left; }
.stage-step { display: grid; gap: 20px; align-content: start; padding: 28px 24px; }
.stage-step + .stage-step { border-top: 1px dashed var(--muted); }
.u-cap { display: flex; align-items: flex-start; gap: 14px; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.u-cap span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; background: var(--ink); color: var(--bg); font: 600 13px/1 var(--mono); }
.u-body { display: grid; gap: 14px; justify-items: start; }
/* Parts that follow the step: --q runs from 0 to 1 as --t grows, later for each --i */
.u-fan > *, .u-seq > *, .u-line, .u-stack > i, .u-vector i { --q: clamp(0, calc((var(--t, 1) - 0.04 - var(--i, 0) * 0.07) * 3.2), 1); }
.u-fan > * { transform: translate3d(calc((1 - var(--q)) * var(--sx, 0px)), calc((1 - var(--q)) * var(--sy, 0px)), calc((1 - var(--q)) * var(--sz, 0px))) rotate(calc((1 - var(--q)) * var(--sr, 0deg))); }
.u-seq { display: grid; gap: 8px; width: 100%; }
.u-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; opacity: var(--q); transform: translateX(calc((1 - var(--q)) * -36px)); }
.u-map { max-width: 460px; }
.u-map .u-row { grid-template-columns: 56px minmax(0, 1fr) 16px 112px; }
.u-results .u-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
.u-checks .u-row { grid-template-columns: 22px minmax(0, 1fr); }
.u-row > .u-chip { justify-self: start; }
.u-row code, .u-row b { font: 500 13px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.u-row b { font-weight: 600; }
.u-row i { font-style: normal; color: var(--blue); }
.u-row small { font: 500 11px/1 var(--mono); color: var(--muted); }
.u-row code.to { justify-self: start; padding: 3px 7px; border: 1px solid var(--blue); background: var(--blue-tint); color: var(--blue); }
.u-tick { display: grid; place-items: center; width: 22px; height: 22px; background: var(--blue); color: var(--on-blue); font-size: 13px; }
/* Records, as each system stores them */
.u-recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; width: 100%; }
.u-rec { min-width: 0; border: 1px solid var(--ink); background: var(--surface); }
.u-rec-head { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; background: var(--ink); color: var(--bg); font: 500 11px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.u-rec-head code { font: inherit; letter-spacing: 0; text-transform: none; }
.u-rec-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; font: 400 13px/1.35 var(--mono); }
.u-rec-row + .u-rec-row { border-top: 1px solid var(--line); }
.u-rec-row span { color: var(--muted); }
.u-rec-row b { font-weight: 600; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
/* Small parts: chips, labels, a question, a path through the graph */
.u-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid var(--line-strong); background: var(--surface); font: 500 11px/1.2 var(--mono); letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; }
.u-chip.strong { border-color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.u-chip.is-blue { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); }
.u-chip.ok { border-color: var(--blue); font-size: 13px; }
.u-chip.ok b { color: var(--blue); }
.u-flag { position: relative; margin-top: 6px; padding: 7px 10px; background: var(--ink); color: var(--bg); font: 500 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.u-flag::before { content: ""; position: absolute; top: -6px; left: 12px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.u-flag.b { background: var(--blue); color: var(--on-blue); }
.u-flag.b::before { border-bottom-color: var(--blue); }
.u-query { display: flex; gap: 10px; width: 100%; padding: 11px 14px; border: 1px solid var(--ink); font-size: 15px; font-weight: 500; color: var(--ink); }
.u-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; width: 100%; }
.u-edge { display: grid; justify-items: center; gap: 3px; min-width: 92px; padding: 0 8px; font: 500 11px/1 var(--mono); color: var(--blue); }
.u-edge i { font-style: normal; }
.u-edge::after { content: ""; display: block; width: 100%; height: 0; border-top: 1px dashed var(--blue); order: 2; }
.u-edge small { order: 3; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* Code and documents */
.u-code, .u-page { display: grid; gap: 10px; width: 100%; padding: 14px 16px; border: 1px solid var(--line-strong); background: var(--surface); }
.u-code > span, .u-page > span, .u-one > span, .u-vector > span { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.u-code pre, .u-line pre { margin: 0; font: 13px/1.65 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.u-code.is-blue { border-color: var(--blue); background: var(--blue-tint); }
.u-code.is-blue > span { color: var(--blue); }
.u-page { border-color: var(--ink); }
.u-page p { font-size: 15px; line-height: 1.6; color: var(--ink); }
.u-page mark, .u-code mark { padding: 1px 3px; background: var(--blue-tint); color: inherit; box-shadow: inset 0 -2px 0 var(--blue); }
.u-page sup, .u-code sup { margin-left: 3px; font: 600 11px/1 var(--mono); color: var(--blue); }
/* Five records close into one */
.u-stack { position: relative; width: 100%; }
.u-stack > i { position: absolute; inset: 0 20px 20px 0; border: 1px solid var(--ink); background: var(--surface); transform: translate(calc((1 - var(--q)) * var(--n) * 24px + var(--n) * 5px), calc((1 - var(--q)) * var(--n) * -14px + var(--n) * 5px)); }
.u-stack > i:nth-child(1) { --n: 4; --i: 0; }
.u-stack > i:nth-child(2) { --n: 3; --i: 1; }
.u-stack > i:nth-child(3) { --n: 2; --i: 2; }
.u-stack > i:nth-child(4) { --n: 1; --i: 3; }
.u-one { position: relative; display: grid; gap: 6px; padding: 14px 16px; margin: 0 20px 20px 0; border: 1px solid var(--blue); background: var(--bg); }
.u-one > span { color: var(--blue); }
.u-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; opacity: var(--q); }
.u-line small { flex: none; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; color: var(--muted); }
/* A law as it is written: a dense page in two columns, cut at the bottom of the
   stage. In the marked copy the parts an agent can use stand out with their
   label, and the rest of the text steps back. */
.u-law { width: 100%; height: min(500px, calc(100vh - 81px - 290px)); min-height: 240px; padding: 14px 16px; overflow: hidden; columns: 2; column-gap: 24px; column-fill: auto; border: 1px solid var(--ink); background: var(--surface); font: 400 11px/1.5 var(--mono); color: var(--ink); }
.u-law > b { display: block; margin-bottom: 8px; font-weight: 600; }
.u-law p { margin: 0 0 6px; }
.u-law p i { font-style: normal; font-weight: 600; }
.u-law.marked { color: var(--muted); }
.u-law.marked > b, .u-law.marked p i { color: var(--muted); }
.u-source { font: 500 11px/1.3 var(--mono); color: var(--muted); }
.u-parts .u-row, .u-decisions .u-row { grid-template-columns: 84px minmax(0, 1fr) auto; }
.u-decisions .u-row { grid-template-columns: 22px minmax(0, 1fr) auto; }
/* Small graphs drawn in SVG */
.u-graph { display: block; width: 100%; max-width: 520px; height: auto; }
.u-graph .e { fill: none; stroke: var(--ink); stroke-width: 1; }
.u-graph .e.hot, .u-graph .arrow { stroke: var(--blue); stroke-width: 2; fill: none; }
.u-graph .e.hot { stroke-dasharray: 5 5; animation: march 1s linear infinite; }
.u-graph text { font: 500 11px var(--mono); fill: var(--muted); }
.u-graph text.hot, .u-graph tspan.hot { fill: var(--blue); }
.u-graph .n rect { fill: var(--surface); stroke: var(--ink); }
.u-graph .n text { font-size: 13px; font-weight: 600; fill: var(--ink); }
.u-graph .n.hot rect { fill: var(--blue-tint); stroke: var(--blue); }
@keyframes march { to { stroke-dashoffset: -10; } }
/* A query, and the file it returns */
.u-flip { display: grid; gap: 10px; width: 100%; }
.u-flip > i { font: 500 13px/1 var(--mono); font-style: normal; color: var(--blue); }
.u-file { transform-origin: 50% 0; transform: perspective(900px) rotateX(calc((1 - clamp(0, calc((var(--t, 1) - 0.2) * 2.4), 1)) * -84deg)); }
.u-tools { display: flex; flex-wrap: wrap; gap: 10px; }
/* Datasets as slabs, a fact with its embedding and class */
.u-slabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.u-slab { display: grid; gap: 6px; align-content: start; padding: 14px 12px; border: 1px solid var(--ink); background: var(--surface); box-shadow: 5px 5px 0 var(--line-strong); }
.u-slab b { font-size: 15px; font-weight: 600; color: var(--ink); }
.u-slab span { font: 500 11px/1.3 var(--mono); color: var(--muted); }
.u-embed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; width: 100%; }
.u-vector { display: grid; gap: 8px; justify-items: start; }
.u-vector > div { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 56px; padding-bottom: 1px; border-bottom: 1px solid var(--ink); }
.u-vector i { flex: 1; height: calc(var(--h) * var(--q)); background: var(--blue); }
/* One page of a PDF: text, a figure and a table. In the marked copy each part
   is outlined and labelled, and what a model takes from it stands out. */
.u-pdf { width: 100%; border: 1px solid var(--ink); background: var(--surface-2); }
.u-pdf-bar { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: 500 11px/1.2 var(--mono); letter-spacing: 0.06em; }
.u-pdf-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; margin: 12px; padding: 16px; border: 1px solid var(--line-strong); background: var(--bg); }
.u-part { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; padding: 8px; outline: 2px solid transparent; }
.u-pdf-text { grid-column: 1 / -1; }
.u-part > b { font-size: 15px; font-weight: 600; color: var(--ink); }
.u-part > p { font-size: 13px; line-height: 1.55; color: var(--ink); }
.u-part > span { font: 500 11px/1.3 var(--mono); color: var(--muted); }
.u-part > small { position: absolute; top: -9px; left: 8px; padding: 0 5px; background: var(--blue); color: var(--on-blue); font: 600 11px/1.7 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.u-chart { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 96px; padding: 0 6px 18px; border-bottom: 1px solid var(--ink); }
.u-chart i { position: relative; flex: 1; height: calc(var(--h) * 0.8); background: var(--ink); }
.u-chart i em { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font: 500 11px/1 var(--mono); font-style: normal; color: var(--muted); }
.u-chart u { position: absolute; left: 0; right: 0; bottom: calc(18px + 32%); border-top: 1px dashed var(--ink); padding: 3px 0 0 2px; font: 500 11px/1 var(--mono); text-decoration: none; text-align: left; color: var(--muted); }
.u-pdf table { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--mono); color: var(--ink); }
.u-pdf th, .u-pdf td { padding: 5px 6px; border-bottom: 1px solid var(--line-strong); text-align: left; }
.u-pdf th { font-weight: 600; border-bottom-color: var(--ink); }
.u-pdf th:last-child, .u-pdf td:last-child { text-align: right; }
.u-pdf.marked .u-part { outline-color: var(--blue); }
.u-pdf.marked .u-part > p { color: var(--muted); }
.u-pdf.marked .u-chart i.hot { background: var(--blue); }
.u-pdf.marked tbody tr { background: var(--blue-tint); }
.u-pdf mark, .u-law mark { padding: 1px 2px; background: var(--blue-tint); color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.u-pdf mark b, .u-law mark b { margin-right: 5px; padding: 0 4px; background: var(--blue); color: var(--on-blue); font: 600 11px/1.35 var(--mono); letter-spacing: 0.1em; }
/* The graph as sentences, next to the same knowledge as numbers */
.u-versus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; width: 100%; }
.u-weights { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border: 1px solid var(--line-strong); background: var(--surface); }
.u-weights > span { font: 500 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.u-weights pre { margin: 0; font: 11px/1.6 var(--mono); color: var(--muted); white-space: pre; overflow: hidden; }
.u-plain { border-color: var(--blue); background: var(--blue-tint); }
.u-plain > span { color: var(--blue); }
.u-plain p { font-size: 15px; line-height: 1.45; }
/* About: who we are, after the claims. The heading on the left, the facts as
   rows on the right. */
.who { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; padding: 72px 0 104px; border-top: 1px solid var(--line-strong); }
.who .section-heading { margin-bottom: 0; justify-items: start; }
.who + .band-blue { margin-top: 0; }
.who .keep { white-space: nowrap; }
.who-facts { margin: 0; border-bottom: 1px solid var(--line-strong); }
.who-facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--line-strong); }
.who-facts > div.reveal { transition-delay: calc(var(--i) * 90ms); }
.who-facts dt { font: 500 11px/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.who-facts dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
/* Pinned: on a wide screen with script, a claim stays in place for a stretch of
   scroll (--steps screens of it) and its stage shows one step at a time. */
@media (min-width: 901px) and (min-height: 600px) {
  .js .tenet { height: calc(100vh - 81px + var(--steps, 4) * 60vh); }
  .js .tenet-pin { position: sticky; top: 81px; height: calc(100vh - 81px); align-items: center; padding: 0; }
  .js .stage-bar { display: flex; }
  .js .stage-body { position: relative; height: min(400px, calc(100vh - 81px - 150px)); perspective: 1200px; }
  .js .stage.tall .stage-body { height: min(640px, calc(100vh - 81px - 140px)); }
  .js .stage.mid .stage-body { height: min(470px, calc(100vh - 81px - 150px)); }
  .js .stage-step, .js .stage-step + .stage-step { position: absolute; inset: 0; align-content: center; border: 0; opacity: 0; visibility: hidden; transform: translateY(32px) rotateX(-14deg); transform-origin: 50% 0; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.5s; }
  .js .stage-step.done { transform: translateY(-32px) rotateX(10deg); }
  .js .stage-step.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

/* Plans */
.pricing-intro { display: grid; gap: 18px; padding: 40px 0 24px; }
.pricing-intro h1 { font-size: clamp(32px, 3.3vw, 48px); line-height: 1.15; text-wrap: balance; }
.pricing-intro p { max-width: 880px; font-size: 17px; color: var(--muted); }
.section.pricing-plans { padding: 0 0 64px; }
.plans-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.plans-toolbar h2 { font-size: 18px; }
.pricing-currency { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.pricing-currency select { height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 13px; }
.plans.plans-with-free { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 24px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.plan-featured { border-color: var(--blue-line); box-shadow: 0 0 0 1px var(--blue-ring), var(--shadow); }
.plan-head { display: grid; gap: 12px; }
.plan-badge { font: 500 11px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.plan-featured .plan-badge { color: var(--blue); }
.plan-head h3 { font-size: 22px; }
.plan-price { display: grid; gap: 8px; }
.plan-price b { font: 500 36px/1 var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.plan-featured .plan-price b { color: var(--blue); }
.plan-price small { font: 13px/1 var(--mono); color: var(--subtle); }
.plan-rate { min-height: 36px; font: 500 13px/1.4 var(--mono); color: var(--body); }
.plan-head p { min-height: 63px; font-size: 13px; color: var(--muted); }
.plan-action { display: grid; gap: 10px; }
.plan-action p { min-height: 36px; font-size: 11px; line-height: 1.6; color: var(--muted); }
.plan-groups { display: grid; gap: 18px; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); align-content: start; }
.plan-groups dt { margin-bottom: 8px; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.plan-groups dd { margin: 0; padding: 3px 0; font-size: 13px; color: var(--body); }
.plan .button { justify-content: center; }
.plans-notes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.pricing-estimate { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 32px; padding: 40px 0 64px; border-top: 1px solid var(--line); }
.estimate-heading, .pricing-estimate .price-panel { width: 100%; max-width: 800px; }
.pricing-estimate h2 { margin-top: 18px; }
.estimate-lead { margin-top: 16px; max-width: 480px; color: var(--muted); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.contact .section-heading { margin-bottom: 0; }
.contact-form { gap: 18px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-form label { display: grid; gap: 8px; text-transform: none; letter-spacing: 0; font: 500 13px/1.2 var(--sans); color: var(--muted); }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: 15px/1.4 var(--sans); }
.contact-form select { height: auto; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.contact-actions .button { border: 0; }
.contact-actions .button[disabled] { opacity: 0.6; cursor: progress; }
.contact-status { font-size: 14px; color: var(--muted); }
.contact-status[data-state="ok"] { color: var(--blue-light); }
.contact-status a { color: var(--blue); }

/* Legal */
.legal-page { padding: 80px 0 120px; }
.legal-page h1 { margin: 20px 0 36px; }
.legal-details { max-width: 640px; margin: 0; }
.legal-details > div { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.legal-details dt { color: var(--muted); }
.legal-details dd { margin: 0; color: var(--ink); }

/* Motion */
/* Diagrams are flat: no fills, square corners, one line weight. The active
   element is solid blue when small and blue-tinted when it is a container. */
.scene rect { rx: 3; ry: 3; }
.scene rect[fill="var(--surface-2)"], .scene rect[fill="var(--surface)"] { fill: var(--bg); }
.scene rect[stroke="var(--line-strong)"] { stroke-width: 1; }
.scene rect[stroke="var(--blue)"] { stroke-width: 1; }
.scene rect[stroke="var(--blue)"][fill="var(--surface)"] { fill: var(--blue-tint); }
.scene path[stroke="var(--blue)"], .scene path[stroke="var(--line-strong)"] { stroke-width: 1; }
.scene rect.glow { fill: var(--blue-tint); stroke: var(--blue); }
.scene rect.glow[height="52"], .scene rect.glow[height="60"] { fill: var(--blue); }
.scene rect.glow[height="52"] + text, .scene rect.glow[height="52"] + text + text, .scene rect.glow[height="52"] + text + text + text,
.scene rect.glow[height="60"] + text, .scene rect.glow[height="60"] + text + text { fill: var(--on-blue); }
.card-scene, .rotator-panel { background: transparent; border: 1px solid var(--line); border-radius: 4px; }
.pop.card-scene { background: var(--blue-tint); border-color: var(--blue-line); }
.pop .example-chips button[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }

/* The landing hero: the live query. A question types itself, then three steps
   appear in turn (site.mjs). Without JavaScript the first example shows whole. */
/* The About statement: one sentence, full screen. Its longest line ("the
   infrastructure layer", 24 characters of 0.56em each) spans the container,
   from the brand to the sign-up button. A ruled row under it holds the lead
   and the link to the next section, on the same edges. On a short screen the
   height sets the size instead, so that the row stays above the fold. */
.statement { container-type: inline-size; min-height: calc(100vh - 81px); min-height: calc(100svh - 81px); display: flex; flex-direction: column; justify-content: center; padding: 64px 0; }
.statement h1 { margin: 0 0 56px; font-size: clamp(40px, 6vw, 92px); font-size: max(36px, min(100cqi / 13.5, 19.6svh - 63px)); line-height: 1.02; letter-spacing: -0.04em; }
.statement-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.statement .lead { max-width: 640px; font-size: 18px; text-wrap: balance; }
.statement-next { display: inline-flex; flex: none; gap: 10px; font: 500 13px/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.statement-next:hover { color: var(--blue-light); }
.statement-next span { display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
/* The risk band after the statement */
.statement + .band-blue { margin-top: 0; }
.risk .section-heading { max-width: 1000px; }
.risk h2 { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -0.035em; }
.risk-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; max-width: 1000px; }
.risk-body p { font-size: 18px; line-height: 1.6; color: var(--muted); }
.risk-body p:last-child { color: var(--ink); }
.risk-next { display: inline-flex; gap: 10px; margin-top: 40px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); font-weight: 600; color: var(--ink); }
.risk-next:hover { border-color: var(--line-strong); }
.live-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 88px 0 40px; }
.live-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.live-top > div:first-child { display: grid; gap: 24px; }
.live-top h1 { font-size: clamp(26px, 3.9vw, 54px); line-height: 1.05; letter-spacing: -0.035em; }
.live-top .lead { max-width: 640px; }
.live-top .actions { flex: none; }
.live-console { min-width: 0; border: 1px solid var(--line-strong); background: var(--bg); }
.live-bar { display: flex; align-items: center; gap: 32px; min-height: 164px; padding: 36px 44px; border-bottom: 1px solid var(--line-strong); }
.live-glyph { display: grid; place-items: center; flex: none; width: 60px; height: 60px; background: var(--blue); color: var(--on-blue); font: 500 32px/1 var(--mono); }
.live-q { font-size: clamp(22px, 2.9vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--ink); }
.live-caret { display: inline-block; width: 4px; height: 0.82em; margin-left: 8px; vertical-align: -0.06em; background: var(--blue); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.live-set { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr); }
.live-step { display: flex; flex-direction: column; gap: 14px; min-height: 360px; padding: 28px 32px 32px; border-left: 1px solid var(--line); transition: opacity 0.5s ease; }
.live-step:first-child { border-left: 0; }
.js .live-step:not(.on) { opacity: 0.16; }
.live-label { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--subtle); }
.live-label i { margin-right: 8px; font-style: normal; color: var(--blue); }
.live-search { padding: 10px 12px; border: 1px solid var(--line); font: 13px/1.4 var(--mono); color: var(--muted); }
.live-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.live-fact b, .live-node b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.live-fact small, .live-node small { font: 12px/1.4 var(--mono); color: var(--subtle); }
.live-fact span { font: 500 15px/1 var(--mono); color: var(--blue); }
.live-chain { display: grid; gap: 6px; }
.live-node { padding: 10px 14px; border: 1px solid var(--line-strong); }
.live-hot { background: var(--blue); border-color: var(--blue); }
.live-hot b, .live-hot small { color: var(--on-blue); }
.live-edge { padding: 2px 0 2px 14px; font: 12px/1.4 var(--mono); color: var(--blue); }
.js .live-chain > * { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; transition-delay: calc(var(--i) * 150ms); }
.js .live-step.on .live-chain > * { opacity: 1; transform: none; }
.live-answer { font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.live-proof { display: grid; margin: auto 0 0; }
.live-proof div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font: 12px/1.4 var(--mono); }
.live-proof dt { color: var(--subtle); }
.live-proof dd { margin: 0; color: var(--blue); }
.live-tabs { display: flex; align-items: stretch; gap: 8px; padding: 0 20px 0 28px; border-bottom: 1px solid var(--line-strong); background: var(--bg-2); }
.live-tab-list { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.live-tab { position: relative; flex: none; padding: 16px 16px 14px; border: 0; background: none; font: 500 13px/1 var(--mono); color: var(--subtle); white-space: nowrap; }
.live-tab:hover { color: var(--ink); }
.live-tab[aria-pressed="true"] { color: var(--ink); }
.live-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.live-tab[aria-pressed="true"] .live-progress { transform: scaleX(1); }
.live-tab.playing .live-progress { animation: play-progress var(--play, 9s) linear forwards; }
@keyframes play-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* What you get: one line each, the lead words in blue */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; padding: 72px 0 120px; }
.value { display: grid; gap: 14px; align-content: start; padding-top: 24px; border-top: 2px solid var(--ink); }
.value h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; letter-spacing: -0.02em; }
.value-lead { color: var(--blue); }
.value p { font-size: 14px; color: var(--muted); }

/* The object-storage band: one solid blue section, white on blue in both themes */
.band-blue { color-scheme: dark; --bg: #1e54e0; --bg-2: #1e54e0; --surface: #1e54e0; --surface-2: #1e54e0; --ink: #ffffff; --muted: rgb(255 255 255 / 0.78); --subtle: rgb(255 255 255 / 0.68); --line: rgb(255 255 255 / 0.28); --line-strong: rgb(255 255 255 / 0.55); --blue: #ffffff; --blue-light: #ffffff; --on-blue: #1e54e0; --blue-line: rgb(255 255 255 / 0.55); --blue-tint: rgb(255 255 255 / 0.12); background: var(--bg); color: var(--ink); padding: 96px 0; margin-top: 64px; }
.band-blue .eyebrow, .band-blue h2 { color: var(--ink); }
.band-blue h2 .muted { color: var(--muted); }
.band-blue .section-heading p { color: var(--muted); }
.progress-chart { margin: 0; padding: 32px; overflow-x: auto; background: transparent; border: 1px solid var(--line-strong); }
.progress-chart svg { min-width: 760px; }

@keyframes flow { to { stroke-dashoffset: -24; } }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes ring { 0% { r: 8; opacity: 0.9; } 100% { r: 44; opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes gate-a { 0%, 8% { transform: translateX(0); opacity: 1; } 22%, 40% { transform: translateX(150px); opacity: 1; } 46%, 100% { opacity: 0; transform: translateX(150px); } }
@keyframes gate-b { 0%, 50% { transform: translateX(0); opacity: 0; } 54% { opacity: 1; } 70%, 88% { transform: translateX(150px); opacity: 1; } 96%, 100% { opacity: 0; transform: translateX(150px); } }
@keyframes show-a { 0%, 22% { opacity: 0; } 28%, 46% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes show-b { 0%, 70% { opacity: 0; } 76%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes replay { 0%, 15% { transform: translateX(0); } 45%, 75% { transform: translateX(-240px); } 100% { transform: translateX(0); } }
@keyframes blink { 0%, 40% { opacity: 0; } 55%, 80% { opacity: 1; } 100% { opacity: 0; } }
.scene .flow { stroke-width: 1; }
.scene .pulse { animation: pulse 2.4s ease-in-out infinite; }
.scene .ring { animation: ring 3s ease-out infinite; }
.scene .glow { filter: none; }
.scene .draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.4s ease forwards; animation-delay: var(--d, 0s); }
.scene .fade { opacity: 0; animation: fade 0.6s ease forwards; animation-delay: var(--d, 0s); }
.scene .gate-a { animation: gate-a 6s ease-in-out infinite; }
.scene .gate-b { animation: gate-b 6s ease-in-out infinite; opacity: 0; }
.scene .show-a { animation: show-a 6s ease-in-out infinite; opacity: 0; }
.scene .show-b { animation: show-b 6s ease-in-out infinite; opacity: 0; }
.scene .replay { animation: replay 5s ease-in-out infinite; }
.scene .blink { animation: blink 5s ease-in-out infinite; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 80px 0 64px; }
  .price-hero, .two-col, .faq, .interfaces, .contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .plans, .plans.plans-with-free { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-split { grid-template-columns: minmax(0, 1fr); padding: 72px 0 56px; }
  .live-set { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .live-set .live-step:last-child { grid-column: 1 / -1; min-height: 0; border-left: 0; border-top: 1px solid var(--line); }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards, .cards-4, .proof-grid, .lanes, .problem-grid, .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console-body { grid-template-columns: minmax(0, 1fr); }
  .console-agent { border-left: 0; border-top: 1px solid var(--line); }
  .header nav { gap: 22px; }
  .story-timeline { padding-top: 0; padding-left: 36px; }
  .story-line { top: 0; bottom: 0; right: auto; width: 2px; height: auto; transform-origin: top; }
  .story-line.reveal { transform: scaleY(0); }
  .story-line.reveal.in { transform: scaleY(1); }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 640px; }
  .story-step::before { top: 4px; left: -40px; }
  .tenet-pin { gap: 40px; }
  .who { gap: 40px; }
}
/* The header turns into the menu here: the links and the four community icons
   need about 650px next to the brand. */
@media (max-width: 960px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: 14px 0; }
  .header nav { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding-top: 12px; }
  .js .header nav { display: none; }
  .js .header nav.open { display: grid; }
  .js .menu-button { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; font-size: 13px; }
  .menu-button[aria-expanded="true"] span { transform: rotate(45deg); }
  .header nav .nav-console { grid-column: 1 / -1; justify-content: center; }
  .statement { min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); }
}
/* Below this width the longest line would set the statement too small. The
   lines flow as one sentence and wrap to balanced rows. */
@media (max-width: 560px) {
  .statement h1 { margin: 0 0 40px; font-size: clamp(28px, 8.6vw, 40px); text-wrap: balance; }
  .statement h1.rise > * { display: inline; }
  .statement-foot { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 24px; }
  .statement .lead { font-size: 16px; }
}
@media (max-width: 900px) {
  .tenet-pin { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 0; }
  .who { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 56px 0 72px; }
  .who-facts > div { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .container { width: calc(100% - 40px); }
  .pricing-intro { padding: 32px 0 24px; gap: 14px; }
  .pricing-intro p { font-size: 15px; }
  .plans-toolbar { align-items: flex-start; gap: 12px; }
  .plans-toolbar h2 { font-size: 15px; }
  .pricing-currency { gap: 8px; }
  .plans, .plans.plans-with-free { grid-template-columns: minmax(0, 1fr); }
  .plan-head p, .plan-rate, .plan-action p { min-height: 0; }
  .plan-head { gap: 10px; }
  .plan { padding: 20px; }
  .plan-groups { gap: 14px; }
  .pricing-estimate .price-panel { padding: 24px; }
  .pricing-estimate .price-total { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom nav { justify-content: flex-start; }
  .tenets { padding: 8px 0 64px; }
  .stage-step { padding: 24px 16px; }
  .u-recs, .u-embed, .u-versus, .u-pdf-page { grid-template-columns: minmax(0, 1fr); }
  .u-law { height: 420px; columns: 1; }
  .u-parts .u-row { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .u-slabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-row { grid-template-columns: 72px minmax(0, 1fr); }
  .u-map .u-row { grid-template-columns: 48px minmax(0, 1fr) 14px 96px; }
  .u-edge { min-width: 64px; }
  .risk-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .risk-body p { font-size: 15px; }
  h1 { font-size: 40px; }
  .cards, .cards-2, .cards-4, .proof-grid, .lanes, .problem-grid, .notes { grid-template-columns: minmax(0, 1fr); }
  .card-wide { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .card-wide .card-scene { margin: -12px -12px 4px; }
  .hero, .price-hero { padding: 56px 0 40px; }
  .live-top { flex-direction: column; align-items: flex-start; gap: 28px; }
  .live-bar { gap: 18px; min-height: 0; padding: 24px; }
  .live-tabs { padding: 0 12px 0 8px; }
    .live-glyph { width: 44px; height: 44px; font-size: 24px; }
  .live-set { grid-template-columns: minmax(0, 1fr); }
  .live-step, .live-set .live-step:last-child { min-height: 0; border-left: 0; border-top: 1px solid var(--line); }
  .values { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px 0 72px; }
  .band-blue { padding: 64px 0; margin-top: 32px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scene *, .reveal, .mini-graph .mg-edges line, .scene .ex { animation: none !important; transition: none !important; }
  .live-caret { animation: none; }
  .live-tab.playing .live-progress { animation: none; transform: scaleX(1); }
  .reveal { opacity: 1; transform: none; }
  .rise > *, .rise ~ .statement-foot { animation: none; opacity: 1; transform: none; }
  .statement-next span { animation: none; }
  .story-line.reveal { transform: none; }
  .story-icon * { stroke-dashoffset: 0; transition: none; }
  .mark::after { transform: scaleX(1); transition: none; }
  .tenet { --t: 1 !important; }
  .js .stage-step, .js .stage-step.on, .js .stage-step.done { transform: none; transition: none; }
  .u-fan > *, .u-file { transform: none; }
  .u-graph .e.hot { animation: none; }
  .scene .draw { stroke-dashoffset: 0; }
  .scene .fade, .scene .show-b, .scene .gate-b { opacity: 1; }
  .scene .gate-a, .scene .show-a { opacity: 0; }
}


/* The header menus: Product and Solutions. They open on hover and on click. */
.nav-group { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; font: inherit; color: inherit; transition: color 0.15s; }
.nav-trigger svg { width: 9px; height: 9px; transition: transform 0.15s; }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"], .nav-trigger.current { color: var(--ink); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel { position: absolute; top: 100%; left: -18px; z-index: 30; display: none; padding-top: 18px; }
.nav-trigger[aria-expanded="true"] + .nav-panel { display: block; }
.nav-panel-inner { display: grid; gap: 2px; width: 340px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); box-shadow: var(--shadow); }
.header nav .nav-panel a { display: grid; gap: 3px; padding: 10px 12px; border-radius: 6px; white-space: normal; }
.header nav .nav-panel a:hover, .header nav .nav-panel a[aria-current] { background: var(--surface); }
.nav-panel b { font-size: 14px; font-weight: 500; color: var(--ink); }
.nav-panel small { font-size: 12px; line-height: 1.45; color: var(--subtle); }
.nav-panel .nav-all { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); border-radius: 0; }
@media (hover: hover) and (min-width: 961px) {
  .nav-group:hover .nav-panel { display: block; }
  .nav-group:hover .nav-trigger { color: var(--ink); }
}

/* Product and solution pages (src/features.mjs), after the product page of
   origami.chat: a two-line headline, a played product window, a strip of
   three facts, a split section, a grid, three steps and the questions. */
.fp-hero { display: grid; justify-items: start; gap: 26px; padding: 104px 0 80px; }
.fp-hero h1 { max-width: 1040px; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.035em; }
.fp-hero .lead { max-width: 640px; font-size: 17px; }
h1 .muted, h2 .muted { color: var(--muted); }
.fp-show { padding: 88px 0 96px; border-top: 1px solid var(--line); background: var(--bg-2); }
.fp-center { display: grid; justify-items: center; gap: 16px; max-width: 760px; margin: 0 auto 48px; text-align: center; }
.fp-center h2, .fp-heading h2, .fp-copy h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.03em; }
.fp-center p { max-width: 580px; font-size: 16px; color: var(--muted); }
.fp-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fp-strip .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-strip .container > div { display: grid; align-content: start; gap: 8px; padding: 32px 32px 36px; border-left: 1px solid var(--line); }
.fp-strip .container > div:first-child { padding-left: 0; border-left: 0; }
.fp-strip b { font-size: 15px; font-weight: 600; color: var(--ink); }
.fp-strip p { font-size: 14px; color: var(--muted); }
.fp-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; padding: 112px 0; }
.fp-split > .shot-detail { justify-self: start; max-width: 100%; }
.fp-split > .shot-detail img { width: auto; max-width: 100%; }
.fp-copy { display: grid; justify-items: start; gap: 20px; }
.fp-copy > p { max-width: 520px; font-size: 16px; color: var(--muted); }
.fp-bullets { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--body); }
.fp-bullets li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; }
.fp-bullets li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; background: var(--blue); }
.fp-section { padding: 104px 0; border-top: 1px solid var(--line); }
.fp-heading { display: grid; gap: 16px; max-width: 760px; margin-bottom: 48px; }
.fp-heading p { max-width: 580px; font-size: 16px; color: var(--muted); }
.fp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fp-item { display: grid; align-content: start; gap: 12px; padding: 22px 22px 26px; border: 1px solid var(--line); border-radius: 8px; }
.fp-item code { justify-self: start; padding: 4px 8px; border-radius: 4px; background: var(--blue-tint); font: 500 12px/1.3 var(--mono); color: var(--blue-light); }
.fp-item b { font-size: 15px; font-weight: 600; color: var(--ink); }
.fp-item p { font-size: 14px; color: var(--muted); }
.fp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fp-step { display: grid; align-content: start; gap: 12px; }
.fp-step > span { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.fp-step h3 { font-size: 18px; }
.fp-step p { font-size: 14px; color: var(--muted); }
.fp-section.faq { display: grid; }
.fp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fp-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-card { display: grid; align-content: start; gap: 12px; padding: 20px 20px 24px; border: 1px solid var(--line); border-radius: 8px; transition: border-color 0.2s; }
.fp-card:hover { border-color: var(--blue-line); }
.fp-card:hover h3 { color: var(--blue-light); }
.fp-card p { font-size: 14px; color: var(--muted); }
.fp-card .text-link { margin-top: 4px; font-size: 14px; }

@media (max-width: 1280px) and (min-width: 961px) {
  .header nav .nav-social { display: none; }
}
/* Product screenshots (src/shots.mjs): real console captures in a browser
   frame. One step shows at a time; the step buttons under the frame name each
   one, and the active one's line fills while the tour plays. The page shows
   the screenshot of its own theme. */
.shots { display: grid; gap: 16px; min-width: 0; margin: 0; }
.shots-frame { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-2); box-shadow: var(--shadow); }
.shots-bar { display: flex; align-items: center; gap: 16px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 12px/1 var(--mono); color: var(--subtle); }
.shots-dots { display: flex; flex: none; gap: 6px; }
.shots-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.shots-url { flex: 1; max-width: 340px; margin: 0 auto; padding: 5px 12px; border-radius: 6px; background: var(--bg); text-align: center; white-space: nowrap; }
.shots-stage { display: grid; aspect-ratio: 1440 / 900; }
.shot { grid-area: 1 / 1; min-width: 0; opacity: 0; transition: opacity 0.6s ease; }
.shot.on { opacity: 1; }
.shot img, .shot-detail img { display: block; width: 100%; height: auto; }
.shot-dark { display: none !important; }
:root[data-theme="dark"] .shot-light { display: none !important; }
:root[data-theme="dark"] .shot-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .shot-light { display: none !important; }
  :root:not([data-theme]) .shot-dark { display: block !important; }
}
.shots-steps { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 24px; }
.shots-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 14px 0 0; border: 0; border-top: 2px solid var(--line); background: none; font: 13px/1.45 var(--mono); color: var(--subtle); text-align: left; transition: color 0.15s; }
.shots-step i { font-style: normal; font-size: 11px; color: var(--blue); }
.shots-step:hover, .shots-step[aria-pressed="true"] { color: var(--ink); }
.shots-progress { position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.shots-step[aria-pressed="true"] .shots-progress { transform: scaleX(1); }
.shots-step.playing .shots-progress { animation: play-progress 5s linear forwards; }
.shots-hero { margin-top: 8px; }
.shot-detail { display: grid; gap: 12px; margin: 0; }
.shot-detail img { border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); }
.shot-detail figcaption { font-size: 13px; color: var(--subtle); }

@media (max-width: 1100px) {
  .fp-split { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 88px 0; }
  .fp-grid, .fp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header nav { gap: 22px; }
}
@media (max-width: 960px) {
  .nav-group { grid-column: 1 / -1; }
  .nav-trigger { pointer-events: none; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--subtle); }
  .nav-trigger svg { display: none; }
  .nav-panel { position: static; display: block; padding: 8px 0 4px; }
  .nav-panel-inner { grid-template-columns: 1fr 1fr; width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
  .header nav .nav-panel a { padding: 6px 0; }
  .nav-panel small { display: none; }
  .header nav .nav-panel .nav-all { grid-column: 1 / -1; margin-top: 0; padding-top: 6px; border-top: 0; }
}
@media (max-width: 860px) {
  .fp-strip .container { grid-template-columns: minmax(0, 1fr); }
  .fp-strip .container > div { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
  .fp-strip .container > div:first-child { border-top: 0; }
  .fp-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .shots-steps { grid-auto-flow: row; gap: 0; }
  .shots-step { padding: 10px 0; border-top-width: 1px; }
  .shots-progress { top: -1px; height: 1px; }
  .shots-bar { height: 30px; }
  .shots-url { display: none; }
  .fp-hero { padding: 64px 0 48px; }
  .fp-show, .fp-section { padding: 64px 0; }
  .fp-split { padding: 64px 0; }
  .fp-grid, .fp-cards, .fp-cards-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .shot { transition: none; }
  .shots-step.playing .shots-progress { animation: none; }
}
/* A step's part of a screenshot: the box (--x, --y, --w, --h) of the
   1440 × 900 page fills the frame's width from its top left corner. The
   frames share one shape, so the steps line up; a short box shows a little
   more of the page under it. */
.shot-focus { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); }
.shot-focus img { position: absolute; top: 0; left: 0; width: calc(100% * 1440 / var(--w)); max-width: none; height: auto; transform: translate(calc(-100% * var(--x) / 1440), calc(-100% * var(--y) / 900)); }
/* A card thumbnail: the screenshot, enlarged, with the console's side bar
   (248 of 1440 pixels) moved out of view. */
.shot-thumb { overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); }
.shot-thumb img { display: block; width: 160%; max-width: none; height: auto; transform: translateX(-17.2%); }

/* Figures (src/figures.mjs). A figure shows its last frame until site.mjs adds
   .play when it comes into view; then its parts arrive in order, each after
   its --d delay. Under reduced motion it keeps its last frame. */
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fx-grow { transform-box: fill-box; transform-origin: 50% 100%; }
.fx-pop { transform-box: fill-box; transform-origin: center; }
.js [data-fig]:not(.play) :is(.fx-in, .fx-pop, .fx-rise) { opacity: 0; }
.js [data-fig]:not(.play) .fx-draw { stroke-dashoffset: 1; }
.js [data-fig]:not(.play) .fx-grow { transform: scaleY(0); }
.js [data-fig]:not(.play) .fx-grow-x { transform: scaleX(0); }
.js [data-fig].play .fx-in { animation: fx-in 0.6s ease var(--d, 0s) both; }
.js [data-fig].play .fx-pop { animation: fx-pop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) var(--d, 0s) both; }
.js [data-fig].play .fx-rise { animation: fx-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s) both; }
.js [data-fig].play .fx-draw { animation: fx-draw 0.7s ease var(--d, 0s) both; }
.js [data-fig].play .fx-draw.slow { animation-duration: 1.4s; }
.js [data-fig].play .fx-grow { animation: fx-grow 0.6s ease var(--d, 0s) both; }
.js [data-fig].play .fx-grow-x { animation: fx-grow-x 0.8s ease var(--d, 0s) both; }
@keyframes fx-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fx-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes fx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fx-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes fx-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-fig] *, .js [data-fig].play * { animation: none !important; }
  .js [data-fig] :is(.fx-in, .fx-pop, .fx-rise) { opacity: 1 !important; transform: none !important; }
  .js [data-fig] .fx-draw { stroke-dashoffset: 0 !important; }
  .js [data-fig] :is(.fx-grow, .fx-grow-x) { transform: none !important; }
}

/* The landing page: a large headline, the use-case tabs, the stack drawing
   with its layers named (a narrow copy and a list on a phone), then one use
   case end to end (src/pipelines.mjs, "Pipeline"). */
.lp-hero { padding: 72px 0 32px; }
.lp-h1 { margin: 0 0 44px; font-size: clamp(40px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.045em; }
.lp-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.lp-foot .lead { max-width: 560px; font-size: 17px; }
.lp-art { margin-top: 56px; }
.lp-tabs { margin: 0 0 32px; border-bottom: 1px solid var(--line); }
.lp-tabs .live-tab:first-child { padding-left: 0; }
.lp-tabs .live-tab:first-child .live-progress { left: 0; }
[data-fig] .ex { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
[data-fig] .ex.on { opacity: 1; visibility: visible; transition: opacity 0.4s ease 0.12s; }
.lp-art .fig-stack-narrow, .lp-legend { display: none; }
.lp-legend { margin: 24px 0 0; padding: 0; list-style: none; }
.lp-legend li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.lp-legend b { color: var(--ink); font-weight: 600; }
.lp-legend span { color: var(--muted); }
@media (max-width: 960px) {
  .lp-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .lp-art .fig-stack { display: none; }
  .lp-art .fig-stack-narrow, .lp-legend { display: block; }
  .lp-hero { padding-top: 48px; }
  .lp-h1 { margin-bottom: 32px; }
}

/* Pipeline (src/pipelines.mjs): one use case end to end, from its sources to
   the experience a team ships. Each block that differs by use case shows
   only while its use case is selected, and arrives in turn. */
.pl .lp-tabs { margin-bottom: 40px; }
.pl .ex:not(.on) { display: none; }
.pl .ex.on { animation: pl-in 0.5s ease both; }
@keyframes pl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pl-n { display: block; margin-bottom: 14px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.pl-sources, .pl-engine, .pl-path, .pl-types { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pl-sources li { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 3px; font-size: 13px; color: var(--ink); animation: pl-in 0.4s ease var(--d, 0s) both; }
.pl-engine { gap: 0; }
.pl-engine li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px dashed var(--line); font-size: 13px; color: var(--muted); animation: pl-in 0.4s ease var(--d, 0s) both; }
.pl-engine li::before { content: "✓"; position: absolute; left: 0; top: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: var(--on-blue); font-size: 10px; line-height: 18px; text-align: center; }
.pl-q { margin: 0 0 12px; font-size: 14px; color: var(--ink); }
.pl-q span { color: var(--blue); font-weight: 600; }
.pl-uses { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.pl-uses li { padding: 3px 8px; border: 1px solid var(--blue-line); border-radius: 999px; font-size: 11px; color: var(--blue); }
.pl-path { gap: 10px; }
.pl-path li { position: relative; display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 3px; }
.pl-path li + li::before { content: ""; position: absolute; left: 18px; top: -11px; height: 10px; border-left: 1px solid var(--blue); }
.pl-path b { font-size: 13px; font-weight: 500; color: var(--ink); }
.pl-path small { font-size: 11px; color: var(--subtle); }
.pl-path li.hit { border-color: var(--blue); background: var(--blue); }
.pl-path li.hit b, .pl-path li.hit small { color: var(--on-blue); }
.xp { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); }
.xp-bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; }
.xp-bar b { font-weight: 600; color: var(--ink); }
.xp-bar span { color: var(--subtle); }
.xp-body { display: grid; gap: 10px; padding: 14px; font-size: 13px; line-height: 1.5; }
.xp-body p { margin: 0; }
.xp-ask { justify-self: end; max-width: 88%; padding: 8px 12px; border-radius: 10px 10px 2px 10px; background: var(--bg-2); color: var(--ink); }
.xp-say { max-width: 94%; padding: 8px 12px; border: 1px solid var(--blue-line); border-radius: 10px 10px 10px 2px; background: var(--blue-tint); color: var(--ink); }
.xp-ask b, .xp-say b { display: block; font-size: 11px; color: var(--blue); }
.xp-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-cites span { padding: 3px 8px; border: 1px solid var(--blue-line); border-radius: 999px; font-size: 11px; color: var(--blue); }
.xp-flag { padding: 8px 12px; border-left: 3px solid var(--blue); background: var(--blue-tint); font-weight: 600; color: var(--ink); }
.xp-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.xp-button { padding: 6px 12px; border-radius: 4px; background: var(--blue); font-size: 12px; font-weight: 600; color: var(--on-blue); }
.xp-note { font-size: 11px; color: var(--subtle); }
.xp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.xp-table th { padding: 0 8px 6px 0; text-align: left; font-weight: 500; color: var(--subtle); }
.xp-table td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line); color: var(--muted); }
.xp-table tr.hit td { font-weight: 600; color: var(--ink); }
.xp-table tr.hit td:last-child { color: var(--blue); }
.xp-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.xp-facts dt { color: var(--subtle); }
.xp-facts dd { margin: 0; color: var(--ink); }
/* The strip: four columns, a dot runs along each link. */
.pl-strip { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1.1fr) 44px minmax(0, 1.5fr); align-items: start; }
.pl-col { animation: pl-in 0.5s ease var(--d, 0s) both; }
.pl-link { position: relative; height: 1px; margin-top: 64px; background: var(--line-strong); }
.pl-link i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pl-run 0.7s ease-in-out var(--d, 0s) both; }
@keyframes pl-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 1; } }
.pl a.pl-n:hover { color: var(--blue-light); }
.xp-search { padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); }
.xp-facets { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-facets span { padding: 3px 8px; border-radius: 999px; background: var(--blue-tint); font-size: 11px; color: var(--blue); }
.xp-results { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.xp-results li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; color: var(--muted); }
.xp-results li b { font-weight: 600; color: var(--ink); }
.xp-results li.hit { border-color: var(--blue); }
@media (prefers-reduced-motion: reduce) {
  .pl *, .pl .ex.on { animation: none !important; }
}
@media (max-width: 1100px) {
  .pl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .pl-link { display: none; }
}
@media (max-width: 720px) {
  .pl-strip { grid-template-columns: minmax(0, 1fr); }
}