/* Footeon — styles.css
   Pure CSS. No framework. Every value from tokens.css.
   FLAT: one canvas under every section. Sections are separated by whitespace
   alone; depth lives only inside components — a hairline and one tonal step. */

/* ============================ Base ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
  /* Bodoni Moda's thins vanish at display optical sizes on a dark ground;
     pinning opsz to a text value keeps every stroke substantial. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 24;
  margin: 0 0 var(--space-5);
}
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.015em; font-variation-settings: normal; }
h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: 1.35; letter-spacing: -0.01em; font-variation-settings: normal; }
p  { margin: 0 0 var(--space-4); max-width: 70ch; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.15em; }
li { margin-bottom: var(--space-2); }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }
b, strong { color: var(--text-primary); font-weight: 600; }
::selection { background: var(--accent); color: var(--text-on-accent); }

.eyebrow, .chip, .node__label, .log, .trace, code, pre, .mono, .ts, .kbd {
  font-family: var(--font-mono);
}
.metric, .ts, .num, .price__amount { font-variant-numeric: tabular-nums; }
code { font-size: 0.92em; color: var(--text-primary); }

/* Retained for any caption that is not a heading kicker. */
.eyebrow {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-secondary); max-width: 60ch; letter-spacing: -0.005em; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }
.note { font-size: var(--fs-small); color: var(--text-muted); margin: var(--space-8) 0 0; max-width: 90ch; }
.note--center { text-align: center; margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.pad-0 { padding: 0; }
.link-inherit { color: inherit; text-decoration: none; }
.link-inherit:hover { color: var(--accent-hover); }
.tone-success { color: var(--st-success); }
.measure { max-width: 72ch; }
.list-reset { list-style: none; padding: 0; margin: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 200;
  background: var(--accent); color: var(--text-on-accent);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  font-weight: 600; text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); color: var(--text-on-accent); }

/* ============================ Layout ============================ */
/* One measure for every section so left edges line up down the page. */
.container {
  width: 100%; max-width: var(--container-xl);
  margin-inline: auto; padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-xl); }
.container--narrow { max-width: var(--container-md); }

.section { padding-block: var(--section-y); border: 0; position: relative; background: var(--bg-base); }
.section--lg { padding-block: var(--section-y-lg); }
.section--alt,
.section--deep { background: var(--bg-base); }
.section + .section { padding-top: 0; }
.section + .section.section--keep-top { padding-top: var(--section-y); }

