/* Self-hosted fonts (latin subsets, from Google Fonts' own files). */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/Newsreader.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/Newsreader-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: paper, ink, eddy red and deep blue, an editorial serif for
   headings and mono for anything measured. The system (tokens, scale, breakpoints,
   what is exempt) is in DESIGN.md; tools/css_audit.py checks it. */

:root {
  color-scheme: light;
  /* colour: the brand's six (paper, ink, eddy red, deep blue, sky, sage), and what text on each needs */
  --bg: #faf8f4;              /* paper */
  --bg-2: #f3efe8;            /* a deeper paper: bands, meters' tracks, code */
  --surface: #ffffff;
  --border: rgba(7, 18, 27, 0.10);
  --border-strong: rgba(7, 18, 27, 0.22);
  --text: #07121b;            /* ink */
  --muted: #4e5a68;
  --faint: #5f6974;           /* the lightest grey text may be: 4.6:1 on --bg-2, the darkest light ground */
  --accent: #2b4c7e;          /* deep blue: links, labels, the data's nodes; 7.5:1 on --bg-2 as text */
  --accent-hover: #1f3a63;
  --accent-ink: #ffffff;
  --accent-tint: rgba(43, 76, 126, 0.08);
  --sky: #d7e6f2;             /* the blue tint: panels and chips */
  --sage: #c7d4c4;            /* the green tint */
  --lilac: #dccbff;           /* the mascot's lilac: a band's ground */
  --sun: #ffe568;             /* the mascot's sun: the ask's ground */
  --cobalt: #3b82f6;          /* the mascot's cobalt: a fill beside him (a chip's dot, a bar), never text */
  --cobalt-tint: rgba(59, 130, 246, 0.10);
  --pos: #2b4c7e;
  --brand: #ff5a45;           /* eddy red: the wordmark, the mark, eddy's own bars, the change on the move; never text */
  --brand-deep: #d93a26;      /* the red a button is filled with: 4.6:1 under white text */
  --brand-deeper: #b9301b;
  --brand-text: #c4361c;      /* eddy red as text: 4.7:1 on --bg-2 */
  --brand-tint: rgba(255, 90, 69, 0.10);
  --neg: var(--brand);
  --neg-tint: var(--brand-tint);
  --neg-text: var(--brand-text);
  --ok: #2f6b47;
  --code-bg: #f3efe8;
  --code-ink: #2b3542; --code-str: #c4361c; --code-fn: #2b4c7e;
  /* Code's inks by token kind (tools/components/code.py); a figure and /product set their own. */
  --code-keyword: var(--accent); --code-function: var(--code-fn); --code-string: var(--code-str); --code-number: var(--neg-text);
  --code-property: var(--code-fn); --code-comment: var(--muted); --code-prompt: var(--brand-text); --code-lit: var(--brand-tint);
  --edge: #c6cfd8;            /* strokes inside drawings */
  --fill-2: #e4e0d7;          /* neutral fills inside drawings */
  /* the figures' own surfaces: consoles, terminals, editors and the hero figures, drawn as the product's paper panels */
  --fig-bg: #ffffff; --fig-panel: #faf8f4; --fig-line: rgba(7, 18, 27, 0.12); --fig-text: #07121b;
  --fig-muted: #5b6672; --fig-green: #2f6b47; --fig-green-hi: #4c9a68; --fig-red: #c4361c;
  --fig-accent: #2b4c7e; --fig-code: #2b3542; --fig-str: #c4361c; --fig-warn: #8a5a00;
  --fig-neg-text: #c4361c; --fig-dot: #d9d4ca;
  --st-src: #8a94a0; --st-stg: #2b4c7e; --st-stg2: #6f8fbf; --st-mart: #ff5a45;
  /* type: three families, one text scale, two display sizes */
  --serif: "Newsreader", "GT Super", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: 0.7rem;      /* 11.2px: labels inside figures, never below 11px */
  --fs-xs: 0.75rem;      /* 12px: mono labels, captions in figures */
  --fs-sm: 0.8rem;       /* 12.8px: small print, notes under figures */
  --fs-md: 0.875rem;     /* 14px: secondary text, table cells */
  --fs-base-sm: 0.9375rem; /* 15px: card and list body */
  --fs-base: 1rem;       /* 16px: body */
  --fs-lg: 1.0625rem;    /* 17px: lede under a chapter heading, h3 */
  --fs-xl: 1.25rem;      /* 20px: large numbers in small cards */
  --fs-lede: clamp(1.0625rem, 1.5vw, 1.2rem); /* the sentence under a page's h1 */
  --fs-num: clamp(1.75rem, 3vw, 2.5rem);    /* stats and stopwatches, in the serif */
  --fs-h2: clamp(2rem, 3.6vw, 2.9rem);
  --fs-h1: clamp(2.4rem, 4.6vw, 3.5rem);    /* every page's h1, one size */
  --fs-h1-fold: clamp(2.2rem, 3.6vw, 3rem); /* the homepage's h1, beside the fold's numbers and over its figure */
  --lh-display: 1.02;
  --lh-snug: 1.45;
  --lh-body: 1.55;
  --lh-code: 1.6;
  --track-caps: 0.06em;  /* uppercase mono labels */
  --track-tight: -0.02em;
  /* space: a 4px base */
  /* Space: --sp-N is N x 4px. Layout spacing (16px and up) is always a token;
     inside a dense component (a console, a rendering) 2, 6, 10 and 14px are allowed. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-18: 72px; --sp-24: 96px;
  --gap-figure: var(--sp-10);   /* a chapter's prose to its figure, grid or list */
  --gap-follow: var(--sp-8);    /* prose to a short follow-up: a form, a row of buttons, a note */
  --section-y: var(--sp-24);    /* a chapter's top and bottom */
  --render-y: var(--sp-18);     /* a /product rendering's top and bottom */
  --hero-top: var(--sp-16);
  /* shape */
  --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(7, 18, 27, 0.04);
  --shadow-lg: 0 30px 70px -36px rgba(7, 18, 27, 0.30);
  --shadow-fig: 0 1px 2px rgba(7, 18, 27, 0.05), 0 30px 70px -36px rgba(7, 18, 27, 0.30);
  --wrap: 1120px;
  --gutter: 16px;
}

