/* Brickline design tokens: shared by the marketing site and the dashboard. Change here, copy to both (see DESIGN.md). */
@font-face { font-family: "Inter"; src: url("/fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* color: neutrals do the work; brick is a small accent */
  --bg: #FBFBFD;            /* page */
  --bg-2: #F5F5F7;          /* alternate band / inset wells */
  --surface: #FFFFFF;       /* cards, panels */
  --ink: #1D1D1F;           /* text, primary button (16.6:1 on --bg) */
  --ink-2: #6E6E73;         /* secondary text (4.9:1 on #fff, 4.6:1 on --bg-2) */
  --ink-3: #A1A1A6;         /* decoration only, never text */
  --hairline: rgb(0 0 0 / .08);
  --hairline-2: rgb(0 0 0 / .14);
  --fill: rgb(0 0 0 / .035);
  --fill-2: rgb(0 0 0 / .06);
  --fill-3: rgb(0 0 0 / .1);
  --brick: #A23F24;         /* accent: links, the needs-you dot, one moment per page (5.9:1 on #fff) */
  --brick-hover: #85321B;
  --brick-tint: rgb(162 63 36 / .08);
  --green: #1D7A3A;         /* sent / done (5.4:1 on #fff) */
  --on-ink: #F5F5F7;

  /* type: one family. System SF on Apple devices, Inter (OFL, optical sizes) elsewhere */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --t-12: 12px; --t-13: 13px; --t-15: 15px; --t-17: 17px; --t-21: 21px; --t-28: 28px;
  --t-40: clamp(32px, 3.4vw, 48px);
  --t-hero: clamp(44px, 5.6vw, 80px);
  --track-hero: -0.035em; --track-h: -0.025em; --track-ui: -0.008em;

  /* space: 4pt grid */
  --s-half: 2px; --s-1: 4px; --s-1h: 6px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* radii: continuous-looking, one per role */
  --r-control: 10px; --r-card: 16px; --r-panel: 20px; --r-small: 8px; --r-pill: 999px;

  /* depth */
  --shadow-1: 0 0 0 1px var(--hairline), 0 1px 2px rgb(0 0 0 / .04);
  --shadow-2: 0 0 0 1px var(--hairline), 0 2px 4px rgb(0 0 0 / .03), 0 12px 28px -10px rgb(0 0 0 / .12);
  --shadow-3: 0 0 0 1px rgb(0 0 0 / .06), 0 1px 1px rgb(0 0 0 / .02), 0 10px 20px -6px rgb(0 0 0 / .06), 0 50px 100px -30px rgb(0 0 0 / .22);

  /* material */
  --glass: rgb(251 251 253 / .72);
  --glass-strong: rgb(255 255 255 / .82);
  --glass-filter: saturate(180%) blur(20px);

  /* motion */
  --ease: cubic-bezier(.28, .11, .32, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 150ms; --t: 220ms; --t-slow: 320ms;
  --reveal: 640ms;
  /* rhythm + rules: the only spacing values allowed are --s-* above */
  --section-y: var(--s-24); --gap-min: var(--s-2); --row-gap: var(--s-1); --tap: 44px; --divider: 1px solid var(--hairline-2); --r-bubble: 18px;
  --reveal-blur: 12px;
  --word: 260ms; --word-gap: 30ms;   /* ~33 words a second, blur clears per word */
  color-scheme: light;
}
@media (max-width: 640px) { :root { --section-y: var(--s-16); } }

/* Brickline components: ONE set for site and dashboard. Requires tokens.css. */
.font-ui { font-family: var(--font); font-feature-settings: "cv11", "ss01"; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; letter-spacing: var(--track-ui); }
.num { font-variant-numeric: tabular-nums; }
.meta { font-size: var(--t-13); color: var(--ink-2); }
.label { font-size: var(--t-13); font-weight: 600; color: var(--ink); }

/* materials */
.frost { background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
.frost-strong { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--shadow-2); }
.slab, .card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-1); }

