/* ============================================================================
   scraperCRM — design system
   Warm paper · near-black ink · ONE electric-blue accent. No framework.
   Sections: 1 Tokens · 2 Reset · 3 Type · 4 Layout/grid · 5 Components · 6 Motion
   ========================================================================== */

/* ── 1. TOKENS (§2) ───────────────────────────────────────────────────────── */
:root {
  /* paper */
  --paper:#F6F3ED;  --paper-2:#F0ECE5;  --paper-3:#E7E2DA;
  /* ink */
  --ink:#181714;    --ink-2:#2F2E2A;    --muted:#74716C;   --rule:#D7D4CD;
  /* accent (the only saturated hue) */
  --accent:#0F59E7; --accent-hover:#0046CF; --accent-quiet:#DBE9FF; --on-accent:#FFFFFF;
  /* night band */
  --night:#161719;  --night-2:#232426;  --night-text:#F2F3F6; --night-muted:#9C9EA2;
  --night-rule: color-mix(in oklch, var(--night-text) 14%, transparent);
  /* data-only signals (never chrome) */
  --signal:#F97C3D;   /* live / urgent */
  --positive:#349D62; /* connected / booked */

  /* fonts */
  --font-sans:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:"Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* radii */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* shadows (never darker than these) */
  --shadow-1:0 1px 2px rgba(24,23,20,.05);
  --shadow-2:0 1px 2px rgba(24,23,20,.05),0 8px 20px -8px rgba(24,23,20,.10);
  --shadow-float:0 2px 4px rgba(24,23,20,.06),0 18px 40px -12px rgba(24,23,20,.18);

  /* spacing scale — use ONLY these steps */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px;

  /* container */
  --page-max:1320px; --content-max:1160px;
  --gutter:clamp(20px,4vw,56px); --col-gap:32px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:420ms;
}

/* Optional oklch overlay where supported (keeps hex as the authored source). */
@supports (color:oklch(0% 0 0)) {
  :root {
    --paper:oklch(96.1% 0.008 85);  --paper-2:oklch(94.2% 0.009 85);  --paper-3:oklch(90.4% 0.010 85);
    --ink:oklch(21.5% 0.006 75);    --ink-2:oklch(29.5% 0.006 75);    --muted:oklch(52.5% 0.006 75);
    --rule:oklch(86.5% 0.007 82);
    --accent:oklch(52% 0.216 262); --accent-hover:oklch(45% 0.223 264); --accent-quiet:oklch(92% 0.045 258);
    --night:oklch(20% 0.004 265); --night-2:oklch(27% 0.005 265); --night-text:oklch(96% 0.005 265); --night-muted:oklch(69% 0.008 265);
    --signal:oklch(70% 0.16 46); --positive:oklch(62% 0.13 152);
  }
}

