/* Self-hosted fonts (latin subsets, from Google Fonts' own files). */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/InstrumentSerif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/Inter.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/GeistMono.woff2") format("woff2"); }

/* eddy marketing site — single page, light, dense, monospace accents */

:root {
  color-scheme: light;
  --bg: #faf9f6;
  --bg-2: #f3f1ec;
  --surface: #ffffff;
  --border: rgba(20, 20, 20, 0.10);
  --border-strong: rgba(20, 20, 20, 0.20);
  --text: #141414;
  --muted: #5b6068;
  --faint: #6b727f;
  --accent: #1f3fff;
  --accent-hover: #1531d6;
  --accent-ink: #ffffff;
  --accent-tint: rgba(31, 63, 255, 0.08);
  --pos: #1f3fff;
  --neg: #ff5a36;
  --code-bg: #f4f3ee;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1120px;
  --gutter: 16px;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
p a, .prose a, .footnote a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
p a:hover, .prose a:hover, .footnote a:hover { text-decoration-color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.05; }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
p { margin: 0; }
code, pre, .mono { font-family: var(--mono); }
em { font-style: normal; color: var(--accent); }
.lede em { font-weight: 500; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 28px; } }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(251, 251, 249, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand:hover { color: var(--text); }
.mark { width: 22px; height: 22px; color: var(--accent); }
.links { display: none; gap: 22px; margin-left: 12px; font-size: 0.925rem; color: var(--muted); }
.links a:hover { color: var(--text); }
.nav .btn { margin-left: auto; }
@media (min-width: 820px) { .links { display: flex; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 8px;
  font-size: 0.95rem; font-weight: 500; line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--text); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 8px 14px; font-size: 0.875rem; }
.btn-block { width: 100%; padding: 13px 18px; }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* Hero */
.hero { padding: 80px 0 40px; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 45% at 20% 0%, rgba(31, 63, 255, 0.09), transparent 70%),
    radial-gradient(40% 40% at 90% 20%, rgba(255, 90, 54, 0.07), transparent 70%),
    linear-gradient(to bottom, transparent, var(--bg));
}
.eyebrow {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
h1 { font-size: clamp(2.9rem, 7.4vw, 5.6rem); max-width: 16ch; line-height: 0.98; }
h1 em { font-style: italic; color: var(--accent); }
.lede { margin-top: 22px; max-width: 58ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); line-height: 1.5; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-panels { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
@media (min-width: 900px) { .hero-panels { grid-template-columns: 1.05fr 1fr; } }

.panel {
  margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; min-width: 0;
}
.panel figcaption {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface);
  font-family: var(--mono); font-size: 0.78rem; color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.dot.live { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.panel pre { margin: 0; padding: 16px; overflow-x: auto; font-size: 0.8rem; line-height: 1.6; color: #2b3240; background: var(--code-bg); }
.panel.code { background: var(--code-bg); }
.kw { color: var(--accent); } .fn { color: var(--accent); } .num { color: var(--neg); } .str { color: #b91c1c; }

.ticker-list { list-style: none; margin: 0; padding: 6px 0; }
.ticker-list li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; padding: 12px 14px; border-bottom: 1px solid var(--border);
  transition: background 300ms ease;
}
.ticker-list li:last-child { border-bottom: 0; }
.ticker-list li.now { background: var(--accent-tint); }
.chg { display: block; min-width: 0; font-size: 0.78rem; color: #2b3240; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.delta { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 0.78rem; }
.delta b { font-weight: 500; }
.neg { color: var(--neg); } .pos { color: var(--pos); }
.lat { margin-left: auto; color: var(--faint); }
.ticker-note { padding: 12px 14px 14px; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--border); }

/* Architecture */
.arch { padding: 24px 0 8px; }
.ascii {
  margin: 0; padding: 18px 8px; overflow-x: auto;
  /* Box-drawing glyphs need a font that ships them; Geist Mono falls back
     glyph-by-glyph and the lines break up. */
  font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 0.78rem; line-height: 1.12; color: var(--muted);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.ascii-wide { display: none; }
@media (min-width: 900px) { .ascii-wide { display: block; text-align: center; } .ascii-narrow { display: none; } }

/* Sections */
.section { padding: 80px 0; border-bottom: 1px solid var(--border); }
.section:last-of-type { border-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1.3fr; gap: 56px; } }
.prose { color: var(--muted); font-size: 1.05rem; display: grid; gap: 16px; max-width: 62ch; }
.prose a { color: var(--text); }
.muted { color: var(--muted); margin-top: 14px; max-width: 48ch; }

.cards-3, .cards-2 { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 720px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } .cards-2 { grid-template-columns: repeat(2, 1fr); } }
.card {
  padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(17, 20, 24, 0.04);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.95rem; }


/* Steps */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { padding: 24px 0 0; border-top: 1px solid var(--border-strong); }
.step-n { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--accent); margin-bottom: 14px; }
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--muted); font-size: 0.95rem; max-width: 40ch; }

/* Spec table */
.spec { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.spec th, .spec td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec th { font-family: var(--mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.spec td:first-child { font-weight: 500; white-space: nowrap; }
.spec td:nth-child(2) { color: var(--muted); }
.spec td:last-child { white-space: nowrap; }
.spec .ok { font-family: var(--mono); font-size: 0.8rem; color: var(--pos); }
.spec .ok::before { content: "✓ "; }
@media (max-width: 560px) { .spec th:nth-child(2), .spec td:nth-child(2) { display: none; } }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 40px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--surface); padding: 26px 22px; display: grid; gap: 8px; }
.stat b { font-family: var(--mono); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; color: var(--text); }
.stat span { color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.footnote { margin-top: 18px; font-size: 0.85rem; color: var(--faint); max-width: 70ch; }

/* Demo */
.demo { background: var(--bg-2); }
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; color: var(--muted); }
.checks li { padding-left: 22px; position: relative; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); }