* { 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: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
p a, .footnote a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
p a:hover, .footnote a:hover { text-decoration-color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: var(--track-tight); line-height: var(--lh-display); }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: var(--track-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-display); text-wrap: balance; }
h3 { font-size: var(--fs-lg); letter-spacing: var(--track-tight); }
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(250, 248, 244, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: var(--sp-6); height: 60px; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); }
.brand:hover { color: var(--text); }
.wordmark { display: block; height: 22px; width: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mark { width: 22px; height: 22px; color: var(--brand); }
.links { display: none; gap: var(--sp-6); margin-left: var(--sp-3); font-size: var(--fs-base-sm); 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: var(--sp-2);
  padding: 11px var(--sp-5); border-radius: var(--r-sm);
  font-size: var(--fs-base-sm); 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(--brand-deep); color: var(--accent-ink); }
.btn-primary:hover { background: var(--brand-deeper); color: var(--accent-ink); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); color: var(--text); }
.btn-sm { padding: var(--sp-2) 14px; font-size: var(--fs-md); }
.btn-block { width: 100%; padding: 13px var(--sp-5); }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* Hero */
.hero { padding: var(--hero-top) 0 var(--sp-10); position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 50% at 85% 5%, rgba(215, 230, 242, 0.75), transparent 70%),
    radial-gradient(30% 35% at 0% 70%, rgba(255, 90, 69, 0.045), transparent 70%),
    linear-gradient(to bottom, transparent, var(--bg));
}
.hero-grid { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-16); } }
.hero-grid > * { min-width: 0; }
.hero-art { display: block; max-width: 360px; justify-self: end; }
.eyebrow { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--mono); font-size: var(--fs-sm); font-weight: 500; color: var(--accent); margin-bottom: var(--sp-5); }
.eyebrow::before { content: ""; flex: none; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg stroke='%23ff5a45' stroke-linecap='round' fill='none'%3E%3Cpath stroke-width='14' d='M144 128h92M112 128H20M128 144v92M128 112V20M139.3 139.3l65.1 65.1M116.7 116.7L51.6 51.6M116.7 139.3l-65.1 65.1M139.3 116.7l65.1-65.1'/%3E%3Cpath stroke-width='10' d='M142.8 134.1l70.2 29.1M134.1 142.8l29.1 70.2M121.9 142.8l-29.1 70.2M113.2 134.1L43 163.2M113.2 121.9L43 92.8M121.9 113.2L92.8 43M134.1 113.2L163.2 43M142.8 121.9L213 92.8'/%3E%3C/g%3E%3Ccircle cx='128' cy='128' r='28' fill='%23ff5a45'/%3E%3C/svg%3E") center / contain no-repeat; }
h1 { font-size: var(--fs-h1); max-width: 26ch; line-height: var(--lh-display); text-wrap: balance; }
h1 em { font-style: italic; color: var(--brand-text); }
[hidden] { display: none !important; } /* a figure's own display rule must not beat the attribute */
.lede { margin-top: var(--sp-5); max-width: 46ch; font-size: var(--fs-lede); color: var(--muted); line-height: var(--lh-snug); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--gap-follow); }

/* Staggered reveal: a figure's items fade up in turn when it plays (walk.js adds
   .play). --i is an item's place; a figure sets --step between items and --wait before
   the first. With reduced motion every item is shown at once. */
.chat > *, .lp { opacity: 0; transform: translateY(6px); --at: calc(var(--i) * var(--step) + var(--wait, 0s));
  transition: opacity .35s ease var(--at), transform .35s ease var(--at); }
.chat.play > *, .loop2.play .lp { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .chat > *, .lp { opacity: 1; transform: none; } }

/* Surfaces: the white panel with a hairline border that most components sit on.
   A component adds only its own padding and layout. */
 .card, .form, .aud-card, .lp, .meter, .q { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.race, .dag, .xray, .watch, .cores, .shape, .shops, .chat, .io-col, .conn, .report-reuse, .walkthrough-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.dot.live{ background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }

/* Code: the classes tools/components/code.py writes, coloured once from the
   surface's --code-* inks (:root's, a figure's in .term, .editor, /product's .app-root). */
.code-keyword { color: var(--code-keyword); } .code-function { color: var(--code-function); }
.code-string { color: var(--code-string); } .code-number { color: var(--code-number); }
.code-property { color: var(--code-property); } .code-prompt { color: var(--code-prompt); }
.code-comment { color: var(--code-comment); font-style: italic; }
.code-lit { background: var(--code-lit); border-radius: 2px; }

.delta { display: flex; align-items: baseline; gap: var(--sp-3); font-family: var(--mono); font-size: var(--fs-sm); }
.delta b { font-weight: 500; }
.neg { color: var(--neg-text); } .pos { color: var(--pos); }

/* Architecture */

/* Sections */
.section, .chapter { padding: var(--section-y) 0; border-bottom: 1px solid var(--border); }
.section:last-of-type { border-bottom: 0; }

.muted { color: var(--muted); margin-top: 14px; max-width: 48ch; }

.card {
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--muted); font-size: var(--fs-base-sm); }

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

/* Stats */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: var(--sp-10); background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--surface); padding: var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-2); }
.stat b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-num); line-height: 1; letter-spacing: var(--track-tight); color: var(--text); }
.stat span, .aud-card span:not(.k), .io-list li span { color: var(--muted); font-size: var(--fs-base-sm); line-height: var(--lh-snug); }
.footnote { margin-top: var(--sp-5); font-size: var(--fs-md); color: var(--faint); max-width: 70ch; }

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