/* button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1h); height: 36px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill);
  font: 500 var(--t-15)/1 var(--font); letter-spacing: var(--track-ui); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn:active:not([disabled]) { transform: scale(.98); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover:not([disabled]) { background: #000; }
.btn-quiet { background: var(--fill-2); color: var(--ink); }
.btn-quiet:hover:not([disabled]) { background: var(--fill-3); }
.btn-ghost { background: transparent; color: var(--brick); padding: 0 var(--s-3); }
.btn-ghost:hover:not([disabled]) { background: var(--brick-tint); }
.btn-sm { height: 30px; padding: 0 var(--s-3); font-size: var(--t-13); }
.btn-lg { height: 44px; padding: 0 var(--s-6); font-size: var(--t-17); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.link { color: var(--brick); text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* answer chip (select only) */
.qchips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.qchip { height: 32px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); cursor: pointer;
  font: 500 var(--t-13)/1 var(--font); letter-spacing: var(--track-ui); box-shadow: inset 0 0 0 1px var(--hairline-2);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
@media (hover: hover) { .qchip:hover:not([disabled]):not([aria-pressed="true"]) { background: var(--bg-2); } }
.qchip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.qchip[disabled] { cursor: default; opacity: .5; } .qchip[disabled][aria-pressed="true"] { opacity: 1; }

/* segmented control */
.seg { display: flex; gap: var(--s-half); padding: var(--s-half); border-radius: var(--r-control); background: var(--fill-2); }
.seg button { flex: 1; height: 28px; border: 0; border-radius: var(--r-small); background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap;
  font: 500 var(--t-13)/1 var(--font); letter-spacing: var(--track-ui); transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 0 0 .5px rgb(0 0 0 / .04), 0 3px 8px rgb(0 0 0 / .12), 0 3px 1px rgb(0 0 0 / .04); }

/* status pill: dot + word (never color alone) */
.sbadge { display: inline-flex; align-items: center; gap: var(--s-1h); height: 22px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--fill); color: var(--ink);
  font: 500 var(--t-12)/1 var(--font); white-space: nowrap; flex: none; }
.sbadge > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.sbadge[data-s="needs_you"] { background: var(--brick-tint); color: var(--brick-hover); } .sbadge[data-s="needs_you"] > i { background: var(--brick); }
.sbadge[data-s="held"] > i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.sbadge[data-s="done"] { color: var(--green); background: rgb(29 122 58 / .08); } .sbadge[data-s="done"] > i { background: var(--green); }

/* list row */
.leadrow { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); align-items: baseline; padding: var(--s-3); border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: background-color var(--t-fast) var(--ease); }
@media (hover: hover) { .leadrow:hover { background: var(--fill); } }
.leadrow[aria-current="true"] { background: var(--fill-2); }
.lr-name { font-weight: 600; font-size: var(--t-15); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-when { display: inline-flex; align-items: center; gap: var(--s-1h); white-space: nowrap; font-size: var(--t-12); color: var(--ink-2); }
.lr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brick); flex: none; }
.lr-line { grid-column: 1 / -1; display: flex; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--t-13); color: var(--ink-2); }
.lr-snip { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lr-tag { flex: none; } .lr-tag > [aria-hidden] { white-space: pre; }
.lgroup-h { margin: 0; padding: var(--s-3) var(--s-3) var(--s-2); font: 600 var(--t-12)/1.2 var(--font); color: var(--ink-2); letter-spacing: 0; }

/* thread message */
.turn { padding: var(--s-4) 0; }
.turn + .turn { border-top: var(--divider); }
.who { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-1); font-size: var(--t-13); font-weight: 600; }
.who small { font-weight: 400; color: var(--ink-2); font-size: var(--t-12); }
.said { margin: 0; font-size: var(--t-15); line-height: 1.5; white-space: pre-line; }
.bubble { display: inline-block; max-width: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--r-bubble); background: var(--bg-2); font-size: var(--t-15); line-height: 1.45; }