.form { display: grid; gap: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(17, 20, 24, 0.04); }
.field { display: grid; gap: 6px; }
label { font-size: 0.875rem; color: var(--muted); }
.opt { color: var(--faint); font-size: 0.8rem; }
input, textarea {
  width: 100%; padding: 11px 12px; border-radius: 8px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-strong);
  font: inherit; font-size: 0.95rem; outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
textarea { resize: vertical; min-height: 84px; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
input.invalid { border-color: var(--neg); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { min-height: 1.2em; font-size: 0.9rem; color: var(--muted); }
.form-msg.ok { color: var(--pos); }
.form-msg.err { color: var(--neg); }
.form.sent .field, .form.sent button { display: none; }
.form.sent .form-msg { font-size: 1.05rem; color: var(--text); }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 28px 0; font-size: 0.875rem; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.brand.small { font-size: 0.95rem; }
.brand.small .mark { width: 18px; height: 18px; }
.footer-links { display: flex; gap: 20px; }
.copy { margin-left: auto; color: var(--faint); }

/* Focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-list li { transition: none; }
}

/* Race animation (hero) */
.race { margin: 56px 0 0; padding: 18px 18px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 2px rgba(20,20,20,0.04), 0 24px 60px -30px rgba(20,20,20,0.25); }
.race-head { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
@media (min-width: 640px) { .race-head { grid-template-columns: 1fr 1fr; gap: 28px; } }
.lane-title { display: flex; align-items: baseline; gap: 8px; font-size: 0.95rem; font-weight: 500; }
.lane-sub { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.lane-dot { width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.lane-dot.rebuild { background: var(--text); }
.lane-dot.eddy { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
#race { display: block; width: 100%; height: auto; }
.race-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.race-stat { display: grid; gap: 2px; }
.race-stat.right { text-align: right; }
.race-stat .k, .race-ratio .k { font-size: 0.75rem; color: var(--faint); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.race-stat b { font-weight: 500; font-size: 1.2rem; }
.race-stat.right b { color: var(--accent); }
.race-ratio { text-align: center; display: grid; gap: 2px; }
.race-ratio b { font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; color: var(--text); }
@media (max-width: 520px) { .race-foot { grid-template-columns: 1fr 1fr; } .race-ratio { grid-column: 1 / -1; order: -1; padding-bottom: 8px; } }
.race-note { margin: 10px 0 0; font-size: 0.78rem; color: var(--faint); }
.race-replay { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.race-replay:hover { color: var(--accent); }

/* Glass-pipeline figure */
.muted.wide { max-width: 68ch; }
.pipe { margin: 36px 0 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.pipe > * { min-width: 0; }
@media (min-width: 900px) { .pipe { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "dag xray" "cap watches"; align-items: start; } .pipe .dag { grid-area: dag; } .pipe .xray { grid-area: xray; } .pipe .watches { grid-area: watches; } .pipe figcaption { grid-area: cap; } }
.dag { width: 100%; max-width: 100%; height: auto; display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; color: #c9c6bd; }
.dag .node rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.dag .node .bar { stroke: none; }
.dag .node.stg .bar { fill: var(--neg); }
.dag .node.mart .bar { fill: var(--accent); }
.dag .node.sel rect:first-child { stroke: var(--accent); stroke-width: 1.5; }
.dag .kind { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--faint); }
.dag .name { font-family: var(--sans); font-size: 12.5px; font-weight: 500; fill: var(--text); }
.dag .edges .hot { stroke: var(--accent); stroke-width: 2; color: var(--accent); }
.dag .ok-dot { fill: #15803d; }
.dag .pulse { fill: var(--text); opacity: 0; offset-rotate: 0deg; animation: travel 3.6s linear infinite paused; }
.pipe.live .pulse, .live-figure.live .pulse { animation-play-state: running; }
.dag .pulse.pos { fill: var(--accent); } .dag .pulse.neg { fill: var(--neg); }
.dag .p1 { offset-path: path('M170 70 C 205 70, 205 70, 238 70'); animation-delay: 0s; }
.dag .p2 { offset-path: path('M170 170 C 205 170, 205 170, 238 170'); animation-delay: 0.15s; }
.dag .p3 { offset-path: path('M390 70 C 425 70, 425 122, 458 122'); animation-delay: 0.9s; }
.dag .p4 { offset-path: path('M390 170 C 425 170, 425 122, 458 122'); animation-delay: 1.05s; }
.dag .p5 { offset-path: path('M540 152 C 540 175, 540 185, 540 202'); animation-delay: 1.9s; }
.dag .p6 { offset-path: path('M540 152 C 540 175, 540 185, 540 202'); animation-delay: 2.2s; }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; } 24% { offset-distance: 100%; opacity: 1; } 28%, 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dag .pulse { display: none; } }
.xray { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.xray .k, .watches .k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.xray-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; font-size: 0.9rem; margin-bottom: 10px; }
.xray-head b { font-weight: 500; }
.xray-scroll { overflow-x: auto; }
.xray-rows { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.8rem; }
.xray-rows th { text-align: left; font-weight: 400; color: var(--faint); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.xray-rows td { padding: 6px 8px; white-space: nowrap; }
.xray-rows .w-neg td:first-child { color: var(--neg); } .xray-rows .w-pos td:first-child { color: var(--accent); }
.xray-rows .w-neg { background: rgba(255, 90, 54, 0.06); } .xray-rows .w-pos { background: var(--accent-tint); }
.xray-note { margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
.watches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.watch { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.watch b { font-family: var(--mono); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.watch.eddy b { color: var(--accent); } .watch.pg b { color: var(--muted); }
.watch .sub { font-size: 0.8rem; color: var(--muted); }
.agree { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.agree .ok-dot { width: 8px; height: 8px; border-radius: 50%; background: #15803d; box-shadow: 0 0 0 3px rgba(21,128,61,0.15); }
.pipe figcaption.race-note { margin: 0; }
.hero-panels.one { margin-top: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero-panels.one { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.aside h3 { font-size: 1.25rem; margin-bottom: 10px; }
.aside p { color: var(--muted); }
.agree.also { display: block; color: var(--faint); font-size: 0.8rem; line-height: 1.5; }
.agree.also code { font-size: 0.78rem; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
.dag .foot { font-family: var(--mono); font-size: 8.5px; fill: var(--accent); }

/* Reads table */
.reads-table td:first-child { white-space: nowrap; }
.reads-table td:last-child { white-space: normal; }
.eddy-cell { vertical-align: middle !important; background: var(--accent-tint); border-radius: 8px; }
.eddy-cell b { display: block; font-family: var(--mono); font-weight: 500; font-size: 1.6rem; color: var(--accent); line-height: 1.1; }
.eddy-cell span { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
@media (max-width: 560px) { .reads-table th:nth-child(2), .reads-table td:nth-child(2) { display: table-cell; font-size: 0.8rem; } }

/* Shared SVG idiom: node cards, readers, pulses */
.fansvg, .flowsvg { width: 100%; height: auto; display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; color: #c9c6bd; }
.fansvg .node rect, .flowsvg .node rect { fill: var(--surface); stroke: var(--border-strong); }
.fansvg .node .bar, .flowsvg .node .bar { stroke: none; fill: var(--accent); }
.fansvg .node.sel rect:first-child, .flowsvg .node.sel rect:first-child { stroke: var(--accent); stroke-width: 1.5; }
.fansvg .kind, .flowsvg .kind { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--faint); }
.fansvg .name, .flowsvg .name { font-family: var(--sans); font-size: 12.5px; font-weight: 500; fill: var(--text); }
.fansvg .foot, .flowsvg .foot { font-family: var(--mono); font-size: 8.5px; fill: var(--accent); }
.fansvg .ok-dot, .flowsvg .ok-dot { fill: #15803d; }
.readers rect { fill: var(--code-bg); stroke: var(--border); }
.readers text { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); }
.readers.small text { font-size: 9px; }
.fansvg .pulse { fill: var(--accent); opacity: 0; offset-rotate: 0deg; animation: travel 4.2s linear infinite paused; }
.fansvg .r1 { offset-path: path('M170 33 C 260 33, 300 118, 388 118'); animation-delay: 0s; }
.fansvg .r2 { offset-path: path('M170 69 C 260 69, 300 118, 388 118'); animation-delay: 0.7s; }
.fansvg .r3 { offset-path: path('M170 105 C 260 105, 300 118, 388 118'); animation-delay: 1.4s; }
.fansvg .r4 { offset-path: path('M170 141 C 260 141, 300 118, 388 118'); animation-delay: 2.1s; }
.fansvg .r5 { offset-path: path('M170 177 C 260 177, 300 118, 388 118'); animation-delay: 2.8s; }
.fansvg .r6 { offset-path: path('M170 213 C 260 213, 300 118, 388 118'); animation-delay: 3.5s; }
@media (prefers-reduced-motion: reduce) { .fansvg .pulse { display: none; } }

/* Reads: cores chart */
.fan { margin: 0; display: grid; gap: 14px; }
.cores { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 12px; }
.cores .k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.cores-head { margin-bottom: 10px; }
.cores-row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 10px; padding: 5px 0; }
.cores-row .lbl { font-size: 0.85rem; color: var(--text); }
.bars { display: grid; gap: 3px; }
.bars .bar { position: relative; height: 14px; border-radius: 4px; }
.bars .bar.pg { background: var(--text); width: var(--w); min-width: 4px; }
.bars .bar.ed { background: var(--accent); width: 3px; }
.bars .bar i { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-style: normal; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.bars .bar.pg[style*="100%"] i { left: auto; right: 8px; color: #fff; }
.bars .bar.ed i { color: var(--accent); }
.cores-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 0.78rem; color: var(--muted); }
.cores-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cores-legend .sw.pg { background: var(--text); } .cores-legend .sw.ed { background: var(--accent); }
@media (max-width: 560px) { .cores-row { grid-template-columns: 72px 1fr; } .bars .bar i { font-size: 0.66rem; } }

/* How it works: flow */
.flow { margin: 36px 0 0; overflow-x: auto; }
.flowsvg { min-width: 720px; }
.panelbox > rect { fill: var(--surface); stroke: var(--border); }
.codelines rect { fill: #d9d7cf; }
.codelines rect.kwl { fill: var(--accent); opacity: 0.55; }
.ops rect { fill: var(--code-bg); stroke: var(--border-strong); }
.ops text { font-family: var(--mono); font-size: 9.5px; fill: var(--text); }
.oplines { fill: none; stroke: #c9c6bd; stroke-width: 1.2; }
.oplines.up { marker-end: url(#arr3); }
.flowarrow { fill: none; stroke: var(--text); stroke-width: 1.4; marker-end: url(#arr3); color: var(--text); }
.steps { margin-top: 28px; }

/* SQL shapes */
.shapes { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
@media (min-width: 640px) { .shapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .shapes { grid-template-columns: repeat(4, 1fr); } }
.shape { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px 14px; display: grid; gap: 8px; align-content: start; }
.shape svg { width: 100%; height: auto; display: block; background: var(--code-bg); border-radius: 8px; padding: 6px; }
.shape h3 { font-size: 1rem; margin-top: 4px; }
.shape p { color: var(--muted); font-size: 0.9rem; }
.shape .ok { font-family: var(--mono); font-size: 0.78rem; color: var(--pos); }
.shape .ok::before { content: "✓ "; }
.shape .rows rect, .shape .cols rect { fill: #d9d7cf; }
.shape .hit { fill: var(--accent) !important; }
.shape .del { fill: var(--neg); }
.shape .lab { font-family: var(--mono); font-size: 7.5px; fill: var(--muted); }
.shape .hitlab { fill: var(--accent); }
.shape .dellab { fill: var(--neg); }
.shape .rankline { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.shape .boxes rect { fill: var(--surface); stroke: var(--border-strong); }
.shape .boxes rect.hit { stroke: var(--accent); fill: var(--accent-tint) !important; }
.shape .boxes rect.dashed { stroke-dasharray: 3 3; }
.shape .boxes rect.mart { stroke: var(--accent); stroke-width: 1.5; }
.shape .tree circle { fill: var(--surface); stroke: var(--border-strong); }
.shape .tree circle.hit { fill: var(--accent); stroke: var(--accent); }
.shape .tree circle.moved { fill: var(--neg); stroke: var(--neg); }
.shape .movearrow { fill: none; stroke: var(--neg); stroke-width: 1.2; stroke-dasharray: 3 2; }

/* Round 1 refinements */
.codetext text { font-family: var(--mono); font-size: 8px; fill: #2b3240; white-space: pre; }
.codetext .kw { fill: var(--accent); } .codetext .fn { fill: #0f766e; }
.flowsvg .pulse { fill: var(--text); opacity: 0; offset-rotate: 0deg; animation: travel 3.2s linear infinite paused; }
.flowsvg .q1 { offset-path: path('M453 73 C 462 73, 462 91, 470 91'); animation-delay: 0s; }
.flowsvg .q2 { offset-path: path('M453 109 C 462 109, 462 91, 470 91'); animation-delay: 0.2s; }
.flowsvg .q3 { offset-path: path('M453 145 L 470 145'); animation-delay: 0.4s; }
.flowsvg .q4 { offset-path: path('M526 91 C 533 91, 533 118, 540 118'); animation-delay: 1.0s; }
@media (prefers-reduced-motion: reduce) { .flowsvg .pulse { display: none; } }
.shape .chg { fill: var(--surface) !important; stroke: var(--neg); stroke-width: 1.5; }
.shape .cols rect.chg { fill: rgba(255,90,54,0.25) !important; }
/* cores chart grows in when in view */
.bars .bar.pg { width: 4px; transition: width 900ms cubic-bezier(.2,.7,.2,1); }
.live-figure.live .bars .bar.pg { width: var(--w); }
.bars .bar i { transition: opacity 400ms ease 600ms; opacity: 0; }
.live-figure.live .bars .bar i { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bars .bar.pg { width: var(--w); transition: none; } .bars .bar i { opacity: 1; transition: none; } }
.shape .boxes rect.chg { stroke: var(--neg); stroke-width: 1.5; fill: rgba(255,90,54,0.08) !important; }
.swipe { display: none; margin: 8px 0 0; font-size: 0.78rem; color: var(--faint); }
@media (max-width: 760px) { .swipe { display: block; } }

/* Jobs cards */
.shape .shp { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); margin-top: -4px; }
.shape .stepline { fill: none; stroke: var(--accent); stroke-width: 2; }
.shape .stepline.chgline { stroke: var(--neg); stroke-dasharray: 3 2; stroke-width: 1.5; }
.shape .axis { stroke: var(--border-strong); stroke-width: 1; }
.shape .events circle { fill: var(--accent); }
.shape .sessline { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.shape .sessline.chgline { stroke: var(--neg); stroke-dasharray: 3 2; }
.shape .winbox { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2; }
.shape .funnel rect { fill: var(--accent); opacity: 0.85; }
.shape .funnel rect.chg { fill: rgba(255,90,54,0.25) !important; stroke: var(--neg); }
.shape .onbar { fill: #fff; }

/* ================================================================
   Walkthrough page: chapters and product illustrations.
   Illustrations animate once when they enter the view (.play), never
   the text; reduced motion shows every figure in its final state.
   ================================================================ */
:root {
  --ink-bg: #121418; --ink-panel: #1a1d23; --ink-line: #2a2e37; --ink-text: #e7e8ea;
  --ink-muted: #8b919c; --ink-green: #3fb950; --ink-red: #f0605a;
  --st-src: #7d8590; --st-stg: #f0a04b; --st-stg2: #56b6c2; --st-mart: #6b8cff;
}
.hero .lede { max-width: 46ch; }
.ill-note { margin-top: 10px; font-size: 0.8rem; color: var(--faint); max-width: 80ch; }

.chapter { padding: 96px 0; border-bottom: 1px solid var(--border); }
.ch-n { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.ch-sub { margin-top: 14px; max-width: 54ch; color: var(--muted); font-size: 1.08rem; line-height: 1.5; }
.ch-split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) {
  .ch-split { grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
  .ch-split.flip { grid-template-columns: 1.2fr 0.8fr; }
  .ch-split.flip > :first-child { order: 2; }
}
.ch-split > * { min-width: 0; }
.chapter figure { margin: 0; }
#live figure.pipe { margin-top: 36px; }
.pills { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { font-family: var(--mono); font-size: 0.78rem; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted); background: var(--surface); }

/* --- dark product surfaces ---------------------------------------- */
.console, .term, .editor { background: var(--ink-bg); color: var(--ink-text); border-radius: 14px; border: 1px solid #000; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 30px 70px -30px rgba(20,20,40,.55); overflow: hidden; }
.c-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.c-label b { color: var(--ink-text); font-weight: 500; }
.c-dim { color: var(--ink-muted); }
.c-k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* hero console */
.console { position: relative; margin: 48px 0 0; }
.c-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--ink-line); font-size: 0.85rem; }
.c-brand { font-weight: 600; }
.c-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-text); }
.c-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-green); box-shadow: 0 0 0 3px rgba(63,185,80,.18); }
.c-right { margin-left: auto; font-size: 0.78rem; }
.c-right b { color: var(--ink-text); font-weight: 500; }
.c-grid { display: grid; grid-template-columns: 1fr; }
.c-grid > div { padding: 16px; min-width: 0; }
.c-grid > div + div { border-top: 1px solid var(--ink-line); }
.c-dag { display: none; }
@media (min-width: 760px) {
  .c-grid { grid-template-columns: 1fr 1fr; }
  .c-grid > div + div { border-top: 0; border-left: 1px solid var(--ink-line); }
}
@media (min-width: 1040px) {
  .c-grid { grid-template-columns: 0.9fr 1.35fr 1fr; }
  .c-dag { display: block; }
}
.c-txns { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.c-txns li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--ink-line); border-radius: 8px; background: var(--ink-panel); font-size: 0.74rem; }
.c-txns li code { color: var(--ink-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.74rem; }
.c-txns li code .kw { color: #8fa6ff; }
.c-lsn { color: var(--ink-muted); font-size: 0.66rem; }
.c-txns li.new { border-color: var(--st-mart); animation: c-in .45s ease-out; }
.c-txns li:nth-child(n+5) { display: none; }
@keyframes c-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.c-dag svg { width: 100%; height: auto; display: block; }
.c-edges path { fill: none; stroke: var(--ink-line); stroke-width: 1.5; transition: stroke .3s; }
.c-edges path.hot { stroke: var(--st-mart); }
.c-node rect:first-child { fill: var(--ink-panel); stroke: var(--ink-line); }
.c-node .bar { stroke: none; }
.c-node.stg .bar { fill: var(--st-stg); } .c-node.stg2 .bar { fill: var(--st-stg2); } .c-node.mart .bar { fill: var(--st-mart); }
.c-node .k { font-family: var(--mono); font-size: 6.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-muted); }
.c-node .n { font-family: var(--sans); font-size: 9.5px; font-weight: 600; fill: var(--ink-text); }
.c-node .ok { fill: var(--ink-green); }
.c-node.flash rect:first-child { stroke: var(--st-mart); }
.c-node.flash .ok { animation: c-ok .8s ease-out; }
@keyframes c-ok { 0% { r: 3; } 40% { r: 6; fill: #9ff0a8; } 100% { r: 3; } }
.c-pulse { fill: var(--st-mart); filter: drop-shadow(0 0 4px rgba(107,140,255,.9)); }

.c-metric { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 2px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ink-line); }
.c-metric .c-k { grid-column: 1 / -1; }
.c-metric b { font-size: 1.9rem; font-weight: 500; letter-spacing: -.02em; }
.c-spark { width: 100%; height: 36px; }
.c-spark polyline { fill: none; stroke: var(--st-mart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink-line); }
.c-row b { font-weight: 500; font-size: 0.95rem; }
.bump { animation: c-bump 1s ease-out; }
@keyframes c-bump { 0% { color: #9ff0a8; } 100% { color: inherit; } }
.c-watches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.c-watch { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--ink-line); border-radius: 8px; background: var(--ink-panel); }
.c-watch b { font-size: 1.35rem; font-weight: 500; }
.c-watch.ed b { color: var(--ink-green); } .c-watch.wh b { color: var(--ink-red); }
.c-watch .c-dim { font-size: 0.7rem; }
.c-replay { position: absolute; right: 16px; bottom: 10px; margin: 0; color: var(--ink-muted); }

/* 01 collapse */
.collapse { margin-top: 40px !important; padding: 28px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.cl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.cl-mid, .cl-readers { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.cl-readers { flex-direction: column; align-items: stretch; }
.cl-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 9px 13px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--bg); font-size: 0.88rem; }
.cl-chip.end { font-weight: 500; }
.cl-arrow { color: var(--faint); }
.cl-chip.old { color: var(--muted); transition: opacity .45s ease calc(var(--i) * 0.14s + .5s), max-width .5s ease calc(var(--i) * 0.14s + .9s), padding .5s ease calc(var(--i) * 0.14s + .9s), margin .5s ease calc(var(--i) * 0.14s + .9s), border-width .5s ease calc(var(--i) * 0.14s + .9s); max-width: 220px; overflow: hidden; }
.cl-chip.new { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); font-weight: 600; max-width: 0; padding: 9px 0; border-width: 0; opacity: 0; overflow: hidden; transition: max-width .6s ease 2.1s, opacity .5s ease 2.2s, padding .6s ease 2.1s, border-width .1s linear 2.1s; }
.cl-chip.new small { font-weight: 400; color: var(--muted); font-size: .75rem; }
.cl-chip.new .mark { width: 16px; height: 16px; }
.collapse.play .cl-chip.old { opacity: 0; max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; margin: 0 -4px; }
.collapse.play .cl-chip.new { max-width: 360px; padding: 9px 14px; border-width: 1px; opacity: 1; }
.cl-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 20px; font-family: var(--mono); font-size: 0.78rem; }
.cl-was { color: var(--faint); transition: opacity .5s ease 2s; }
.cl-now { color: var(--accent); opacity: 0; transition: opacity .5s ease 2.4s; }
.collapse.play .cl-was { opacity: .5; }
.collapse.play .cl-now { opacity: 1; }

/* 02 terminal */
.term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--ink-line); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3f49; }
.term-bar span { margin-left: 8px; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-muted); }
.term-body { white-space: normal; margin: 0; padding: 16px; font-size: 0.72rem; line-height: 1.65; overflow-x: auto; color: var(--ink-muted); }
.term-body .tl { display: block; white-space: pre; opacity: 0; transform: translateY(3px); transition: opacity .25s ease calc(var(--i) * .16s), transform .25s ease calc(var(--i) * .16s); }
.term.play .tl { opacity: 1; transform: none; }
.term-body .tl:first-child { color: var(--ink-text); }
.term-body .pr { color: var(--ink-green); }
.term-body b { color: var(--ink-green); font-weight: 500; }
.term-body .tl.ok { color: var(--ink-text); margin-top: 4px; }

/* 03 editor */
.ed-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ink-line); font-size: 0.75rem; color: var(--ink-muted); }
.ed-tag { color: var(--ink-green); font-family: var(--mono); font-size: 0.7rem; }
.ed-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ed-grid { grid-template-columns: 1.1fr 1fr; } }
.ed-sql { margin: 0; padding: 16px; font-size: 0.72rem; line-height: 1.6; color: #c9ccd3; overflow-x: auto; border-bottom: 1px solid var(--ink-line); }
@media (min-width: 720px) { .ed-sql { border-bottom: 0; border-right: 1px solid var(--ink-line); } }
.ed-sql .kw, .ed-sql .fn { color: #8fa6ff; } .ed-sql .str { color: #f0a04b; } .ed-sql .num { color: #f0605a; }
.ed-steps { list-style: none; margin: 0; padding: 14px; display: grid; gap: 8px; align-content: start; counter-reset: st; }
.ed-steps li { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: baseline; padding: 9px 11px 12px; border: 1px solid var(--ink-line); border-radius: 8px; background: var(--ink-panel); font-size: 0.8rem; opacity: .25; transition: opacity .35s ease calc(var(--i) * .35s + .2s), border-color .35s ease calc(var(--i) * .35s + .2s); }
.ed-steps li.out { border-color: var(--st-mart); }
.editor.play .ed-steps li { opacity: 1; }
.st-k { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--st-stg2); }
.st-n { color: var(--ink-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-r { color: var(--ink-muted); font-size: 0.72rem; }
.ed-steps li i { position: absolute; left: 11px; right: 11px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--ink-line); }
.ed-steps li i::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--st-mart); border-radius: 2px; transition: width .6s ease calc(var(--i) * .35s + .35s); }
.editor.play .ed-steps li i::after { width: var(--w); }

/* 05 shops grid */
.shops { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.shops canvas { width: 100%; height: auto; display: block; }
.shop-card { position: absolute; right: 22px; top: 22px; width: 260px; padding: 12px 14px; border-radius: 10px; background: var(--ink-bg); color: var(--ink-text); box-shadow: 0 16px 40px -18px rgba(0,0,0,.6); font-size: 0.8rem; }
.shop-card .c-row { padding: 6px 0; }
.shop-card .c-k { white-space: nowrap; }
.shop-card .c-row:last-child { border-bottom: 0; }
.shop-card .c-row b { font-size: 0.78rem; }
@media (max-width: 560px) { .shop-card { position: static; width: auto; margin-top: 12px; } }
.minis { display: grid; gap: 14px; margin-top: 26px; }
.minis div { display: grid; grid-template-columns: 7.5ch 1fr; gap: 14px; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--border); }
.minis b { font-size: 1.25rem; font-weight: 500; }
.minis span { color: var(--muted); font-size: 0.9rem; }

/* 06 chat */
.chat { display: grid; gap: 10px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px -34px rgba(20,20,20,.3); }
.chat > * { opacity: 0; transform: translateY(6px); transition: opacity .35s ease calc(var(--i) * .7s + .2s), transform .35s ease calc(var(--i) * .7s + .2s); }
.chat.play > * { opacity: 1; transform: none; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; }
.msg.user { justify-self: end; background: var(--text); color: var(--bg); border-bottom-right-radius: 4px; }
.msg.bot { justify-self: start; background: var(--bg-2); border-bottom-left-radius: 4px; }
.msg.bot b { font-weight: 600; }
.tool { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: 9px; font-size: 0.78rem; }
.tool code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.t-k { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.tool.yours .t-k { color: var(--neg); }
.t-r { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

/* 07 */
.shapes-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 28px; }
.shapes-strip .k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.shapes-strip .pills { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .console *, .collapse *, .term *, .editor *, .chat, .chat * { transition: none !important; animation: none !important; }
}
@media (max-width: 759px) {
  .cl-row { flex-direction: column; }
  .cl-mid { flex-direction: column; }
  .cl-arrow { transform: rotate(90deg); }
  .cl-chip.old { max-height: 44px; transition-property: opacity, max-height, padding, margin, border-width; }
  .collapse.play .cl-chip.old { max-height: 0; margin: -4px 0; padding-top: 0; padding-bottom: 0; }
  .cl-readers { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .c-acct { order: -1; }
  .c-grid > .c-acct + div { border-top: 1px solid var(--ink-line); }
}

/* ---------------------------------------------------------------
   Phones. Checked at 375, 390 and 430 px (iPhone SE/mini, 15, Pro Max).
   --------------------------------------------------------------- */
a, button { -webkit-tap-highlight-color: rgba(31, 63, 255, 0.12); }
/* iOS Safari zooms the page when a field under 16px takes focus. */
input, textarea { font-size: 16px; }
.nav-extra { display: none; }
@media (max-width: 819px) {
  .nav-extra { display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; font-size: 0.925rem; color: var(--muted); }
  .nav-extra + .btn { margin-left: 14px; }
}
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; }
.c-label, .c-lsn, .st-k, .c-k, .t-k { font-size: max(0.7rem, 11px); }
.dag-scroll { min-width: 0; }
.swipe-hint { display: none; }
@media (min-width: 900px) { .pipe .dag-scroll { grid-area: dag; } }
@media (max-width: 640px) {
  .dag-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: 14px; }
  .dag-scroll .dag { min-width: 600px; }
  .swipe-hint { display: block; margin-top: 6px; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); }
  /* eddy check: each detail on its own line under its check */
  .term-body { font-size: 0.7rem; }
  .term-body .t-dt { display: block; padding-left: 5.2em; white-space: pre-wrap; color: var(--ink-muted); }
  .term-body .tl.cont { font-size: 0; }
  .term-body .tl.cont .t-dt { font-size: 0.7rem; }
  .term-body .tl:first-child { white-space: pre-wrap; }
  /* the play-once figures start sooner and finish sooner on a phone */
  .chat > * { transition-delay: calc(var(--i) * .3s + .1s); }
  .term-body .tl { transition-delay: calc(var(--i) * .08s); }
  .ed-steps li, .ed-steps li i::after { transition-delay: calc(var(--i) * .18s + .1s); }
  .chapter { padding: 72px 0; }
  .ch-sub { font-size: 1rem; }
  .hero { padding-top: 56px; }
}
@media (max-width: 640px) {
  .tool { grid-template-columns: auto 1fr; row-gap: 3px; }
  .tool code { white-space: normal; overflow-wrap: anywhere; }
  .tool .t-r { grid-column: 2; }
}
.brand, .links a { min-height: 40px; }
.links a { display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------
   Audience and developer pages (tools/build_pages.py)
   --------------------------------------------------------------- */
.links a[aria-current] { color: var(--text); }
@media (min-width: 820px) and (max-width: 1040px) { .links { gap: 14px; font-size: 0.875rem; } }
.footer-links { flex-wrap: wrap; column-gap: 20px; row-gap: 0; }
.aud-hero h1 { max-width: 18ch; }
.aud-hero { padding-bottom: 24px; }
.aud-more { background: var(--bg-2); }
.aud-more h2 { margin-bottom: 8px; }
.aud-grid { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 720px) { .aud-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .aud-grid { grid-template-columns: repeat(4, 1fr); } .aud-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }
.aud-card { position: relative; display: grid; align-content: start; gap: 8px; padding: 20px 20px 44px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s, transform .15s; }
.aud-card:hover { border-color: var(--accent); color: inherit; transform: translateY(-2px); }
.aud-card .k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.aud-card b { font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; }
.aud-card span:not(.k) { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.aud-card i { position: absolute; left: 20px; bottom: 16px; font-style: normal; color: var(--accent); }
.ch-sub a { color: var(--accent); text-decoration: none; white-space: nowrap; }

/* agents: the loop and the tool list */
.loop2 { margin-top: 36px !important; display: grid; gap: 12px; }
@media (min-width: 900px) { .loop2 { grid-template-columns: repeat(4, 1fr); } }
.lp { position: relative; display: grid; gap: 6px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease calc(var(--i) * .35s), transform .35s ease calc(var(--i) * .35s), border-color .35s ease calc(var(--i) * .35s + .2s); }
.loop2.play .lp { opacity: 1; transform: none; }
.loop2.play .lp:last-child { border-color: var(--accent); }
.lp .k { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.lp b { font-family: var(--mono); font-weight: 500; font-size: 0.95rem; }
.lp span:last-child { color: var(--muted); font-size: 0.9rem; }
@media (min-width: 900px) { .lp:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--faint); background: var(--bg); line-height: 1; } }
.toolset { display: grid; gap: 12px; }
@media (min-width: 560px) { .toolset { grid-template-columns: 1fr 1fr; } }
.ts-col { padding: 18px; background: var(--ink-bg); color: var(--ink-text); border-radius: 12px; }
.ts-col .k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.ts-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ts-col li code { display: inline-block; padding: 5px 9px; border: 1px solid var(--ink-line); border-radius: 6px; background: var(--ink-panel); font-size: 0.78rem; color: #8fa6ff; }
.ts-col.w li code { color: var(--st-stg); }
.ts-col li.more { color: var(--ink-muted); font-size: 0.8rem; align-self: center; }
.ts-note { margin-top: 12px; color: var(--ink-muted); font-size: 0.85rem; line-height: 1.5; }
.ts-note code { color: var(--ink-text); font-size: 0.8rem; }

/* developers */
.dev-steps { margin-top: 32px; }
@media (min-width: 900px) { .dev-steps { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } }
.dev-steps code { font-size: 0.85em; color: var(--text); }
.dev-side { margin-top: 22px; }
.dev-side .term-body { font-size: 0.7rem; }
.term-body .str { color: var(--st-stg); }
.term-body .mut { color: var(--ink-muted); }
.term-body .neg { color: var(--ink-red); }
.term-body b { font-weight: 500; }
.demo .cta-row { margin-top: 24px; }
@media (max-width: 640px) { .term-body .tl { white-space: pre-wrap; overflow-wrap: anywhere; } }
@media (max-width: 640px) { .cores .bar i { font-size: 11px; } }

/* ---------------------------------------------------------------
   From the video review (RESEARCH.md): labels in sentence case, not
   small letter-spaced capitals; no pills in the prose; one embedded
   email field with the objection answered beside it.
   --------------------------------------------------------------- */
.eyebrow, .ch-n, .aud-card .k, .lp .k, .shapes-strip .k {
  font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 500;
}
.eyebrow { font-size: 1rem; }
.ch-n { font-size: 0.95rem; }
.aud-card .k, .lp .k { font-size: 0.85rem; }
.inline-list { margin-top: 18px; color: var(--muted); font-size: 0.92rem; }
.shapes-line { margin-top: 26px; color: var(--muted); max-width: 70ch; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.quick-form { margin-top: 28px; max-width: 560px; }
.qf-row { display: flex; gap: 10px; }
.qf-row input { flex: 1; min-width: 0; background: var(--surface); }
.qf-row .btn { white-space: nowrap; }
.qf-note { margin-top: 10px; font-size: 0.88rem; color: var(--muted); max-width: 56ch; }
.quick-form .form-msg { margin-top: 6px; min-height: 0; }
.quick-form.sent .qf-row, .quick-form.sent .qf-note { display: none; }
.hero-walk { margin-top: 14px; font-size: 0.95rem; }
.hero-walk a { color: var(--accent); }
@media (max-width: 520px) { .qf-row { flex-direction: column; } .qf-row .btn { width: 100%; } }
.hero h1 { max-width: none; }
@media (max-width: 719px) { .hero h1 br { display: none; } }
.hero-walk a { display: inline-flex; align-items: center; min-height: 40px; }

/* In and out: sources and the ways eddy is served */
.io-grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) { .io-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.io-col { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.io-h { font-weight: 500; margin-bottom: 6px; }
.io-list { list-style: none; margin: 0; padding: 0; }
.io-list li { position: relative; display: grid; gap: 4px; padding: 14px 64px 14px 0; border-top: 1px solid var(--border); }
.io-list li b { font-weight: 500; }
.io-list li span { color: var(--muted); font-size: 0.93rem; line-height: 1.45; }
.io-list li i { position: absolute; right: 0; top: 16px; font-style: normal; font-size: 0.8rem; }
.io-live { color: #15803d; }
.io-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #15803d; vertical-align: 1px; }
.io-next { color: var(--faint); }
.io-list code { font-size: 0.85em; color: var(--text); }

/* Second audit: three proof tiles, the requirements and limits lists, a command */
.stats.stats-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .stats.stats-3 { grid-template-columns: repeat(3, 1fr); } }
.req { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; max-width: 820px; }
.req li { display: grid; gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--border); }
@media (min-width: 720px) { .req li { grid-template-columns: 260px 1fr; } }
.req b { font-weight: 500; font-family: var(--mono); font-size: 0.9rem; }
.req span { color: var(--muted); }
.cmd { margin: 22px 0 0; padding: 12px 14px; background: var(--ink-bg); color: var(--ink-text); border-radius: 10px; font-size: 0.8rem; overflow-x: auto; }
.inline-list code { font-size: 0.85em; color: var(--text); }

/* Pricing */
.price-flag { margin-top: 22px; max-width: 62ch; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--muted); font-size: 0.92rem; background: var(--surface); }
.meters { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 820px) { .meters { grid-template-columns: repeat(3, 1fr); } }
.meter { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 8px; align-content: start; }
.meter .m-k { font-family: var(--mono); font-size: 0.75rem; color: var(--faint); }
.meter h3 { margin: 0; }
.meter .m-def { color: var(--text); font-weight: 500; }
.meter p:last-child { color: var(--muted); font-size: 0.95rem; }
.flow-fig { margin: 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 22px; }
.flow-case { display: grid; gap: 10px; }
.flow-in { margin: 0; font-size: 0.9rem; display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.flow-in b { font-weight: 500; }
.flow-in .mono { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.flow-in .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neg); flex: none; align-self: center; }
.flow { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 8px; border-left: 2px solid var(--border); }
.flow li { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.88rem; opacity: .3; transition: opacity .35s ease calc(var(--i) * .35s + .2s), border-color .35s ease calc(var(--i) * .35s + .2s), background-color .35s ease calc(var(--i) * .35s + .2s); }
.flow .fk { font-family: var(--mono); font-size: 0.75rem; color: var(--faint); }
.flow .fn { font-family: var(--mono); font-size: 0.8rem; overflow-wrap: anywhere; display: grid; gap: 2px; }
.flow .fn small { font-size: 0.72rem; color: var(--muted); }
.flow .fb { font-family: var(--mono); font-size: 0.85rem; font-weight: 500; color: var(--accent); }
.flow li.free .fb { color: var(--faint); font-weight: 400; }
.flow-fig.play .flow li { opacity: 1; }
.flow-fig.play .flow li:not(.free) { border-color: var(--accent); background: var(--accent-tint); }
.flow-total { margin: 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.85rem; padding-top: 10px; border-top: 1px solid var(--border); opacity: 0; transition: opacity .4s ease calc(var(--i) * .35s + .3s); }
.flow-total b { color: var(--accent); font-weight: 500; }
.flow-fig.play .flow-total { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .flow li, .flow-total { transition: none; opacity: 1; } }
.qlist { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 900px) { .qlist { grid-template-columns: repeat(3, 1fr); } }
.q { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 12px; align-content: start; min-width: 0; }
.q-who { margin: 0; font-weight: 500; }
.q-sql { margin: 0; padding: 12px; background: var(--code-bg); border-radius: 6px; font-family: var(--mono); font-size: 0.75rem; line-height: 1.55; overflow-x: auto; white-space: pre; }
.q-n { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.q-n b { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--accent); }
.q-n span { color: var(--muted); font-size: 0.9rem; }
.q-tip { margin-top: 18px; max-width: 68ch; color: var(--muted); }
.term-body .warn { color: #e3b453; }
.faq { margin-top: 24px; max-width: 820px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; min-height: 44px; font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--mono); color: var(--faint); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: var(--muted); max-width: 68ch; }