/* ── 2. RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body { overflow-x:clip; }
/* No-JS fallback: reveals never observed → keep content visible (progressive enhancement) */
html:not(.js) .reveal,
html:not(.js) .reveal-children > * { opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body {
  font-family:var(--font-sans);
  font-size:1rem; line-height:1.6;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden;
}
img, picture, svg, video, canvas { display:block; max-width:100%; }
input, button, textarea, select { font:inherit; color:inherit; }
button { background:none; border:none; cursor:pointer; }
a { color:inherit; text-decoration:none; }
ul[role="list"], ol[role="list"] { list-style:none; padding:0; }
h1,h2,h3,h4 { font-weight:600; }
:where(p, li) { text-wrap:pretty; }

/* skip link */
.skip-link {
  position:absolute; left:var(--s-4); top:-100px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:var(--s-3) var(--s-4); border-radius:var(--r-sm);
  transition:top var(--dur) var(--ease);
}
.skip-link:focus-visible { top:var(--s-4); }

/* ── 3. TYPOGRAPHY (§3) ───────────────────────────────────────────────────── */
.display-1 {
  font-size:clamp(2.75rem,7.2vw,7rem); font-weight:600; line-height:.94;
  letter-spacing:-.035em; text-wrap:balance; hyphens:none;
}
.display-2 {
  font-size:clamp(2rem,4.2vw,3.5rem); font-weight:600; line-height:1.0;
  letter-spacing:-.025em; text-wrap:balance; hyphens:none; max-width:26ch;
}
.display-3 {
  font-size:clamp(1.5rem,2.4vw,2.125rem); font-weight:600; line-height:1.1;
  letter-spacing:-.02em; text-wrap:balance;
}
.heading { font-size:1.25rem; font-weight:600; line-height:1.25; letter-spacing:-.01em; text-wrap:balance; }
.subhead { font-size:1.0625rem; font-weight:500; line-height:1.4; }
.body-lg { font-size:1.1875rem; font-weight:400; line-height:1.55; max-width:50ch; }
.body    { font-size:1rem; font-weight:400; line-height:1.6; }
.body-sm { font-size:.9375rem; font-weight:400; line-height:1.55; }

/* mono micro-labels — never body, never >14px */
.micro {
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  line-height:1.2; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.micro-data {
  font-family:var(--font-mono); font-size:.75rem; font-weight:400;
  line-height:1.3; letter-spacing:.04em; font-variant-numeric:tabular-nums;
}

.text-muted { color:var(--muted); }
.tabular { font-variant-numeric:tabular-nums; }

/* ── 4. LAYOUT + GRID (§4) ────────────────────────────────────────────────── */
.container {
  width:100%; max-width:var(--page-max); margin-inline:auto;
  padding-inline:var(--gutter);
}
.content { max-width:var(--content-max); margin-inline:auto; }
.measure { max-width:68ch; }

.section { padding-block:var(--s-9); }
@media (min-width:768px){ .section{ padding-block:var(--s-10); } }
.section--tight { padding-block:var(--s-8); }
.section--hero  { padding-block:var(--s-10); }
@media (min-width:768px){ .section--hero{ padding-block:200px; } }

/* one hairline between same-color consecutive sections */
.hairline { height:1px; background:var(--rule); border:0; }

/* 12-col grid */
.grid12 { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap); }

/* section-head pattern: eyebrow → display-2 (span 6) + body-lg (span 5 / start 8) */
.section-head { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap); align-items:end; }
.section-head__eyebrow { grid-column:1 / -1; margin-bottom:var(--s-4); }
.section-head__title { grid-column:1 / -1; }
.section-head__body  { grid-column:1 / -1; color:var(--ink-2); }
@media (min-width:1024px){
  .section-head__eyebrow { grid-column:1 / 7; }
  .section-head__title   { grid-column:1 / 7; }
  .section-head__body    { grid-column:8 / 13; align-self:end; }
}

/* card grids */
.card-grid { display:grid; gap:var(--col-gap); grid-template-columns:1fr; }
@media (min-width:768px){ .card-grid--2,.card-grid--3{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .card-grid--3{ grid-template-columns:repeat(3,1fr);} }

/* utility */
.stack > * + * { margin-top:var(--s-4); }
.cluster { display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; }
.center { text-align:center; }

/* ── 5. COMPONENTS (§5) ───────────────────────────────────────────────────── */

/* -- 5.1 NAV -------------------------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:100; height:72px;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
.nav.is-scrolled { border-bottom-color:var(--rule); }
.nav__inner {
  height:100%; display:flex; align-items:center; gap:var(--s-6);
  max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter);
}
.wordmark { display:inline-flex; align-items:center; gap:var(--s-2); font-weight:600; letter-spacing:-.02em; font-size:1.125rem; color:var(--ink); }
.wordmark__mark { width:14px; height:14px; border-radius:4px; background:var(--accent); flex:none; display:inline-block; }
.nav__links { display:none; align-items:center; gap:var(--s-5); margin-left:auto; }
@media (min-width:1024px){ .nav__links{ display:flex; } }
.nav__link {
  position:relative; font-size:.9375rem; font-weight:500; color:var(--ink-2);
  padding-block:var(--s-2); transition:color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav__link:hover { color:var(--ink); }
.nav__link:hover::after { transform:scaleX(1); }
.nav__link.is-active { color:var(--accent); }
.nav__link.is-active::after { transform:scaleX(1); }
.nav__cta { display:none; margin-left:var(--s-4); }
@media (min-width:1024px){ .nav__cta{ display:inline-flex; } }

/* mobile controls */
.nav__toggle { display:inline-flex; flex:none; margin-left:auto; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-sm); color:var(--ink); }
@media (min-width:1024px){ .nav__toggle{ display:none; } }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content:""; display:block; width:20px; height:2px; background:currentColor; border-radius:2px; position:relative;
}
.nav__toggle span::before { position:absolute; top:-6px; }
.nav__toggle span::after  { position:absolute; top:6px; }

