/* GENERATED by web/build.mjs from web/src — edit the source, then rebuild. */
/* ── app-spa/src/umbodi-theme.css ── */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────
 * UMBODI THEME — one palette for the app AND the public site.
 *
 * Tokens only: no selectors below `:root`, no component rules. Two consumers:
 *   - the app imports it after ATLAS and brand.css (app-spa/src/main.tsx);
 *   - web/build.mjs puts it in media/web.css, and web/src/theme.css's variables (--canvas, --text,
 *     --accent…) are aliases of the semantic tokens below.
 *
 * WHY ONE FILE. Until 2026-11-13 the brand was defined twice: the site carried its own hex palette (from
 * the reviewed UX prototype) and the app reached a slightly different one through ATLAS's ramps. The owner
 * chose the SITE's palette as Umbodi's (2026-11-13): it is the reviewed design, and its estimate amber is
 * the one that passes AA as text (#8a5f00, 5.65:1 on white; the earlier #B07A00 was 3.73:1).
 *
 * HOW IT IS BUILT.
 *   1. PALETTE (`--umbodi-*`): the colours themselves, light, then swapped wholesale for dark.
 *   2. SEMANTICS: ATLAS's `--ds-*` tokens pointed at the palette, ONE theme-agnostic block, because
 *      the palette underneath already swaps. Umbodi meanings ATLAS has no token for (measured,
 *      estimate, the accent hairline, glass, shadows) are `--ux-*`.
 *   The mapping block is `:root` (0,1,0) and comes after ATLAS's `[data-theme="dark"]`
 *   (0,1,0) in both consumers, so it wins in both themes; brand.css keeps only the corrections this
 *   palette does not define, so nothing here is overridden by a stronger selector.
 *
 * DARK ON THE SITE. The site follows the reader's system setting with no script; web/build.mjs copies
 * the dark palette block below under `@media (prefers-color-scheme: dark)` with
 * `:not([data-theme='light'])`. Keep that block a single flat rule: the copy is made from its text.
 *
 * HONESTY COLOURS: teal = measured on Google, amber = estimate, blue = actions and selection only.
 * They are never swapped for visual balance (docs/ux-redesign/CLAUDE.md).
 * ───────────────────────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── 1. PALETTE, light ─────────────────────────────────────────────────────────────────────── */
  --umbodi-canvas: #f6f7f9;
  --umbodi-surface: #ffffff;
  --umbodi-sidebar: #f1f2f5;
  --umbodi-hover: #eceef2;
  --umbodi-line: #e3e5ea;
  --umbodi-line-strong: #d3d6dd;
  --umbodi-surface-2: #fafbfc;
  --umbodi-text: #0e1116;
  --umbodi-text-2: #464c59;
  --umbodi-text-3: #646a78;
  --umbodi-blue: #1e5bff;
  --umbodi-blue-hover: #164ce0;
  --umbodi-blue-soft: #edf2ff;
  --umbodi-blue-line: #c9d8ff;
  --umbodi-blue-text: #1e5bff;
  --umbodi-teal: #0b6e66;
  --umbodi-teal-soft: #e6f3f1;
  --umbodi-amber: #8a5f00;
  --umbodi-amber-soft: #fbf3df;
  --umbodi-red: #c4453a;
  --umbodi-red-soft: #fbecea;
  --umbodi-bezel: #0e1116;
  --umbodi-shadow-1: 0 1px 2px rgba(14, 17, 22, 0.04), 0 1px 1px rgba(14, 17, 22, 0.03);
  --umbodi-shadow-pop: 0 8px 24px -6px rgba(14, 17, 22, 0.16), 0 2px 6px rgba(14, 17, 22, 0.06);

  /* ── 2. SEMANTICS (both themes: the palette underneath swaps) ─────────────────────────────── */
  --ds-background-screen: var(--umbodi-canvas);
  --ds-background-elevated: var(--umbodi-surface);
  --ds-background-muted: var(--umbodi-sidebar);
  --ds-background-inset: var(--umbodi-surface-2);
  --ds-border-subtle: var(--umbodi-line);
  --ds-border-normal: var(--umbodi-line-strong);
  --ds-content-primary: var(--umbodi-text);
  --ds-content-secondary: var(--umbodi-text-2);
  --ds-content-tertiary: var(--umbodi-text-3);
  --ds-interactive-primary: var(--umbodi-blue);
  --ds-interactive-primary-hover: var(--umbodi-blue-hover);
  --ds-interactive-selection: var(--umbodi-blue-soft);
  --ds-content-link: var(--umbodi-blue-text);
  --ds-border-focus: var(--umbodi-blue);
  --ds-content-critical: var(--umbodi-red);
  --ds-sentiment-critical-subtle-bg: var(--umbodi-red-soft);
  /* NOT mapped: --ds-background-hover. ATLAS's hover is a translucent overlay, so it shows on every surface;
     the palette's solid hover would vanish on ATLAS's dark popovers (#1c2430 is lighter than #1a1e25). The site
     uses --umbodi-hover directly (web/src/theme.css). */

  --ux-accent-line: var(--umbodi-blue-line);
  --ux-measured: var(--umbodi-teal);
  --ux-measured-soft: var(--umbodi-teal-soft);
  --ux-estimate: var(--umbodi-amber);
  --ux-estimate-soft: var(--umbodi-amber-soft);
  --ux-glass: color-mix(in srgb, var(--umbodi-surface) 84%, transparent);
  --ux-shadow-1: var(--umbodi-shadow-1);
  --ux-shadow-pop: var(--umbodi-shadow-pop);
  --ux-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* one radius scale: controls 8px, cards and popovers 12px */
  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-control: 8px;
}

/* ── 1. PALETTE, dark (web/build.mjs copies this rule for the system setting: keep it flat) ───── */
:root[data-theme='dark'] {
  --umbodi-canvas: #0a0c10;
  --umbodi-surface: #111419;
  --umbodi-sidebar: #0d1014;
  --umbodi-hover: #1a1e25;
  --umbodi-line: #22262e;
  --umbodi-line-strong: #30353f;
  --umbodi-surface-2: #14171d;
  --umbodi-text: #eceef2;
  --umbodi-text-2: #a6acb8;
  --umbodi-text-3: #8a909c;
  --umbodi-blue: #2c68fc;
  /* Deeper than the fill, never lighter: white text on it is 6.65:1. Was #4a7dff (3.70:1, under AA); owner 2026-11-13. */
  --umbodi-blue-hover: #1a4edb;
  --umbodi-blue-soft: rgba(47, 107, 255, 0.16);
  --umbodi-blue-line: rgba(91, 135, 255, 0.45);
  --umbodi-blue-text: #86a6ff;
  --umbodi-teal: #3fc1b1;
  --umbodi-teal-soft: rgba(63, 193, 177, 0.13);
  --umbodi-amber: #e3b452;
  --umbodi-amber-soft: rgba(227, 180, 82, 0.13);
  --umbodi-red: #f07467;
  --umbodi-red-soft: rgba(240, 116, 103, 0.13);
  --umbodi-bezel: #2a2f39;
  --umbodi-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --umbodi-shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  --umbodi-canvas: #0a0c10;
  --umbodi-surface: #111419;
  --umbodi-sidebar: #0d1014;
  --umbodi-hover: #1a1e25;
  --umbodi-line: #22262e;
  --umbodi-line-strong: #30353f;
  --umbodi-surface-2: #14171d;
  --umbodi-text: #eceef2;
  --umbodi-text-2: #a6acb8;
  --umbodi-text-3: #8a909c;
  --umbodi-blue: #2c68fc;
  /* Deeper than the fill, never lighter: white text on it is 6.65:1. Was #4a7dff (3.70:1, under AA); owner 2026-11-13. */
  --umbodi-blue-hover: #1a4edb;
  --umbodi-blue-soft: rgba(47, 107, 255, 0.16);
  --umbodi-blue-line: rgba(91, 135, 255, 0.45);
  --umbodi-blue-text: #86a6ff;
  --umbodi-teal: #3fc1b1;
  --umbodi-teal-soft: rgba(63, 193, 177, 0.13);
  --umbodi-amber: #e3b452;
  --umbodi-amber-soft: rgba(227, 180, 82, 0.13);
  --umbodi-red: #f07467;
  --umbodi-red-soft: rgba(240, 116, 103, 0.13);
  --umbodi-bezel: #2a2f39;
  --umbodi-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --umbodi-shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
}

/* ── src/theme.css ── */
/* The website's tokens and base, from the reviewed prototype (docs/ux-redesign/prototype/src/index.css, harmony.css,
   home.css). Dark follows the reader's system setting unless a page sets data-theme. The base rules are scoped to
   .w-root so the pages still on their old markup (proof, observatory, benchmarks, defect pages, the index) keep theirs. */

@font-face{font-family:'Geist';src:url('/media/fonts/Geist-Variable.woff2?v=46525b05bb') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/media/fonts/GeistMono-Variable.woff2?v=3ef2c50dc1') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root {
  /* Aliases of the Umbodi theme (app-spa/src/umbodi-theme.css, which build.mjs puts first in media/web.css):
     one palette for the app and the site. Never a hex here — test/web-theme-tokens.test.mjs. Dark comes
     from the theme's palette swap; build.mjs copies it under prefers-color-scheme for the system setting. */
  --canvas: var(--ds-background-screen); --surface: var(--ds-background-elevated); --sidebar: var(--ds-background-muted);
  --hover: var(--umbodi-hover); --line: var(--ds-border-subtle); --line-strong: var(--ds-border-normal);
  --surface-2: var(--ds-background-inset);
  --text: var(--ds-content-primary); --text-2: var(--ds-content-secondary); --text-3: var(--ds-content-tertiary);
  --accent: var(--ds-interactive-primary); --accent-hover: var(--ds-interactive-primary-hover);
  --accent-soft: var(--ds-interactive-selection); --accent-line: var(--ux-accent-line); --accent-text: var(--ds-content-link);
  --measured: var(--ux-measured); --measured-soft: var(--ux-measured-soft);
  --estimate: var(--ux-estimate); --estimate-soft: var(--ux-estimate-soft);
  --stop: var(--ds-content-critical); --stop-soft: var(--ds-sentiment-critical-subtle-bg);
  --r-sm: var(--ds-radius-sm); --r: var(--ds-radius-md); --r-lg: var(--ds-radius-lg);
  --shadow-1: var(--ux-shadow-1); --shadow-pop: var(--ux-shadow-pop);
  --ease: var(--ux-ease);
  --bezel: var(--umbodi-bezel);
  --glass: var(--ux-glass);
  --glass-blur: saturate(1.5) blur(16px);
}

/* a page built from web/ is all .w-root: the body takes the website's ground */
body:has(> .w-root, > .bar > .w-root) { margin: 0; background: var(--surface); }
.w-root {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px; line-height: 1.5; color: var(--text);
  font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.w-root *, .w-root *::before, .w-root *::after { box-sizing: border-box; }
/* one class of weight: above the old pages' element rules, level with the components, which come later and win */
.w-root :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.w-root :where(button) { font: inherit; color: inherit; }
.w-root :where(a) { color: inherit; text-decoration: none; }
.w-root ::selection { background: var(--accent-soft); color: var(--text); }
.w-root :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.w-root .num { font-variant-numeric: tabular-nums; }
.w-root .mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.w-root .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons (prototype App.css), scoped */
.w-root .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--r); border: 1px solid transparent;
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; background: none; color: var(--text); box-shadow: none;
  transition: background 120ms var(--ease), border-color 120ms var(--ease), box-shadow 120ms var(--ease), opacity 120ms;
}
.w-root .btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.w-root .btn-block { width: 100%; }
.w-root .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(30, 91, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.w-root .btn-primary:hover { background: var(--accent-hover); }
.w-root .btn-secondary { background: var(--surface); border-color: var(--line); color: var(--text); box-shadow: var(--shadow-1); }
.w-root .btn-secondary:hover { border-color: var(--line-strong); background: var(--surface-2); }
.w-root .btn-ghost { background: none; color: var(--text-2); }
.w-root .btn-ghost:hover { background: var(--hover); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .w-root *, .w-root *::before, .w-root *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* the legal pages load no i18n runtime or chrome script: their header keeps the links and Start free only */
body.legal .w-header :is(#hdrAuth, #install, .langsw, .w-nav-sep) { display: none; }
body.legal .w-menu { display: none !important; }
body.legal .w-bar-menu { display: flex !important; position: static !important; flex-direction: row !important; background: none !important; box-shadow: none !important; padding: 0 !important; }

/* ── the header and footer around every page ─────────────────────────────────────────────────── */
.bar { position: sticky; top: 0; z-index: 20; }
.w-header { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--line); }
.w-header-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.w-header .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--text); }
.w-bar-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.w-header .w-nav { display: flex; align-items: center; gap: 4px; }
.w-header .w-nav a.chrome-navlink { white-space: nowrap; display: inline-flex; align-items: center; padding: 6px 10px; border: 0; border-radius: var(--r-sm); font-size: 14px; font-weight: 400; color: var(--text-2); background: none; transition: color 120ms var(--ease), background 120ms var(--ease); }
.w-header .w-nav a.chrome-navlink:hover, .w-header .w-nav a.chrome-navlink[aria-current] { color: var(--text); background: var(--canvas); }
.w-nav-sep { width: 1px; height: 20px; background: var(--line); margin: 0 8px; }
.w-header .btn { height: 34px; padding: 0 14px; margin-left: 4px; font-size: 14px; }
.w-header #hdrAuth { position: relative; display: inline-flex; }
.w-header #install { display: none; }
.w-header .langsw { position: relative; display: inline-flex; }
.w-header .lang-btn { height: 34px; padding: 0 9px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.w-header .lang-btn:hover { background: var(--canvas); color: var(--text); }
.w-header .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 210px; max-height: 340px; overflow: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.w-header .lang-grp { padding: 8px 8px 4px; font-size: 12px; color: var(--text-3); }
.w-header .lang-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 14px; cursor: pointer; }
.w-header .lang-opt:hover { background: var(--hover); }
.w-header .lang-search { width: 100%; margin: 6px 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--text); font-size: 13px; }
.w-menu { display: none; margin-left: auto; width: 44px; height: 44px; place-items: center; border: 0; border-radius: var(--r); background: none; color: var(--text); cursor: pointer; }

.foot { background: var(--surface); }
/* column titles are labels, not headings: an <h4> after a page's <h2> is a skipped level (audit: heading_skip) */
.w-footer .w-footer-h { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text); }
.w-footer { padding: 56px 0 28px; background: var(--surface); border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .w-header-in { gap: 12px; }
  html.has-menu .w-menu { display: grid; }
  html.has-menu .w-bar-menu { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 16px 16px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop); }
  html.has-menu .bar.is-open .w-bar-menu { display: flex; }
  .w-header .w-nav { flex-direction: column; align-items: stretch; flex-wrap: wrap; }
  html:not(.has-menu) .w-bar-menu { flex-wrap: wrap; }
  html:not(.has-menu) .w-header .w-nav { flex-direction: row; }
  .w-header .w-nav a.chrome-navlink { min-height: 44px; padding: 12px 10px; font-size: 15px; }
  .w-nav-sep { width: auto; height: 1px; margin: 6px 0; }
  .w-header .btn { height: 44px; margin: 6px 0 0; }
  .w-header .langsw { align-self: flex-start; }
}

/* ── src/website.css ── */
/* Public website. Same world as the app (tokens from index.css, .btn from App.css), louder composition. */

.w-root { background: var(--surface); min-height: 100%; }
.w-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.w-root .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.w-skip { position: absolute; left: 16px; top: -40px; z-index: 50; padding: 8px 12px; background: var(--text); color: #fff; border-radius: var(--r); }
.w-skip:focus { top: 12px; }
.w-root h1, .w-root h2, .w-root h3 { text-wrap: balance; }

/* header */
.w-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.w-header-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.w-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--text); }
.w-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.w-nav a:not(.btn) { padding: 6px 10px; border-radius: var(--r-sm); font-size: 14px; color: var(--text-2); transition: color 120ms var(--ease), background 120ms var(--ease); }
.w-nav a:not(.btn):hover, .w-nav a.active { color: var(--text); background: var(--canvas); }
.w-nav-sep { width: 1px; height: 20px; background: var(--line); margin: 0 8px; }
.w-nav .btn { height: 34px; padding: 0 14px; margin-left: 4px; }
.w-menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; border-radius: var(--r); cursor: pointer; }