.section__head { max-width: 46rem; margin-bottom: clamp(36px, 4.5vw, 64px); }
.section__head h2 { margin-bottom: var(--space-4); }
.section__head .lead { margin-bottom: 0; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center p { margin-inline: auto; }

.grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--grid-cols), 1fr); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 5vw, 80px); row-gap: var(--space-10); }
.split h2 { max-width: 18ch; }
.workspace { display: grid; gap: var(--panel-gap); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.span-8 { grid-column: span 8; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
.stack > * + * { margin-top: var(--stack); }
.panels { display: grid; gap: var(--panel-gap); }
.flow > * + * { margin-top: var(--space-6); }

.hero__grid > *, .split > *, .cols-2 > *, .cols-3 > *, .cols-4 > *,
.workspace > *, .bento > *, .grid > * { min-width: 0; }

/* ============================ Surfaces ============================ */
.panel {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--panel-pad);
}
.panel--flush { padding: 0; overflow: hidden; }
.panel--raised { background: var(--surface-2); }
.panel--roomy { padding: clamp(24px, 3vw, 48px); }
.panel > h3:first-child, .panel > .card__ico + h3 { margin-top: 0; }
.panel h3 { margin-bottom: var(--space-3); }
.panel p { font-size: var(--fs-small); line-height: 1.65; }
.panel p.lead { font-size: var(--fs-lead); }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }
.panel .list-check { margin-top: var(--space-5); }
.panel--hover { transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.panel--hover:hover { border-color: var(--border-strong); background: var(--surface-2); }
.panel--hover:has(a:only-of-type) { cursor: pointer; }

/* Card grids: equal-height cards whose trailing meta sits on the baseline */
.grid > .panel, .grid > article.panel { display: flex; flex-direction: column; }
.grid > .panel > :last-child:is(.btn, .mono, .small.muted, .result) { margin-top: auto; }
.grid > .panel > .list-check:last-child { margin-bottom: 0; }

.console {
  background: var(--canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.console__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
  min-width: 0;
}
.console__bar > span:not(.dots):not(.spacer) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.console__bar > span:last-child { flex: none; }
.console__bar .dots { display: inline-flex; gap: 6px; flex: none; }
.console__bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); display: block; }
.console__bar .spacer { flex: 1; }
.console__body { padding: var(--space-5); position: relative; }
.console__body > * { position: relative; }
.console__foot {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-1);
}
.console__foot > div { padding: var(--space-4) var(--space-5); border-left: 1px solid var(--border-subtle); }
.console__foot > div:first-child { border-left: 0; }
.console__foot dt { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.console__foot dd { margin: var(--space-1) 0 0; color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.console__foot dd.warn { color: var(--st-approve); }
.console__foot dd.good { color: var(--st-success); }

/* ============================ Buttons ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.005em;
  padding: 10px 18px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.btn-primary:active { background: var(--accent-press); }
.btn-secondary { background: var(--surface-1); color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-ghost:hover { color: var(--text-primary); background: var(--surface-2); }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: var(--fs-small); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.kbd {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--fs-micro); color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 1px 6px; line-height: 1.5;
}

/* ============================ Status chips ============================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid transparent; white-space: nowrap; line-height: 1.5;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip .ico { font-size: 1em; line-height: 1; }
.chip--queued  { color: var(--st-queued);  background: var(--st-queued-soft);  border-color: var(--st-queued-soft); }
.chip--running { color: var(--st-running); background: var(--st-running-soft); border-color: var(--st-running-soft); }
.chip--waiting { color: var(--st-waiting); background: var(--st-waiting-soft); border-color: var(--st-waiting-soft); }
.chip--approve { color: var(--st-approve); background: var(--st-approve-soft); border-color: var(--st-approve-soft); }
.chip--success { color: var(--st-success); background: var(--st-success-soft); border-color: var(--st-success-soft); }
.chip--failed  { color: var(--st-failed);  background: var(--st-failed-soft);  border-color: var(--st-failed-soft); }
.chip--blocked { color: var(--st-blocked); background: var(--st-blocked-soft); border-color: var(--st-blocked-soft); }
.chip--neutral { color: var(--text-secondary); background: var(--surface-2); border-color: var(--border-default); }
.chip--running .dot { animation: pulse var(--pulse) ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.legend li { margin: 0; }

/* ============================ Header / nav ============================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-base);
}
.site-header.is-scrolled { background: var(--bg-base); }
.nav {
  display: flex; align-items: center; gap: var(--space-8);
  min-height: 68px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-primary); text-decoration: none;
  font-family: var(--font-display); font-variation-settings: "opsz" 24;
  font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1;
}
.brand:hover { color: var(--text-primary); }
.brand__mark { width: 28px; height: 28px; flex: none; }
.brand__mark .tread { fill: var(--accent); }
.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__links > li { margin: 0; position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; min-height: 36px; line-height: 1.25;
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--fs-small); font-weight: 500;
  border-radius: var(--radius-md);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--text-primary); background: var(--surface-1); }
.nav__link[aria-current="page"] { color: var(--text-primary); }
.nav__link .caret { width: 10px; height: 10px; flex: none; opacity: 0.7; transition: transform var(--dur-fast) var(--ease-out); }
.nav__link[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav__spacer { flex: 1; }
.nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.nav__cmd { color: var(--text-muted); }

.megamenu {
  position: absolute; top: calc(100% + 10px); left: -8px; z-index: 110;
  width: 560px;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-3);
  display: none;
}
.megamenu[data-open="true"] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); animation: menuIn var(--dur-base) var(--ease-out); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.megamenu > div { padding: var(--space-2); }
.megamenu h4 { font-size: var(--fs-micro); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-family: var(--font-mono); margin: var(--space-1) var(--space-3) var(--space-2); }
.megamenu ul { list-style: none; margin: 0; padding: 0; }
.megamenu li { margin: 0; }
.megamenu a {
  display: block; padding: 10px var(--space-3); border-radius: var(--radius-md);
  color: var(--text-secondary); text-decoration: none; font-size: var(--fs-small); line-height: 1.4;
}
.megamenu a:hover { background: var(--surface-2); color: var(--text-primary); }
.megamenu a strong { display: block; color: var(--text-primary); font-weight: 600; }
.megamenu a span { color: var(--text-muted); font-size: 0.8125rem; }

.nav__toggle { display: none; }

.mobile-nav {
  position: fixed; inset: 0; z-index: 150;
  background: var(--bg-base);
  padding: var(--space-3) var(--gutter) var(--space-10);
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin-bottom: var(--space-4); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
.mobile-nav li { margin: 0; }
.mobile-nav a:not(.btn):not(.brand) {
  display: flex; align-items: center; min-height: 44px;
  color: var(--text-primary); text-decoration: none; font-size: var(--fs-body-lg);
}
.mobile-nav a:not(.btn):not(.brand):hover { color: var(--accent); }
.mobile-nav .mobile-nav__group { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: var(--space-6) 0 var(--space-1); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.mobile-nav .btn-row { margin-top: var(--space-8); }
.mobile-nav .btn-row .btn { flex: 1; }

/* Breadcrumbs */
.breadcrumb { padding-top: var(--space-6); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-size: var(--fs-micro); font-family: var(--font-mono); color: var(--text-muted); }
.breadcrumb li { margin: 0; display: flex; gap: var(--space-2); align-items: center; }
.breadcrumb li + li::before { content: "/"; color: var(--text-faint); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-primary); }

/* ============================ Hero ============================ */
.hero { padding-block: clamp(56px, 8vw, 120px) var(--section-y); }
.hero__grid { display: grid; gap: clamp(32px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
.hero h1, .hero__title { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.035em; }
.hero .lead { margin-bottom: var(--space-8); }

/* Home hero: headline and pitch on one row, the product underneath at full width */
.hero__intro {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(32px, 5vw, 88px); row-gap: var(--space-6);
  align-items: end; margin-bottom: clamp(40px, 5vw, 72px);
}
.hero__intro h1 { margin: 0; max-width: 11ch; }
.hero__intro .lead { margin-bottom: var(--space-6); }
.hero__visual .graph { min-width: 720px; }

/* Interior page hero */
.page-hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(32px, 5vw, 88px); align-items: end;
}
.page-hero > h1 { grid-column: 1; grid-row: 1 / span 2; margin: 0; max-width: 14ch; }
.page-hero > .lead { grid-column: 2; grid-row: 1; margin-bottom: var(--space-6); }
.page-hero > .btn-row { grid-column: 2; grid-row: 2; }
.page-hero > .hero__meta { grid-column: 1 / -1; grid-row: 3; }
.page-hero--center { display: block; text-align: center; }
.page-hero--center > h1 { max-width: 18ch; margin: 0 auto var(--space-5); }
.page-hero--center > .lead { margin-inline: auto; }
.page-hero--center > .btn-row { justify-content: center; }

/* Spec strip: short facts under a hero, joined by hairlines */
.hero__meta {
  list-style: none; padding: 0;
  display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;
  margin: clamp(40px, 5vw, 72px) 0 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface-1);
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
  overflow: hidden;
}
.hero__meta li { margin: 0; padding: var(--space-4) var(--space-5); border-left: 1px solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-3); }
.hero__meta li:first-child { border-left: 0; }
.hero__meta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* ============================ Agent graph ============================ */
.graph { width: 100%; height: auto; display: block; }
.graph__wrap { overflow-x: auto; scrollbar-width: thin; }
.node__box { fill: var(--node-bg); stroke: var(--node-border); stroke-width: 1; rx: 8; }
.node.is-active .node__box { stroke: var(--node-active); stroke-width: 2; }
.node.is-done .node__box { fill: var(--surface-2); }
.node.is-failed .node__box { stroke: var(--st-failed); }
.node__label { fill: var(--text-primary); font-size: 12px; font-weight: 600; font-family: var(--font-mono); }
.node__sub { fill: var(--text-muted); font-size: 10px; font-family: var(--font-mono); }
.node__status { font-size: 9px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.06em; }
.node__glyph { font-size: 11px; font-family: var(--font-mono); }
.node:focus-visible .node__box { stroke: var(--ring); stroke-width: 2; }
.node:focus { outline: none; }
.edge { stroke: var(--edge); stroke-width: 1.5; fill: none; }
.edge--dashed { stroke-dasharray: 6 6; }
.edge.is-active { stroke: var(--edge-active); stroke-width: 2; }
.graph-legend { margin-top: var(--space-4); }