/* mobile sheet */
.nav__sheet {
  position:fixed; inset:0; z-index:150; background:var(--paper);
  display:none; flex-direction:column; padding:var(--s-5) var(--gutter) var(--s-8);
}
.nav__sheet.is-open { display:flex; }
.nav__sheet-top { display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav__sheet-close { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--ink); border-radius:var(--r-sm); }
.nav__sheet-links { display:flex; flex-direction:column; gap:var(--s-2); margin-top:var(--s-6); }
.nav__sheet-links a { font-size:clamp(1.5rem,2.4vw,2.125rem); font-weight:600; letter-spacing:-.02em; padding-block:var(--s-2); color:var(--ink); }
.nav__sheet-links a.is-active { color:var(--accent); }
.nav__sheet-cta { margin-top:var(--s-6); }
/* entrance stagger for sheet links (40ms) */
.nav__sheet.is-open .nav__sheet-links a {
  opacity:0; transform:translateY(8px); animation:sheet-in var(--dur) var(--ease) forwards;
}
.nav__sheet.is-open .nav__sheet-links a:nth-child(1){ animation-delay:40ms; }
.nav__sheet.is-open .nav__sheet-links a:nth-child(2){ animation-delay:80ms; }
.nav__sheet.is-open .nav__sheet-links a:nth-child(3){ animation-delay:120ms; }
.nav__sheet.is-open .nav__sheet-links a:nth-child(4){ animation-delay:160ms; }
.nav__sheet.is-open .nav__sheet-links a:nth-child(5){ animation-delay:200ms; }
.nav__sheet.is-open .nav__sheet-links a:nth-child(6){ animation-delay:240ms; }
@keyframes sheet-in { to { opacity:1; transform:translateY(0); } }

/* -- 5.2 BUTTONS ---------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-size:.9375rem; font-weight:500; line-height:1;
  padding:14px 22px; min-height:44px; border-radius:var(--r-md);
  border:1px solid transparent; text-align:center; white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn--primary { background:var(--accent); color:var(--on-accent); }
.btn--primary:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-2); }
.btn--secondary { background:transparent; border-color:var(--rule); color:var(--ink); }
.btn--secondary:hover { border-color:var(--ink); background:var(--paper-2); }
.btn--secondary .btn__glyph { color:var(--muted); font-size:12px; }
.btn--ghost { color:var(--ink); border-radius:0; border-bottom:1px solid var(--rule); border-top:0; border-inline:0; padding:6px 0; min-height:auto; border-radius:0; }
.btn--ghost:hover { border-bottom-color:var(--accent); color:var(--accent); }

/* sizes */
.btn--sm { padding:10px 16px; min-height:44px; }
.btn--lg { padding:18px 28px; font-size:1rem; }

/* on night */
.btn--on-night.btn--secondary { border-color:var(--night-rule); color:var(--night-text); }
.btn--on-night.btn--secondary:hover { border-color:var(--night-text); background:var(--night-2); }
.btn--on-night.btn--ghost { color:var(--night-text); border-bottom-color:var(--night-rule); }

.btn--block { width:100%; }

/* -- 5.3 MONO CHIP / EYEBROW --------------------------------------------- */
.eyebrow { /* bare mono eyebrow, alias of .micro */
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  line-height:1.2; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:inline-block;
}
.chip {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-pill);
  padding:6px 12px; box-shadow:var(--shadow-1);
}
.chip.is-active { background:var(--accent-quiet); color:var(--accent); border-color:transparent; }