/* hero */
.w-hero { padding: 72px 0 64px; background: linear-gradient(180deg, var(--surface) 0%, var(--canvas) 100%); border-bottom: 1px solid var(--line); overflow: hidden; }
.w-hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.w-hero h1 { font-size: 52px; line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; max-width: 14ch; }
.w-lede { margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--text-2); max-width: 46ch; }
.w-hero-note { margin-top: 14px; font-size: 13.5px; color: var(--text-3); }
.w-hero-note a { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; color: var(--text); font-weight: 500; }
.w-hero-note a:hover { color: var(--accent-text); }

.w-url { display: flex; gap: 8px; margin-top: 28px; max-width: 480px; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 1px 2px rgba(14, 17, 22, 0.05), 0 6px 20px -8px rgba(14, 17, 22, 0.12); transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.w-url:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-soft); }
.w-url input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; padding: 0 10px; color: var(--text); }
.w-url input::placeholder { color: var(--text-3); }
.w-url .btn { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 8px; }
.w-url-md { margin-left: auto; margin-right: auto; }
.w-url:has(input[aria-invalid='true']) { border-color: var(--stop); }
.w-url-err { max-width: 480px; margin: 8px 0 0; font-size: 13.5px; color: var(--stop); text-wrap: pretty; animation: w-url-err-in 180ms var(--ease); }
.w-url-md + .w-url-err, .w-hero2 .w-url-err { margin-left: auto; margin-right: auto; text-align: center; }
@keyframes w-url-err-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .w-url-err { animation: none; } }