/* held draft card (in the thread) */
.act { border-radius: var(--r-card); padding: var(--s-4); background: var(--surface); box-shadow: var(--shadow-2); }
.act-kind { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-12); font-weight: 500; color: var(--ink-2); }
.reason { margin: var(--s-2) 0; font-size: var(--t-13); color: var(--ink-2); }
.draft { display: block; width: 100%; min-height: 120px; padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-control); background: var(--bg-2); color: var(--ink);
  font: 400 var(--t-15)/1.55 var(--font); letter-spacing: var(--track-ui); resize: vertical; white-space: pre-line;
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.draft:focus-visible { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-2), 0 0 0 4px var(--fill-2); }
/* chip rows: equal room above and below so chips never touch the divider between questions */
.qa-item { padding: var(--s-4) 0; }
.qa-item + .qa-item { border-top: var(--divider); }
.qa-q { margin: 0 0 var(--s-2); font-size: var(--t-13); font-weight: 600; }

/* input */
.field { height: 40px; min-width: 0; padding: 0 var(--s-3); border: 0; border-radius: var(--r-control); background: var(--surface); color: var(--ink);
  font: 400 var(--t-15)/1 var(--font); box-shadow: inset 0 0 0 1px var(--hairline-2); transition: box-shadow var(--t-fast) var(--ease); }
.field:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--ink-2), 0 0 0 4px var(--fill-2); }
.field::placeholder { color: var(--ink-2); opacity: 1; }

/* toast */
.toast { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-radius: var(--r-card); background: rgb(29 29 31 / .86); color: var(--on-ink);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: 0 12px 32px -8px rgb(0 0 0 / .3); font-size: var(--t-15); }
.toast .btn { background: rgb(255 255 255 / .14); color: var(--on-ink); height: 30px; font-size: var(--t-13); }

/* nav bar */
.navbar { position: sticky; top: 0; z-index: 50; height: 52px; display: flex; align-items: center; gap: var(--s-4); background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: 0 1px 0 var(--hairline-2); }
.wordmark { display: inline-flex; align-items: center; gap: var(--s-1h); font: 600 var(--t-17)/1 var(--font); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.wordmark svg { flex: none; }
.wm-desc { font-weight: 500; color: var(--ink-2); }

/* focus */
:where(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.qchip:focus-visible, .btn:focus-visible { border-radius: var(--r-pill); }

/* blur-to-sharp: streaming words and arriving messages */
.w { display: inline; animation: word-in var(--word) var(--ease-out) both; }
.arrive { animation: arrive var(--t-slow) var(--ease-out) both; }
@keyframes word-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes arrive { from { opacity: 0; filter: blur(10px); transform: translateY(6px); } to { opacity: 1; filter: blur(0); transform: none; } }
@media (prefers-reduced-motion: reduce) { .w, .arrive { animation: none; } }

/* status variants used by the site demo and roadmap */
.sbadge[data-s="auto"] > i { background: var(--green); }
.sbadge[data-s="later"] > i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* thread: lead left, assistant right (shared by the dashboard focused view and the site demo) */
.turns { display: grid; gap: var(--s-4); }
.turns > .turn { padding: 0; display: grid; justify-items: start; max-width: 78%; border-top: 0; }
.turn[data-who="sage"], .turn[data-who="alex"] { justify-self: end; justify-items: end; }
.turn .who { padding: 0 var(--s-1); }
.turn[data-who="lead"] .bubble { background: var(--bg-2); }
.turn[data-who="sage"] .bubble { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.turn[data-who="alex"] .bubble { background: var(--ink); color: var(--on-ink); }
.act-kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brick); }
.sigline { font-size: var(--t-12); color: var(--ink-2); margin-top: var(--s-2); }
@media (max-width: 640px) { .turns > .turn { max-width: 92%; } }

/* lead list ("conversation tabs"): one consistent gap between rows, everywhere */
.leadrows { display: grid; gap: var(--row-gap); margin: 0; padding: 0; list-style: none; }
/* compact summary shown in a list instead of inline controls when an item needs the focused view */
.summary-chip { display: inline-flex; align-items: center; gap: var(--s-1h); height: 30px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--fill); color: var(--ink); font: 500 var(--t-13)/1 var(--font); text-decoration: none; border: 0; cursor: pointer; }
.summary-chip::after { content: "›"; color: var(--ink-2); }
@media (hover: hover) { .summary-chip:hover { background: var(--fill-2); } }
/* mobile tap targets: every control is at least --tap tall */
@media (max-width: 640px) { .btn, .qchip, .summary-chip, .field { height: var(--tap); } .seg button { height: var(--tap); } .btn { min-width: var(--tap); } }