/* -- 5.4 CARD ------------------------------------------------------------- */
.card {
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s-5); box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:var(--s-3);
}
@media (min-width:768px){ .card{ padding:var(--s-6); } }
.card__index { font-family:var(--font-mono); font-size:.6875rem; font-weight:500; letter-spacing:.14em; color:var(--accent); }
.card__title { font-size:1.25rem; font-weight:600; line-height:1.25; letter-spacing:-.01em; }
.card__body  { font-size:.9375rem; line-height:1.55; color:var(--ink-2); }
.card__link  { margin-top:auto; align-self:flex-start; }
/* whole-card link hover only */
a.card:hover, .card--link:hover { border-color:var(--ink); box-shadow:var(--shadow-2); transform:translateY(-2px); }
a.card, .card--link { transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* -- 5.5 STAT BLOCK ------------------------------------------------------- */
.stat-block { display:grid; grid-template-columns:1fr; }
@media (min-width:768px){ .stat-block{ grid-template-columns:repeat(3,1fr); } }
.stat {
  padding:var(--s-5) 0; border-top:1px solid var(--rule);
}
@media (min-width:768px){
  .stat { padding:var(--s-2) var(--s-6); border-top:0; border-left:1px solid var(--rule); }
  .stat:first-child { border-left:0; padding-left:0; }
}
.stat__num { font-size:clamp(1.5rem,2.4vw,2.125rem); font-weight:600; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat__cap { margin-top:var(--s-2); }

/* -- 5.6 NIGHT BAND ------------------------------------------------------- */
.night {
  background:var(--night); color:var(--night-text);
  padding-block:var(--s-9);
}
@media (min-width:768px){ .night{ padding-block:var(--s-10); } }
.night .eyebrow, .night .micro { color:var(--night-muted); }
.night .section-head__body { color:var(--night-muted); }
.night .hairline { background:var(--night-rule); }
.night .card { background:var(--night-2); border-color:var(--night-rule); color:var(--night-text); }
.night .card__body { color:var(--night-muted); }
.night .stat { border-color:var(--night-rule); }
.night-clause-muted { color:var(--night-muted); }
.night-clause-strong { color:var(--night-text); }

/* -- 5.7 UI FRAGMENTS (signature imagery) --------------------------------- */
.fragment {
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:var(--shadow-float); padding:var(--s-4);
  width:100%; max-width:340px;
}
.fragment--tilt-l { transform:rotate(-1.5deg); }
.fragment--tilt-r { transform:rotate(1.5deg); }

/* call card */
.call-card { display:flex; flex-direction:column; gap:var(--s-3); }
.call-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3); }
.call-card__name { font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.call-card__meta { margin-top:2px; color:var(--muted); }
.call-card__live {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal);
}
.call-card__dot { width:7px; height:7px; border-radius:var(--r-pill); background:var(--signal); flex:none; }
.call-card__timer { font-family:var(--font-mono); font-size:1.375rem; font-weight:500; letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.call-card__foot { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--rule); }

/* stat trio */
.stat-trio { display:grid; grid-template-columns:repeat(3,1fr); }
.stat-trio__cell { padding:var(--s-2) var(--s-3); border-left:1px solid var(--rule); }
.stat-trio__cell:first-child { border-left:0; padding-left:0; }
.stat-trio__num { font-size:1.5rem; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.stat-trio__num--accent { color:var(--accent); }
.stat-trio__cap { margin-top:2px; color:var(--muted); }

/* connectors + cluster */
.cluster-scene { position:relative; display:flex; flex-direction:column; gap:var(--s-5); align-items:flex-start; }
.connector { height:1px; background:var(--rule); flex:1; }

/* -- 5.8 FORMS (foundational focus styles) -------------------------------- */
.field { display:flex; flex-direction:column; gap:var(--s-2); }
.field__label { /* micro above */ }
.input, .textarea {
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-sm);
  min-height:44px; padding:12px 14px; font-size:1rem; width:100%;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus, .textarea:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 2px var(--accent-quiet); }
.field--error .input { border-color:var(--signal); }
.field__msg { color:var(--signal); }
.field__help { color:var(--muted); }

/* ── 6. MOTION (§6) ───────────────────────────────────────────────────────── */
/* focus — always visible, never animated */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;
}
.night :where(a, button):focus-visible { outline-color:var(--night-text); }