/* product fragments */
.w-frag { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04), 0 24px 48px -24px rgba(14, 17, 22, 0.22); }
.w-fix { position: relative; padding: 0; margin-top: 34px; border: 0; background: none; box-shadow: none; }
.w-fix-back { position: absolute; inset: -34px 28px auto 28px; height: 60px; display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.w-fix-back .num { color: var(--text-3); font-weight: 500; }
.w-fix-card { position: relative; padding: 20px 22px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04), 0 28px 56px -24px rgba(14, 17, 22, 0.28); }
.w-fix-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.w-fix-tags span { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; font-size: 12px; color: var(--text-2); }
.w-fix-tags .is-needs { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.w-fix-title { margin-top: 12px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.w-fix-why { margin-top: 4px; font-size: 13.5px; color: var(--text-2); }
.w-diff { margin: 14px 0 0; padding: 8px 0; font-size: 12.5px; line-height: 1.75; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.w-diff span { display: grid; grid-template-columns: 26px 1fr; padding-right: 10px; white-space: pre-wrap; word-break: break-all; }
.w-diff i { font-style: normal; text-align: center; color: var(--text-3); }
.w-diff .add { background: #ecf7f3; color: #0b5c55; }
.w-diff .add i { color: var(--measured); }
.w-fix-how { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.w-fix-actions { display: flex; justify-content: flex-end; gap: 6px; margin: 16px -22px 0; padding: 12px 22px; border-top: 1px solid var(--line); }
.w-fix-actions .btn { pointer-events: none; }
.w-toast { position: absolute; left: 50%; bottom: -54px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 14px; white-space: nowrap; border-radius: 10px; background: #15181e; color: #fff; font-size: 13px; box-shadow: var(--shadow-pop); }
.w-toast svg { color: #6fd3c8; }
.w-toast span { padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); font-weight: 500; font-size: 12.5px; }

/* doors */
.w-door { display: flex; flex-direction: column; padding: 28px var(--cell-x) 30px; }
.w-door-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.w-door-what { font-size: 14px; color: var(--text-3); }

/* sections */
.w-section { padding: 96px 0; }
.w-section-tight { padding-top: 40px; }
.w-section-tint { background: var(--canvas); }
.w-root h2 { font-size: 36px; line-height: 1.12; font-weight: 600; letter-spacing: -0.028em; }
.w-head { max-width: 640px; margin-bottom: 48px; }
.w-head p { margin-top: 12px; font-size: 17px; color: var(--text-2); }
.w-head-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.w-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.w-split-top { align-items: start; }
.w-split-rev > :first-child { order: 0; }
.w-copy p { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); max-width: 54ch; }
.w-copy .w-big { font-size: 20px; line-height: 1.45; color: var(--text); letter-spacing: -0.01em; }
.w-ticks { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.w-ticks li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); max-width: 54ch; }
.w-ticks svg { flex: none; margin-top: 3px; color: var(--text); }
.w-textlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font-size: 15px; font-weight: 500; color: var(--accent-text); }

/* citation check — the authored motion moment */
.w-check { padding: 22px 24px; }
.w-check-head { display: flex; justify-content: space-between; align-items: center; }
.w-check-label { font-size: 13px; font-weight: 600; }
.w-check-ex { font-size: 12px; color: var(--text-3); padding: 2px 8px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.w-check-q { margin-top: 14px; font-size: 19px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; }
.w-check ul { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.w-check li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.w-check-engine { font-weight: 500; }
.w-check-result { color: var(--text-3); transition: color 300ms var(--ease); }
.w-check li.is-pending .w-check-result { color: var(--line-strong); }
.w-check li.is-done .w-check-result { animation: w-resolve 420ms var(--ease); }
.w-check li.k-rival .w-check-result { color: var(--stop); }
.w-check li.k-none .w-check-result { color: var(--text-2); }
.w-check li.k-partial .w-check-result { color: var(--text-2); }
.w-check-foot { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.w-check-foot strong { color: var(--measured); font-weight: 600; }
@keyframes w-resolve { from { opacity: 0; filter: blur(4px); transform: translateX(6px); } }

/* loop */
.w-loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.w-loop li { position: relative; padding: 24px 20px 0 0; }
.w-loop li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.w-loop li.is-you::before { background: var(--accent); border-color: var(--accent-text); box-shadow: 0 0 0 5px var(--accent-soft); }
.w-loop-n { font-size: 12px; color: var(--text-3); }
.w-loop h3 { margin-top: 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.w-loop li.is-you h3 { color: var(--accent-text); }
.w-loop p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* ships */

/* honesty band */
.w-band { padding: 96px 0; background: #0e1116; color: #fff; }
.w-band .w-head p { color: #a9afbb; }
.w-band :focus-visible { outline-color: #8fb0ff; }

/* audience fragments */
.w-mini { padding: 22px 24px; }
.w-mini-title { font-size: 16px; font-weight: 600; }
.w-mini-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.w-mini-chips span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 9px; border: 1px solid var(--line); border-radius: 15px; font-size: 13px; color: var(--text-2); }
.w-mini-chips .is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); font-weight: 500; }
.w-mini-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.w-mini-foot .btn { pointer-events: none; }

.w-log, .w-sites { overflow: hidden; }
.w-log-head { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.w-log-ex { font-size: 12px; font-weight: 400; color: var(--text-3); padding: 2px 8px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.w-log table { width: 100%; border-collapse: collapse; font-size: 13px; }
.w-log td { padding: 11px 18px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.w-log td:first-child { color: var(--text); font-weight: 500; }
.w-log td:first-child span { display: block; font-weight: 400; font-size: 12px; color: var(--text-3); }
.w-log td:last-child { text-align: right; }
.w-pill { display: inline-flex; height: 22px; padding: 0 8px; align-items: center; border-radius: 11px; font-size: 12px; font-weight: 500; }
.w-pill.is-live { background: var(--measured-soft); color: var(--measured); }
.w-pill.is-undone { background: var(--hover); color: var(--text-2); }
.w-log-foot { display: flex; justify-content: space-between; padding: 12px 18px; font-size: 12.5px; color: var(--text-3); background: var(--surface-2); }
.w-log-foot .num { color: var(--text); font-weight: 500; }

.w-sites ul { list-style: none; margin: 0; padding: 4px 0; }
.w-sites li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; font-size: 14px; }
.w-sites li + li { border-top: 1px solid var(--line); }
.w-fav { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--canvas); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text-2); }
.w-site { flex: 1; font-weight: 500; }
.w-site-note { font-size: 13px; color: var(--text-3); }

.w-code { margin: 0; padding: 26px 28px; background: #0e1116; color: #d7dbe3; border-color: #0e1116; font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }

/* pricing teaser + plans */
.w-price { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; font-size: 14px; color: var(--text-3); }
.w-price span { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }

.w-page-head { padding: 72px 0 56px; }
.w-page-head + .w-section { padding-top: 56px; }
.w-page-head h1 { font-size: 48px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.w-plan { gap: 0; }
.w-plan-flag { position: absolute; top: -11px; left: var(--cell-x); height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 11px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 500; }
.w-root .w-plan h2 { font-size: 16px; letter-spacing: -0.01em; }
.w-plan .w-price span { font-size: 32px; }
.w-plan-blurb { margin: 10px 0 18px; font-size: 13.5px; color: var(--text-2); min-height: 4.6em; }
.w-plan ul { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; }

.w-table-wrap { margin-top: 56px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.w-table :is(th, td):first-child { padding-left: var(--cell-x); }
.w-table :is(th, td):last-child { padding-right: var(--cell-x); }
.w-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 820px; }
.w-table th, .w-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.w-table thead th { font-weight: 600; background: var(--canvas); }
.w-table tbody th { font-weight: 500; color: var(--text); width: 22%; }
.w-table td { color: var(--text-2); }
.w-table td svg { color: var(--text); }
.w-table td svg.lucide-minus { color: var(--line-strong); }
.w-table tbody tr:last-child > * { border-bottom: 0; }

.w-packs { padding: 28px var(--cell-x); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); }
.w-packs h3 { font-size: 17px; font-weight: 600; }
.w-packs > p { margin-top: 4px; font-size: 14px; color: var(--text-3); }
.w-packs ul { list-style: none; margin: 18px 0 0; padding: 0; }
.w-packs li { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.w-packs li span:last-child { font-weight: 600; }

/* faq */
.w-faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.w-faq details { border-bottom: 1px solid var(--line); }
.w-faq details:first-child { border-top: 1px solid var(--line); }
.w-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 16.5px; font-weight: 500; cursor: pointer; list-style: none; }
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq summary svg { flex: none; color: var(--text-3); }
.w-faq-minus { display: none; }
.w-faq details[open] .w-faq-plus { display: none; }
.w-faq details[open] .w-faq-minus { display: block; }
.w-faq p { padding: 0 32px 22px 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 64ch; }

/* how it works */
/* how it works: six rounded cards, the step that is yours is the one in blue */
.w-steps .w-loop-n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 13px; color: var(--text-2); }
.w-steps .is-you { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 70%); }
.w-steps .is-you .w-loop-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.w-steps-you { height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 500; }
.w-root .w-steps h2 { font-size: 19px; letter-spacing: -0.015em; }
.w-steps p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.w-steps-again { margin-top: 20px; font-size: 14px; color: var(--text-3); }
.w-channels { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.w-channels li { display: flex; gap: 14px; }
.w-channels svg { flex: none; margin-top: 3px; color: var(--text-2); }
.w-channels h3 { font-size: 16px; font-weight: 600; }
.w-channels p { margin-top: 4px; font-size: 15px; }

/* closer + footer */
.w-closer { padding: 104px 0; background: var(--canvas); text-align: center; }
.w-closer h2 { font-size: 40px; }
.w-closer p { margin-top: 12px; font-size: 17px; color: var(--text-2); }
.w-closer .w-url { text-align: left; }
.w-footer { padding: 56px 0 28px; background: var(--surface); }
.w-footer-in { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; }
.w-footer-brand p { margin-top: 12px; max-width: 32ch; font-size: 14px; color: var(--text-3); }
.w-footer-brand .w-social { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; }
.w-footer h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.w-footer-in > div:not(.w-footer-brand) { display: flex; flex-direction: column; gap: 8px; }
.w-footer-in a:not(.w-brand) { font-size: 14px; color: var(--text-2); }
.w-footer-in a:not(.w-brand):hover { color: var(--text); }
.w-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }

/* responsive */
@media (max-width: 1080px) {
    .w-loop { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .w-hero h1 { font-size: 44px; }
}
@media (max-width: 860px) {
  .w-wrap { padding: 0 20px; }
  .w-menu { display: grid; place-items: center; }
  .w-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 16px 16px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop); }
  .w-nav.is-open { display: flex; }
  .w-nav a:not(.btn) { padding: 12px 10px; font-size: 15px; }
  .w-nav-sep { width: auto; height: 1px; margin: 6px 0; }
  .w-nav .btn { height: 44px; margin: 6px 0 0; }
  .w-hero { padding: 40px 0 56px; }
  .w-hero-in, .w-split, .w-faq-wrap { grid-template-columns: 1fr; gap: 40px; }
  .w-split-rev > :first-child { order: 2; }
  .w-hero h1 { font-size: 36px; }
  .w-lede { font-size: 16.5px; }
  .w-fix { margin-top: 18px; }
    .w-section, .w-band { padding: 64px 0; }
  .w-section-tight { padding-top: 32px; }
  .w-root h2 { font-size: 28px; }
  .w-head { margin-bottom: 32px; }
  .w-head-row { flex-direction: column; align-items: flex-start; }
  .w-loop { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-strong); row-gap: 24px; padding-left: 20px; }
  .w-loop li { padding: 0; }
  .w-loop li::before { top: 4px; left: -26px; }
    .w-plan-blurb { min-height: 0; }
  .w-page-head { padding: 40px 0 40px; }
  .w-page-head + .w-section { padding-top: 40px; }
  .w-page-head h1 { font-size: 36px; }
  .w-closer { padding: 72px 0; }
  .w-closer h2 { font-size: 30px; }
  .w-footer-in { grid-template-columns: 1fr 1fr; }
  .w-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  /* phone: field and button become two separate, full-width controls */
  .w-url { flex-direction: column; gap: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
  .w-url:focus-within { box-shadow: none; }
  .w-url input { flex: none; width: 100%; height: 50px; padding: 0 16px; font-size: 16px; text-align: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04); transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
  .w-url input:focus { border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-soft); }
  .w-url .btn { width: 100%; height: 50px; font-size: 15px; border-radius: 10px; }
    .w-toast { font-size: 12px; }
  .w-fix-actions { flex-wrap: wrap; }
  .w-fix-back { inset: -30px 18px auto 18px; }
}

/* hero fragment, approved state */
.w-fix-tags .is-progress { border-color: transparent; background: var(--hover); color: var(--text-2); font-weight: 500; }
.w-fix-state { margin-right: auto; align-self: center; font-size: 13px; color: var(--text-3); }

/* honesty artifact */
.w-artifact { background: #161a21; border: 1px solid #2b303a; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.w-art-head { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 20px; border-bottom: 1px solid #2b303a; font-size: 13.5px; font-weight: 600; }
.w-art-ex { font-size: 12px; font-weight: 400; color: #a9afbb; padding: 2px 8px; border: 1px dashed #3a404b; border-radius: 10px; }
.w-art-rows { display: grid; grid-template-columns: 1fr 1fr; }
.w-art-row { padding: 22px 22px 24px; }
.w-art-row + .w-art-row { border-left: 1px solid #2b303a; }
.w-art-tag { display: inline-flex; height: 24px; padding: 0 9px; align-items: center; border-radius: 12px; font-size: 12px; font-weight: 500; }
.is-m .w-art-tag { background: rgba(14, 124, 115, 0.24); color: #6fd3c8; }
.is-e .w-art-tag { background: rgba(176, 122, 0, 0.24); color: #f0c66b; }
.w-art-label { margin-top: 14px; font-size: 14px; color: #c3c8d2; }
.w-art-value { margin-top: 6px; font-size: 40px; font-weight: 600; letter-spacing: -0.03em; }
.w-art-value span { font-size: 15px; font-weight: 400; letter-spacing: 0; color: #a9afbb; margin: 0 4px; }
.is-m .w-art-value { color: #8ae0d6; }
.is-e .w-art-value { color: #f3d08a; }
.w-art-src { margin-top: 6px; font-size: 13px; color: #8e95a2; }
.w-arms { padding: 20px 22px 22px; border-top: 1px solid #2b303a; background: #12151b; }
.w-arms-title { font-size: 13px; color: #c3c8d2; margin-bottom: 12px; }
.w-arm { display: grid; grid-template-columns: 170px 1fr 52px; align-items: center; gap: 14px; padding: 6px 0; font-size: 14px; color: #e3e6ec; }
.w-arm .num { text-align: right; font-weight: 600; color: #8ae0d6; }
.w-arm.is-held .num { color: #c3c8d2; }
.w-bar { height: 8px; border-radius: 4px; background: #232832; overflow: hidden; }
.w-bar i { display: block; height: 100%; border-radius: 4px; background: #2bb3a4; }
.w-arm.is-held .w-bar i { background: #5b6270; }
.w-arms-note { margin-top: 10px; font-size: 13px; color: #8e95a2; }
.w-band-note { margin-top: 24px; font-size: 15px; color: #a9afbb; }

/* pricing teaser as rows */
.w-teaser { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.w-teaser > li { display: grid; grid-template-columns: 220px 1fr auto; align-items: baseline; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.w-teaser > li.is-featured h3 { color: var(--accent-text); }
.w-teaser h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.w-tease-flag { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--accent-text); letter-spacing: 0; }
.w-tease-blurb { font-size: 15px; color: var(--text-2); }
.w-tease-blurb span { display: block; margin-top: 4px; font-size: 13px; color: var(--text-3); }
.w-teaser .w-price { margin: 0; justify-content: flex-end; }

/* how it works: presets + per-kind table + audit */
.w-presets { list-style: none; margin: 0; padding: 0; counter-reset: preset; }
.w-presets li { position: relative; padding: 18px 0 18px 44px; border-top: 1px solid var(--line); counter-increment: preset; }
.w-presets li:last-child { border-bottom: 1px solid var(--line); }
.w-presets li::before { content: counter(preset); position: absolute; left: 0; top: 18px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.w-presets h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.w-presets h3 span { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 500; }
.w-presets p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.w-kinds-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.w-kinds-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.w-kinds-table td:first-child { color: var(--text); font-weight: 500; width: 52%; }
.w-kinds-table td:last-child { color: var(--text-2); }
.w-kinds-table .w-log-foot { margin: 0; }

.w-band .w-split { color: #fff; }
.w-record { background: #161a21; border-color: #2b303a; }
.w-record .w-log-head { border-color: #2b303a; color: #fff; }
.w-record .w-log-ex { color: #a9afbb; border-color: #3a404b; }
.w-record td { border-color: #2b303a; color: #c3c8d2; }
.w-record td:first-child { color: #8e95a2; font-weight: 400; width: 64px; }
.w-record td:nth-child(2) { color: #fff; font-weight: 500; }
.w-record td:nth-child(2) span { display: block; font-size: 12px; font-weight: 400; color: #8e95a2; }
.w-record td:last-child { text-align: right; font-size: 12px; color: #8fb0ff; }
.w-record .w-log-foot { background: #12151b; color: #8e95a2; }
.w-record .w-log-foot span:last-child { color: #8fb0ff; font-weight: 500; }
.w-audit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.w-audit li { display: flex; gap: 14px; }
.w-audit svg { flex: none; margin-top: 2px; color: #8fb0ff; }
.w-audit h3 { font-size: 17px; font-weight: 600; }
.w-audit p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: #c3c8d2; }

@media (max-width: 860px) {
  .w-art-rows { grid-template-columns: 1fr; }
  .w-art-row + .w-art-row { border-left: 0; border-top: 1px solid #2b303a; }
  .w-arm { grid-template-columns: 1fr 52px; }
  .w-arm .w-bar { grid-column: 1 / -1; grid-row: 2; }
  .w-teaser > li { grid-template-columns: 1fr auto; gap: 8px 16px; }
  .w-teaser .w-tease-blurb { grid-column: 1 / -1; grid-row: 2; }
  /* touch targets */
  .w-nav a:not(.btn) { min-height: 44px; display: flex; align-items: center; }
  .w-textlink, .w-hero-note a { min-height: 44px; }
  .w-footer-in a:not(.w-brand) { min-height: 44px; display: flex; align-items: center; }
  .w-footer-in > div:not(.w-footer-brand) { gap: 0; }
  .w-root .btn { min-height: 44px; }
  .w-faq summary { min-height: 56px; }
}

/* ---------- inner pages: shared kit (kit.tsx) ---------- */
.w-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 20px; font-size: 13px; color: var(--text-3); }
.w-crumbs > span { display: inline-flex; align-items: center; gap: 4px; }
.w-crumbs a:hover { color: var(--text); }
.w-crumbs [aria-current] { color: var(--text-2); }
.w-eyebrow { margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--accent-text); }
.w-page-head .w-lede { max-width: 60ch; }
.w-head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.w-article { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 64px; align-items: start; }
.w-article-main { min-width: 0; max-width: 720px; }
.w-toc { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 1px solid var(--line); font-size: 13px; }
.w-toc p { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--text); }
.w-toc a { padding: 4px 0; color: var(--text-3); line-height: 1.4; }
.w-toc a:hover { color: var(--text); }

.w-prose { font-size: 16.5px; line-height: 1.7; color: var(--text-2); }
.w-prose > * + * { margin-top: 18px; }
.w-root .w-prose h2 { margin-top: 48px; font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); scroll-margin-top: 88px; }
.w-prose h3 { margin-top: 32px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.w-prose h2 + *, .w-prose h3 + * { margin-top: 10px; }
.w-prose > :first-child { margin-top: 0; }
.w-prose a { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.w-prose a:hover { text-decoration-color: var(--accent-text); }
.w-prose strong { color: var(--text); font-weight: 600; }
.w-prose ul, .w-prose ol { margin-bottom: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.w-prose li::marker { color: var(--text-3); }
.w-prose code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.86em; padding: 1px 5px; border-radius: 4px; background: var(--canvas); border: 1px solid var(--line); color: var(--text); }
.w-prose pre { margin-bottom: 0; padding: 16px 18px; border-radius: var(--r-lg); background: #0e1116; color: #d7dbe3; font-size: 13px; line-height: 1.7; overflow-x: auto; white-space: pre; }
.w-prose pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.w-prose blockquote { margin-left: 0; margin-right: 0; padding: 14px 18px; background: var(--canvas); border: 1px solid var(--line); color: var(--text-2); }
.w-prose-table, .w-prose .md-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.w-prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.w-prose th, .w-prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.w-prose th { font-weight: 600; color: var(--text); background: var(--canvas); white-space: nowrap; }
.w-prose tbody tr:last-child td { border-bottom: 0; }
.w-prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

@media (max-width: 860px) {
  .w-article { grid-template-columns: 1fr; gap: 0; }
  .w-toc { display: none; }
  .w-prose { font-size: 16px; }
}
.w-legal span:last-child { display: flex; gap: 16px; }
.w-legal a:hover { color: var(--text); }
.w-loading { min-height: 60vh; }
@media (max-width: 1080px) { .w-footer-in { grid-template-columns: repeat(3, 1fr); } .w-footer-brand { grid-column: 1 / -1; } }

/* ======================================================================
   One grid, one hover. No frame lines: sections breathe on whitespace alone.
   Grid:  .w-grid = cards with air between them, 12px radius everywhere.
   Hover: .w-cell-link: blue brackets slide in at the edges, a soft wash grows from the top, the arrow nudges.
   ====================================================================== */
.w-root { --bleed: 32px; --cell-x: 32px; }

/* the grid */
.w-grid { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.w-grid-1 { --cols: 1; }
.w-grid-2 { --cols: 2; }
.w-grid-4 { --cols: 4; }
.w-grid-5 { --cols: 5; --cell-x: 24px; }
.w-cell { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 28px var(--cell-x) 30px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background-color: var(--surface); color: inherit; }
.w-cell > .w-cell-link { border-radius: inherit; }
.w-cell:has(.is-featured), .w-cell.is-featured { border-color: var(--accent); }
:where(.w-cell) h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
:where(.w-cell) p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.w-cell-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--text-3); }
/* a cell whose whole surface is a link inside an <li> */
li.w-cell:has(> .w-cell-link) { padding: 0; }
li.w-cell > .w-cell-link { flex: 1; }

/* the one hover: brackets + wash, also for keyboard focus and the featured plan */
.w-cell-link { position: relative; color: inherit;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 85%);
  background-repeat: no-repeat; background-size: 100% 0%; transition: background-size 420ms var(--ease); }
.w-cell-link::before, .w-cell-link::after { content: ''; position: absolute; top: clamp(9px, 20%, 18px); bottom: clamp(9px, 20%, 18px); width: 7px;
  border: 1.5px solid var(--accent); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease), transform 320ms var(--ease); }
.w-cell-link::before { left: 10px; border-right: 0; transform: translateX(-6px); }
.w-cell-link::after { right: 10px; border-left: 0; transform: translateX(6px); }
.w-cell-link:is(:hover, :focus-visible, .is-featured) { background-size: 100% 100%; }
.w-cell-link:is(:hover, :focus-visible, .is-featured)::before, .w-cell-link:is(:hover, :focus-visible, .is-featured)::after { opacity: 0.9; transform: none; }
.w-cell-link:focus-visible { outline: none; }
.w-cell-link :is(.lucide-arrow-right, .lucide-arrow-up-right):not(.w-textlink *) { flex: none; color: var(--text-3); transition: transform 260ms var(--ease), color 200ms var(--ease); }
.w-cell-link:is(:hover, :focus-visible) :is(.lucide-arrow-right, .lucide-arrow-up-right):not(.w-textlink *) { color: var(--accent-text); }
.w-cell-link:is(:hover, :focus-visible) .lucide-arrow-right { transform: translateX(3px); }
.w-cell-link:is(:hover, :focus-visible) .lucide-arrow-up-right { transform: translate(2px, -2px); }
@media (hover: none) {
  .w-cell-link:hover:not(.is-featured, :focus-visible) { background-size: 100% 0%; }
  .w-cell-link:hover:not(.is-featured, :focus-visible)::before, .w-cell-link:hover:not(.is-featured, :focus-visible)::after { opacity: 0; }
}

/* draw-in: the grid wipes open left to right, then its cells rise in turn. Only with JS and motion on. */
html.w-anim:not([data-motion='reduce']) .w-grid { clip-path: inset(-24px); transition: clip-path 1100ms cubic-bezier(0.16, 1, 0.3, 1); }
html.w-anim:not([data-motion='reduce']) .w-grid:not(.is-in) { clip-path: inset(-24px 100% -24px -24px); }
html.w-anim:not([data-motion='reduce']) .w-grid > * {
  transition: opacity 700ms var(--ease) calc(var(--i, 0) * 60ms + 120ms), transform 700ms var(--ease) calc(var(--i, 0) * 60ms + 120ms), background-size 420ms var(--ease); }
html.w-anim:not([data-motion='reduce']) .w-grid:not(.is-in) > * { opacity: 0; transform: translateY(10px); }
.w-grid > :nth-child(2) { --i: 1; }
.w-grid > :nth-child(3) { --i: 2; }
.w-grid > :nth-child(4) { --i: 3; }
.w-grid > :nth-child(5) { --i: 4; }
.w-grid > :nth-child(6) { --i: 5; }
.w-grid > :nth-child(n + 7) { --i: 6; }

/* links: underline grows from the left, arrow nudges */
.w-textlink { background: linear-gradient(currentColor, currentColor) 0 calc(50% + 0.7em) / 0 1px no-repeat; transition: background-size 320ms var(--ease); }
.w-textlink:hover { text-decoration: none; background-size: calc(100% - 20px) 1px; }
.w-textlink :is(.lucide-arrow-right, .lucide-arrow-up-right) { transition: transform 260ms var(--ease); }
.w-textlink:hover :is(.lucide-arrow-right, .lucide-arrow-up-right) { transform: translateX(3px); }
.w-footer-in a:not(.w-brand) { align-self: flex-start; background: linear-gradient(currentColor, currentColor) 0 calc(50% + 0.75em) / 0 1px no-repeat; transition: color 150ms var(--ease), background-size 320ms var(--ease); }
.w-footer-in a:not(.w-brand):hover { background-size: 100% 1px; }

/* primary button: one pass of light on hover */
.w-root .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.w-root .btn-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.24) 50%, transparent 70%); }
.w-root .btn-primary:hover::after { transform: translateX(110%); transition: transform 750ms var(--ease); }

@media (max-width: 1080px) {
  .w-grid-3 { --cols: 2; }
  .w-grid-5 { --cols: 3; }
}
@media (max-width: 860px) {
  .w-root, .w-grid-5 { --bleed: 20px; --cell-x: 20px; }
  .w-grid-2, .w-grid-3, .w-grid-5 { --cols: 1; }
  .w-grid-4 { --cols: 2; }
  .w-cell { padding-top: 22px; padding-bottom: 24px; }
}
@media (max-width: 480px) { .w-grid-4 { --cols: 1; } }
@media (prefers-reduced-motion: reduce) {
  .w-root *, .w-root *::before, .w-root *::after { animation: none !important; transition: none !important; }
}

/* home story: four jobs, one fix end to end, the first steps after signup */
.w-jobs > li > svg { flex: none; margin-bottom: 12px; color: var(--accent-text); }
.w-jobs h3 { margin-bottom: 2px; }
.w-story .w-cell-top { margin-bottom: 6px; }
.w-story-stage { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.w-story-stage .num { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 11.5px; font-weight: 500; color: var(--text-2); }
.w-story .is-you { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 70%); }
.w-story .is-you .w-story-stage { color: var(--accent-text); }
.w-story .is-you .w-story-stage .num { background: var(--accent); border-color: var(--accent); color: #fff; }
.w-story-when { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.w-story li:last-child .w-story-stage { color: var(--measured); }
.w-steps-cta { margin-top: 28px; max-width: 560px; }
.w-closer-extra { margin: 40px 0 36px; text-align: left; }
.w-door-big { margin-top: 10px; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.w-door-what { margin-top: 4px; }

/* a second, quieter paragraph under a page's lede */
.w-lede.w-lede-sub { margin-top: 12px; font-size: 15.5px; color: var(--text-3); }

/* ── src/home.css ── */
/* Home showpieces, theme tokens and display preferences. Same world as website.css, turned up. */

/* The palette (light and dark) is the Umbodi theme: app-spa/src/umbodi-theme.css. Only showpiece rules live here. */

/* ---------- dark theme (website only; the attribute is removed when the app opens) ---------- */
html[data-theme='dark'] .w-band { background: #06070a; }
html[data-theme='dark'] .w-frag, html[data-theme='dark'] .w-fix-card { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.7); }
html[data-theme='dark'] ::selection { background: rgba(47, 107, 255, 0.35); color: var(--text); }

/* ---------- display preferences ---------- */
html[data-contrast='more'] { --text-2: var(--text); --text-3: #3a3f4a; --line: #b4bac5; --line-strong: #858c99; }
html[data-theme='dark'][data-contrast='more'] { --text-3: #c5cad3; --line: #4b525e; --line-strong: #6b7280; --accent-text: #a9c0ff; }
html[data-text='large'] .w-root { zoom: 1.125; }
html[data-underline='on'] .w-root main a:not(.btn), html[data-underline='on'] .w-footer a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html[data-motion='reduce'] .w-root *, html[data-motion='reduce'] .w-root *::before, html[data-motion='reduce'] .w-root *::after { animation: none !important; transition: none !important; }

.w-disp { position: relative; }
.w-disp-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font-size: 14px; cursor: pointer; transition: color 120ms var(--ease), background 120ms var(--ease); }
.w-disp-btn:hover, .w-disp-btn[aria-expanded='true'] { color: var(--text); background: var(--canvas); }
.w-disp-btn-label { display: none; }
.w-disp-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 300px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: w-pop 200ms var(--ease); transform-origin: top right; }
@keyframes w-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.w-disp-h { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.w-disp-h:not(:first-child) { margin-top: 16px; }
.w-seg { display: flex; gap: 2px; padding: 3px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); }
.w-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.w-seg button:hover { color: var(--text); }
.w-seg button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.w-disp-list { margin-top: 12px; border-top: 1px solid var(--line); }
.w-disp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.w-disp-row strong { display: block; font-size: 13.5px; font-weight: 500; }
.w-disp-row small { display: block; font-size: 12.5px; color: var(--text-3); }
.w-switch { appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 0; border-radius: 10px; background: var(--line-strong); cursor: pointer; transition: background 160ms var(--ease); }
.w-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 200ms var(--ease); }
.w-switch:checked { background: var(--accent); }
.w-switch:checked::after { transform: translateX(16px); }
.w-disp-foot { margin-top: 12px; font-size: 12px; color: var(--text-3); }

/* ---------- entrance + reveal ---------- */
.w-in { animation: w-rise 1000ms var(--ease) both; }
.w-in-2 { animation-delay: 80ms; }
.w-in-3 { animation-delay: 160ms; }
.w-in-4 { animation-delay: 240ms; animation-duration: 1100ms; }
/* inner-page headers rise in like the home hero */
.w-page-head .w-wrap > * { animation: w-rise 900ms var(--ease) both; }
.w-page-head .w-wrap > :nth-child(2) { animation-delay: 60ms; }
.w-page-head .w-wrap > :nth-child(3) { animation-delay: 120ms; }
.w-page-head .w-wrap > :nth-child(n + 4) { animation-delay: 180ms; }
@keyframes w-rise { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

.w-rv { transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
html.w-anim:not([data-motion='reduce']) .w-rv:not(.is-in) { opacity: 0; transform: translateY(16px); }

/* ---------- screenshots ---------- */
.w-shot-l, .w-shot-d { display: block; }
.w-shot-l img, .w-shot-d img { display: block; width: 100%; height: auto; }
.w-shot-d { display: none; }
html[data-theme='dark'] .w-shot-l { display: none; }
html[data-theme='dark'] .w-shot-d { display: block; }

.w-window { overflow: hidden; background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgba(14, 17, 22, 0.04), 0 40px 80px -32px rgba(14, 17, 22, 0.32); }
html[data-theme='dark'] .w-window { box-shadow: 0 0 0 1px var(--line-strong), 0 40px 90px -30px rgba(0, 0, 0, 0.85); }
.w-window-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: var(--canvas); border-bottom: 1px solid var(--line); }
.w-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.w-url-pill { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 12px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.w-url-pill svg { color: var(--text-3); }
.w-window-body { position: relative; }

/* ---------- hero ---------- */
.w-hero2 { position: relative; padding: 88px 0 0; overflow: hidden;
  background:
    radial-gradient(52% 38% at 50% 68%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface) 0%, var(--canvas) 100%); }
.w-hero2-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.w-hero2 h1 { font-size: clamp(38px, 5.2vw, 66px); line-height: 1.02; font-weight: 600; letter-spacing: -0.04em; max-width: 17ch; }
.w-hero2 .w-lede { margin-top: 22px; max-width: 54ch; }
.w-hero2 .w-url { margin-left: auto; margin-right: auto; width: min(480px, 100%); }
.w-hero2 .w-hero-note a { margin-left: 8px; }

.w-stage { position: relative; margin-top: 64px; perspective: 2200px; }
.w-stage-tilt { position: relative; transform-origin: 50% 0; }
@supports (animation-timeline: view()) {
  html:not([data-motion='reduce']) .w-stage-tilt { animation: w-untilt linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  @keyframes w-untilt { from { transform: rotateX(7deg) scale(0.97); } to { transform: none; } }
}
.w-window-hero { max-height: 640px; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.w-phone { overflow: hidden; border: 7px solid var(--bezel); border-radius: 36px; background: var(--bezel); box-shadow: 0 30px 60px -22px rgba(14, 17, 22, 0.42); }
.w-phone-bar { display: flex; justify-content: center; padding: 10px 10px 8px; background: var(--canvas); border-radius: 29px 29px 0 0; border-bottom: 1px solid var(--line); }
.w-phone-bar .w-url-pill { position: static; transform: none; height: 22px; font-size: 11px; }
.w-phone img { border-radius: 0 0 29px 29px; }
.w-stage-phone { position: absolute; right: 44px; bottom: 34px; width: 218px; border-width: 5px; border-radius: 30px; box-shadow: 0 0 0 1px rgba(14, 17, 22, 0.08), 0 24px 48px -18px rgba(14, 17, 22, 0.35); animation: w-settle 1100ms 420ms var(--ease) both; }
@keyframes w-settle { from { opacity: 0; transform: translateY(14px); } }
.w-stage-toast { position: absolute; left: 42%; bottom: 96px; display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 14px; white-space: nowrap; border-radius: 10px; background: #15181e; color: #fff; font-size: 13px; box-shadow: var(--shadow-pop), 0 0 0 1px rgba(255, 255, 255, 0.06); animation: w-settle 700ms 1500ms var(--ease) both; translate: -50% 0; }
.w-stage-toast svg { color: #5fd3c4; }
.w-stage-toast span { margin-left: 4px; padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); font-weight: 500; font-size: 12.5px; }

.w-engines { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 40px; padding: 36px 0 44px; }
.w-engines > span { font-size: 13px; color: var(--text-3); }
.w-engines ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; margin: 0; padding: 0; }
.w-engines li { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-2); }
.w-engines svg { width: 20px; height: 20px; flex: none; fill: currentColor; }

/* ---------- product tour ---------- */
.w-tour-sec .w-head { max-width: 720px; }
.w-tour-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.w-tour-tabs button { display: flex; flex-direction: column-reverse; gap: 12px; padding: 0 0 6px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text-3); }
.w-tour-tabs button:hover { color: var(--text-2); }
.w-tour-tabs button.is-on { color: var(--text); }
.w-tour-name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; transition: color 200ms var(--ease); }
.w-tour-tabs .is-you .w-tour-name::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: middle; border-radius: 50%; background: var(--accent); }
.w-tour-bar { position: relative; display: block; height: 2px; border-radius: 1px; background: var(--line-strong); overflow: hidden; }
.w-tour-bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; }
.w-tour.is-playing .w-tour-bar i { animation: w-fill 7s linear both; }
.w-tour:hover .w-tour-bar i, .w-tour:focus-within .w-tour-bar i { animation-play-state: paused; }
@keyframes w-fill { from { transform: scaleX(0); } }
.w-tour-text { margin-top: 28px; min-height: 3.2em; max-width: 64ch; font-size: 18px; line-height: 1.55; color: var(--text-2); animation: w-fade 400ms var(--ease) both; }
@keyframes w-fade { from { opacity: 0; } }
.w-window-tour { margin-top: 24px; }
.w-window-tour .w-window-body { aspect-ratio: 1200 / 760; }
.w-tour-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease); }
.w-tour-shot.is-on { opacity: 1; }

/* ---------- honesty: light, one product-style panel ---------- */
.w-honest { position: relative; padding: 112px 0;
  background: radial-gradient(55% 45% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%), var(--canvas); }
.w-honest-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.w-honest-head h2 { font-size: clamp(32px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -0.035em; max-width: 18ch; }
.w-honest-head p { font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 54ch; }

/* one rounded panel, the proof cards sit below it with the same gap and radius as every grid */
.w-ledger { margin: 48px 0 0; }
.w-report { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.w-report-head { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 24px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.w-report-ex { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px dashed var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 400; color: var(--text-3); }

.w-spec { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.w-spec-col { margin: 0; padding: 28px 32px 30px; }
.w-spec-col.is-e { border-left: 1px solid var(--line); }
.w-spec-col figcaption { font-size: 14px; color: var(--text-2); }
.w-spec-num { display: flex; align-items: center; gap: 14px; margin: 14px 0 16px; font-size: clamp(48px, 5.2vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.is-m .w-spec-num { color: var(--measured); }
.is-e .w-spec-num { gap: 0; color: var(--estimate); }
.w-spec-from, .w-spec-arrow { color: var(--text-3); }
.w-spec-arrow { flex: none; }
.w-spec-unit { align-self: flex-end; margin: 0 0 0.35em 12px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.w-spec-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; color: var(--text-3); }
.w-tag-m { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--measured-soft); color: var(--measured); font-size: 12px; font-weight: 500; }
.w-tag-m i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.w-tag-e { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--estimate-soft); color: var(--estimate); font-size: 12px; font-weight: 500; }

.w-ledger-chart { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 32px 32px 28px; }
.w-ledger-chart-head h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.w-ledger-chart-head p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.w-legend { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 18px 0 0; padding: 0; font-size: 13px; color: var(--text-2); }
.w-legend li { display: flex; align-items: center; gap: 8px; }
.w-legend li::before { content: ''; width: 16px; height: 3px; border-radius: 2px; background: var(--measured); }
.w-legend li.is-held::before { background: var(--text-3); height: 2px; }
.w-chart { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.w-chart-grid { stroke: var(--line); stroke-width: 1; }
.w-chart-tick { fill: var(--text-3); font-size: 19px; }
.w-chart-gap { fill: var(--measured); opacity: 0; transition: opacity 900ms 1300ms var(--ease); }
.w-chart-fixed { fill: none; stroke: var(--measured); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2000ms 200ms cubic-bezier(0.65, 0, 0.35, 1); }
.w-chart-held { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2000ms 200ms cubic-bezier(0.65, 0, 0.35, 1); }
.w-chart-dot, .w-chart-end, .w-chart-brace, .w-chart-gap-label { opacity: 0; transition: opacity 600ms 2000ms var(--ease); }
.w-chart-dot.is-fixed { fill: var(--measured); }
.w-chart-dot.is-held { fill: var(--text-3); }
.w-chart-end { font-size: 21px; font-weight: 600; }
.w-chart-end.is-fixed { fill: var(--measured); }
.w-chart-end.is-held { fill: var(--text-2); }
.w-chart-brace { stroke: var(--line-strong); stroke-width: 1.5; }
.w-chart-gap-label { fill: var(--text); font-size: 21px; font-weight: 600; }
.w-chart.is-run .w-chart-fixed, .w-chart.is-run .w-chart-held { stroke-dashoffset: 0; }
.w-chart.is-run .w-chart-gap { opacity: 0.08; }
.w-chart.is-run :is(.w-chart-dot, .w-chart-end, .w-chart-brace, .w-chart-gap-label) { opacity: 1; }

.w-proofs { margin-top: 16px; }
.w-proofs > li > svg { flex: none; margin-bottom: 10px; color: var(--measured); }
.w-proofs p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* ---------- owners: real phone screens ---------- */
.w-phone-pair { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 24px; padding: 8px 0; }
.w-phone-pair { gap: 0; }
.w-phone-pair .w-phone { width: min(286px, 54%); }
.w-phone-pair .w-phone:nth-child(2) { margin: 64px 0 0 -40px; position: relative; }

/* ---------- pricing ---------- */
.w-pricing-sec .w-head { max-width: 680px; }
.w-tier { gap: 0; padding-bottom: 22px; }
/* every card shares the same five rows, so names, prices, blurbs, buttons and specs line up across plans */
@supports (grid-template-rows: subgrid) {
  .w-tiers { grid-template-rows: repeat(5, auto); }
  .w-tier { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .w-tier-blurb { min-height: 0; }
  .w-tier-cta { align-self: end; }
  .w-tier-spec { align-self: start; }
}
.w-tier-top { display: flex; align-items: center; min-height: 24px; }
.w-tier h3 { font-size: 16px; font-weight: 600; }
.w-tier-flag { position: absolute; top: -11px; left: var(--cell-x); height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 11px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.w-tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: 18px; font-size: 13px; color: var(--text-3); }
.w-tier-price span { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; color: var(--text); }
.w-tier-blurb { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); min-height: 4.5em; }
.w-tier-cta { width: 100%; justify-content: center; height: 38px; margin-top: 18px; }
.w-tier-spec { margin: 18px 0 0; }
.w-tier-spec div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.w-tier-spec dt { color: var(--text-3); }
.w-tier-spec dd { margin: 0; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.w-tiers-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; }
.w-tiers-foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; font-size: 14px; color: var(--text-2); }
.w-tiers-foot li { display: inline-flex; align-items: center; gap: 7px; }
.w-tiers-foot svg { color: var(--measured); }
.w-tiers-foot .w-textlink { margin-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .w-stage-phone { width: 190px; right: 28px; }
}
@media (max-width: 860px) {
  .w-disp-btn-label { display: inline; }
  .w-disp-btn { height: 44px; width: 100%; padding: 0 10px; font-size: 15px; }
  .w-disp-pop { position: static; width: auto; margin-top: 6px; box-shadow: none; animation: none; }
  .w-hero2 { padding-top: 48px; }
  .w-stage { margin-top: 44px; }
  .w-stage-phone { display: none; }
  .w-stage-toast { bottom: 28px; font-size: 12px; }
  /* phone width: the window becomes a phone showing the real mobile capture */
  .w-window-hero, .w-window-tour { width: min(300px, 82%); margin-left: auto; margin-right: auto; border: 7px solid var(--bezel); border-radius: 36px; background: var(--bezel); }
  .w-window-hero .w-window-bar, .w-window-tour .w-window-bar { justify-content: center; height: 40px; border-radius: 29px 29px 0 0; }
  .w-window-hero .w-window-bar i, .w-window-tour .w-window-bar i { display: none; }
  .w-window-hero .w-url-pill, .w-window-tour .w-url-pill { position: static; transform: none; height: 22px; font-size: 11px; }
  .w-window-hero .w-window-body, .w-window-tour .w-window-body { overflow: hidden; border-radius: 0 0 29px 29px; }
  .w-window-hero { max-height: 520px; }
  .w-window-tour .w-window-body { aspect-ratio: 1170 / 2532; }
  .w-engines { flex-direction: column; gap: 14px; padding: 28px 0 36px; }
  .w-engines li { font-size: 15px; gap: 7px; }
  .w-engines svg { width: 17px; height: 17px; }
  .w-tour-tabs { display: flex; gap: 20px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
  .w-tour-tabs button { flex: none; min-width: 132px; min-height: 44px; }
  .w-tour-text { font-size: 16px; }
  .w-honest { padding: 72px 0; }
  .w-spec, .w-ledger-chart, .w-honest-head { grid-template-columns: 1fr; }
  .w-honest-head { gap: 16px; }
  .w-spec-col { padding: 22px 20px 24px; }
  .w-spec-col.is-e { border-left: 0; border-top: 1px solid var(--line); }
  .w-report-head { padding: 0 20px; }
  .w-ledger-chart { gap: 20px; padding: 24px 20px; }
  .w-chart-tick { font-size: 30px; }
  .w-chart-tick:nth-of-type(even) { display: none; }
  .w-chart-end { font-size: 30px; }
  .w-chart-brace, .w-chart-gap-label { display: none; }
  .w-ledger { margin-top: 36px; }
  /* phone: the plan grid becomes one swipeable row of cells */
  .w-tiers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-top: 12px; border: 0; scrollbar-width: none; }
  .w-tier { flex: none; width: min(300px, 80vw); scroll-snap-align: start; border-top: 1px solid var(--line); }
  .w-tier:first-child { border-left: 1px solid var(--line); }
  .w-window-tour { width: min(270px, 74%); }
}
@media (max-width: 560px) {
  .w-tier-blurb { min-height: 0; }
  .w-spec-unit { font-size: 16px; }
}

/* header: [logo][links] ———— [display · sign in · start free] */
@media (min-width: 861px) {
  .w-header-in { gap: 36px; }
  .w-nav { flex: 1; margin-left: 0; }
  .w-nav-sep { flex: 1; width: auto; height: 1px; margin: 0; background: none; }
}
@media (max-width: 860px) {
  .w-nav-sep { background: var(--line); }
}

/* ---------- developers: dark band ---------- */
.w-dev-dark {
  --text: #f2f4f7; --text-2: #a9afbb; --text-3: #7f8694; --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.18);
  --accent-text: #8fb0ff; --measured: #46c9b8;
  position: relative; color: var(--text);
  background: radial-gradient(50% 70% at 85% 0%, rgba(47, 107, 255, 0.16), transparent 70%), #0b0d12;
}
html[data-theme='dark'] .w-dev-dark { background: radial-gradient(50% 70% at 85% 0%, rgba(47, 107, 255, 0.14), transparent 70%), #05060a; }
.w-dev-dark :focus-visible { outline-color: #8fb0ff; }
.w-dev-dark .w-code { border-color: rgba(255, 255, 255, 0.1); background: #12151c; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }

/* ---------- the blue wash: one art direction, used sparingly ---------- */
.w-section-tint { background: radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%), var(--canvas); }
.w-page-head { background: radial-gradient(46% 90% at 18% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%); }
.w-closer { background: radial-gradient(48% 80% at 50% 100%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%), var(--canvas); }
.w-window-split { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px color-mix(in srgb, var(--accent) 35%, rgba(14, 17, 22, 0.3)); }

.w-stage-phone .w-phone-bar { border-radius: 25px 25px 0 0; padding: 8px 8px 6px; }
.w-stage-phone img { border-radius: 0 0 25px 25px; }

/* phone: 16px in every field so iOS doesn't zoom on focus; search fields get a real height */
@media (max-width: 767px) {
  .w-root input, .w-root select, .w-root textarea { font-size: 16px !important; } /* a11y floor beats page styles */
  .w-root .st-search input { min-height: 44px !important; }
}

/* ---------- the bracket grid ---------- */
.w-hero2, .w-closer, .w-dev-dark { position: relative; isolation: isolate; }
.w-hero2 > .w-wrap, .w-closer > .w-wrap, .w-dev-dark > .w-wrap { position: relative; z-index: 1; }
.w-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  --dot: color-mix(in srgb, var(--text) 17%, transparent); --mark: color-mix(in srgb, var(--text) 26%, transparent);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 78%); mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 78%); }
.w-field-dark { --dot: rgba(255, 255, 255, 0.13); --mark: rgba(255, 255, 255, 0.22); -webkit-mask-image: radial-gradient(60% 80% at 80% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 80% at 80% 20%, #000 20%, transparent 75%); }
.w-closer .w-field { -webkit-mask-image: radial-gradient(55% 70% at 50% 60%, #000 25%, transparent 75%); mask-image: radial-gradient(55% 70% at 50% 60%, #000 25%, transparent 75%); }
.w-field-dots, .w-field-spot { position: absolute; inset: 0; background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 30px 30px; background-position: 50% -15px; }
.w-field-spot { --dot: color-mix(in srgb, var(--accent) 70%, transparent); opacity: 0; transition: opacity 400ms var(--ease);
  -webkit-mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 70%); mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 70%); }
.w-field.is-lit .w-field-spot { opacity: 1; }
.w-mark { position: absolute; width: 20px; height: 20px; fill: none; stroke: var(--mark); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.w-mark.is-needs, .w-mark.is-live { animation: w-mark 9s ease-in-out infinite both; }
.w-mark-chev { stroke-width: 1.6; }
.w-mark.is-needs { --on: var(--accent); }
.w-mark.is-live { --on: var(--measured); }
@keyframes w-mark { 0%, 62%, 100% { stroke: var(--mark); } 70%, 88% { stroke: var(--on); } }
html[data-motion='reduce'] .w-field-spot { display: none; }

/* ---------- small delights ---------- */
/* engine row: each mark lifts to full ink on hover */
.w-engines li { transition: color 200ms var(--ease); }
.w-engines li:hover { color: var(--text); }
.w-engines li svg { transition: transform 300ms var(--ease); }
.w-engines li:hover svg { transform: translateY(-2px) rotate(-4deg); }

.w-stage-toast button { margin-left: 4px; padding: 3px 9px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-weight: 500; font-size: 12.5px; cursor: pointer; transition: background 150ms var(--ease); }
.w-stage-toast button:hover { background: rgba(255, 255, 255, 0.22); }
.w-stage-toast.is-undone svg { color: #c9ced8; }

/* hero: the notes under the URL field get room, and the kicker a readable measure */
.w-hero2 .w-hero-note { margin-top: 20px; line-height: 1.6; }
.w-hero2 .w-hero-kicker { max-width: 56ch; margin: 28px auto 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }

/* home pricing: the prototype's cards, then the detailed lists and the workload table folded under them */
.w-plan-more { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.w-plan-more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 22px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; color: var(--text); }
.w-plan-more > summary::-webkit-details-marker { display: none; }
.w-plan-more > summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform .15s; }
.w-plan-more[open] > summary::after { transform: rotate(-135deg); }
.w-plan-more > .w-live { padding: 4px 22px 22px; }
.w-plan-more .wl-k { display: none; }
.w-plan-more .tier-grid { margin-top: 0; }
.w-plan-more .tier .btn, .w-plan-more .tier .best { display: none; }
.w-tier-price small { font-size: inherit; }
.w-tier-spec dd b { font-weight: inherit; }

/* ── src/frame.css ── */
/* Website overrides loaded last. The frame, the hairline grid and the one hover (brackets + wash) live in
   website.css ("One frame, one grid, one hover"); they were removed here so the two don't fight. */

/* ---------- glass (tokens in ../harmony.css) ---------- */
.w-root .w-header { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.w-root .w-disp-pop { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), var(--shadow-pop); }
.w-root :is(.w-stage-toast, .w-toast) { background: rgba(21, 24, 30, 0.8); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
/* the tour's tab strip floats as a glass bar while you read the screens */
.w-root .w-tour-tabs { position: sticky; top: 64px; z-index: 5; margin: 0 -16px; padding: 14px 16px 10px; border-radius: var(--r-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@media (max-width: 860px) {
  .w-root .w-nav.is-open { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  .w-root .w-tour-tabs { margin: 0 -20px; padding: 12px 20px 8px; border-radius: 0; }
}
html[data-theme='dark'] .w-root .w-disp-pop { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-pop); }

/* ── src/pages/site.css ── */
/* Blog, fix library, legal and resources hub. Prefix: st- */

.st-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-3); }
.st-prov { color: var(--text-3); }

/* blog index */
.st-lead { gap: 10px; padding-top: 36px; padding-bottom: 36px; background-color: var(--canvas); }
.w-root .st-lead h2 { font-size: 30px; max-width: 26ch; }
.st-lead p { max-width: 64ch; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.st-lead .w-textlink { margin-top: 6px; }
/* the rest of the posts: one rounded panel with rows, 24px under the lead post */
.st-posts { margin-top: 24px; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.st-posts > .w-cell { border: 0; border-radius: 0; }
.st-posts > .w-cell + .w-cell { border-top: 1px solid var(--line); }
.st-posts a { display: grid; grid-template-columns: 120px minmax(0, 1fr) 20px; gap: 24px; align-items: baseline; padding: 20px var(--cell-x); }
.st-posts time { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.st-posts strong { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.st-posts strong + span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 72ch; }
.st-posts svg { align-self: center; }

.st-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; margin-top: 64px; }
.st-pager a { display: flex; flex-direction: column; gap: 6px; padding: 18px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 15px; font-weight: 500; color: var(--text); }
.st-pager a > span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 400; color: var(--text-3); }
.st-pager .is-next { text-align: right; align-items: flex-end; }

/* fix library */
.st-search { display: flex; align-items: center; gap: 10px; width: min(420px, 100%); height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text-3); transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.st-search:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-soft); }
.st-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--text); }
.st-lib { display: flex; flex-direction: column; gap: 48px; }
.w-root .st-group h2 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font-size: 20px; letter-spacing: -0.015em; }
.st-group h2 .num { font-size: 13px; font-weight: 500; color: var(--text-3); }
.st-group a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px var(--cell-x); }
.st-lib-name { flex: 1; font-size: 15px; font-weight: 500; color: var(--text); }
.st-empty { font-size: 15px; color: var(--text-2); }

.st-chip { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.st-chip.is-drill, .st-chip.is-wild { background: var(--measured-soft); color: var(--measured); }
.st-chip.is-none { background: var(--hover); color: var(--text-2); }
.st-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.st-related { margin-top: 80px; }
.w-root .st-related h2 { margin-bottom: 20px; font-size: 22px; }

/* legal */
.st-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }
.st-tabs a { height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 7px; font-size: 14px; color: var(--text-2); }
.st-tabs a:hover { color: var(--text); }
.st-tabs a[aria-current='page'] { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--shadow-1); }

/* resources hub */
.st-hub { display: flex; flex-direction: column; gap: 64px; }
.st-hub-group { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.w-root .st-hub-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.st-hub-head p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.st-hub-note { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-3); }

@media (max-width: 860px) {
  .st-lead { padding-top: 24px; padding-bottom: 26px; }
  .w-root .st-lead h2 { font-size: 24px; }
  .st-posts a { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 16px; }
  .st-posts time { grid-column: 1 / -1; }
  .st-pager { grid-template-columns: 1fr; }
  .st-pager .is-next { text-align: left; align-items: flex-start; }
  .st-hub-group { grid-template-columns: 1fr; gap: 16px; }
  .st-tabs { display: flex; width: 100%; overflow-x: auto; }
  .st-tabs a { flex: 1; justify-content: center; min-height: 44px; }
}
.st-entry .w-prose-table td, .st-entry .w-prose-table th { white-space: nowrap; }

/* Legal: the live copy in the article column; its section numbers and table wrappers come from the live markup. */
.w-page-head .st-stamp { display: block; margin-top: 14px; font-size: 13px; color: var(--text-3); }
.w-page-head .st-stamp a, .st-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.st-note { margin-bottom: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); font-size: 14px; line-height: 1.55; color: var(--text-2); }
.st-legal .snum { display: inline-block; min-width: 34px; color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.st-legal .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.st-legal .tablewrap table th, .st-legal .tablewrap table td { padding: 10px 14px; }

/* ── Fix-library entries (defect-*.html): scripts/build-defects.mjs's block in the prototype's entry layout.
   The block's sections become grid items: the hero and the closer span the page, the rest form the article
   column, and the section list sits beside them. ── */
.st-defect { background: radial-gradient(46% 520px at 18% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%); }
.st-defect-grid { display: grid; grid-template-columns: minmax(0, 720px) 220px; justify-content: space-between; column-gap: 64px; align-items: start; }
.st-defect-body { display: contents; }
.st-defect-body > section { grid-column: 1; }
.st-defect-body > section.hero { grid-column: 1 / -1; grid-row: 1; padding: 72px 0 40px; }
.st-defect-body > section.cta-final { grid-column: 1 / -1; }
.st-defect-toc { grid-column: 2; grid-row: 2 / span 9; margin-top: 8px; }
.st-defect .hero .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.st-defect .hero .eyebrow a { color: var(--accent-text); }
.st-defect .hero h1 { max-width: 22ch; font-size: 44px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; }
.st-defect .hero .lead { margin-top: 20px; max-width: 62ch; font-size: 18px; line-height: 1.55; color: var(--text-2); }
.st-defect .hero .kicker { margin-top: 20px; }
.st-defect code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.9em; }
.st-defect .tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--measured-soft); color: var(--measured); font-size: 12.5px; font-weight: 500; }
.st-defect .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-defect .tag:not(.drill):not(.wild) { background: var(--hover); color: var(--text-2); }
.st-defect-body > section:not(.hero):not(.cta-final) { padding: 28px 0 8px; scroll-margin-top: 88px; }
.st-defect-body > section h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); }
.st-defect-body > section > p { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.st-defect-body > section > p a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.st-defect .tablewrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.st-defect .tablewrap table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.st-defect .tablewrap th, .st-defect .tablewrap td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.st-defect .tablewrap thead th { font-size: 12px; font-weight: 500; color: var(--text-3); background: var(--surface-2); }
.st-defect .tablewrap tbody tr:last-child > * { border-bottom: 0; }
.st-defect .tablewrap td.off { color: var(--text-3); }
.st-defect ul.receipt { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-2); word-break: break-word; }
.st-defect ul.receipt li > span:first-child { color: var(--text); font-weight: 500; }
.st-defect .faq { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.st-defect .qa { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.st-defect .qa h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.st-defect .qa p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.st-defect .cta-final { margin: 64px 0 96px; padding: 56px 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); text-align: center; }
.st-defect .cta-final h2 { font-size: 30px !important; }
.st-defect .cta-final .sectionlead { max-width: 60ch; margin: 12px auto 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.st-defect .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.st-defect .cta-row .btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 500; background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.st-defect .cta-row .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 960px) {
  .st-defect-grid { grid-template-columns: minmax(0, 1fr); }
  .st-defect-toc { display: none; }
  .st-defect .hero h1 { font-size: 34px; }
}
.st-defect .tablewrap td.on { color: var(--text); font-family: inherit; }
.st-defect .tablewrap .path { font-family: 'Geist Mono', ui-monospace, monospace; color: var(--text-2); }

/* ── The blog (api/_cores/blogPage.mjs renders it): the post body, the pager and the index list in the
   prototype's look. Old page classes the renderer keeps for its tests (.body, .pager, .p/.n, .posts) are reset. ── */
.w-root .w-article-main > .body { margin: 0; padding: 0; border: 0; max-width: none; }
.w-root .w-prose > .body > :first-child { margin-top: 0; }
.w-root .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; margin-top: 64px; padding: 0; border: 0; }
.w-root .pager a { display: flex; flex-direction: column; gap: 6px; padding: 18px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; transition: border-color .15s, background-color .15s; }
.w-root .pager a:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.w-root .pager a .d { font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.w-root .pager a.n { grid-column: 2; text-align: right; align-items: flex-end; }
.w-root .st-allposts { margin-top: 32px; }
.w-root .posts.st-posts { margin: 16px 0 0; padding: 0; list-style: none; }
.w-root .st-posts time, .w-root .st-lead time { font-family: inherit; }
@media (max-width: 860px) { .w-root .pager { grid-template-columns: 1fr; } .w-root .pager a.n { grid-column: 1; text-align: left; align-items: flex-start; } }
.w-root article.w-article-main { border: 0; padding-top: 0; margin-top: 0; }
.w-root .pager a { max-width: none; margin-left: 0; }
.w-root .pager .t { margin-top: 0; font-weight: 500; }
.st-lib-count { margin-top: 14px; font-size: 14px; color: var(--text-3); }
.st-lib-count b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── src/pages/audience.css ── */
/* Audience, company and index pages (Marketers, Executives, Enterprise, About, Integrations, Walkthroughs). Builds on website.css. */

/* plan rows: reuse .w-teaser, add a link column */
.au-plans > li { grid-template-columns: 200px minmax(0, 1fr) 200px 160px; }
.au-plans .btn { align-self: center; justify-self: end; }

/* status chips (product status, never evidence colours except Live = verified running) */
.au-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.au-chip.is-live { background: var(--measured-soft); color: var(--measured); }
.au-chip.is-key, .au-chip.is-licensed { background: var(--hover); color: var(--text-2); }
.au-chip.is-pilot { border-color: var(--line-strong); color: var(--text-2); }
.au-chip.is-planned { border: 1px dashed var(--line-strong); color: var(--text-3); font-weight: 400; }

/* inline product fragments */
.au-frag-pad { padding: 4px 0 0; }
.au-inbox li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.au-inbox ul { list-style: none; margin: 0; padding: 0; }
.au-inbox li:first-child { border-top: 0; }
.au-inbox-t { font-weight: 500; color: var(--text); }
.au-inbox-p { grid-column: 1; font-size: 12.5px; color: var(--text-3); }
.au-inbox-lift { grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right; font-size: 12.5px; color: var(--estimate); }
.au-inbox-lift b { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.au-inbox-lift small { font-size: 11.5px; color: var(--text-3); }
.au-inbox li.is-no .au-inbox-t { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.au-inbox li.is-no .au-inbox-lift { color: var(--text-3); }

.au-cited { padding: 22px 24px; }
.au-cited-q { margin-top: 12px; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.4; }
.au-cited dl { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--line); font-size: 13.5px; }
.au-cited dt, .au-cited dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.au-cited dt { padding-right: 18px; font-weight: 500; }
.au-cited dd { color: var(--text-2); text-align: right; }
.au-cited dd.is-you { color: var(--text-3); }
.au-draft { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.au-draft-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 12.5px; color: var(--text-3); }
.au-draft-h strong { color: var(--text); font-weight: 500; }

/* three-up statement row: hairline columns, no icons */
.au-three h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.au-three p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }

/* definition rows (modes, roles, facts) */
.au-rows { margin: 0; border-top: 1px solid var(--line); }
.au-rows > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.au-rows dt { font-size: 15.5px; font-weight: 600; color: var(--text); }
.au-rows dt span { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--text-3); }
.au-rows dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.w-band .au-rows { border-color: #2b303a; }
.w-band .au-rows > div { border-color: #2b303a; }
.w-band .au-rows dt { color: #fff; }
.w-band .au-rows dd { color: #c3c8d2; }
.w-band .au-rows dt span { color: #8e95a2; }

/* enterprise: process + form */
.au-process li { gap: 0; }
.au-process li::before { content: ''; flex: none; width: 9px; height: 9px; margin: 6px 0 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.au-process h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.au-process p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.au-note { margin-top: 28px; font-size: 14.5px; color: var(--text-3); max-width: 70ch; }
.au-note a { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }

.au-form-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.au-form { padding: 28px var(--cell-x); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); }
.au-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.au-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.au-field.is-wide { grid-column: 1 / -1; }
.au-field label { font-size: 13px; font-weight: 500; color: var(--text); }
.au-field label span { font-weight: 400; color: var(--text-3); }
.au-field input, .au-field textarea { width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease); }
.au-field textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.au-field input:focus, .au-field textarea:focus { outline: 0; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.au-field input::placeholder, .au-field textarea::placeholder { color: var(--text-3); }
.au-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.au-consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent-text); }
.au-consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.au-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.au-form-foot p { font-size: 13px; color: var(--text-3); max-width: 36ch; }
.au-form-foot .btn { height: 42px; padding: 0 18px; flex: none; }
.au-thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0; }
.au-thanks-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--measured-soft); color: var(--measured); }
.au-thanks h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.au-thanks p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.au-thanks .btn { margin-top: 8px; }

/* integrations */
.au-filter { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 40px; border-radius: 10px; background: var(--canvas); border: 1px solid var(--line); }
.au-filter button { height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; transition: background 120ms var(--ease), color 120ms var(--ease); }
.au-filter button:hover { color: var(--text); }
.au-filter button[aria-pressed='true'] { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(14, 17, 22, 0.08), 0 0 0 1px var(--line); }
.au-filter span { margin-left: 6px; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.au-group + .au-group { margin-top: 56px; }
.au-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.w-root .au-group-h h2 { font-size: 22px; letter-spacing: -0.02em; }
.au-group-h p { font-size: 14.5px; color: var(--text-3); }
.au-int li { gap: 10px; }
.au-int-name { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.au-int-name h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.au-int-how { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.au-int-pay { margin-top: auto; padding-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--text-3); }
.au-int-pay b { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.au-empty { padding: 24px 0; font-size: 15px; color: var(--text-3); }

/* walkthroughs */
.au-walk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; padding: 36px var(--cell-x); }
.au-walk-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text-3); }
.w-root .au-walk h2 { margin-top: 10px; font-size: 24px; letter-spacing: -0.02em; }
.au-walk-lede { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 52ch; }
.au-walk .w-textlink { margin-top: 18px; }
.au-walk ol { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.au-walk ol li::marker { color: var(--text-3); font-variant-numeric: tabular-nums; }
.au-walk-steps h3 { margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.au-honest { padding: 24px var(--cell-x); border: 1px solid var(--line); background: var(--canvas); border-radius: var(--r-lg); }
.au-honest h2 { font-size: 20px !important; letter-spacing: -0.015em !important; }
.au-honest p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 72ch; }

/* about */
.au-facts { margin: 0; padding: 8px 24px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); }
.au-facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 14px 0; font-size: 14.5px; }
.au-facts > div + div { border-top: 1px solid var(--line); }
.au-facts dd a { text-decoration: underline; text-underline-offset: 3px; }
.au-facts dt { color: var(--text-3); }
.au-facts dd { margin: 0; color: var(--text); }
.au-facts a { color: var(--accent-text); }
.au-name { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--text-3); max-width: 60ch; }
.au-name em { font-style: normal; font-weight: 500; color: var(--text); }

@media (max-width: 860px) {
  .au-plans > li { grid-template-columns: 1fr auto; }
  .au-plans .btn { grid-column: 1 / -1; justify-self: start; }
  .au-rows > div { grid-template-columns: 1fr; gap: 6px; }
  .au-form-wrap { grid-template-columns: 1fr; gap: 32px; }
  .au-form { padding: 20px var(--cell-x); }
  .au-fields { grid-template-columns: 1fr; }
  .au-form-foot { flex-direction: column; align-items: stretch; }
  .au-form-foot .btn { height: 46px; }
  .au-field input { min-height: 46px; }
  .au-filter { display: flex; margin-bottom: 32px; }
  .au-filter button { flex: 1 1 auto; height: 44px; }
  .au-group-h { flex-direction: column; gap: 4px; }
  .au-walk { grid-template-columns: 1fr; padding: 28px var(--cell-x); }
  .au-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .au-cited dl { grid-template-columns: 1fr; }
  .au-cited dt { padding-bottom: 0; border-bottom: 0; }
  .au-cited dd { text-align: left; padding-top: 2px; }
}
.au-flush { padding-top: 0 !important; }
.au-control { color: #fff; }
.au-fallback { flex-basis: 100%; margin-top: 2px; font-size: 13.5px; color: var(--text-3); }
.au-fallback a { color: var(--accent-text, var(--accent)); text-decoration: underline; text-underline-offset: 2px; }

/* Walkthroughs: the steps beside the recording; the recording keeps its device-free product-frame radius. */
.au-walk-video { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.au-walk-video .au-walk-steps { margin-top: 22px; }
.au-walk-frame { margin: 0; }
.au-walk-frame video, .au-walk-frame img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.au-walk-frame figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-3); }
.au-walk-foot { margin-top: 20px; font-size: 14px; color: var(--text-3); }
@media (max-width: 860px) { .au-walk-video { grid-template-columns: 1fr; } }
/* the overview's film comes before its transcript once the two stack, or a phone shows ten sentences before the video */
@media (max-width: 860px) { .au-overview .au-walk-frame { order: -1; } }

/* Company Intelligence plans: cards, each with its own feature list (a row layout cannot hold a list per plan). */
.ci-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ci-plans > li { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ci-plans > li.is-featured { border-color: var(--accent); }
.ci-plans h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ci-plans .w-tease-blurb { margin: 0; color: var(--text-2); }
.ci-plans .w-price { margin: 4px 0 0; flex-wrap: wrap; }
.ci-plans .w-ticks { flex: 1; margin: 12px 0 0; }
.ci-plans .btn { align-self: flex-start; margin-top: 12px; }
@media (max-width: 900px) { .ci-plans { grid-template-columns: 1fr; } }
.ci-plans { margin-bottom: 40px; }

/* ── src/pages/research.css ── */
/* Research and proof pages: /proof, /methodology, /observatory, /model-benchmarks, /visibility-index-mauritius. Prefix: rs- */

.rs-section { padding: 64px 0; }
.rs-section .w-head { margin-bottom: 28px; }
.rs-root h2 { font-size: 30px; }
.rs-muted { color: var(--text-3); }
.rs-note { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--text-3); max-width: 72ch; }
.rs-note a, .rs-link { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.rs-note a:hover, .rs-link:hover { text-decoration-color: var(--accent-text); }
.rs-root code, .rs-mono { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.88em; }

/* the claim, with its number */
.rs-claim { padding: 40px 0 56px; }
.rs-claim-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.rs-big { font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--text); }
.rs-big span { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-3); margin-left: 6px; }
.rs-big-label { margin-top: 10px; font-size: 16px; color: var(--text-2); max-width: 42ch; }

.rs-figs { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rs-figs li { flex: 1 1 140px; padding: 18px 20px 18px 0; }
.rs-figs li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.rs-figs b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.rs-figs span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }
.rs-figs-wrap { padding: 36px 0 8px; }

/* segmented proportion bar, drawn to scale */
.rs-seg-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--hover); gap: 2px; }
.rs-seg-bar i { display: block; height: 100%; }
.rs-seg-bar .k-drill { background: var(--measured); }
.rs-seg-bar .k-wild { background: #5aaea6; }
.rs-seg-bar .k-none { background: var(--line-strong); }
.rs-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--text-2); }
.rs-legend li { display: inline-flex; align-items: center; gap: 8px; }
.rs-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rs-legend .k-drill { background: var(--measured); }
.rs-legend .k-wild { background: #5aaea6; }
.rs-legend .k-none { background: var(--line-strong); }
.rs-legend b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* provenance tags */
.rs-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; vertical-align: middle; }
.rs-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rs-tag.is-m { background: var(--measured-soft); color: var(--measured); }
.rs-tag.is-e { background: var(--estimate-soft); color: var(--estimate); }
.rs-tag.is-n { background: var(--hover); color: var(--text-2); }
.rs-tag.is-n::before { display: none; }

/* segmented filter */
.rs-filter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }
.rs-filter button { height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.rs-filter button:hover { color: var(--text); }
.rs-filter button[aria-pressed='true'], .rs-filter button[aria-selected='true'] { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--shadow-1); }
.rs-filter button span { margin-left: 6px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rs-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rs-toolbar p { font-size: 13.5px; color: var(--text-3); }

/* tables */
.rs-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.rs-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.rs-table caption { padding: 14px 16px; text-align: left; font-size: 13px; color: var(--text-3); border-bottom: 1px solid var(--line); caption-side: top; }
.rs-table th, .rs-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rs-table thead th { font-size: 12.5px; font-weight: 500; color: var(--text-3); background: var(--surface-2); white-space: nowrap; }
.rs-table tbody th { font-weight: 500; color: var(--text); }
.rs-table td { color: var(--text-2); }
.rs-table tbody tr:last-child > * { border-bottom: 0; }
.rs-table .r { text-align: right; }
.rs-table .rank { width: 36px; color: var(--text-3); }
.rs-table a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.rs-table a:hover { color: var(--accent-text); text-decoration-color: var(--accent-text); }
.rs-sticky th:first-child, .rs-sticky td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.rs-sticky thead th:first-child { background: var(--surface-2); }
.rs-time { display: block; color: var(--text); font-weight: 500; white-space: nowrap; }
.rs-date { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.rs-dash { color: var(--line-strong); }
.rs-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.rs-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.rs-sort:hover { color: var(--text); }
.rs-sort svg { color: var(--text-3); }
th[aria-sort='ascending'] .rs-sort, th[aria-sort='descending'] .rs-sort { color: var(--text); }

/* inline bar, to scale against 0–100% */
.rs-cell-bar { display: grid; grid-template-columns: 44px minmax(60px, 1fr); align-items: center; gap: 10px; min-width: 150px; }
.rs-track { position: relative; height: 6px; border-radius: 3px; background: var(--hover); }
.rs-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--measured); }
.rs-track .rs-mark { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--text); }
.rs-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-3); }

/* proof traces */
.rs-traces { border-top: 1px solid var(--line); }
.rs-trace { border-bottom: 1px solid var(--line); }
.rs-trace summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px) 360px 20px; align-items: center; gap: 16px; min-height: 60px; padding: 12px 4px; cursor: pointer; list-style: none; }
.rs-trace summary::-webkit-details-marker { display: none; }
.rs-trace summary:hover { background: var(--surface-2); }
.rs-trace-code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.rs-trace-name { font-size: 15.5px; font-weight: 500; color: var(--text); }
.rs-trace-code-sm { display: inline-block; margin: 0 0 14px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-2); }
.rs-why { margin-top: 8px; }
.rs-why summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 500; color: var(--accent-text); }
.rs-why summary::-webkit-details-marker { display: none; }
.rs-why[open] .rs-chev { transform: rotate(90deg); }
.rs-why p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--text-3); }
.rs-why .rs-trace-code-sm { margin: 0 8px 0 0; }
.rs-list li a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.rs-list li a:hover { color: var(--accent-text); text-decoration-color: var(--accent-text); }
.rs-trace-page { font-size: 13.5px; color: var(--text-3); overflow-wrap: anywhere; }
.rs-trace-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 13px; color: var(--text-3); white-space: nowrap; }
.rs-chev { color: var(--text-3); transition: transform 160ms var(--ease); }
.rs-trace[open] .rs-chev { transform: rotate(90deg); }
.rs-trace-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; padding: 8px 4px 32px; }
.rs-steps { list-style: none; margin: 0; padding: 0; }
.rs-steps li { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 0 0 14px 22px; font-size: 13.5px; }
.rs-steps li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--measured); }
.rs-steps li::after { content: ''; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 1px; background: var(--line-strong); }
.rs-steps li:last-child::after { display: none; }
.rs-steps li.is-empty::before { background: var(--surface); border: 1px solid var(--line-strong); width: 7px; height: 7px; }
.rs-steps b { font-weight: 500; color: var(--text); text-transform: capitalize; }
.rs-steps span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.rs-steps li.is-empty span { color: var(--text-3); }
.rs-facts { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; }
.rs-facts dt { color: var(--text-3); }
.rs-facts dd { margin: 0; color: var(--text-2); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.rs-excerpt + .rs-excerpt { margin-top: 18px; }
.rs-excerpt h4 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.rs-excerpt h4 span { font-weight: 400; color: var(--text-3); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; }
.rs-excerpt .w-diff { margin-top: 8px; }
.rs-excerpt .w-diff .del { background: var(--stop-soft); color: #8f2f26; }
.rs-excerpt .w-diff .del i { color: var(--stop); }
.rs-excerpt-none { margin-top: 8px; font-size: 13px; color: var(--text-3); }
.rs-trace-note { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--text-2); }

/* plain lists */
.rs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rs-list li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--text-2); }
.rs-list li > :first-child { font-weight: 500; color: var(--text); }
.rs-list .rs-trace-code { font-size: 13.5px; }
.rs-bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 64ch; }
.rs-bullets li::marker { color: var(--text-3); }

/* engine panels (observatory) */
.rs-self { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); background: var(--surface); }
.rs-self > div { padding: 22px 24px; }
.rs-self > div + div { border-left: 1px solid var(--line); }
.rs-self p { font-size: 14px; color: var(--text-2); }
.rs-self .rs-val { margin-top: 8px; font-size: 34px; font-weight: 600; letter-spacing: -0.03em; color: var(--measured); font-variant-numeric: tabular-nums; }
.rs-self .rs-val span { font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--text-3); }

.rs-qs { columns: 2; column-gap: 40px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.rs-qs li { break-inside: avoid; padding: 5px 0; }
.rs-more { border-top: 1px solid var(--line); }
.rs-more:last-child { border-bottom: 1px solid var(--line); }
.rs-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 500; }
.rs-more summary::-webkit-details-marker { display: none; }
.rs-more summary span { font-weight: 400; font-size: 13.5px; color: var(--text-3); }
.rs-more[open] .rs-chev { transform: rotate(90deg); }
.rs-more > div { padding: 0 0 24px; }
.rs-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 0; list-style: none; }
.rs-terms li { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 13px; font-size: 12.5px; font-family: 'Geist Mono', ui-monospace, monospace; color: var(--text-2); background: var(--surface); }

/* two-column method notes */
.rs-method { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; }
.rs-method h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.rs-method p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* sector tabs (Mauritius) */
.rs-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 3px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); scrollbar-width: none; }
.rs-tabs::-webkit-scrollbar { display: none; }
.rs-tabs button { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.rs-tabs button:hover { color: var(--text); }
.rs-tabs button[aria-selected='true'] { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--shadow-1); }
.rs-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.rs-root .rs-panel-head h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.rs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rs-pair > div, .rs-method > div { min-width: 0; }
.rs-pair h4, .rs-block-title { margin-bottom: 10px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.rs-pair h4 span, .rs-block-title span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--text-3); }
.rs-qlist { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rs-qlist li { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 12px 4px 6px; border: 1px solid var(--line); border-radius: 15px; font-size: 13px; color: var(--text-2); background: var(--surface); }
.rs-qlist abbr { min-width: 22px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--hover); font-size: 11px; font-weight: 600; color: var(--text-2); text-decoration: none; text-transform: uppercase; }
.rs-domains { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rs-domains li { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 14px; font-size: 13px; color: var(--text-2); background: var(--surface); }
.rs-showall { margin-top: 10px; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--accent-text); cursor: pointer; }
.rs-showall:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs-gap { margin-top: 28px; }
.rs-summary { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--line); background: var(--surface-2); }
.rs-summary p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 78ch; }
.rs-summary small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--text-3); }