/* Headline rag: no single-word last lines */
h1, h2, h3, h4 { text-wrap: balance; }

/* Brickline AI marketing site. Layout only: tokens + components come from /workspace/brickline-design (bundled by build.py). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 68px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: var(--t-17); line-height: 1.47; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: var(--s-3) var(--s-4); border-radius: var(--r-control); background: var(--ink); color: var(--on-ink); text-decoration: none; font-size: var(--t-15); }
.skip-link:focus { top: 12px; }

/* one content grid: nav, sections, demo panel and footer share the same edges */
.wrap, .wrap--wide { width: min(100% - 48px, 1080px); margin-inline: auto; }
@media (max-width: 640px) { .wrap, .wrap--wide { width: calc(100% - 40px); } }

/* type scale: hero / page / section / card / body / meta */
.h-hero { font-size: var(--t-hero); line-height: 1.04; letter-spacing: var(--track-hero); font-weight: 700; text-wrap: balance; }
.h-page { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.07; letter-spacing: var(--track-hero); font-weight: 700; text-wrap: balance; }
.h-section { font-size: var(--t-40); line-height: 1.1; letter-spacing: var(--track-h); font-weight: 700; text-wrap: balance; }
.h-card { font-size: var(--t-17); line-height: 1.3; letter-spacing: -0.012em; font-weight: 600; }
.lede { font-size: var(--t-21); line-height: 1.38; color: var(--ink-2); letter-spacing: -0.012em; text-wrap: pretty; }
@media (max-width: 640px) { .lede { font-size: var(--t-17); } }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3) var(--s-6); }
.more { font-size: var(--t-17); }
.more::after { content: " ›"; }

/* nav */
.site-nav { padding: 0; }
.navbar__inner { display: flex; align-items: center; gap: var(--s-6); height: 52px; }
.navbar__inner .wordmark { margin-right: auto; }
.nav ul { display: flex; gap: var(--s-1); }
.nav a { display: flex; align-items: center; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: var(--t-13); color: var(--ink); text-decoration: none; opacity: .8; transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.nav a:hover { opacity: 1; background: var(--fill); }
.nav a[aria-current="page"] { opacity: 1; font-weight: 600; }
.menu-toggle { display: none; width: var(--tap); height: var(--tap); margin-right: calc(var(--s-3) * -1); padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); cursor: pointer; }
.menu-toggle__bars { display: grid; gap: var(--s-1h); width: 18px; margin: auto; }
.menu-toggle__bars span { display: block; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--t) var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 860px) {
  .menu-toggle { display: block; }
  .nav__cta { display: none; }
  .nav { position: fixed; inset: 52px 0 auto 0; /* = navbar height */ background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
    box-shadow: 0 1px 0 var(--hairline), 0 24px 40px -24px rgb(0 0 0 / .2); visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t); }
  .nav[data-open="true"] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav ul { flex-direction: column; gap: 0; padding: var(--s-2) var(--s-4) var(--s-5); }
  .nav ul { padding: var(--s-2) var(--s-5) var(--s-5); }
  .nav a { height: auto; min-height: 52px; padding: 0; font-size: var(--t-17); border-radius: 0; box-shadow: 0 1px 0 var(--hairline-2); opacity: 1; }
  .nav a:hover { background: none; }
}