/* one entrance pattern per section: opacity 0→1 + translateY 12→0 over --dur-slow */
.reveal { opacity:0; transform:translateY(12px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
/* children stagger 60ms, max 4 */
.reveal-children > * { opacity:0; transform:translateY(12px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal-children.is-in > *:nth-child(1){ transition-delay:0ms; }
.reveal-children.is-in > *:nth-child(2){ transition-delay:60ms; }
.reveal-children.is-in > *:nth-child(3){ transition-delay:120ms; }
.reveal-children.is-in > *:nth-child(4){ transition-delay:180ms; }
.reveal-children.is-in > * { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-delay:0ms !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal, .reveal-children > * { opacity:1 !important; transform:none !important; }
}

/* ── FOOTER (§5) ──────────────────────────────────────────────────────────── */
.footer { background:var(--night); color:var(--night-text); padding-top:var(--s-9); padding-bottom:var(--s-6); }
.footer__grid { display:grid; grid-template-columns:1fr; gap:var(--s-7); }
@media (min-width:600px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .footer__grid{ grid-template-columns:1.4fr repeat(4,1fr); } }
.footer__brand { display:flex; flex-direction:column; gap:var(--s-3); max-width:34ch; }
.footer__brand .wordmark { color:var(--night-text); }
.footer__descriptor { color:var(--night-muted); font-size:.9375rem; line-height:1.55; }
.footer__contact { display:flex; flex-direction:column; gap:6px; margin-top:var(--s-2); }
.footer__contact a, .footer__contact address { color:var(--night-muted); font-size:.9375rem; font-style:normal; line-height:1.5; }
.footer__contact a:hover { color:var(--night-text); }
.footer__col h2 { font-family:var(--font-mono); font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--night-muted); margin-bottom:var(--s-4); }
.footer__col ul { display:flex; flex-direction:column; gap:var(--s-3); list-style:none; padding:0; }
.footer__col a { color:var(--night-muted); font-size:.9375rem; transition:color var(--dur-fast) var(--ease); }
.footer__col a:hover { color:var(--night-text); }
.footer__legal { margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid var(--night-rule); display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; }
.footer__legal p, .footer__legal a { color:var(--night-muted); font-size:.9375rem; }
.footer__legal a:hover { color:var(--night-text); }

/* ── 7. HOME PAGE (hero, scraped-list fragment, FAQ accordion, CTA band) ───── */

.text-accent { color:var(--accent); }

/* -- 7.1 HERO ------------------------------------------------------------- */
.hero__grid { display:grid; grid-template-columns:1fr; gap:var(--s-8); align-items:start; }
@media (min-width:1024px){
  .hero__grid { grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:var(--s-7); align-items:center; }
}
.hero__eyebrow { margin-bottom:var(--s-5); }
.hero__title { max-width:14ch; }
.hero__sub { margin-top:var(--s-5); color:var(--ink-2); }
.hero__actions { display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-7); }
.hero__actions .btn { width:100%; }
@media (min-width:480px){
  .hero__actions { flex-direction:row; align-items:center; }
  .hero__actions .btn { width:auto; }
}
.hero__proof { margin-top:var(--s-6); color:var(--muted); }

/* connective line SOURCE → DIAL → BOOKED (§1 move 2) */
.hero__flow { display:none; align-items:center; gap:0; margin-bottom:var(--s-6); }
@media (min-width:1024px){ .hero__flow{ display:flex; } }
.hero__flow .chip { flex:none; }
.hero__flow-line { flex:1; height:1px; min-width:16px; background:var(--rule); position:relative; }
.hero__flow-line--active { overflow:hidden; }
.hero__flow-draw {
  position:absolute; inset:0; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  animation:flow-draw 700ms var(--ease) 420ms both;
}
@keyframes flow-draw { to { transform:scaleX(1); } }

/* cluster of floating fragments, connected by 1px rule lines */
.hero__cluster { display:flex; flex-direction:column; align-items:stretch; width:100%; max-width:360px; margin-inline:auto; }
@media (min-width:1024px){ .hero__cluster{ margin-left:auto; margin-right:0; } }
.hero__cluster .fragment { transform:none; width:100%; max-width:none; }
.hero__node { position:relative; opacity:0; transform:translateY(6px); animation:settle var(--dur-slow) var(--ease) both; }
.hero__cluster > .hero__node:nth-of-type(1){ animation-delay:100ms; }
.hero__cluster > .hero__node:nth-of-type(2){ animation-delay:190ms; }
.hero__cluster > .hero__node:nth-of-type(3){ animation-delay:280ms; }
@keyframes settle { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.hero__connector { display:block; width:1px; height:var(--s-6); background:var(--rule); margin-inline:auto; }

/* responsive fragment count: 1 (<768) → 2 (768–1023) → 3 (≥1024) */
.hero__node--a, .hero__connector--ab { display:none; }
.hero__node--c, .hero__connector--bc { display:none; }
@media (min-width:768px){
  .hero__node--a { display:block; }
  .hero__connector--ab { display:block; }
}
@media (min-width:1024px){
  .hero__node--c { display:block; }
  .hero__connector--bc { display:block; }
}

/* -- 7.2 SCRAPED-LIST FRAGMENT (§5 signature imagery) --------------------- */
.scraped-list { display:flex; flex-direction:column; gap:var(--s-3); }
.scraped-list__head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.scraped-list__rows { display:flex; flex-direction:column; list-style:none; padding:0; margin:0; }
.scraped-list__row {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-3) 0; border-top:1px solid var(--rule);
}
.scraped-list__row:first-child { border-top:0; }
.scraped-list__row.is-active {
  background:var(--accent-quiet); border-top-color:transparent; border-radius:var(--r-sm);
  margin-inline:calc(var(--s-3) * -1); padding-inline:var(--s-3);
}
.scraped-list__row.is-active + .scraped-list__row { border-top-color:transparent; }
.scraped-list__co { font-size:.9375rem; font-weight:500; line-height:1.3; color:var(--ink); }
.scraped-list__tel { flex:none; color:var(--muted); }
.scraped-list__row.is-active .scraped-list__tel { color:var(--accent); }

/* -- 7.3 FAQ ACCORDION (§5) ---------------------------------------------- */
.faq { border-top:1px solid var(--rule); }
.faq__item { border-bottom:1px solid var(--rule); }
.faq__q { margin:0; font-weight:inherit; }
.faq__trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding-block:var(--s-5); text-align:left;
  font-size:1.0625rem; font-weight:500; line-height:1.4; color:var(--ink);
  transition:color var(--dur-fast) var(--ease);
}
.faq__trigger:hover { color:var(--accent); }
.faq__item:hover { background:var(--paper-2); }
.faq__glyph { position:relative; flex:none; width:14px; height:14px; }
.faq__glyph::before, .faq__glyph::after {
  content:""; position:absolute; background:var(--muted); border-radius:2px;
}
.faq__glyph::before { left:0; right:0; top:50%; height:1.5px; transform:translateY(-50%); }
.faq__glyph::after {
  top:0; bottom:0; left:50%; width:1.5px; transform:translateX(-50%);
  transition:transform var(--dur) var(--ease);
}
.faq__item.is-open .faq__glyph::before,
.faq__item.is-open .faq__glyph::after { background:var(--accent); }
.faq__item.is-open .faq__glyph::after { transform:translateX(-50%) rotate(90deg); }
.faq__panel { display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--dur) var(--ease); }
.faq__panel-inner { overflow:hidden; min-height:0; }
.faq__panel-body {
  padding-top:var(--s-2); padding-bottom:var(--s-6); max-width:68ch; color:var(--ink-2);
}
/* enhanced (JS on) → collapsible; JS-off leaves every panel open (accessible) */
.faq.is-enhanced .faq__panel { grid-template-rows:0fr; }
.faq.is-enhanced .faq__item.is-open .faq__panel { grid-template-rows:1fr; }