/* methodology long-form */
.rs-article { padding-top: 48px; }
.rs-article .w-prose table { font-size: 14px; }
.w-prose .rs-rules, .w-prose .rs-status { list-style: none; padding: 0; gap: 0; border-top: 1px solid var(--line); }
.w-prose .rs-table th { white-space: normal; }
.w-prose .rs-table tbody th { background: none; }
.w-prose .rs-table thead th { white-space: nowrap; background: var(--surface-2); }
.rs-rules li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.w-prose .rs-rules h3 { margin: 0; font-size: 16.5px; }
.rs-rules p { margin-top: 6px; font-size: 15.5px; }
.rs-status li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.w-prose .rs-status p { margin: 0; font-size: 15.5px; }

@media (max-width: 860px) {
  .rs-claim-grid { grid-template-columns: 1fr; gap: 28px; }
  .rs-big { font-size: 52px; }
  .rs-root h2 { font-size: 26px; }
  .rs-section { padding: 48px 0; }
  .rs-figs li { flex: 1 1 45%; padding: 14px 12px 14px 0; }
  .rs-figs li + li { padding-left: 0; border-left: 0; }
  .rs-figs li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .rs-figs li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .rs-figs b { font-size: 22px; }
  .rs-trace summary { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 12px; }
  .rs-trace-name { font-size: 15.5px; font-weight: 500; color: var(--text); }
.rs-trace-code-sm { display: inline-block; margin: 0 0 14px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-2); }
.rs-why { margin-top: 8px; }
.rs-why summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 500; color: var(--accent-text); }
.rs-why summary::-webkit-details-marker { display: none; }
.rs-why[open] .rs-chev { transform: rotate(90deg); }
.rs-why p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--text-3); }
.rs-why .rs-trace-code-sm { margin: 0 8px 0 0; }
.rs-list li a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.rs-list li a:hover { color: var(--accent-text); text-decoration-color: var(--accent-text); }
.rs-trace-page { grid-column: 1; grid-row: 2; }
  .rs-trace-meta { grid-column: 1; grid-row: 3; white-space: normal; flex-wrap: wrap; justify-content: flex-start; }
  .rs-chev { grid-column: 2; grid-row: 1 / span 3; }
  .rs-trace-body { grid-template-columns: 1fr; gap: 24px; }
  .rs-list li, .rs-status li { grid-template-columns: 1fr; gap: 6px; }
  .rs-self { grid-template-columns: 1fr; }
  .rs-self > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .rs-qs { columns: 1; }
  .rs-method, .rs-pair { grid-template-columns: 1fr; }
  .rs-filter button, .rs-tabs button { height: 44px; }
  .rs-sort, .rs-showall, .rs-why summary { min-height: 44px; }
  .rs-steps li { grid-template-columns: 84px 1fr; }
  /* stacked rows */
  .rs-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rs-stack, .rs-stack tbody, .rs-stack tr, .rs-stack th, .rs-stack td { display: block; width: auto; }
  .rs-stack tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .rs-stack tbody tr:last-child { border-bottom: 0; }
  .rs-stack tbody th, .rs-stack td { padding: 3px 0; border: 0; }
  .rs-stack td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 500; color: var(--text-3); }
  .rs-stack tbody th { font-size: 15px; margin-bottom: 4px; }
}
@media (max-width: 480px) {
  .rs-root .w-page-head h1 { font-size: 34px; }
}