/* sections */
main { display: block; }
.section { padding: var(--section-y) 0; }
.section--alt { background: var(--bg-2); }
.section__head { max-width: 680px; margin: 0 auto var(--s-12); text-align: center; display: grid; gap: var(--s-3); justify-items: center; }
.section__head--left { margin-left: 0; text-align: left; justify-items: start; }
@media (max-width: 640px) { .section__head { margin-bottom: var(--s-8); } }

/* home hero: centered, one headline, one subline */
.hero { padding: var(--s-16) 0 var(--s-8); text-align: center; }
.hero__inner { display: grid; justify-items: center; gap: var(--s-4); }
.hero__kicker { font-size: var(--t-15); font-weight: 600; color: var(--brick); letter-spacing: -0.008em; }
.hero__sub { max-width: 640px; font-size: var(--t-21); line-height: 1.38; color: var(--ink-2); text-wrap: balance; }
.hero .actions { margin-top: var(--s-2); }
@media (max-width: 640px) { .hero { padding-top: var(--s-10); } .hero__sub { font-size: var(--t-17); } .hero__kicker { font-size: var(--t-13); } }

/* product panel = the dashboard's focused property view */
.product { padding: var(--s-16) 0 var(--section-y); scroll-margin-top: 52px; }
.product__head { text-align: center; display: grid; gap: var(--s-2); justify-items: center; margin-bottom: var(--s-8); }
.product__head .lede { font-size: var(--t-17); }
.pd { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: clamp(540px, calc(100svh - 196px), 640px); background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--shadow-3); overflow: hidden; }
.pd__side { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-3); background: var(--bg-2); box-shadow: inset -1px 0 0 var(--hairline); overflow: auto; }
.pd-prop { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-4); margin-bottom: var(--s-1h); box-shadow: 0 1px 0 var(--hairline); }
.pd-prop__ph { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-control); color: var(--ink-2);
  background: linear-gradient(145deg, #ECECEF, #E2E2E6); box-shadow: inset 0 0 0 1px var(--hairline); }
.pd-prop__title { font-weight: 600; font-size: var(--t-15); line-height: 1.3; }
.pd-list { display: grid; gap: var(--row-gap); }
.pd-list .leadrow { gap: var(--s-1) var(--s-3); }
.pd-list .lr-line { gap: var(--s-2); align-items: center; }
.pd-list .leadrow[aria-current="true"] { background: var(--surface); box-shadow: var(--shadow-1); }
.pd__main { min-width: 0; min-height: 0; display: grid; }
.pd-view { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.pd-view[hidden] { display: none; }
.pd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-6); box-shadow: 0 1px 0 var(--hairline); }
.pd-head__end { display: flex; align-items: center; gap: var(--s-2); }
.pd-scroll { overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5) var(--s-6) var(--s-6); scrollbar-width: thin; }
.pd-scroll .turns { align-content: start; }
.pd .bubble { white-space: normal; }
.bubble__sign { display: block; margin-top: var(--s-2); font-size: var(--t-13); color: var(--ink-2); }
.pd .act { justify-self: stretch; margin-top: var(--s-1); }
.pd .draft { min-height: 0; }
.draft p + p { margin-top: var(--s-3); }
.draft .sigline { margin-top: var(--s-3); }
.qa { display: grid; }
.act-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-top: var(--s-4); border-top: var(--divider); }
.act-state { margin-left: var(--s-1); }
.act-state[data-tone="dirty"] { color: var(--brick); }
.act-state[data-tone="sent"] { color: var(--green); font-weight: 500; }
.act[data-sent] .qa, .act[data-sent] [data-rewrite], .act[data-sent] [data-send] { display: none; }
.act[data-sent] .act-kind::before { background: var(--green); }
.act[data-sent] .act-actions { border-top: 0; margin-top: var(--s-2); padding-top: 0; }
.pd-note { justify-self: center; max-width: 440px; text-align: center; font-size: var(--t-13); color: var(--ink-2); }
[data-step][data-pending] { display: none; }
.draft [data-text][data-streaming]::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: var(--s-half); vertical-align: -2px; background: var(--ink-3); }
@media (max-width: 860px) {
  .pd { grid-template-columns: 1fr; height: auto; }
  .pd__side { box-shadow: inset 0 -1px 0 var(--hairline); }
  .pd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-scroll { max-height: 640px; }
}
@media (max-width: 640px) {
  .product { padding-top: var(--s-8); }
  .pd-head, .pd-scroll { padding-left: var(--s-4); padding-right: var(--s-4); }
  .pd-head .meta { font-size: var(--t-12); }
  .pd-list { grid-template-columns: 1fr; }
  .pd-list .leadrow { padding: var(--s-2) var(--s-3); }
  .pd-scroll { max-height: none; overflow: visible; }
  .act { padding: var(--s-4); }
}