/* -- 7.4 CTA BAND (§1 move 7) -------------------------------------------- */
.cta-band { text-align:center; }
.cta-band__title { margin-inline:auto; }
.cta-band__body { margin:var(--s-4) auto 0; max-width:52ch; color:var(--night-muted); }
.cta-band__action { margin-top:var(--s-7); display:inline-flex; }

/* ── PAGE TEMPLATES (inner pages) ─────────────────────────────────────────── */

/* spec list — dense term/definition rows for feature + detail pages */
.spec { display:grid; }
.spec__row {
  display:grid; grid-template-columns:1fr; gap:var(--s-1);
  padding-block:var(--s-4); border-top:1px solid var(--rule);
}
.spec__row:last-child { border-bottom:1px solid var(--rule); }
@media (min-width:768px){
  .spec__row { grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--col-gap); align-items:baseline; }
}
.spec__term { display:flex; gap:var(--s-3); align-items:baseline; font-weight:600; color:var(--ink); }
.spec__idx { flex:none; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:var(--accent); }
.spec__def { color:var(--ink-2); }
/* on night bands, spec adapts */
.night .spec__row { border-color:var(--night-rule); }
.night .spec__term { color:var(--night-text); }
.night .spec__def { color:var(--night-muted); }

/* note — honest, quiet callout (metering, compliance, scope) */
.note {
  border-left:3px solid var(--accent); background:var(--paper-2);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:var(--s-4) var(--s-5);
}
.note__label { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s-2); }
.note p { color:var(--ink-2); }
.note a { color:var(--accent); }