/* Methodology: the kicker under the head, and the three audit frames as numbered figures. */
.w-prose .rs-kicker { font-size: 17px; line-height: 1.6; color: var(--text); }
.w-prose .rs-shots { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 20px; counter-reset: shot; }
.rs-shots li { counter-increment: shot; }
.rs-shots figure { margin: 0; }
.rs-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.rs-shots figcaption { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.rs-shots figcaption::before { content: counter(shot); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--hover); font-size: 12px; font-weight: 600; color: var(--text); }

/* ── The receipts: scripts/build-proof.mjs's blocks, in the redesign's look ── */
.rs-proof .proof-total .big { font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--text); }
.rs-proof .proof-total .big .n { font-variant-numeric: tabular-nums; }
.rs-proof .proof-total .big span:not(.n) { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-3); }
.rs-proof .proof-total .split { margin-top: 14px; max-width: 72ch; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.rs-proof .proof-total .split:first-of-type { font-size: 16px; color: var(--text); }
.rs-proof .proof-total .split .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-proof .proof-total .asof { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.rs-proof .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rs-proof .tablewrap table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.rs-proof .tablewrap th, .rs-proof .tablewrap td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rs-proof .tablewrap thead th { font-size: 12.5px; font-weight: 500; color: var(--text-3); background: var(--surface-2); white-space: nowrap; }
.rs-proof .tablewrap tbody tr:last-child > * { border-bottom: 0; }
.rs-proof .tablewrap tbody th { font-weight: 500; color: var(--text); line-height: 1.5; }
.rs-proof .tablewrap td { color: var(--text-2); }
.rs-proof table.stages td { white-space: nowrap; }
.rs-proof table.stages td.on { color: var(--text); }
.rs-proof table.stages td.off { color: var(--text-3); }
.rs-proof .tablewrap a { color: var(--text); text-decoration: none; }
.rs-proof .tablewrap a:hover code { color: var(--accent-text); }
.rs-proof code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.92em; }
.rs-proof .path { font-size: 12.5px; color: var(--text-3); }
.rs-proof .tag { display: inline-flex; align-items: center; height: 20px; margin-top: 4px; padding: 0 8px; border-radius: 10px; background: var(--hover); font-size: 11.5px; font-weight: 500; color: var(--text-2); }
.rs-proof .tag.wild { background: var(--measured-soft); color: var(--measured); }
.rs-proof details.trace { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rs-proof details.trace + details.trace { margin-top: 10px; }
.rs-proof details.trace summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 18px; cursor: pointer; list-style: none; font-weight: 500; color: var(--text); }
.rs-proof details.trace summary::-webkit-details-marker { display: none; }
.rs-proof details.trace summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(-45deg); transition: transform .15s; }
.rs-proof details.trace[open] summary::after { transform: rotate(45deg); }
.rs-proof details.trace summary:hover { background: var(--surface-2); border-radius: var(--r-lg); }
.rs-proof details.trace > ul { margin: 0; padding: 4px 18px 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.rs-proof details.trace > ul li > span:first-child { color: var(--text); font-weight: 500; }
.rs-proof details.trace .ex { padding: 14px 18px 0; }
.rs-proof details.trace .ex:last-child { padding-bottom: 18px; }
.rs-proof details.trace .exl { font-size: 13px; color: var(--text-3); }
.rs-proof details.trace pre { margin: 8px 0 0; padding: 10px 12px; overflow-x: auto; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-all; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.rs-proof details.trace pre .del { display: block; background: var(--stop-soft); color: #8f2f26; }
.rs-proof details.trace pre .add { display: block; background: #ecf7f3; color: #0b5c55; }
html[data-theme='dark'] .rs-proof details.trace pre .del { color: #f3a49b; }
html[data-theme='dark'] .rs-proof details.trace pre .add { background: rgba(32, 160, 140, 0.14); color: #7fd6c5; }
.rs-proof .people { margin-top: 4px; }
@media (max-width: 640px) { .rs-proof .proof-total .big { font-size: 48px; } }
/* the page head still carries the old page's own styles for these blocks; undo what they set */
.rs-proof .proof-total { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.rs-proof .proof-total .big { margin: 0; }
.rs-proof .proof-total .n { color: inherit; }
.rs-proof details.trace { margin: 0; padding: 0; }
.rs-proof details.trace > ul { margin: 0; }
.rs-proof details.trace .ex { margin: 0; }

/* ── The observatory: scripts/build-observatory.mjs's blocks, in the redesign's look ── */
.rs-obs .lead-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-3); }
.rs-obs .lead-figures strong { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.rs-obs .lead-figures > span[translate] { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-2); }
.rs-obs .split { margin: 0 0 12px; font-size: 13.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rs-obs .obs-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rs-obs .obs-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.rs-obs .obs-table th, .rs-obs .obs-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.rs-obs .obs-table thead th { font-size: 12.5px; font-weight: 500; color: var(--text-3); background: var(--surface-2); white-space: nowrap; }
.rs-obs .obs-table tbody tr:last-child > * { border-bottom: 0; }
.rs-obs .obs-table td:first-child { width: 36px; color: var(--text-3); }
.rs-obs .obs-table td:nth-child(2) { font-weight: 500; color: var(--text); }
.rs-obs .obs-table td { color: var(--text-2); }
.rs-obs .obs-engines { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.rs-obs .obs-engine { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rs-obs .obs-engine h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.rs-obs .obs-engine .split { margin: 4px 0 12px; }
.rs-obs .obs-engine ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rs-obs-self { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); font-size: 15px; line-height: 1.6; color: var(--text-2); }
.rs-obs-self strong { color: var(--text); }
.rs-obs .obs-qs { columns: 2; column-gap: 40px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.rs-obs .obs-qs li { break-inside: avoid; padding: 5px 0; }
.rs-obs .obs-method details { margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rs-obs .obs-method details summary { display: flex; align-items: center; min-height: 52px; cursor: pointer; font-weight: 500; color: var(--text); }
.rs-obs .obs-method details[open] { padding-bottom: 16px; }
.rs-obs .obs-method code { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: 12px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-2); background: var(--surface); }
.rs-obs .obs-method .rs-method { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-obs .rs-block-lead { font-size: 15px; color: var(--text-2); margin-bottom: 12px; }
.rs-obs .rs-block-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
@media (max-width: 860px) { .rs-obs .obs-method .rs-method { grid-template-columns: 1fr; } .rs-obs .obs-qs { columns: 1; } .rs-obs .lead-figures > span[translate] { margin-left: 0; } }
.rs-obs .lead-figures span { font-family: inherit; letter-spacing: 0; }
.rs-obs .obs-method .rs-note { margin-top: 24px; }

/* ── The model benchmark: scripts/build-benchmarks-page.mjs's whole body, in the redesign's look ── */
.rs-bench { background: radial-gradient(46% 600px at 18% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%); }
.rs-bench section { padding: 64px 0; border-top: 1px solid var(--line); }
.rs-bench section.hero { padding: 72px 0 40px; border-top: 0; }
.rs-bench .eyebrow { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--accent-text); }
.rs-bench h1 { font-size: 48px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; max-width: 20ch; }
.rs-bench .hero .lead { margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--text-2); max-width: 60ch; }
.rs-bench .hero .lead-figures { margin-top: 32px; }
.rs-bench h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.rs-bench section > p, .rs-bench .sectionlead { margin-top: 12px; max-width: 68ch; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.rs-bench .kicker { margin: 12px 0 16px; }
.rs-bench .provenance { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--measured-soft); color: var(--measured); font-size: 12px; font-weight: 500; }
.rs-bench .provenance i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rs-bench .obs-table td:first-child { width: auto; color: var(--text); font-weight: 500; }
.rs-bench .obs-table td:nth-child(2) { font-weight: 400; color: var(--text-2); }
.rs-bench .obs-table td b { color: var(--measured); font-weight: 500; }
.rs-bench .split { margin-top: 14px; }
.rs-bench .sectionlead a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.rs-bench .obs-method > p { margin-top: 14px; }
.rs-bench .faq { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; max-width: 820px; }
.rs-bench .qa { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rs-bench .qa h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.rs-bench .qa p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.rs-bench .cta-final { margin: 0 0 96px; padding: 56px 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); text-align: center; }
.rs-bench .cta-final .sectionlead { margin-left: auto; margin-right: auto; }
.rs-bench .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.rs-bench .cta-row .btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 500; background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.rs-bench .cta-row .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.rs-bench .cta-row .btn.primary:hover { background: var(--accent-hover); }
@media (max-width: 640px) { .rs-bench h1 { font-size: 34px; } .rs-bench h2 { font-size: 24px; } }
.w-root .rs-obs .lead-figures { font-family: inherit; font-size: 14px; line-height: 1.5; margin-top: 0; }
.rs-bench .hero .lead-figures { margin-top: 32px; }
.rs-bench section#results { border-top: 0; padding-top: 24px; }
.rs-bench .obs-table td { white-space: nowrap; }
.rs-bench .obs-table td:first-child { white-space: normal; }

/* ── src/pages/dev.css ── */
/* Developer pages: /developers, /docs/*, /pull-requests, /licensing. Every class is dv- prefixed. */

/* syntax tokens (dark code blocks) */
.dv-tc { color: #7d8594; font-style: italic; }
.dv-ts { color: #8ae0d6; }
.dv-tk { color: #9db8ff; }
.dv-tn { color: #f0c66b; }

/* code panel with tabs and copy */
.dv-codebox { overflow: hidden; background: #0e1116; border: 1px solid #0e1116; border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04), 0 24px 48px -24px rgba(14, 17, 22, 0.3); }
.dv-codebar { display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 8px 0 10px; border-bottom: 1px solid #232832; }
.dv-tab { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 13px; color: #a9afbb; cursor: pointer; }
.dv-tab:hover { color: #fff; }
.dv-tab[aria-selected='true'] { background: #232832; color: #fff; }
.dv-codebar .dv-copy { margin-left: auto; }
.dv-codebox pre { margin: 0; padding: 20px 22px 24px; color: #d7dbe3; font-size: 13px; line-height: 1.75; overflow-x: auto; white-space: pre; }
.dv-copy { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid #2b303a; border-radius: 7px; background: #161a21; color: #c3c8d2; font: inherit; font-size: 12.5px; cursor: pointer; }
.dv-copy:hover { color: #fff; border-color: #3a404b; }
.dv-copy:focus-visible, .dv-tab:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 2px; }

/* prose code blocks get a copy button */
.dv-pre { position: relative; }
.dv-pre .dv-copy { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity 120ms var(--ease); }
.dv-pre:hover .dv-copy, .dv-pre .dv-copy:focus-visible { opacity: 1; }
@media (hover: none) { .dv-pre .dv-copy { opacity: 1; } }

/* developers: surfaces */
.dv-surface code, .dv-mono { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--text-3); }
.dv-surface .dv-mono { margin-top: auto; padding-top: 12px; }

/* developers: actions table */
.dv-table { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); }
.dv-table :is(th, td):first-child { padding-left: var(--cell-x); }
.dv-table :is(th, td):last-child { padding-right: var(--cell-x); }
.dv-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dv-table th, .dv-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dv-table thead th { font-size: 13px; font-weight: 600; background: var(--canvas); color: var(--text); }
.dv-table tbody tr:last-child > * { border-bottom: 0; }
.dv-table td { color: var(--text-2); }
.dv-table td:first-child code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13.5px; font-weight: 500; color: var(--text); }
.dv-table td.dv-cost { white-space: nowrap; }
.dv-free { color: var(--measured); font-weight: 500; }
.dv-note { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); max-width: 72ch; }
.dv-note code, .dv-scope code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.9em; }

/* developers: honest scope (inside .w-band) */
.dv-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid #2b303a; overflow: hidden; background: #161a21; border-radius: var(--r-lg); }
.dv-scope > div { padding: 28px var(--cell-x) 30px; }
.dv-scope > div + div { border-left: 1px solid #2b303a; }
.dv-scope h3 { font-size: 13px; font-weight: 600; color: #fff; }
.dv-scope ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dv-scope li { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; color: #c3c8d2; }
.dv-scope li svg { flex: none; margin-top: 3px; color: #6fd3c8; }
.dv-scope .is-hosted li svg { color: #8e95a2; }
.dv-scope strong { color: #fff; font-weight: 500; }

/* developers: downloads */
.dv-downloads { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dv-downloads li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.dv-downloads h3 { font-size: 15.5px; font-weight: 600; }
.dv-downloads p { margin-top: 3px; font-size: 14px; color: var(--text-2); }
.dv-downloads .dv-mono { display: block; margin-top: 4px; }
.dv-dl { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 13.5px; font-weight: 500; color: var(--text); background: var(--surface); white-space: nowrap; }
.dv-dl:hover { border-color: var(--text-3); background: var(--canvas); }
.dv-locked { margin-top: 20px; font-size: 14.5px; color: var(--text-2); }
.dv-locked a { color: var(--accent-text); font-weight: 500; }
.dv-reflinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.dv-reflinks a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text); }
.dv-reflinks a span { font-size: 13px; color: var(--text-3); }
.dv-reflinks a:hover { color: var(--accent-text); }

/* docs layout */
.dv-docs { display: grid; grid-template-columns: 216px minmax(0, 1fr) 200px; gap: 56px; align-items: start; padding-top: 40px; padding-bottom: 96px; }
.dv-side { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; padding-bottom: 24px; }
.dv-side h2 { margin: 22px 0 6px; font-size: 12px !important; font-weight: 600; letter-spacing: 0 !important; line-height: 1.4 !important; color: var(--text); }
.dv-side h2 { margin-top: 0; }
.dv-side div + div { margin-top: 22px; }
.dv-side a { display: block; padding: 6px 10px; margin-left: -10px; border-radius: var(--r-sm); font-size: 14px; color: var(--text-2); }
.dv-side a:hover { color: var(--text); background: var(--canvas); }
.dv-side a[aria-current='page'] { color: var(--accent-text); background: var(--accent-soft); font-weight: 500; }
.dv-mobnav { display: none; }
.dv-main { min-width: 0; max-width: 760px; }
.dv-doc-group { font-size: 13px; font-weight: 500; color: var(--text-3); }
.dv-main h1 { margin-top: 6px; font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.dv-doc-lede { margin-top: 12px; margin-bottom: 36px; font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.dv-main .w-prose h4 { margin-top: 24px; font-size: 15.5px; font-weight: 600; color: var(--text); }
.dv-main .w-prose h3 { scroll-margin-top: 88px; }
.dv-main .w-prose td code { white-space: nowrap; }
.dv-docs .w-toc { top: 88px; }
.dv-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.dv-pager a { display: flex; flex-direction: column; gap: 2px; padding: 16px 24px; border: 1px solid var(--line); font-size: 15px; font-weight: 500; color: var(--text); }
.dv-pager a span { font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.dv-pager .is-next { grid-column: 2; text-align: right; }
.dv-quick { margin-bottom: 44px; --cell-x: 24px; }
.dv-quick a { gap: 4px; padding-top: 20px; padding-bottom: 22px; }
.dv-quick strong { font-size: 15px; font-weight: 600; color: var(--text); }
.dv-quick span { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

/* docs: API types */
.dv-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dv-files button { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.dv-files button:hover { border-color: var(--line-strong); color: var(--text); }
.dv-files button[aria-pressed='true'] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.dv-exports { display: flex; flex-wrap: wrap; gap: 6px; }

/* pull requests */
.dv-mode { gap: 0; align-items: flex-start; }
.dv-mode-tag { display: inline-flex; height: 24px; padding: 0 9px; align-items: center; border-radius: 12px; background: var(--hover); font-size: 12px; font-weight: 500; color: var(--text-2); }
.dv-mode h3 { margin-top: 14px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.dv-mode p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.dv-never { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.dv-never h3 { font-size: 17px; font-weight: 600; }
.dv-never p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

.dv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: dvstep; }
.dv-steps li { padding-top: 20px; border-top: 1px solid var(--line-strong); counter-increment: dvstep; }
.dv-steps li::before { content: counter(dvstep); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dv-steps li.is-key { border-top-color: var(--measured); }
.dv-steps li.is-key::before { border-color: var(--measured); color: var(--measured); background: var(--measured-soft); }
.dv-steps h3 { margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dv-steps p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

.dv-why svg { color: var(--text-2); }
.dv-why h3 { margin-top: 14px; font-size: 17px; font-weight: 600; }
.dv-why p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

.dv-pr { overflow: hidden; }
.dv-pr-head { padding: 18px 20px 16px; border-bottom: 1px solid var(--line); }
.dv-pr-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.dv-pr-state { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--measured-soft); color: var(--measured); font-weight: 500; }
.dv-pr-title { margin-top: 10px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.dv-pr-branch { margin-top: 6px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.dv-pr-body { padding: 16px 20px 18px; font-size: 13.5px; color: var(--text-2); }
.dv-pr-body .w-diff { margin-top: 10px; }
.dv-pr-checks { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.dv-pr-checks span { display: flex; align-items: center; gap: 8px; }
.dv-pr-checks svg { color: var(--measured); flex: none; }
.dv-pr-checks .is-wait svg { color: var(--text-3); }

/* licensing */
.dv-sum h2 { font-size: 16.5px !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; }
.dv-sum > div > p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.dv-sum ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-2); }
.dv-sum li { display: flex; gap: 8px; }
.dv-sum li svg { flex: none; margin-top: 3px; color: var(--text); }
.dv-sum .is-hosted li svg { color: var(--text-3); }

@media (max-width: 1180px) {
  .dv-docs { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
  .dv-docs .w-toc { display: none; }
}
@media (max-width: 1080px) {
  .dv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 860px) {
  .dv-scope, .dv-never, .dv-reflinks { grid-template-columns: 1fr; }
  .dv-scope > div + div { border-left: 0; border-top: 1px solid #2b303a; }
  .dv-never { gap: 28px; }
  .dv-steps { grid-template-columns: 1fr; gap: 28px; }
  .dv-downloads li { grid-template-columns: 1fr; gap: 12px; }
  .dv-dl { justify-self: start; min-height: 44px; }
  .dv-reflinks a { min-height: 48px; }
  .dv-tab, .dv-copy { min-height: 44px; }
  .dv-codebar { height: 56px; }
  .dv-files button { height: 44px; border-radius: 22px; }
  .dv-docs { display: block; padding-top: 20px; padding-bottom: 64px; }
  .dv-side { display: none; }
  .dv-mobnav { display: block; margin-bottom: 28px; }
  .dv-mobnav label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-3); }
  .dv-mobnav select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); font: inherit; font-size: 15px; color: var(--text); }
  .dv-main h1 { font-size: 30px; }
  .dv-pager { grid-template-columns: 1fr; }
  .dv-pager .is-next { grid-column: 1; }
  .dv-table th, .dv-table td { padding: 12px 14px; }
}

.dv-pr .w-diff .del { background: #fdf1f0; color: #8f2d24; }
.dv-pr .w-diff .del i { color: var(--stop); }
.dv-links { display: flex; flex-direction: column; align-items: flex-start; }
.dv-links .w-textlink { margin-top: 16px; }
.dv-links .w-textlink:first-child { margin-top: 28px; }
.dv-main .w-prose :not(pre) > code { overflow-wrap: anywhere; }

/* ── The developer portal (developers.html), in the redesign's type and surfaces. Its own page styles still load
   from the head; these override the old look: no monospace capitals for labels, the site's eyebrow and headings,
   12px cards with the site's hover, neutral notes. ── */
.dv-portal .eyebrow, .dv-portal #nav .grp, .dv-portal .card .k, .dv-portal .note b, .dv-portal .fact, .dv-portal .doc-title,
.dv-portal .dl .lock, .dv-portal .lang-grp, .dv-portal .refs .rhead, .dv-portal .refrow .rk, .dv-portal .pill {
  font-family: inherit; text-transform: none; letter-spacing: 0;
}
.dv-portal .eyebrow, .dv-portal .doc-title { font-size: 13px; font-weight: 500; color: var(--accent-text); }
.dv-portal #nav .grp { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.dv-portal #nav a { border-radius: 8px; font-size: 14px; }
.dv-portal #nav a.on { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--text); font-weight: 500; }
.dv-portal #nav a .ic { font-family: 'Geist Mono', ui-monospace, monospace; }
.dv-portal h1 { font-size: 48px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.dv-portal .section h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.dv-portal .lead { font-size: 18px; line-height: 1.55; color: var(--text-2); }
.dv-portal .sub { color: var(--text-2); line-height: 1.6; }
.dv-portal .section + .section { margin-top: 24px; padding-top: 32px; }
.dv-portal .fact { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; font-size: 12.5px; color: var(--text-2); background: var(--surface); }
.dv-portal .card { border-radius: 12px; padding: 22px; transition: border-color .15s, background-color .15s; }
.dv-portal .card .k { font-size: 12.5px; font-weight: 500; color: var(--accent-text); }
.dv-portal .card h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.dv-portal .card p { color: var(--text-2); line-height: 1.55; }
.dv-portal a.card:hover { border-color: var(--accent-line, color-mix(in srgb, var(--accent) 40%, var(--line))); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.dv-portal .note { border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); color: var(--text-2); }
.dv-portal .note b { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--text); }
.dv-portal pre.code { border-radius: 12px; }
.dv-portal .refs { border-radius: 12px; }
.dv-portal .refs .rhead { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.dv-portal .refrow .rk { font-size: 12.5px; color: var(--text-3); }
.dv-portal .dl .lock { font-size: 12.5px; font-weight: 500; }
.dv-portal .qa { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.dv-portal .qa + .qa { margin-top: 10px; }
@media (max-width: 640px) { .dv-portal h1 { font-size: 34px; } .dv-portal .section h2 { font-size: 24px; } }
/* inside the site root the portal keeps its own rhythm and buttons */
.dv-portal h1 { margin: 6px 0 0; }
.dv-portal .lead { margin-top: 18px; max-width: 64ch; }
.dv-portal .facts { margin-top: 24px; }
.dv-portal .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dv-portal .section h2 { margin-top: 56px; margin-bottom: 12px; }
.dv-portal .section > h2:first-of-type, .dv-portal .section > .eyebrow + h2 { margin-top: 6px; }
.dv-portal .sub { margin: 8px 0 20px; max-width: 70ch; }
.dv-portal .grid { margin-top: 20px; }
.dv-portal .card h3 { margin: 6px 0; }
.dv-portal .note { margin: 20px 0; padding: 16px 18px; }
.dv-portal pre.code { margin: 16px 0; }
.dv-portal .plist { margin: 16px 0; display: flex; flex-direction: column; gap: 10px; color: var(--text-2); line-height: 1.6; }
.w-root .dv-portal .btn { height: 40px; padding: 0 16px; font-size: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.w-root .dv-portal .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.w-root .dv-portal .btn.primary:hover { background: var(--accent-hover); }
.w-root .dv-portal .btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }

/* ── /developers as two pages: the landing, or the docs (the portal's router sets the class on <html>) ── */
html.dvm-landing .dv-portal { display: none; }
html.dvm-docs .dv-land { display: none; }
.dv-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.dv-facts li { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 12.5px; color: var(--text-2); }
.dv-facts li.mono { font-family: inherit; }
.dv-code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--accent-text); }
.dv-surface h3.mono { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 15.5px; }
.dv-land .w-cell h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.dv-land .w-cell p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.dv-land .w-cell p code, .dv-land .dv-scope code, .dv-callout code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.9em; }
.dv-callout { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); font-size: 14.5px; line-height: 1.6; color: var(--text-2); max-width: 900px; }
.dv-callout b { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; }
.w-band .dv-callout { border-color: #2b303a; background: #151a21; color: #c3c8d2; }
.w-band .dv-callout b { color: #fff; }
.dv-band-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.dv-band-notes .dv-callout { max-width: none; }
.dv-scope li > span { min-width: 0; }
.dv-scope li b { color: #fff; font-weight: 500; }
.dv-video { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.dv-video video, .dv-video img { display: block; width: 100%; height: auto; }
.dv-video figcaption { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.dv-deep { display: block; margin-top: 24px; }
.dv-land .dv-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .dv-band-notes { grid-template-columns: 1fr; } }
.dv-land .w-page-head h1 { margin: 0; }
.dv-land .w-page-head .w-lede { margin-top: 20px; max-width: 62ch; }
.dv-land .w-head-actions { margin-top: 28px; }
.dv-land .w-eyebrow { color: var(--accent-text); }
.w-band .dv-scope code, .w-band .dv-callout code { padding: 1px 6px; border: 1px solid #2b303a; border-radius: 6px; background: #1d232c; color: #e6e8ec; }

/* /docs: previous and next guide */
.dv-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.dv-pager a { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 15px; font-weight: 500; color: var(--text); transition: border-color .15s, background-color .15s; }
.dv-pager a:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.dv-pager a > span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 400; color: var(--text-3); }
.dv-pager .is-next { grid-column: 2; text-align: right; align-items: flex-end; }
@media (max-width: 640px) { .dv-pager { grid-template-columns: 1fr; } .dv-pager .is-next { grid-column: 1; text-align: left; align-items: flex-start; } }
.dv-docs .dv-pre pre { overflow-x: auto; white-space: pre; }

/* ── src/live/live.css ── */
/* The pinned blocks (web/src/live.tsx), drawn in the redesign's world. Their markup and class names are the live
   pages' own, because the tests read them; only the look is new. */

/* ── the FAQ accordion, fed from each page's FAQPage answers ── */
.w-faq .w-faq-live summary { position: relative; padding-right: 32px; }
.w-faq .w-faq-live summary :is(h2, h3) { margin: 0; font: inherit; letter-spacing: inherit; }
.w-faq .w-faq-live summary::after { content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; color: var(--text-3); transition: transform 200ms var(--ease); }
.w-faq .w-faq-live[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.w-faq .w-faq-live > div > p { padding: 0 32px 22px 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 64ch; }

/* ── the home page's plans, workload table, licence and enterprise rows ── */
.w-live .tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.w-live .tier { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.w-live .tier.feat { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.w-live .tier .best { position: absolute; top: -11px; left: 24px; height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 11px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 500; }
.w-live .tier .best.soft { background: var(--accent-soft); color: var(--accent-text); }
.w-live .tier .nm { font-size: 16px; font-weight: 600; }
.w-live .tier .amt { margin-top: 14px; font-size: 38px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.w-live .tier .amt small { margin-left: 4px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.w-live .tier ul { list-style: none; flex: 1 0 auto; display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.w-live .tier li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.w-live .tier li::before { content: ''; position: absolute; left: 2px; top: 0.4em; width: 10px; height: 6px; border-left: 1.6px solid var(--measured); border-bottom: 1.6px solid var(--measured); transform: rotate(-45deg); }
.w-live .tier li b { font-weight: 600; color: var(--text); }
.w-live .btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-1); cursor: pointer; }
.w-live .btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.w-live .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(30, 91, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.w-live .btn.primary:hover { background: var(--accent-hover); }
.w-live .tier .btn { width: 100%; margin-top: 22px; }
@supports (grid-template-rows: subgrid) {
  .w-live .tier-grid { grid-template-rows: repeat(5, auto); }
  .w-live .tier { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .w-live .tier .btn { align-self: end; }
}
.w-live .wl-wrap { margin-top: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.w-live .wl-k { font-size: 16px; font-weight: 600; }
.w-live .wl-lead { margin: 6px 0 16px; max-width: 72ch; font-size: 14.5px; color: var(--text-2); }
.w-live .wl-scroll { overflow-x: auto; }
.w-live table.wl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.w-live table.wl th { padding: 10px 12px; text-align: right; font-size: 13px; font-weight: 500; color: var(--text-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.w-live table.wl th:first-child, .w-live table.wl td:first-child { text-align: left; }
.w-live table.wl td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-live table.wl td:first-child { color: var(--text); font-variant-numeric: normal; }
.w-live table.wl tbody tr:last-child td { border-bottom: 0; }
.w-live table.wl tr.wl-free td { color: var(--measured); }
.w-live .license-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.w-live .license { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.w-live .license .lk { font-size: 13px; font-weight: 500; color: var(--accent-text); }
.w-live .license .lt { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.w-live .license p { font-size: 14.5px; color: var(--text-2); }
.w-live .license .btn { margin-top: auto; }
.w-live .license p + .btn { margin-top: 12px; }
.w-live .price-note { margin-top: 16px; max-width: 90ch; font-size: 13.5px; color: var(--text-3); }

/* ── the home page's live counters and the test-count line ── */
.w-live-proof { margin-top: 24px; }
.w-live .proof-note { font-size: 14.5px; color: var(--text-2); max-width: 80ch; }
.w-live .proof-note b { font-weight: 600; color: var(--text); }
.w-live #liveMetrics:not([hidden]) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 36px; margin-top: 20px; }
.w-live .lm-n { font-size: 28px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.w-live .lm-l { font-size: 13px; color: var(--text-3); }

/* ── the integrations claims table ── */
.au-int-table table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.au-int-table th, .au-int-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.au-int-table thead th { background: var(--canvas); font-weight: 600; }
.au-int-table td { color: var(--text-2); }
.au-int-table td:first-child { color: var(--text); font-weight: 500; }
.au-int-table tbody tr:last-child td { border-bottom: 0; }
.au-int-table .st, .au-int-table [data-i18n^="site.int.st."] { display: inline-flex; height: 22px; padding: 0 8px; align-items: center; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--hover); color: var(--text-2); }
.au-int-table tr[data-status='live'] [data-i18n^="site.int.st."] { background: var(--measured-soft); color: var(--measured); }

/* ── the enterprise quote form (enterprise.js drives it) ── */
.w-live form.ent { display: grid; gap: 14px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.w-live form.ent h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.w-live form.ent label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.w-live form.ent input, .w-live form.ent textarea { width: 100%; padding: 10px 12px; font: inherit; font-weight: 400; font-size: 15px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.w-live form.ent input:focus, .w-live form.ent textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.w-live form.ent .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.w-live form.ent .consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 400; color: var(--text-2); }
.w-live form.ent .consent input { width: auto; margin-top: 4px; }
.w-live form.ent .consent a { text-decoration: underline; }
.w-live form.ent [aria-invalid='true'] { border-color: var(--stop); }
.w-live form.ent .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.w-live form.ent .btn { justify-self: start; }
.w-live .ent-msg { padding: 12px 14px; border-radius: var(--r); font-size: 14px; }
.w-live .ent-msg.ok { background: var(--measured-soft); }
.w-live .ent-msg.bad { background: var(--stop-soft); }
.w-live .kicker { font-size: 13px; color: var(--text-3); }

@media (max-width: 1080px) { .w-live .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .w-live .license-row, .w-live form.ent .row2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .w-live .tier-grid { grid-template-columns: 1fr; } }

/* ── dark by system setting (generated from the html[data-theme=dark] rules above) ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .w-band { background: #06070a; }
  html:not([data-theme='light']) .w-frag, html:not([data-theme='light']) .w-fix-card { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.7); }
  html:not([data-theme='light']) ::selection { background: rgba(47, 107, 255, 0.35); color: var(--text); }
  html:not([data-theme='light'])[data-contrast='more'] { --text-3: #c5cad3; --line: #4b525e; --line-strong: #6b7280; --accent-text: #a9c0ff; }
  html:not([data-theme='light']) .w-shot-l { display: none; }
  html:not([data-theme='light']) .w-shot-d { display: block; }
  html:not([data-theme='light']) .w-window { box-shadow: 0 0 0 1px var(--line-strong), 0 40px 90px -30px rgba(0, 0, 0, 0.85); }
  html:not([data-theme='light']) .w-dev-dark { background: radial-gradient(50% 70% at 85% 0%, rgba(47, 107, 255, 0.14), transparent 70%), #05060a; }
  html:not([data-theme='light']) .w-root .w-disp-pop { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-pop); }
  html:not([data-theme='light']) .rs-proof details.trace pre .del { color: #f3a49b; }
  html:not([data-theme='light']) .rs-proof details.trace pre .add { background: rgba(32, 160, 140, 0.14); color: #7fd6c5; }
}