/* problem band: two large figures, no boxes */
.band { padding: var(--section-y) 0; background: var(--bg-2); text-align: center; }
.band__inner { display: grid; justify-items: center; gap: var(--s-3); }
.band .h-section { max-width: 760px; }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); width: 100%; max-width: 860px; margin-top: var(--s-10); text-align: left; }
.figure { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-5); border-top: var(--divider); }
.figure__n { font-size: clamp(48px, 6vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; }
.figure__t { font-size: var(--t-17); color: var(--ink); }
@media (max-width: 640px) { .figures { grid-template-columns: 1fr; gap: var(--s-8); margin-top: var(--s-6); } }

/* features: title + text, no tags or bullets */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10) var(--s-16); }
.features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features li { display: grid; gap: var(--s-1h); align-content: start; }
.features h3 { font-size: var(--t-21); line-height: 1.25; letter-spacing: -0.016em; font-weight: 600; }
.features p { color: var(--ink-2); }
.features .meta { order: -1; }
.features--cards { gap: var(--s-5); }
.features--cards li.card { padding: var(--s-8); }
@media (max-width: 860px) { .features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .features, .features--3 { grid-template-columns: 1fr; gap: var(--s-8); } .features h3 { font-size: var(--t-17); } .features--cards li.card { padding: var(--s-6); } }

/* numbered steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); counter-reset: s; }
.steps li { display: grid; gap: var(--s-1h); align-content: start; }
.steps__n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); font-size: var(--t-15); font-weight: 600; }
.steps h3 { font-size: var(--t-17); font-weight: 600; letter-spacing: -0.012em; }
.steps p { color: var(--ink-2); font-size: var(--t-15); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; gap: var(--s-6); } }

/* closing CTA: light, centered */
.closing { padding: var(--section-y) 0; text-align: center; }
.closing__inner { display: grid; justify-items: center; gap: var(--s-3); }
.closing .lede { max-width: 560px; }
.closing .actions { margin-top: var(--s-2); }
.qa-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); width: 100%; max-width: 760px; margin-top: var(--s-10); padding-top: var(--s-8); border-top: var(--divider); text-align: left; }
.qa-pairs dt { font-weight: 600; font-size: var(--t-15); }
.qa-pairs dd { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--t-15); }
.section--alt + .closing, .band + .closing { background: var(--bg); }
@media (max-width: 640px) { .qa-pairs { grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-8); } }

/* inner page hero */
.page-hero { padding: var(--s-16) 0 var(--section-y); text-align: center; }
.page-hero__inner { display: grid; justify-items: center; gap: var(--s-4); }
.page-hero .lede { max-width: 640px; }
.page-hero .actions { margin-top: var(--s-2); }
@media (max-width: 640px) { .page-hero { padding-top: var(--s-10); } }