/* process — numbered, top-ruled steps (how it works) */
.process { display:grid; gap:var(--s-6); }
@media (min-width:768px){ .process { grid-template-columns:repeat(4,1fr); gap:var(--col-gap); } }
.step { padding-top:var(--s-5); border-top:2px solid var(--ink); }
.step__num { font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.08em; color:var(--accent); }
.step__title { font-size:1.25rem; font-weight:600; letter-spacing:-.01em; margin-top:var(--s-3); color:var(--ink); }
.step__body { margin-top:var(--s-2); color:var(--ink-2); }
/* process adapts on night bands */
.night .step { border-top-color:var(--night-text); }
.night .step__title { color:var(--night-text); }
.night .step__body { color:var(--night-muted); }

/* lede — oversized intro paragraph under a page h1 */
.lede { font-size:clamp(1.125rem,1.6vw,1.375rem); line-height:1.5; color:var(--ink-2); max-width:60ch; }

/* prose — comfortable running text for trust/legal-style pages */
.prose { max-width:68ch; }
.prose > * + * { margin-top:var(--s-4); }
.prose h3 { font-size:1.375rem; font-weight:600; letter-spacing:-.01em; margin-top:var(--s-7); color:var(--ink); }
.prose p { color:var(--ink-2); }
.prose a { color:var(--accent); }
.prose ul { margin-left:var(--s-5); list-style:disc; }
.prose li { color:var(--ink-2); margin-top:var(--s-2); }