.node-btn { cursor: pointer; }
.node-btn .node__box { transition: stroke var(--dur-fast) var(--ease-out); }
.node-btn:hover .node__box { stroke: var(--accent); }

/* Text equivalent of a graph: available, collapsed by default */
.graph-table { margin-top: var(--space-4); }
.graph-table > summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); cursor: pointer; min-height: 32px; list-style: none;
}
.graph-table > summary::-webkit-details-marker { display: none; }
.graph-table > summary::before { content: "+"; color: var(--accent); width: 1ch; }
.graph-table[open] > summary::before { content: "–"; }
.graph-table > summary:hover { color: var(--text-primary); }
.graph-table > .table-wrap { margin-top: var(--space-3); }

/* ============================ Run timeline ============================ */
.run { list-style: none; margin: 0; padding: 0; position: relative; }
.run > li {
  position: relative; margin: 0; padding: 0 0 var(--space-6) var(--space-8);
}
.run > li:last-child { padding-bottom: 0; }
.run > li::before {
  content: ""; position: absolute; left: 9px; top: 24px; bottom: 4px;
  width: 1px; background: var(--border-default);
}
.run > li:last-child::before { display: none; }
.run__dot {
  position: absolute; left: 3px; top: 6px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface-3); border: 2px solid var(--border-default);
}
.run__dot--running { background: var(--st-running); border-color: var(--st-running); }
.run__dot--success { background: var(--st-success); border-color: var(--st-success); }
.run__dot--failed  { background: var(--st-failed);  border-color: var(--st-failed); }
.run__dot--approve { background: var(--st-approve); border-color: var(--st-approve); }
.run__dot--waiting { background: var(--st-waiting); border-color: var(--st-waiting); }
.run__dot--queued  { background: var(--surface-3); border-color: var(--st-queued); }
.run__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.run__idx { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); }
.run__name { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); }
.run__dur { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); margin-left: auto; }
.run__detail { font-size: var(--fs-small); color: var(--text-secondary); margin: var(--space-2) 0 0; max-width: 72ch; }
.run details { margin-top: var(--space-2); }
.run summary { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); cursor: pointer; min-height: 24px; }
.run summary:hover { color: var(--text-primary); }
.run details p { font-size: var(--fs-small); margin: var(--space-2) 0 0; }