.nameplate { width: min(100%, 560px); margin-top: var(--s-8); padding: var(--s-8); text-align: left; box-shadow: var(--shadow-2); }
.nameplate__plate { font-size: var(--t-28); font-weight: 700; letter-spacing: var(--track-h); line-height: 1.15; overflow-wrap: anywhere; }
.nameplate__from { color: var(--ink-2); font-weight: 500; }
.nameplate__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-5); }
.nameplate__fields label { display: grid; gap: var(--s-1h); }
.nameplate .field { width: 100%; }
@media (max-width: 480px) { .nameplate { padding: var(--s-5); } .nameplate__fields { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); width: min(100%, 720px); margin-top: var(--s-8); text-align: left; }
.split__col { padding: var(--s-6); display: grid; gap: var(--s-4); align-content: start; }
.plain { display: grid; gap: 0; }
.plain li { padding: var(--s-3) 0; font-size: var(--t-15); box-shadow: 0 -1px 0 var(--hairline-2); }
.plain li:first-child { box-shadow: none; }
.plain--2 { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); }
.plain--2 li:nth-child(2) { box-shadow: none; }
@media (max-width: 640px) { .split { grid-template-columns: 1fr; } .plain--2 { grid-template-columns: 1fr; } .plain--2 li:nth-child(2) { box-shadow: 0 -1px 0 var(--hairline-2); } }
.included { width: min(100%, 640px); margin-top: var(--s-10); padding: var(--s-6) var(--s-8); text-align: left; display: grid; gap: var(--s-3); }

.faq { max-width: 760px; }
.faq__list details { border-top: var(--divider); }
.faq__list details:last-child { border-bottom: var(--divider); }
.faq__list summary { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; font-size: var(--t-17); font-weight: 600; cursor: pointer; list-style: none; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; font-weight: 400; color: var(--ink-2); font-size: var(--t-21); line-height: 1; transition: transform var(--t) var(--ease); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p { padding: 0 0 var(--s-5); color: var(--ink-2); max-width: 640px; }

/* roadmap */
.overview { width: min(100%, 720px); margin-top: var(--s-8); }
.overview ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.overview__item { display: grid; justify-items: start; gap: var(--s-1h); padding: var(--s-5); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.overview__item:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.overview__n { font-size: var(--t-40); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: var(--s-2); }
@media (max-width: 640px) { .overview ul { grid-template-columns: 1fr; } .overview__item { grid-template-columns: 1fr auto; align-items: center; } .overview__n { font-size: var(--t-28); margin: 0; grid-row: span 2; grid-column: 2; } }
.rm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-16); }
.rm-list li { display: grid; gap: var(--s-1); padding: var(--s-5) 0; border-top: var(--divider); }
.rm-list h3 { font-size: var(--t-17); font-weight: 600; letter-spacing: -0.012em; }
.rm-list p { color: var(--ink-2); font-size: var(--t-15); }
.rm-aside { margin-top: var(--s-6); }
@media (max-width: 640px) { .rm-list { grid-template-columns: 1fr; } }

/* contact: one centered column (heading, form card, next steps) on every width */
.contact__grid { display: grid; justify-items: center; gap: var(--s-8); }
.contact__copy { display: grid; justify-items: center; gap: var(--s-4); text-align: center; }
.contact__copy .lede { max-width: 640px; }
.form { width: min(100%, 560px); padding: var(--s-8); text-align: left; box-shadow: var(--shadow-2); }
.form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
.ffield { display: grid; gap: var(--s-2); align-content: start; }
.ffield .field { width: 100%; }
.ffield__opt { font-weight: 400; color: var(--ink-2); }
.ffield__error, .form__error { font-size: var(--t-13); color: var(--brick); }
.field[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--brick); }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-6); }
.form__reassure, .form__fine { font-size: var(--t-13); color: var(--ink-2); }
.form__fine { margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--divider); }
.form__error { margin-top: var(--s-3); }
/* success replaces the form's contents; it takes no space until shown (hidden attribute + [hidden] rule) */
.form__success { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-4) 0; text-align: center; }
.form__success p { max-width: 40ch; color: var(--ink-2); }
.form__success svg circle { fill: none; stroke: var(--green); stroke-width: 2.5; }
.form__success svg path { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.form[data-done] > :not([data-success]) { display: none !important; }
.contact__more { width: min(100%, 560px); text-align: left; display: grid; gap: var(--s-5); }
.next-list { display: grid; gap: var(--s-3); }
.next-list li { display: flex; gap: var(--s-3); align-items: center; font-size: var(--t-15); color: var(--ink-2); }
.next-list strong { color: var(--ink); font-weight: 600; }
.next-list__n { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); font-size: var(--t-13); font-weight: 600; line-height: 1; }
@media (max-width: 640px) { .form { padding: var(--s-5); } .form__fields { grid-template-columns: 1fr; } .form__submit .btn { width: 100%; } .form__reassure { width: 100%; text-align: center; } }