/* forms — calculator + inputs */
.field { display:block; }
.field__label { display:block; font-weight:600; color:var(--ink); margin-bottom:var(--s-2); font-size:.9375rem; }
.field__hint { margin-top:var(--s-2); font-size:.8125rem; color:var(--muted); }
.input, .select, .textarea { width:100%; font:inherit; padding:var(--s-3) var(--s-4); background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-sm); color:var(--ink); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.textarea { min-height:7rem; resize:vertical; }
.select { appearance:none; -webkit-appearance:none; background-repeat:no-repeat; background-position:right var(--s-4) center; background-size:11px; padding-right:var(--s-8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2374716C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* panel — bordered content box (forms, callouts) */
.panel { border:1px solid var(--rule); border-radius:var(--r-lg); padding:var(--s-6); background:var(--paper-2); }
.form-grid { display:grid; gap:var(--s-4); }
@media (min-width:560px){ .form-grid--2 { grid-template-columns:1fr 1fr; } }
.form-actions { margin-top:var(--s-5); }
.contact-grid { display:grid; gap:var(--s-8); align-items:start; }
@media (min-width:900px){ .contact-grid { grid-template-columns:1fr 1fr; } }
.range { width:100%; margin-top:var(--s-3); accent-color:var(--accent); }
.range-head { display:flex; justify-content:space-between; align-items:baseline; }
.range-head b { font-family:var(--font-mono); font-weight:500; color:var(--accent); }

.calc { display:grid; gap:var(--s-6); }
@media (min-width:900px){ .calc { grid-template-columns:5fr 6fr; gap:var(--s-8); align-items:start; } }
.calc__panel { display:grid; gap:var(--s-5); }
.calc__results { background:var(--night); color:var(--night-text); border-radius:var(--r-lg); padding:var(--s-6) var(--s-6) var(--s-7); }
.result__row { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4); padding-block:var(--s-4); border-top:1px solid var(--night-rule); }
.result__row:first-child { border-top:0; padding-top:0; }
.result__label { color:var(--night-muted); }
.result__val { font-family:var(--font-mono); font-size:1.125rem; color:var(--night-text); font-variant-numeric:tabular-nums; }
.result--headline { margin-top:var(--s-4); padding-top:var(--s-5); border-top:2px solid var(--night-rule); flex-wrap:wrap; }
.result--headline .result__label { color:var(--night-text); font-weight:600; }
.result--headline .result__val { font-size:clamp(2rem,5vw,2.75rem); color:var(--positive); }
.result__pct { font-family:var(--font-mono); font-size:.8125rem; color:var(--positive); margin-left:var(--s-2); }

/* price block */
.price { border:1px solid var(--rule); border-radius:var(--r-lg); padding:var(--s-7); background:var(--paper-2); }
.price__num { font-weight:700; font-size:clamp(3rem,6vw,4.5rem); letter-spacing:-.03em; line-height:1; color:var(--ink); }
.price__unit { color:var(--muted); font-size:1rem; margin-left:var(--s-2); font-weight:500; }
.price__meta { margin-top:var(--s-4); color:var(--ink-2); }

/* check list — accent square marker, never an emoji */
.check { display:grid; gap:var(--s-3); }
.check__item { position:relative; padding-left:var(--s-6); color:var(--ink-2); }
.check__item::before { content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:2px; background:var(--accent); }
.night .check__item { color:var(--night-muted); }

/* link list — blog / docs index rows */
.linklist { display:grid; }
.linklist a { display:flex; justify-content:space-between; gap:var(--s-4); align-items:baseline; padding-block:var(--s-4); border-top:1px solid var(--rule); color:var(--ink); }
.linklist a:last-child { border-bottom:1px solid var(--rule); }
.linklist__title { font-weight:600; }
.linklist a:hover .linklist__title { color:var(--accent); }
.linklist__meta { flex:none; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:var(--muted); }

/* empty-state plate — customers/blog placeholders, honest not fake */
.plate { border:1px dashed var(--rule); border-radius:var(--r-lg); padding:var(--s-8) var(--s-6); text-align:center; background:var(--paper-2); }
.plate__title { font-size:1.375rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.plate__body { margin:var(--s-3) auto 0; max-width:52ch; color:var(--ink-2); }

/* ── styleguide-only helpers ──────────────────────────────────────────────── */
.sg-swatch { border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; }
.sg-swatch__chip { height:72px; }
.sg-swatch__meta { padding:var(--s-3); background:var(--paper); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.02em; display:flex; flex-direction:column; gap:2px; }
.sg-swatch__meta b { font-weight:500; }
.sg-swatch__meta span { color:var(--muted); }
.sg-grid { display:grid; gap:var(--s-4); grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){ .sg-grid{ grid-template-columns:repeat(4,1fr); } }
.sg-row { display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; }
.sg-block { border:1px dashed var(--rule); border-radius:var(--r-md); padding:var(--s-5); }
.sg-label { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:var(--muted); margin-bottom:var(--s-3); }
.sg-spec { font-family:var(--font-mono); font-size:.75rem; color:var(--muted); margin-top:var(--s-2); }
.sg-spacing-bar { background:var(--accent-quiet); border:1px solid var(--accent); height:16px; border-radius:2px; }
.sg-shadow-box { width:140px; height:80px; border-radius:var(--r-md); background:var(--paper); border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.6875rem; color:var(--muted); }
.sg-radius-box { width:80px; height:80px; background:var(--paper-3); border:1px solid var(--rule); display:flex; align-items:flex-end; justify-content:flex-start; padding:6px; font-family:var(--font-mono); font-size:.6875rem; color:var(--muted); }
.sg-divider { margin-block:var(--s-8); }