.form { display: grid; gap: var(--sp-4); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.field { display: grid; gap: 6px; }
label { font-size: var(--fs-md); color: var(--muted); }
.opt { color: var(--faint); font-size: var(--fs-sm); }
input, textarea {
  width: 100%; padding: 11px var(--sp-3); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text); border: 1px solid var(--border-strong);
  font: inherit; font-size: 16px; outline: none;  /* iOS Safari zooms the page when a field under 16px takes focus */
  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: 0; font-size: var(--fs-base-sm); color: var(--muted); }
.form-msg.ok { color: var(--pos); }
.form-msg.err { color: var(--neg-text); }
.form.sent .field, .form.sent button, .form.sent .qf-note { display: none; }
.form.sent .form-msg { font-size: var(--fs-lg); color: var(--text); }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: var(--sp-8) 0; font-size: var(--fs-md); color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-8); }
.brand.small .wordmark { height: 18px; }
.brand.small .mark { width: 16px; height: 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.copy { margin-left: auto; color: var(--faint); }
.footer .tag { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--faint); }

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

/* Reduced motion: every transition and animation lands on its end state at once,
   so a staggered reveal never leaves an item half-faded. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* biome-ignore lint/complexity/noImportantStyles: reduced motion has to beat every component's own timing */
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Race animation (hero) */
.race { margin: var(--gap-figure) 0 0; padding: var(--sp-5) var(--sp-5) 14px; box-shadow: 0 1px 2px rgba(20,20,20,0.04), 0 24px 60px -30px rgba(20,20,20,0.25); }

#race, .shops canvas { display: block; width: 100%; height: auto; }

 .xray .k, .watches .k, .cores .k { font-size: var(--fs-xs); color: var(--faint); font-family: var(--mono); letter-spacing: var(--track-caps); text-transform: uppercase; }

.race-replay { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); 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: var(--gap-figure) 0 0; display: grid; gap: var(--sp-4); 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; } }
/* The three line drawings (the dbt DAG, the readers fan, the plan) share one look. */
.dag{ width: 100%; max-width: 100%; height: auto; display: block; padding: var(--sp-2); color: var(--edge); }
.dag .node rect{ fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.dag .node .bar{ stroke: none; }
.dag .node.stg .bar { fill: var(--st-stg); }
.dag .node.mart .bar { fill: var(--st-mart); }
.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: var(--track-caps); text-transform: uppercase; fill: var(--faint); }
.dag .name{ font-family: var(--sans); font-size: 12.5px; font-weight: 500; fill: var(--text); }
.dag .foot{ font-family: var(--mono); font-size: 8.5px; fill: var(--accent); }
.dag .edges .hot { stroke: var(--brand); stroke-width: 2; color: var(--brand); }
.dag .ok-dot{ fill: var(--ok); }
.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 { padding: 14px var(--sp-4); }
.xray-head { display: flex; flex-wrap: wrap; gap: 6px var(--sp-2); align-items: baseline; font-size: var(--fs-base-sm); 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: var(--fs-sm); }
.xray-rows th { text-align: left; font-weight: 400; color: var(--faint); padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border); }
.xray-rows td { padding: 6px var(--sp-2); white-space: nowrap; }
.xray-rows .w-neg td:first-child { color: var(--neg-text); } .xray-rows .w-pos td:first-child { color: var(--accent); }
.xray-rows .w-neg { background: rgba(255, 90, 69, 0.07); } .xray-rows .w-pos { background: var(--accent-tint); }
.xray-note { margin-top: var(--sp-3); font-size: var(--fs-md); color: var(--muted); }
.watches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.watch { display: grid; gap: 2px; padding: 14px var(--sp-4); }
.watch b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-num); line-height: 1; letter-spacing: var(--track-tight); }
.watch.eddy b { color: var(--brand-text); } .watch.pg b { color: var(--muted); }
.watch .sub { font-size: var(--fs-sm); color: var(--muted); }
.agree { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); color: var(--muted); }
.agree .ok-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(21,128,61,0.15); }

.aside h3 { font-size: var(--fs-xl); margin-bottom: 10px; }
.aside p { color: var(--muted); }

/* Shared SVG idiom: node cards, readers, pulses */

.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; }

/* Reads: cores chart */

.cores { padding: 14px var(--sp-4) var(--sp-3); }

.bars { display: grid; gap: 3px; }
.bars .bar { position: relative; height: 14px; border-radius: var(--r-xs); }
.bars .bar.pg { background: var(--text); width: 4px; min-width: 4px; transition: width 900ms cubic-bezier(.2,.7,.2,1); }

.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: var(--fs-xs); color: var(--muted); opacity: 0; transition: opacity 400ms ease 600ms; }
.bars .bar.pg[style*="100%"] i { left: auto; right: 8px; color: #fff; }

@media (max-width: 559px) {  .bars .bar i { font-size: var(--fs-2xs); } }

/* How it works: the plan figure (/for/data) */

/* SQL shapes */
.shapes { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: var(--gap-figure); }
@media (min-width: 640px) { .shapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .shapes { grid-template-columns: repeat(4, 1fr); } }
.shape { padding: var(--sp-4) var(--sp-4) 14px; display: grid; gap: var(--sp-2); align-content: start; }
.shape svg { width: 100%; height: auto; display: block; background: var(--code-bg); border-radius: var(--r-sm); padding: 6px; }
.shape h3 { font-size: var(--fs-base); margin-top: var(--sp-1); }
.shape p { color: var(--muted); font-size: var(--fs-base-sm); }
.shape .ok { font-family: var(--mono); font-size: var(--fs-sm); color: var(--pos); }
.shape .ok::before { content: "✓ "; }
/* A shape's base fills are kept at a class's weight (:where), so a state (.hit, .chg) wins by order alone. */
.shape :where(.rows rect, .cols rect) { fill: var(--fill-2); }
.shape .hit { fill: var(--accent); }

/* Round 1 refinements */

/* cores chart: each bar grows to its --w, and its label shows, when the figure is in view */
.live-figure.live .bars .bar.pg { width: var(--w); }
.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; } }