/* ============================ Tool-call stream ============================ */
.stream { margin: 0; padding: 0; list-style: none; max-height: 360px; overflow-y: auto; font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.6; }
.stream li { display: flex; gap: var(--space-3); padding: var(--log-line-y) 0; margin: 0; align-items: baseline; }
.stream .ts { color: var(--text-faint); font-size: var(--fs-micro); flex: none; }
.stream .dir { color: var(--text-muted); flex: none; }
.stream .msg { color: var(--text-secondary); word-break: break-word; min-width: 0; }
.stream .msg b { color: var(--text-primary); font-weight: 600; }
.stream li.ok .msg { color: var(--text-secondary); }
.stream li.err .msg { color: var(--st-failed); }
.stream__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.stream__controls .small { margin: 0; }

/* ============================ Reasoning trace ============================ */
.trace { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--fs-mono); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-1); overflow: hidden; }
.trace > li { margin: 0; border-top: 1px solid var(--border-subtle); }
.trace > li:first-child { border-top: 0; }
.trace details { padding: var(--space-4) var(--space-5); }
.trace summary { cursor: pointer; color: var(--text-primary); display: flex; gap: var(--space-4); align-items: baseline; min-height: 28px; list-style: none; }
.trace summary::-webkit-details-marker { display: none; }
.trace summary:hover { color: var(--accent-hover); }
.trace summary .tag { color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-micro); flex: none; min-width: 11ch; }
.trace p { font-size: var(--fs-mono); color: var(--text-muted); margin: var(--space-2) 0 0; padding-left: calc(11ch + var(--space-4)); max-width: none; }

/* ============================ Inspector ============================ */
.inspector dl, dl.inspector { margin: 0; font-family: var(--font-mono); font-size: var(--fs-small); }
.inspector dt { color: var(--text-muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--space-4); }
.inspector dd { margin: var(--space-1) 0 0; color: var(--text-primary); }
.inspector dt:first-child, .inspector > div > dt:first-child { margin-top: 0; }