/* legal */
.page-hero--legal { padding-bottom: var(--s-12); }
.legal-draft { max-width: 640px; padding: var(--s-3) var(--s-4); border-radius: var(--r-control); background: var(--brick-tint); color: var(--ink); font-size: var(--t-15); text-align: left; }
.legal-meta { font-size: var(--t-13); color: var(--ink-2); }
.legal { padding: 0 0 var(--section-y); }
.legal__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-16); align-items: start; }
.legal__toc { position: sticky; top: 76px; }
.legal__toc ol { display: grid; gap: var(--s-half); counter-reset: toc; }
.legal__toc a { display: block; padding: var(--s-1h) var(--s-3); border-radius: var(--r-small); font-size: var(--t-13); color: var(--ink-2); text-decoration: none; }
.legal__toc a:hover { background: var(--fill); color: var(--ink); }
.legal__body { max-width: 65ch; }
.legal__body h2 { font-size: var(--t-21); letter-spacing: -0.016em; font-weight: 600; margin: var(--s-10) 0 var(--s-3); scroll-margin-top: 72px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-size: var(--t-17); font-weight: 600; margin: var(--s-6) 0 var(--s-1h); }
.legal__body p, .legal__body li { font-size: var(--t-15); line-height: 1.6; color: #3A3A3C; }
.legal__body p + p { margin-top: var(--s-3); }
.legal__body ul { list-style: disc; padding-left: var(--s-5); display: grid; gap: var(--s-1h); margin: var(--s-3) 0; }
.legal__body a { color: var(--brick); }
@media (max-width: 860px) { .legal__grid { grid-template-columns: 1fr; gap: var(--s-6); } .legal__toc { position: static; } .legal__toc ol { grid-template-columns: 1fr 1fr; } }

/* footer */
.footer { padding: var(--s-12) 0; background: var(--bg-2); box-shadow: inset 0 1px 0 var(--hairline); font-size: var(--t-12); color: var(--ink-2); }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-6); border-bottom: var(--divider); }
.footer .wordmark { font-size: var(--t-15); }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.footer__nav a { color: var(--ink); text-decoration: none; font-size: var(--t-12); }
.footer__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__legal { display: grid; gap: var(--s-1h); padding-top: var(--s-6); line-height: 1.5; max-width: 75ch; }
.footer__legal a { color: var(--ink); }

/* scroll reveal: quick blur-to-sharp, never leaves content hidden without JS */
.js [data-reveal] { opacity: 0; filter: blur(var(--reveal-blur)); transform: translateY(12px); transition: opacity var(--reveal) var(--ease-out), filter var(--reveal) var(--ease-out), transform var(--reveal) var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal][data-in] { opacity: 1; filter: none; transform: none; }
.js .hero [data-hero] { animation: arrive var(--reveal) var(--ease-out) both; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; } .js .hero [data-hero] { animation: none; } }

/* mobile: tap targets >= 44px with room between them; text never near the screen edge */
@media (max-width: 640px) {
  .more, .actions .link { display: inline-flex; align-items: center; min-height: var(--tap); }
  .footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); width: 100%; }
  .footer__nav a { display: flex; align-items: center; min-height: var(--tap); font-size: var(--t-15); }
  .legal__toc a { display: flex; align-items: center; min-height: var(--tap); }
  .legal__toc ol { gap: var(--s-1); }
  .wordmark { min-height: var(--tap); }
  a.link:not(p a, li a) { display: inline-flex; align-items: center; min-height: var(--tap); }
}