/* Jobs cards */

.shape .axis { stroke: var(--border-strong); stroke-width: 1; }
.shape .events circle { fill: var(--accent); }

/* ================================================================
   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.
   ================================================================ */
.ill-note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--faint); max-width: 80ch; }

.ch-n { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 500; color: var(--accent); margin-bottom: 14px; }
.ch-sub { margin-top: 14px; max-width: 54ch; color: var(--muted); font-size: var(--fs-lg); line-height: var(--lh-snug); }
.ch-split { display: grid; gap: var(--gap-figure); align-items: center; }
@media (min-width: 900px) {
  .ch-split { grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-16); }
  .ch-split.flip { grid-template-columns: 1.2fr 0.8fr; }
  .ch-split.flip > :first-child { order: 2; }
}
.ch-split > * { min-width: 0; }
:where(.chapter) figure { margin: 0; }
.chapter .ch-sub + figure { margin-top: var(--gap-figure); }
.chapter .follow { margin-top: var(--gap-follow); }

/* --- the product's surfaces: white panels on paper, as the product draws them --- */
.term, .editor { background: var(--fig-bg); color: var(--fig-text); border-radius: var(--r-lg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-fig); overflow: hidden;
  --code-keyword: var(--fig-accent); --code-function: var(--fig-accent); --code-string: var(--fig-str); --code-number: var(--fig-red); --code-comment: var(--fig-muted); }
/* The uppercase mono label of a figure (and of the chat's tool rows). */
.c-label, .c-k, .st-k, .t-k { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fig-muted); }
.c-label { margin-bottom: 10px; }
.c-label b { color: var(--fig-text); font-weight: 500; }
.c-label code { text-transform: none; color: var(--fig-text); }

.ed-grid { display: grid; grid-template-columns: 1fr; }
.c-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: 9px 0; border-bottom: 1px solid var(--fig-line); }
.c-row b { font-weight: 500; font-size: var(--fs-base-sm); }
.bump { animation: c-bump 1s ease-out; }
@keyframes c-bump { 0% { color: var(--fig-green-hi); } 100% { color: inherit; } }

/* 02 terminal */
.term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--fig-line); background: var(--fig-panel); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--fig-dot); }
.term-bar span { margin-left: var(--sp-2); font-family: var(--mono); font-size: var(--fs-xs); color: var(--fig-muted); }
.term-body { white-space: normal; margin: 0; padding: var(--sp-4); font-size: var(--fs-xs); line-height: var(--lh-code); overflow-x: auto; color: var(--fig-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(--fig-text); }
.term-body b { color: var(--fig-green); font-weight: 500; }
.term-body .tl.ok { color: var(--fig-text); margin-top: var(--sp-1); }

/* 03 editor */
.ed-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); padding: 10px 14px; border-bottom: 1px solid var(--fig-line); background: var(--fig-panel); font-size: var(--fs-xs); color: var(--fig-muted); }
.ed-tag { color: var(--fig-green); font-family: var(--mono); font-size: var(--fs-2xs); }
@media (min-width: 720px) { .ed-grid { grid-template-columns: 1.1fr 1fr; } }
.ed-sql { margin: 0; padding: var(--sp-4); font-size: var(--fs-xs); line-height: var(--lh-code); color: var(--fig-code); overflow-x: auto; border-bottom: 1px solid var(--fig-line); }
@media (min-width: 720px) { .ed-sql { border-bottom: 0; border-right: 1px solid var(--fig-line); } }
.ed-steps { list-style: none; margin: 0; padding: 14px; display: grid; gap: var(--sp-2); 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 var(--sp-3); border: 1px solid var(--fig-line); border-radius: var(--r-sm); background: var(--fig-panel); font-size: var(--fs-sm); 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 { color: var(--fig-accent); }
.st-n { color: var(--fig-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-r { color: var(--fig-muted); font-size: var(--fs-xs); }
.ed-steps li i { position: absolute; left: 11px; right: 11px; bottom: 5px; height: 2px; border-radius: var(--r-xs); background: var(--bg-2); }
.ed-steps li i::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--st-mart); border-radius: var(--r-xs); 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; padding: var(--sp-4); }
.shop-card { position: absolute; right: 22px; top: 22px; width: 260px; padding: var(--sp-3) 14px; border-radius: var(--r-md); background: var(--fig-bg); color: var(--fig-text); border: 1px solid var(--border-strong); box-shadow: 0 16px 40px -18px rgba(7, 18, 27, 0.4); font-size: var(--fs-sm); }
.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: var(--fs-sm); }
@media (max-width: 559px) { .shop-card { position: static; width: auto; margin-top: var(--sp-3); } }
 .meters{ display: grid; gap: 14px; margin-top: var(--gap-follow); }