/* ============================ Metrics ============================ */
/* One framed row; cells joined by hairlines, which wrap cleanly at any column count. */
.metrics {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface-1); overflow: hidden;
}
.metrics > li, .metrics > li.panel {
  margin: 0 -1px -1px 0;
  background: transparent; border: 0; border-radius: 0;
  border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2.2vw, 32px);
}
.metric {
  display: block; font-family: var(--font-display); font-variation-settings: "opsz" 24;
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--text-primary);
}
.metric__label { display: block; margin-top: var(--space-3); font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); max-width: 28ch; }

/* ============================ Feature / cards ============================ */
.card__ico {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 24px; padding: 0 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  margin-bottom: var(--space-5);
}
.list-check { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.list-check li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-2); }
.list-check li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 5px; border-left: 1.5px solid var(--st-success); border-bottom: 1.5px solid var(--st-success); transform: rotate(-45deg); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { margin-bottom: var(--space-3); }
.list-plain li:has(> .chip:first-child) { display: flex; align-items: baseline; gap: var(--space-3); }
.list-plain li > .chip:first-child { flex: none; min-width: 11ch; justify-content: center; }

.bento { display: grid; gap: var(--panel-gap); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bento > * { grid-column: span 2; }
.bento > .bento--wide { grid-column: span 4; }
.bento > .bento--full { grid-column: span 6; }

/* Spec rows: a list of named items with detail and figures, joined by hairlines */
.spec-rows { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; border-top: 1px solid var(--border-default); }
.spec-rows > li {
  margin: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-4) clamp(24px, 3vw, 48px); align-items: baseline;
  padding: var(--space-6) 0; border-bottom: 1px solid var(--border-default);
}
.spec-rows h3 { margin: 0; display: flex; gap: var(--space-3); align-items: baseline; }
.spec-rows h3 .mono { font-size: var(--fs-micro); color: var(--accent); font-weight: 400; letter-spacing: 0; }
.spec-rows p { margin: 0; font-size: var(--fs-small); }
.spec-rows ul { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-primary); }
.spec-rows ul li { margin: 0 0 var(--space-1); }

/* ============================ Shoe anatomy figure ============================ */
.anatomy { margin: 0; }
.anatomy svg { display: block; width: 100%; height: auto; }
.anatomy .ln { fill: none; stroke: var(--text-primary); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.anatomy .ln-soft { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.anatomy .ln-accent { fill: none; stroke: var(--accent); stroke-width: 2; }
.anatomy .fill-1 { fill: var(--surface-2); }
.anatomy .fill-2 { fill: var(--surface-3); }
.anatomy .fill-accent { fill: var(--accent); }
.anatomy .fill-warn { fill: var(--st-approve); }
.anatomy .lbl { fill: var(--text-primary); font-family: var(--font-mono); font-size: 12px; }
.anatomy .lbl-sub { fill: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; }
.anatomy .pin { fill: var(--bg-base); stroke: var(--accent); stroke-width: 1.5; }
.anatomy .pin-n { fill: var(--accent); font-family: var(--font-mono); font-size: 10px; text-anchor: middle; }
.anatomy figcaption { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }

/* ============================ Logos ============================ */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.logos li { margin: 0 -1px -1px 0; min-height: 88px; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4); border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-display); font-variation-settings: "opsz" 24; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-muted); }
.logos__caption { font-size: var(--fs-small); color: var(--text-muted); text-align: center; margin: 0 auto var(--space-6); }

/* ============================ Testimonials ============================ */
.quote { margin: 0; }
.quote blockquote { margin: 0 0 var(--space-6); color: var(--text-primary); font-family: var(--font-display); font-variation-settings: "opsz" 24; font-size: 1.25rem; line-height: 1.45; letter-spacing: -0.01em; }
.quote figcaption { margin-top: auto; }
.quote cite { font-style: normal; font-size: var(--fs-small); color: var(--text-muted); display: block; }
.quote cite b { display: block; color: var(--text-primary); font-weight: 600; }
.quote .result { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--st-success); }

/* ============================ Table ============================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-1); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
table.data caption { text-align: left; color: var(--text-muted); font-size: var(--fs-micro); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-4) var(--space-5) var(--space-2); }
table.data th, table.data td { text-align: left; padding: 14px var(--space-5); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data thead th { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400; white-space: nowrap; border-bottom-color: var(--border-default); }
table.data tbody tr { background: transparent; transition: background-color var(--dur-fast) var(--ease-out); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody th { color: var(--text-primary); font-weight: 600; }
table.data td { color: var(--text-secondary); }
table.data td.num { font-family: var(--font-mono); color: var(--text-muted); }

/* ============================ Pricing ============================ */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: var(--space-6) 0; padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-subtle); max-width: none; }
.price__amount { font-family: var(--font-display); font-variation-settings: "opsz" 24; font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); }
.price__unit { font-size: var(--fs-micro); color: var(--text-muted); font-family: var(--font-mono); }
.grid > .panel:has(.price) .list-check { margin-bottom: var(--space-8); }
.grid > .panel:has(.price) > .btn:last-child { margin-top: auto; }
.tier--featured { background: var(--surface-2); border-color: var(--accent); position: relative; }
.tier__badge { position: absolute; top: var(--panel-pad); right: var(--panel-pad); display: inline-block; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: var(--radius-pill); margin-bottom: var(--space-3); }

/* ============================ FAQ / accordion ============================ */
/* A left-aligned FAQ sits beside its heading rather than under it */
.container:has(> .section__head:not(.section__head--center) + .faq) {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 96px); align-items: start;
}
.container:has(> .section__head:not(.section__head--center) + .faq) > .section__head { position: sticky; top: 100px; }
.container:has(> .section__head:not(.section__head--center) + .faq) > .faq { max-width: none; }
.container:has(> .section__head:not(.section__head--center) + .faq) > :not(.section__head):not(.faq) { grid-column: 1 / -1; }
.faq { list-style: none; margin: 0; padding: 0; max-width: var(--container-md); border-top: 1px solid var(--border-default); }
.section__head--center + .faq { margin-inline: auto; }
.faq li { margin: 0; border-bottom: 1px solid var(--border-default); }
.faq__q {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
  background: transparent; color: var(--text-primary);
  border: 0; border-radius: 0;
  padding: var(--space-5) 0; min-height: 44px;
  font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q:hover { color: var(--accent-hover); }
.faq__q .sign { color: var(--text-muted); font-family: var(--font-mono); flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: 50%; font-size: 0.875rem; line-height: 1; }
.faq__q[aria-expanded="true"] .sign { color: var(--accent); border-color: var(--accent); }
.faq__a { padding: 0 var(--space-12) var(--space-6) 0; }
.faq__a p { margin: 0; color: var(--text-secondary); }
.faq__a[hidden] { display: none; }

/* ============================ Code / terminal ============================ */
pre.code { margin: 0; padding: var(--space-5); overflow-x: auto; font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); }
pre.code .k { color: #c9a0f0; } pre.code .s { color: #9fdf9a; } pre.code .c { color: var(--text-faint); } pre.code .f { color: var(--accent); }
.term { font-family: var(--font-mono); font-size: var(--fs-mono); }
.term .prompt { color: var(--st-success); }
.term .out { color: var(--text-muted); display: block; }

/* ============================ CTA ============================ */
.cta { text-align: center; }
.cta h1, .cta h2 { max-width: 16ch; margin-inline: auto; }
.cta h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
.cta p { margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: var(--space-8); }

/* ============================ Footer ============================ */
.site-footer { background: var(--bg-base); padding-block: var(--space-16) var(--space-10); }
.footer__grid { display: grid; gap: var(--space-10) var(--space-8); grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
.footer__grid h2 { font-size: var(--fs-micro); font-weight: 400; font-family: var(--font-mono); font-variation-settings: normal; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-4); }
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: var(--space-3); }
.footer__grid a:not(.brand) { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-small); }
.footer__grid a:not(.brand):hover { color: var(--text-primary); }
.footer__about { margin-top: var(--space-4); max-width: 34ch; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); font-size: var(--fs-micro); color: var(--text-muted); font-family: var(--font-mono); }
.footer__bottom .spacer { flex: 1; }
.footer__status { display: inline-flex; align-items: center; gap: 8px; color: var(--st-success); text-decoration: none; font-size: var(--fs-small); }
.footer__status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.footer__grid a.footer__status { color: var(--st-success); }