/* 06 chat */
.chat { display: grid; gap: 10px; padding: var(--sp-5); box-shadow: 0 24px 60px -34px rgba(20,20,20,.3); }
.chat > .ill-note { margin-top: 0; }
.chat > * { --step: .7s; --wait: .2s; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: var(--r-lg); font-size: var(--fs-base-sm); line-height: var(--lh-snug); }
.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: var(--sp-2) var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.tool code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.t-k { color: var(--accent); }
.tool.yours .t-k { color: var(--neg-text); }
.t-r { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------------------
   Phones. Checked at 375, 390 and 430 px (iPhone SE/mini, 15, Pro Max).
   --------------------------------------------------------------- */
a, button { -webkit-tap-highlight-color: rgba(255, 90, 69, 0.15); }
.nav-extra { display: none; }
@media (max-width: 819px) {
  .nav-extra { display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; font-size: var(--fs-base-sm); color: var(--muted); }
  .nav-extra + .btn { margin-left: 14px; }
}
.footer-links a, .hero-walk a { display: inline-flex; align-items: center; min-height: 40px; }
.dag-scroll { min-width: 0; }
.swipe-hint { display: none; }
@media (min-width: 900px) { .pipe .dag-scroll { grid-area: dag; } }
@media (max-width: 639px) {
  .dag-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: var(--r-lg); }
  .dag-scroll .dag { min-width: 600px; }
  .swipe-hint { display: block; margin-top: 6px; font-family: var(--mono); font-size: var(--fs-xs); color: var(--faint); }
  /* eddy check: each detail on its own line under its check */
  .term-body { font-size: var(--fs-2xs); }
  .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); }
  .ch-sub { font-size: var(--fs-base); line-height: var(--lh-body); }
}
@media (max-width: 719px) {
  :root { --hero-top: var(--sp-12); --section-y: var(--sp-12); --render-y: var(--sp-12); --gap-figure: var(--sp-6); --gap-follow: var(--sp-6); }
}
@media (max-width: 639px) {
  .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: 1039px) { .links { gap: 14px; font-size: var(--fs-md); } }
.aud-more { background: var(--bg-2); }
.aud-more h2 { margin-bottom: var(--sp-2); }
.aud-grid { display: grid; gap: var(--sp-3); margin-top: var(--gap-follow); }
@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: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-12); transition: border-color .15s, transform .15s; }
.aud-card:hover { border-color: var(--accent); color: inherit; transform: translateY(-2px); }
.aud-card .k, .lp .k { font-size: var(--fs-md); font-weight: 500; color: var(--accent); }
.aud-card b { font-weight: 500; font-size: var(--fs-lg); letter-spacing: var(--track-tight); }
.aud-card i { position: absolute; left: 20px; bottom: 16px; font-style: normal; color: var(--brand-text); }
.ch-sub a { color: var(--accent); white-space: nowrap; }

/* agents: the loop and the tool list */
.loop2 { margin-top: var(--gap-figure); display: grid; gap: var(--sp-3); }
@media (min-width: 900px) { .loop2 { grid-template-columns: repeat(4, 1fr); } }
.lp { position: relative; display: grid; gap: 6px; padding: var(--sp-5); --step: .35s;
  transition: opacity .35s ease var(--at), transform .35s ease var(--at), border-color .35s ease calc(var(--at) + .2s); }
.loop2.play .lp:last-child { border-color: var(--brand); }
.lp b, .req b { font-family: var(--mono); font-weight: 500; font-size: var(--fs-base-sm); }
.lp span:last-child { color: var(--muted); font-size: var(--fs-base-sm); }
@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: var(--sp-3); }
@media (min-width: 560px) { .toolset { grid-template-columns: 1fr 1fr; } }
.ts-col { padding: var(--sp-5); background: var(--fig-bg); color: var(--fig-text); border: 1px solid var(--border-strong); border-radius: var(--r-md); }
.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(--fig-line); border-radius: var(--r-sm); background: var(--fig-panel); font-size: var(--fs-sm); color: var(--fig-accent); }
.ts-col.w li code { color: var(--brand-text); }
.ts-col li.more { color: var(--fig-muted); font-size: var(--fs-sm); align-self: center; }
.ts-note { margin-top: var(--sp-3); color: var(--fig-muted); font-size: var(--fs-md); line-height: var(--lh-snug); }
.ts-note code { color: var(--fig-text); font-size: var(--fs-sm); }

/* developers */
.dev-steps { margin-top: var(--sp-8); }
@media (min-width: 900px) { .dev-steps { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-8); } }
.dev-steps code, .io-list code, .inline-list code { font-size: 0.85em; color: var(--text); }
.term-body .mut { color: var(--fig-muted); }
.term-body .neg { color: var(--fig-red); }
.demo .cta-row { margin-top: var(--sp-6); }
@media (max-width: 639px) { .term-body .tl { white-space: pre-wrap; overflow-wrap: anywhere; } }
@media (max-width: 639px) { .cores .bar i { font-size: var(--fs-2xs); } }

/* ---------------------------------------------------------------
   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.
   --------------------------------------------------------------- */
.inline-list { margin-top: var(--sp-5); color: var(--muted); font-size: var(--fs-base-sm); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.quick-form { margin-top: var(--gap-follow); 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: var(--fs-md); color: var(--faint); 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: var(--fs-base-sm); }
.hero-walk a { color: var(--accent); }
@media (max-width: 559px) { .qf-row { flex-direction: column; } .qf-row .btn { width: 100%; } }
@media (max-width: 719px) { .hero h1 br { display: none; } }

/* In and out: sources and the ways eddy is served */
.io-grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
@media (min-width: 900px) { .io-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
.io-col { padding: var(--sp-6); }
.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: var(--sp-1); padding: 14px var(--sp-16) 14px 0; border-top: 1px solid var(--border); }
.io-list li b { font-weight: 500; }
.io-list li i { position: absolute; right: 0; top: 16px; font-style: normal; font-size: var(--fs-sm); }
.io-live { color: var(--ok); }
.io-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.io-next { color: var(--faint); }

/* 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: var(--gap-follow) 0 0; padding: 0; display: grid; gap: 0; max-width: 820px; }
.req li { display: grid; gap: var(--sp-1) var(--sp-6); padding: 14px 0; border-top: 1px solid var(--border); }
@media (min-width: 720px) { .req li { grid-template-columns: 260px 1fr; } }
.req span { color: var(--muted); }

/* Pricing */
@media (min-width: 820px) { .meters { grid-template-columns: repeat(3, 1fr); } }
.meter { padding: var(--sp-6); display: grid; gap: var(--sp-2); align-content: start; }
.meter .m-k{ font-family: var(--mono); font-size: var(--fs-xs); 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: var(--fs-base-sm); }

.flow { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: var(--sp-2); border-left: 2px solid var(--border); }
.flow li { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: baseline; padding: 9px var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-md); 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 .fn { font-family: var(--mono); font-size: var(--fs-sm); overflow-wrap: anywhere; display: grid; gap: 2px; }
.flow .fn small { font-size: var(--fs-xs); color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .flow li{ transition: none; opacity: 1; } }

.q { padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }

.faq { margin-top: var(--sp-6); 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: var(--sp-4) var(--sp-8) var(--sp-4) 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 var(--sp-5); color: var(--muted); max-width: 68ch; }

/* ---------------------------------------------------------------
   The homepage as the context layer (2026-10-02): the hero's
   sources-to-agent console, the three paths,
   the online change and the monthly bill. Each plays once,
   in view; reduced motion draws the final state.
   --------------------------------------------------------------- */

.term figcaption.ill-note { padding: 0 var(--sp-4) 14px; margin: 0; color: var(--fig-muted); }

/* the monthly bill */

#cost .stats { margin-top: var(--sp-5); }

/* what eddy is not */
.limits b { font-family: var(--sans); font-size: var(--fs-base); }

/* reports: a customer's page in your product, with the rows behind a number */
.appf { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.ap-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.ap-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--fill-2); }
.ap-url { margin-left: var(--sp-2); font-family: var(--mono); font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-toast { margin-left: auto; display: inline-flex; gap: var(--sp-2); align-items: center; padding: var(--sp-1) 10px; border-radius: var(--r-sm); background: var(--text); color: var(--surface); font-size: var(--fs-xs); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.ap-toast b { color: var(--brand); font-weight: 500; font-family: var(--mono); }
.ap-toast code { color: var(--surface); }
.ap-toast.on { opacity: 1; transform: none; }
.ap-body { display: grid; }
@media (min-width: 900px) { .ap-body { grid-template-columns: minmax(0, 1fr) 320px; } }
.ap-main { padding: var(--sp-5) var(--sp-5); min-width: 0; }
.ap-context { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--faint); line-height: var(--lh-snug); }
.report-reuse { padding: var(--sp-5); }
.chapter .appf + .report-reuse { margin-top: var(--gap-follow); }
.read-surfaces { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.read-surfaces a { display: inline-flex; align-items: center; min-height: var(--sp-10); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--accent); text-decoration: underline; }
.report-answer { margin-top: var(--sp-4); max-width: 70ch; line-height: var(--lh-body); }
.source-requirements { margin-top: var(--gap-figure); }
.source-requirements > p { margin-top: var(--sp-3); max-width: 70ch; color: var(--muted); }
.ap-head { display: flex; align-items: baseline; gap: var(--sp-3); }
.ap-head b { font-size: var(--fs-xl); font-weight: 600; letter-spacing: var(--track-tight); }
.ap-head span { color: var(--faint); font-size: var(--fs-md); }
.ap-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ap-kpi { padding: var(--sp-3) 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.ap-kpi span { display: block; font-size: var(--fs-xs); color: var(--faint); }
.ap-kpi b { font-family: var(--mono); font-weight: 500; font-size: var(--fs-xl); }
.ap-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; font-size: var(--fs-xs); }
.ap-filters span { padding: var(--sp-1) 9px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--muted); }
.ap-filters .on { border-color: var(--accent); color: var(--accent); }
.ap-filters .ap-sort { margin-left: auto; border: 0; font-family: var(--mono); }
.ap-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: var(--fs-sm); }
.ap-table th { text-align: left; font-weight: 500; color: var(--faint); font-size: var(--fs-xs); padding: 6px var(--sp-2); border-bottom: 1px solid var(--border); }
.ap-table td { padding: var(--sp-2); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: var(--fs-sm); }
.ap-table tr#ap-top td { background: var(--accent-tint); }
.ap-cell { padding: 2px 6px; margin: -2px -6px; border-radius: var(--r-xs); border-bottom: 1px dashed var(--brand); cursor: default; }
.ap-cell.hit { background: var(--brand); color: var(--text); border-color: transparent; }
.ap-page { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--faint); }
.ap-drawer { position: relative; padding: var(--sp-5) var(--sp-5); border-top: 1px solid var(--border); background: var(--bg); }
.ap-hint { position: absolute; inset: 18px 20px auto; color: var(--faint); font-size: var(--fs-md); transition: opacity .3s; }
.ap-drawer.open .ap-hint { opacity: 0; }
.ap-dk, .ap-prov, .ap-dsql { transition: opacity .4s; }
.ap-drawer:not(.open) .ap-dk, .ap-drawer:not(.open) .ap-prov, .ap-drawer:not(.open) .ap-dsql { opacity: 0; }
.ap-dk code { font-size: var(--fs-sm); color: var(--text); }
@media (min-width: 900px) { .ap-drawer { border-top: 0; border-left: 1px solid var(--border); } }
.ap-dk { font-size: var(--fs-md); color: var(--muted); }
.ap-dk b { color: var(--text); font-family: var(--mono); font-weight: 500; }
.ap-prov { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ap-prov li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: center; padding: var(--sp-2) 10px; border-radius: var(--r-sm); font-size: var(--fs-xs); min-width: 0; }
.ap-prov li code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-prov li span { font-family: var(--mono); font-weight: 600; }
.ap-prov .neg { background: var(--neg-tint); } .ap-prov .neg span { color: var(--neg-text); }
.ap-prov .pos { background: var(--accent-tint); } .ap-prov .pos span { color: var(--accent); }
.ap-dsql { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--faint); line-height: var(--lh-snug); }
.ap-replay { position: absolute; right: 16px; bottom: 10px; margin: 0; }