/* ============================ Command palette ============================ */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 6, 10, 0.78);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(48px, 12vh, 140px) var(--space-4) var(--space-4);
}
.palette-backdrop[hidden] { display: none; }
.palette {
  width: 100%; max-width: 620px;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl); overflow: hidden;
  animation: paletteIn var(--dur-base) var(--ease-out);
}
@keyframes paletteIn { from { opacity: 0; transform: translateY(-8px) scale(0.99); } to { opacity: 1; transform: none; } }
.palette__input {
  width: 100%; border: 0; border-bottom: 1px solid var(--border-subtle); background: var(--surface-1); color: var(--text-primary);
  font-family: var(--font-sans); font-size: var(--fs-body-lg); padding: var(--space-5);
}
.palette__input::placeholder { color: var(--text-muted); }
.palette__input:focus { outline: none; }
.palette__list { list-style: none; margin: 0; padding: var(--space-2); max-height: 380px; overflow-y: auto; }
.palette__group { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: var(--space-3) var(--space-3) var(--space-1); margin: 0; }
.palette__opt {
  display: flex; align-items: center; gap: var(--space-3); margin: 0;
  padding: var(--space-3); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: var(--fs-small); cursor: pointer; min-height: 44px;
}
.palette__opt .ico { font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-micro); }
.palette__opt .hint { margin-left: auto; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-micro); }
.palette__opt[aria-selected="true"], .palette__opt:hover { background: var(--surface-2); color: var(--text-primary); }
.palette__foot { display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--surface-2); border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }
.palette__empty { padding: var(--space-6); color: var(--text-muted); font-size: var(--fs-small); text-align: center; }

/* ============================ Forms ============================ */
.field { display: block; margin-bottom: var(--space-5); }
.field > span { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-2); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg-base); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 10px var(--space-4); font-family: var(--font-sans); font-size: var(--fs-body);
  min-height: 46px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%238b95a7' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--accent); }

/* ============================ Motion helpers ============================ */
html.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.js [data-reveal].in { opacity: 1; transform: none; }

/* ============================ Responsive ============================ */
@media (max-width: 1180px) {
  .nav { gap: var(--space-5); }
  .nav__links { gap: 0; }
  .nav__link { padding-inline: 10px; }
}
@media (max-width: 1024px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .span-8, .span-4, .span-6 { grid-column: span 12; }
  .hero__grid, .hero__intro, .page-hero { grid-template-columns: minmax(0, 1fr); }
  .hero__intro h1 { max-width: 13ch; }
  .page-hero > h1, .page-hero > .lead, .page-hero > .btn-row, .page-hero > .hero__meta { grid-column: 1; grid-row: auto; }
  .page-hero > h1 { margin-bottom: var(--space-6); }
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__links, .nav__actions .btn-desktop { display: none; }
  .nav__toggle { display: inline-flex; }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento > * { grid-column: span 3; }
  .bento > .bento--wide, .bento > .bento--full { grid-column: span 6; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-rows > li { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .container:has(> .section__head:not(.section__head--center) + .faq) { display: block; }
  .container:has(> .section__head:not(.section__head--center) + .faq) > .section__head { position: static; }
  .spec-rows > li > ul { grid-column: 2; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split h2 { max-width: 20ch; }
  .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* no orphan: a lone last card takes the full row */
  .cols-3 > :last-child:nth-child(odd), .cols-4 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .console__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console__foot > div:nth-child(3) { border-left: 0; }
  .console__foot > div:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
  .hero__meta { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .hero__meta li { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .hero__meta li:first-child { border-top: 0; }
}
@media (max-width: 760px) {
  .split, .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
  .cols-3 > :last-child:nth-child(odd), .cols-4 > :last-child:nth-child(odd) { grid-column: auto; }
  .bento > *, .bento > .bento--wide, .bento > .bento--full { grid-column: span 6; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .megamenu { min-width: auto; }
  .spec-rows > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .spec-rows > li > ul { grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
  .trace p { padding-left: 0; }
  .trace summary { flex-direction: column; gap: var(--space-1); }
  .faq__a { padding-right: 0; }
  table.data th, table.data td { padding: 12px var(--space-4); }
  table.data { min-width: 600px; }
}
@media (max-width: 480px) {
  .metrics > li, .metrics > li.panel { padding: var(--space-5) var(--space-4); }
  .metric { font-size: 2rem; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos li { min-height: 72px; font-size: 0.9375rem; }
  .btn-row > .btn { flex: 1 1 100%; }
  .console__bar > span:last-child { display: none; }
  .mobile-nav ul { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .nav__actions .nav__cta, .nav__cmd .kbd { display: none; }
}
@media (max-width: 560px) {
  .nav__cmd .nav__cmd-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
  .chip--running .dot { animation: none; }
}

@media print {
  .site-header, .palette-backdrop, .mobile-nav { display: none; }
  body { background: #fff; color: #000; }
}