@media (max-width: 639px) {
  .ap-kpis { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .ap-kpi { padding: var(--sp-2); }
  .ap-table th:nth-child(3), .ap-table td:nth-child(3) { display: none; }
  .ap-toast { display: none; }
  .ap-main, .ap-drawer { padding: 14px; }
}
.appf .bump { animation: ap-bump 1.1s ease-out; }
@keyframes ap-bump { 0% { color: var(--accent); background: var(--accent-tint); } 100% { background: transparent; } }

/* Phones: every page's links behind one icon at the right edge (build_pages.py's nav);
   the call to action sits before it */
.nav-menu { display: none; }
@media (max-width: 819px) {
  .nav-extra { display: none; }
  .nav-menu { display: block; order: 3; margin-left: 2px; }
  .nav-menu + .btn { margin-left: auto; order: 2; }
}
.nav-menu summary { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; border-radius: var(--r-sm); color: var(--text); cursor: pointer; list-style: none; user-select: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.nav-menu summary .x { display: none; }
.nav-menu[open] summary .bars { display: none; }
.nav-menu[open] summary .x { display: block; }
.nav-menu summary:hover, .nav-menu[open] summary { background: var(--surface); }
/* the panel hangs from the sticky header, across the whole width */
.nav-menu nav { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: var(--sp-1) var(--gutter) 14px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 18px 30px -20px rgba(20, 20, 20, .25); }
.nav-menu nav a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--border); font-size: var(--fs-lg); }
.nav-menu nav a:last-child { border-bottom: 0; }
.nav-menu nav a[aria-current] { color: var(--accent); }

/* ================================================================
   eddy, the mascot (assets/eddy/, cut from assets/mascot/): the fold,
   the bands he sits in, and the components beside him. DESIGN.md,
   "The mascot".
   ================================================================ */
.eddy { display: block; width: 100%; height: auto; }
.mk { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

/* the fold: the headline and the form, eddy running a change to its report */
.fold-hero { padding-top: var(--sp-12); }
.fold { display: grid; gap: var(--sp-10); align-items: center; }
@media (min-width: 900px) { .fold { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-16); } }
.fold > * { min-width: 0; }
.fold h1 { max-width: 14ch; }
.fold .lede { max-width: 42ch; color: var(--text); }
.fold .lede b { font-weight: 500; }
.hero-cta { display: grid; gap: var(--sp-1); margin-top: var(--sp-6); }
.hero-cta .quick-form { margin-top: 0; }
.scene { position: relative; padding-top: var(--sp-10); }
.hero-eddy { max-width: 560px; margin: 0 auto; }
.note { position: absolute; z-index: 1; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); line-height: var(--lh-snug); }
.note.a { left: 4%; top: 0; }
.note.b { right: 0; top: 0; text-align: right; }
.note svg { position: absolute; width: 44px; height: 44px; stroke: var(--text); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.note.a svg { left: 10px; top: 24px; }
.note.b svg { right: 30px; top: 36px; transform: scaleX(-1); }
.trig { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; padding: 9px 14px; border-radius: var(--r-md); background: var(--bg-2); font-family: var(--mono); font-size: var(--fs-sm); color: var(--text); white-space: normal; }
.chip i { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: var(--fs-2xs); color: var(--accent-ink); background: var(--cobalt); }
.chip.red i { background: var(--brand-deep); }

.arr { color: var(--faint); }
/* the verticals (verticals.js): the trigger line and the report card fade while their words swap */
.trig, .rep.cycles .rep-bar{ transition: opacity .26s ease; }
.trig.swap, .rep.cycles.swap .rep-bar{ opacity: 0; }
/* the tenant word in "Each shop, its own store": underlined in the brand, swapped with the fold */
.cyc { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 6px; transition: opacity .26s ease; }
.cyc.swap { opacity: 0; }
.fold-side { min-width: 0; }
.verts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1); margin: var(--sp-5) 0 0; padding: 0; border: 0; min-width: 0; }
.verts button { padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r-pill); background: none; font: inherit; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--faint); cursor: pointer; min-height: 32px; }
.verts button:hover { color: var(--text); }
.verts button[aria-pressed="true"] { color: var(--brand-text); border-color: var(--brand); background: var(--brand-tint); }

/* a band: a tinted panel with a headline and eddy in it */
.band { background: var(--lilac); color: var(--text); border-radius: var(--r-xl); padding: var(--sp-12) var(--sp-10); display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px) { .band { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 719px) { .band { padding: var(--sp-8) var(--sp-6); } }
.band h2 { font-size: var(--fs-h2); max-width: 14ch; line-height: var(--lh-display); }
.band p:not(.mk) { margin-top: var(--sp-4); max-width: 44ch; font-size: var(--fs-lg); }
.band .mk { color: var(--text); }
.band-eddy { max-width: 300px; justify-self: end; }
@media (max-width: 719px) { .band-eddy { max-width: 160px; } }
.band.sage { background: var(--sage); }

/* two columns: copy beside a figure or a pose */
.two { display: grid; gap: var(--gap-figure); align-items: center; }
@media (min-width: 900px) { .two { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-16); } .two.flip > :first-child { order: 2; }  }
.two > * { min-width: 0; }

.two.flip { margin-bottom: var(--gap-figure); }

/* the report card: what a report lost and gained, as retractions and insertions */
.rep { margin: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-fig); overflow: hidden; }
.rep > .ill-note { margin: 0; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); max-width: none; line-height: var(--lh-body); }
.rep-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); background: var(--bg); }
.rep-bar b { font-weight: 600; }
.rep-bar span { font-family: var(--mono); font-size: var(--fs-xs); color: var(--faint); }
.rep-bar.foot { border-bottom: 0; border-top: 1px solid var(--border); }

.rep-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); font-family: var(--mono); font-size: var(--fs-md); }
.rep-row b { font-weight: 600; }
.rep-row.out { background: var(--brand-tint); color: var(--muted); }
.rep-row.out span { text-decoration: line-through; text-decoration-color: var(--brand); }
.rep-row.out b { color: var(--brand-text); }
.rep-row.in { background: var(--cobalt-tint); color: var(--text); }
.rep-row.in b { color: var(--accent); }

/* in, eddy, out */

/* three cards: what customers ask for */
.cards3 { display: grid; gap: var(--sp-4); margin-top: var(--gap-figure); }
@media (min-width: 900px) { .cards3 { grid-template-columns: repeat(3, 1fr); } }
.cd { padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); display: grid; gap: var(--sp-2); align-content: start; }
.cd b { font-family: var(--mono); font-weight: 500; font-size: var(--fs-sm); color: var(--brand-text); }
.cd h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-num); line-height: 1.05; margin: 0; }
.cd p { color: var(--muted); font-size: var(--fs-base-sm); }
.cd .was { margin-top: var(--sp-2); font-family: var(--mono); font-size: var(--fs-xs); color: var(--faint); }
.cd .was s { color: var(--brand-text); }

/* the ask: the sun band at the end of every page, eddy celebrating */
.ask { background: var(--sun); color: var(--text); border-radius: var(--r-xl); padding: var(--sp-12) var(--sp-10); display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px) { .ask { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-14); } .demo .ask { align-items: start; } }
@media (max-width: 719px) { .ask { padding: var(--sp-8) var(--sp-6); } }
.ask > * { min-width: 0; }
.ask h2 { font-size: var(--fs-h2); max-width: 16ch; line-height: var(--lh-display); }
.ask-copy > p { margin-top: var(--sp-3); max-width: 46ch; color: var(--text); }
.ask .checks { color: var(--text); }
.ask .cta-row .btn-ghost { border-color: var(--text); }
.ask-eddy { max-width: 260px; justify-self: end; }
.ask-form { grid-template-areas: "copy" "form" "art"; }
.ask-form .ask-copy { grid-area: copy; }
.ask-form .form { grid-area: form; }
.ask-form .ask-eddy { grid-area: art; justify-self: start; }
@media (min-width: 900px) { .ask-form { grid-template-areas: "copy form" "art form"; row-gap: var(--sp-6); } }
@media (max-width: 719px) { .ask-eddy { max-width: 96px; } .ask .form { padding: var(--sp-4); } }
.demo .form { background: var(--surface); }

/* the 404: eddy peeking in */
.nf { min-height: 70vh; display: grid; align-items: center; }
.nf-grid { display: grid; gap: var(--sp-10); align-items: center; }
@media (min-width: 900px) { .nf-grid { grid-template-columns: 300px minmax(0, 1fr); } }
.nf-eddy { max-width: 240px; }
.nf h1 { max-width: 14ch; }
.nf .lede { max-width: 38ch; }

/* The connectors strip (components/figures.py's connectors(), tools/marks.py): three
   groups of chips, a mark and a name each, in the ink; a planned one is dashed */
.conn { display: grid; gap: var(--sp-5); margin: var(--sp-8) 0 0; padding: var(--sp-6); }
@media (min-width: 900px) { .conn { grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-6); } }
.conn .c-label { margin-bottom: var(--sp-3); }
.conn ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.conn li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
.conn li svg { width: 18px; height: 18px; flex: none; fill: currentColor; color: var(--muted); }
.conn li svg.ln { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.conn li i { margin-left: 2px; font-style: normal; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--faint); }
.conn li.soon { border-style: dashed; color: var(--muted); }

/* A source correction, one SQL model and two customer interfaces. */
.report-walkthrough { margin: var(--gap-figure) 0 0; }
.walkthrough-controls { min-width: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0; border: 0; }
.walkthrough-controls .btn[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.walkthrough-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .walkthrough-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.walkthrough-panel { min-width: 0; padding: var(--sp-6); }
.walkthrough-panel .k { margin-bottom: var(--sp-3); color: var(--accent); font-size: var(--fs-md); }
.walkthrough-panel h3 { margin-bottom: var(--sp-5); }
.walkthrough-row { margin: 0; display: grid; gap: var(--sp-3); }
.walkthrough-row > div { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; }
.walkthrough-row dt { color: var(--muted); }
.walkthrough-row dd { margin: 0; }
.walkthrough-context { color: var(--muted); font-size: var(--fs-md); margin-top: var(--sp-5); }
.walkthrough-panel table { width: 100%; margin-top: var(--sp-5); border-collapse: collapse; font-size: var(--fs-md); }
.walkthrough-panel th, .walkthrough-panel td { padding: var(--sp-3) 0; text-align: left; border-bottom: 1px solid var(--border); font-weight: 400; }
.walkthrough-panel th:last-child, .walkthrough-panel td:last-child { text-align: right; }
.walkthrough-panel tbody tr:first-child { color: var(--accent); font-weight: 600; }
.walkthrough-panel blockquote { margin: var(--sp-5) 0 0; padding: var(--sp-4); border-radius: var(--r-md); background: var(--accent-tint); }
.walkthrough-question { color: var(--muted); font-size: var(--fs-md); }
.walkthrough-panel pre, .walkthrough-query pre { max-width: 100%; margin: 0; padding: var(--sp-4); overflow-x: auto; border-radius: var(--r-sm); background: var(--code-bg); font-size: var(--fs-sm); line-height: var(--lh-code); }
.walkthrough-query { margin-top: var(--sp-5); }
.walkthrough-query summary { cursor: pointer; color: var(--accent); padding: var(--sp-3) 0; }
.walkthrough-query pre { margin-top: var(--sp-4); }
.report-walkthrough figcaption { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--faint); }
.report-walkthrough figcaption a { text-decoration: underline; text-underline-offset: 3px; }
/* The temporal contract below the three timeline cards. */
.time-detail { margin-top: var(--gap-follow); max-width: 72ch; }
.time-detail h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); margin-bottom: var(--sp-3); }
.time-detail p + p { margin-top: var(--sp-4); }