/* ══════════════════════════════════════════════════════════════════════════════
   site.css — DRAFT consolidated design system for all non-/app pages
   ══════════════════════════════════════════════════════════════════════════════
   Phase 0 of plans/site-design-consolidation.md. This is the ONE stylesheet the
   whole marketing site will render from. It is extracted faithfully from the three
   frozen gold-standard pages — index.html, how-it-works.html, plans.html — which
   are NOT edited. site.css is built to MATCH them so a migrated page looks identical
   to a gold page using the same primitive.

   ✓ RATIFIED 2026-06-14 — designer confirmed all five open decisions to their
   defaults (1a–5a): pill CTA, hero weight 600, section-h2 weight 600, plain-text
   eyebrow, 1200px container. The system is locked; pages may now migrate onto it.
   Pair with /_styleguide.html.

   Pairs with /fonts.css for @font-face. A page should ultimately link ONLY:
     <link rel="stylesheet" href="/fonts.css">
     <link rel="stylesheet" href="/site.css">

   Class prefix: `ds-` (design system). Deliberately NOT `.v2-` — the legacy `.v2-*`
   primitives in editorial.css drifted from the gold pages (e.g. .v2-h2 is weight 800;
   the gold pages render section h2 at weight 600). A fresh prefix avoids inheriting
   that drift and avoids collisions while both stylesheets co-exist during migration.

   ── DECISIONS THE GOLD PAGES DISAGREED ON (RATIFIED 2026-06-14 → all to default) ─
   All five locked to the index.html flagship default. Marked « DECISION » inline below.
   1. CTA SHAPE   — index/hero use a 999px pill (--cta-bg fill); plans uses an 8px
                    rounded-rect (--ink fill). Defaulted to PILL. → .ds-btn
   2. HERO H1     — how-it-works renders h1 at weight 600 / clamp(26,3.4vw,38) and its
                    own comment says "aligned to the homepage, smaller than the old 900";
                    plans still uses weight 900 / clamp(32,4.5vw,52). Defaulted to 600.
                    → .ds-hero h1
   3. SECTION H2  — index + how-it-works use weight 600; plans uses weight 800.
                    Defaulted to 600. → .ds-h2
   4. CONTAINER   — index/how-it-works = 1200px; plans pricing = 1080px. Defaulted to
                    1200px wide + 700px prose measure. → --ds-container / .ds-prose
   5. ACCENT PILL — plans hero label uses an indigo-tinted pill; how-it-works uses a
                    plain text eyebrow. Defaulted to plain text eyebrow. → .ds-eyebrow
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────────── */
:root {
  /* Paper backgrounds (cream, two tiers) */
  --ds-paper:    #f4f2ef;
  --ds-paper-2:  #ebe9e4;
  --ds-ink-band: #1e1e1e;   /* near-black band (threat cards, footer) */

  /* Ink (text on paper), four tiers */
  --ds-ink:    #000;
  --ds-ink-2:  #2a2a2a;
  --ds-ink-3:  #666666;  /* AA: 5.14:1 on cream */
  --ds-ink-4:  #a0a0a0;

  /* Lines */
  --ds-line:    rgba(0,0,0,0.08);
  --ds-line-2:  rgba(0,0,0,0.14);

  /* Brand */
  --ds-indigo:    #3f20c4;   /* autopilot tiles, links-in-context, accents */
  --ds-indigo-d:  #2f17a0;
  --ds-cta:       #0e0e10;   /* primary CTA fill (≈ --ink, kept distinct per gold pages) */
  --ds-cta-h:     #1a1a1c;
  --ds-coral:     #c96442;   /* sparing: errors, urgency */

  /* Status (dashboards / status chips only — not brand surfaces) */
  --ds-red:    #f87171;
  --ds-green:  #22c55e;
  --ds-amber:  #f59e0b;

  /* Typography */
  --ds-sans: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ds-serif-accent: 'Reckless Light', 'Newsreader', 'Iowan Old Style', Georgia, serif;

  /* Radius scale (replaces the 4/8/12/14/18/22/999 zoo across the gold pages) */
  --ds-r-img:   4px;    /* photos */
  --ds-r-sm:    8px;    /* inputs, small chips */
  --ds-r:      12px;    /* cards, faq */
  --ds-r-lg:   18px;    /* hero cards, feature cards */
  --ds-r-tile: 22px;    /* indigo tiles */
  --ds-r-pill: 999px;   /* CTA pills, eyebask pills */

  /* Layout */
  --ds-container: 1200px;   /* « DECISION 4 » wide section width */
  --ds-prose:     700px;    /* comfortable reading measure */
  --ds-pad-x:     56px;     /* desktop horizontal gutter */
  --ds-pad-x-sm:  24px;     /* mobile gutter */

  /* Motion */
  --ds-t-fast:   0.1s;
  --ds-t:        0.15s;
  --ds-t-slow:   0.25s;
}

/* ── Reset + base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ds-paper);
  color: var(--ds-ink-2);
  font-family: var(--ds-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* Higher-specificity (0,1,1) so font/bg/color beat per-page inline `body { ... }`
   redeclarations that some migrated pages carry (e.g. /learn articles inline
   `body { font-family: system-ui }`, which would otherwise win on source order over
   the plain `body` rule above). Mirrors the editorial.css body.marketing-v2 model.
   Every migrated page has the marketing-v2 body class. */
body.marketing-v2 {
  background: var(--ds-paper);
  color: var(--ds-ink-2);
  font-family: var(--ds-sans);
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ── Layout primitives ───────────────────────────────────────────────────────── */
/* Wide centered container — every section's content sits in one of these. */
.ds-container {
  max-width: var(--ds-container);
  margin: 0 auto;
  padding: 0 var(--ds-pad-x);
}
@media (max-width: 720px) {
  .ds-container { padding: 0 var(--ds-pad-x-sm); }
}

/* Section = vertical rhythm. Separation is via background-color bands, not margins
   (the gold-page pattern). Add .ds-band-2 / .ds-band-dark for alternating bands. */
.ds-section { padding: 72px 0; }
.ds-section--tight { padding: 48px 0; }
.ds-band-2    { background: var(--ds-paper-2); }
.ds-band-dark { background: var(--ds-ink-band); color: #c4c4c4; }
@media (max-width: 520px) {
  .ds-section { padding: 48px 0; }
}

/* Comfortable reading column for prose pages (learn articles, glossary, legal). */
.ds-prose { max-width: var(--ds-prose); margin: 0 auto; }

/* ── Typography primitives ───────────────────────────────────────────────────── */
/* Eyebrow — 11px uppercase label above a heading. « DECISION 5 »: plain text. */
.ds-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
  margin-bottom: 16px;
}

/* Page hero — the top-of-page headline block (centered). */
.ds-hero {
  padding: 64px 0 40px;
  text-align: center;
}
.ds-hero-inner { max-width: 780px; margin: 0 auto; padding: 0 var(--ds-pad-x-sm); }
.ds-hero h1 {
  /* « DECISION 2 »: weight 600, smaller scale (how-it-works direction). */
  font-family: var(--ds-sans);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ds-ink);
  margin: 0 auto;
}
/* Serif subhead under a hero h1 — the one fully-consistent gold-page primitive. */
.ds-hero-sub {
  font-family: var(--ds-serif-accent);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ds-ink-3);
  max-width: 660px;
  margin: 16px auto 0;
  text-wrap: balance;
}

/* Section heading. « DECISION 3 »: weight 600. */
.ds-h2 {
  font-family: var(--ds-sans);
  font-size: clamp(22px, 2.6vw, 29px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--ds-ink);
  margin: 0 0 16px;
}
.ds-h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ds-ink);
  margin: 0 0 10px;
}
/* Body copy. */
.ds-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ds-ink-2);
  max-width: var(--ds-prose);
}
.ds-body + .ds-body { margin-top: 16px; }
/* "Punchline h2 + bold lead" content pattern: bold the opening sentence. */
.ds-lede { font-weight: 600; color: var(--ds-ink); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
/* « DECISION 1 »: pill is the canonical CTA shape (index flagship). */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  height: 44px;
  font-family: var(--ds-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: var(--ds-cta);
  border: 0;
  border-radius: var(--ds-r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ds-t);
}
.ds-btn:hover { background: var(--ds-cta-h); }
.ds-btn:disabled { opacity: 0.7; cursor: default; }
.ds-btn .arrow { transition: transform var(--ds-t); display: inline-block; }
.ds-btn:hover .arrow { transform: translateX(2px); }

/* Outline (secondary) pill. */
.ds-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  height: 44px;
  font-family: var(--ds-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-ink-2);
  background: transparent;
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-r-pill);
  cursor: pointer;
  transition: color var(--ds-t), border-color var(--ds-t);
}
.ds-btn-outline:hover { color: var(--ds-ink); border-color: var(--ds-ink-3); }

/* Compact nav variant (38px). */
.ds-btn--nav { height: 38px; padding: 9px 14px; }

/* ── Email capture (free-scan CTA) ───────────────────────────────────────────── */
.ds-email-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 460px;
}
.ds-email-form .ds-field { flex: 1; min-width: 0; }
.ds-email-form input[type="email"] {
  width: 100%;
  height: 44px;
  padding: 12px 18px;
  font-family: var(--ds-sans);
  font-size: 14px;
  color: var(--ds-ink);
  background: #ffffff;
  border: 1px solid var(--ds-indigo);
  border-radius: var(--ds-r-pill);
  outline: none;
  transition: border-color var(--ds-t);
}
.ds-email-form input[type="email"]:focus { border-color: var(--ds-indigo-d); }
.ds-email-form input[type="email"]::placeholder { color: var(--ds-ink-4); }
.ds-email-form .ds-btn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .ds-email-form { flex-direction: column; gap: 10px; }
  .ds-email-form .ds-btn { width: 100%; }
}

/* CTA card — soft paper-2 surface wrapping a form + trust line. */
.ds-cta-card {
  padding: 24px 36px;
  background: var(--ds-paper-2);
  border-radius: var(--ds-r-lg);
}
.ds-trust {
  font-family: var(--ds-serif-accent);
  font-size: clamp(11px, calc(0.4vw + 9px), 13px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--ds-ink-3);
  margin-top: 18px;
}
.ds-trust .sep { margin: 0 6px; opacity: 0.5; }

/* ── Cards ───────────────────────────────────────────────────────────────────── */
/* Generic content card (features, audiences, situations grids). */
.ds-card {
  background: var(--ds-paper-2);
  border: 0;
  border-radius: var(--ds-r);
  padding: 22px;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background var(--ds-t);
}
.ds-card:hover { background: #e3e0d9; }
.ds-card h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ds-ink); }
.ds-card p  { font-size: 13px; color: var(--ds-ink-2); line-height: 1.5; }

/* Outlined card (pricing, comparison tiles). */
.ds-card-outline {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.ds-card-outline.is-featured {
  border-color: var(--ds-ink);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* Indigo tile (autopilot Scan/Remove/Monitor language). */
.ds-tile {
  background: var(--ds-indigo);
  color: #fff;
  border-radius: var(--ds-r-tile);
  padding: 36px 32px 24px;
  box-shadow: 0 4px 8px rgba(63,32,196,0.10), 0 18px 36px rgba(63,32,196,0.16);
  display: flex;
  flex-direction: column;
}
.ds-tile h3 { font-size: 52px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; margin-bottom: 22px; color: #fff; }
.ds-tile p  { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.94); }

/* Responsive grid helpers. */
.ds-grid { display: grid; gap: 24px; }
.ds-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ds-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ds-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) {
  .ds-grid-3, .ds-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; }
}

/* ── FAQ accordion ───────────────────────────────────────────────────────────── */
.ds-faq { display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin: 0 auto; }
.ds-faq-item { border: 1px solid var(--ds-line); border-radius: var(--ds-r); overflow: hidden; }
.ds-faq-q {
  width: 100%; text-align: left; background: var(--ds-paper);
  font-size: 15px; font-weight: 600; color: var(--ds-ink);
  padding: 16px 20px; cursor: pointer; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: background var(--ds-t);
}
.ds-faq-q:hover { background: var(--ds-paper-2); }
.ds-faq-a {
  font-size: 14px; color: var(--ds-ink-2); line-height: 1.7;
  padding: 0 20px 18px; background: var(--ds-paper);
}

/* ── Final CTA band ──────────────────────────────────────────────────────────── */
.ds-final-cta { padding: 72px 24px; text-align: center; }
.ds-final-cta h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; color: var(--ds-ink); }
.ds-final-cta p  { font-family: var(--ds-serif-accent); font-weight: 400; font-size: 17px; line-height: 1.45; color: var(--ds-ink-3); max-width: 540px; margin: 0 auto 24px; }


/* ══════════════════════════════════════════════════════════════════════════════
   Legacy token aliases
   ══════════════════════════════════════════════════════════════════════════════
   The chrome + page-archetype blocks below are ported VERBATIM from editorial.css
   and use-cases.css (so they stay pixel-faithful) and reference the old token names.
   Mapping them to the ds-* tokens here means: (a) the ported CSS needs no rewriting,
   and (b) every cluster that migrates onto site.css automatically inherits the one
   ratified palette. The ONLY intentional visual change made during the port is the
   heading treatment (weight 600 + ratified scales) — that's what unifies the brand. */
:root {
  --paper: var(--ds-paper);   --paper-2: var(--ds-paper-2);
  --ink:   var(--ds-ink);     --ink-2: var(--ds-ink-2);  --ink-3: var(--ds-ink-3);  --ink-4: var(--ds-ink-4);
  --line:  var(--ds-line);    --line-2: var(--ds-line-2); --divider: var(--ds-line);
  --sans:  var(--ds-sans);    --serif-accent: var(--ds-serif-accent);
  --cta-bg: var(--ds-cta);    --cta-bg-h: var(--ds-cta-h);
  --autopilot: var(--ds-indigo); --autopilot-d: var(--ds-indigo-d);
  --max: var(--ds-container);   /* ratified to 1200 (design-tokens.css had 1080) */
  --r: var(--ds-r);  --r-lg: var(--ds-r-lg);
  --transition-fast: var(--ds-t-fast); --transition-normal: var(--ds-t); --transition-slow: var(--ds-t-slow);
  /* Icon-tint accents formerly pulled from design-tokens.css (used inline on
     use-case pain-card icons). */
  --primary: #6366f1;  --primary-light: #818cf8;
  --amber: var(--ds-amber);  --red-light: var(--ds-red);  --cyan: #06b6d4;  --green: var(--ds-green);
  --section-gutter: 24px;  /* product/feature pages reference this (always with a 24px fallback) */
  /* Extended palette (formerly design-tokens.css) — referenced inline by some
     migrated long-tail pages (/check, /glossary, /state, /remove, /industries, /tools).
     Page-local `--*-bg` / `--*-muted` variants stay page-defined. */
  --accent: var(--paper-accent);  --paper-accent: #c96442;
  --red: #ef4444;  --green-light: #4ade80;  --orange: #f97316;  --yellow: #eab308;
  --blue: #3b82f6;  --purple: #a855f7;  --pink: #ec4899;  --teal: #14b8a6;
  --text-on-green: #071a0c;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Chrome — header + footer (ported from editorial.css §3/§5/§9, marketing-v2 values)
   ══════════════════════════════════════════════════════════════════════════════
   Class names kept (.top/.nav-*/.foot*) because the header markup is inline per-page
   and the footer is injected by chrome.js — both reference these exact names. The
   marketing-v2 page-frame (pencil borders, grid rows) is intentionally NOT carried
   over; those were turned off for marketing-v2 pages anyway. */
.page { position: relative; display: block; min-height: 0; }

.top { }
.top-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 24px 70px;
  display: flex; align-items: center; justify-content: space-between;
}
@media (max-width: 900px) { .top-inner { padding: 22px 24px; max-width: none; } }
@media (max-width: 520px) { .top-inner { padding: 18px 20px; } }
.wordmark { display: inline-flex; align-items: center; line-height: 1; }
.wordmark img { height: 28px; width: auto; display: block; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav-link {
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: 4px 0; transition: color 0.15s; white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); font-weight: 600; }
.login-link { display: inline-flex; align-items: center; line-height: 1; }
.login-icon { display: none; width: 24px; height: 24px; align-items: center; justify-content: center; color: var(--ink-2); }
.login-link:hover .login-icon { color: var(--ink); }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px; font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em; color: #ffffff; background: var(--cta-bg); border: 0;
  border-radius: 999px; height: 38px; white-space: nowrap; text-decoration: none;
  transition: background 0.15s;
}
.nav-cta:hover { background: var(--cta-bg-h); }
.nav-cta .arrow { transition: transform 0.15s; display: inline-block; }
.nav-cta:hover .arrow { transform: translateX(2px); }
.nav-cta .label-short { display: none; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 5px 0; border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  max-height: 0; overflow: hidden; padding: 0 24px; border-top: 1px solid transparent;
  transition: max-height 0.25s cubic-bezier(0.4,0,0.2,1), padding 0.25s cubic-bezier(0.4,0,0.2,1), border-top-color 0.2s ease;
}
.top.menu-open .mobile-menu { max-height: 240px; padding: 8px 24px 20px; border-top-color: var(--paper-2); }
.mobile-menu .nav-link { display: block; padding: 14px 0; font-size: 17px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--paper-2); }
.mobile-menu .nav-link:last-child { border-bottom: 0; }
.nav-link:focus-visible, .login-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.nav-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .mobile-menu, .nav-toggle span, .nav-cta .arrow { transition: none; } }
@media (max-width: 768px) {
  .nav-right .nav-link.hide-mobile { display: none; }
  .nav-right { gap: 0; }
  .nav-right .nav-link + .nav-cta { margin-left: 16px; }
  .nav-right .nav-cta + .nav-toggle { margin-left: 8px; }
  .nav-toggle { display: block; }
  .nav-cta { padding: 8px 12px; font-size: 13px; gap: 6px; height: 36px; }
  .login-text { display: none; }
  .login-icon { display: inline-flex; }
}
@media (max-width: 480px) {
  .nav-right .nav-link + .nav-cta { margin-left: 12px; }
  .nav-right .nav-cta + .nav-toggle { margin-left: 6px; }
  .nav-cta { padding: 7px 10px; gap: 4px; }
  .nav-toggle { padding: 6px; } .nav-toggle span { width: 20px; }
}
@media (max-width: 400px) { .nav-cta .label-full { display: none; } .nav-cta .label-short { display: inline; } }

/* Footer (chrome.js-injected <footer class="foot">) */
.foot { position: relative; z-index: 1; background: #1e1e1e; color: #f4f2ef; }
.foot-inner { max-width: 1180px; margin: 0 auto; padding: 56px 60px 28px; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(244,242,239,0.10); }
.foot-top.foot-top-wide { grid-template-columns: 240px repeat(5, 1fr); gap: 32px; }
.foot-brand-link { display: inline-block; text-decoration: none; color: inherit; }
.foot-brand-link:hover { opacity: 0.85; }
.foot-brand-logo img { width: 120px; height: auto; display: block; }
.foot .foot-tagline { margin-top: 16px; font-size: 13.5px; color: rgba(244,242,239,0.65); line-height: 1.5; max-width: 280px; }
.foot-col { display: flex; flex-direction: column; }
.foot-col-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,242,239,0.50); font-weight: 600; margin-bottom: 14px; }
.foot-col-title.is-sub { margin-top: 22px; }
.foot-col a { font-size: 13px; color: rgba(244,242,239,0.78); padding: 5px 0; transition: color 0.15s; }
.foot-col a:hover { color: #f4f2ef; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; font-size: 12.5px; color: rgba(244,242,239,0.50); }
.foot-bottom a { color: rgba(244,242,239,0.65); transition: color 0.15s; }
.foot-bottom a:hover { color: #f4f2ef; }
.foot-bottom-legal .sep { color: rgba(244,242,239,0.30); margin: 0 6px; }
@media (max-width: 900px) {
  .foot-inner { padding: 36px 20px 20px; }
  .foot-top, .foot-top.foot-top-wide { grid-template-columns: 1fr 1fr; gap: 24px; }
  .foot-bottom { flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 520px) { .foot-top, .foot-top.foot-top-wide { grid-template-columns: 1fr; } }

/* Pill CTA used in page markup (.v2-submit) — identical to .ds-btn. */
.v2-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; height: 44px; font-family: var(--sans); font-size: 14px;
  font-weight: 500; letter-spacing: 0.01em; color: #ffffff; background: var(--cta-bg);
  border: 0; border-radius: 999px; cursor: pointer; transition: background 0.15s;
  white-space: nowrap; text-decoration: none;
}
.v2-submit:hover { background: var(--cta-bg-h); }
.v2-submit .arrow { transition: transform 0.15s; display: inline-block; }
.v2-submit:hover .arrow { transform: translateX(2px); }


/* ══════════════════════════════════════════════════════════════════════════════
   Use-case page archetype (ported from use-cases.css, RE-TOKENED + ratified type)
   ══════════════════════════════════════════════════════════════════════════════
   Child-page components for /use-cases/* subpages. Structure preserved verbatim so
   page markup is unchanged; the brand-unifying edits are: hero h1 → weight 600 /
   clamp(28,3.4vw,40) (was 900/48); section h2 → weight 600 / clamp(22,2.6vw,29)
   (was 800/38); eyebrows → weight 600. Everything else inherits the ratified palette
   through the aliases above. */
.uc-breadcrumb { padding: 20px 24px 0; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.uc-breadcrumb a { color: var(--ink-3); text-decoration: none; transition: color var(--transition-normal); }
.uc-breadcrumb a:hover { color: var(--ink-2); }
.uc-breadcrumb-sep { opacity: 0.5; font-size: 11px; }
.uc-breadcrumb-current { color: var(--ink-2); }

.uc-hero { padding: 72px 24px 64px; text-align: center; background: var(--paper); }
.uc-hero-inner { max-width: 720px; margin: 0 auto; }
.uc-hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
/* RATIFIED: weight 600, ratified scale (was 900 / clamp(30,4.5vw,48)). */
.uc-hero h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 20px; }
.uc-hero-sub { font-size: 17px; color: var(--ink-2); line-height: 1.7; max-width: var(--ds-prose); margin: 0 auto 32px; text-wrap: pretty; }

.uc-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; text-align: center; }

.uc-trust { padding: 48px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.uc-trust-inner { max-width: 860px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.uc-trust-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 10px 18px 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.uc-trust-badge svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-3); }

.uc-pain { padding: 80px 24px; }
.uc-pain-inner { max-width: var(--max); margin: 0 auto; }
/* RATIFIED: weight 600, ratified scale (was 800 / clamp(26,3.2vw,38)). */
.uc-pain h2 { font-size: clamp(22px, 2.6vw, 29px); font-weight: 600; letter-spacing: -0.02em; text-align: center; margin-bottom: 16px; }
.uc-pain > .uc-pain-inner > p { font-size: 16px; color: var(--ink-2); text-align: center; line-height: 1.7; max-width: var(--ds-prose); margin: 0 auto 40px; text-wrap: pretty; }
.uc-pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.uc-pain-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px; transition: border-color var(--transition-normal); }
.uc-pain-card:hover { border-color: var(--line-2); }
.uc-pain-card-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.uc-pain-card-icon svg { width: 18px; height: 18px; }
.uc-pain-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.uc-pain-card p { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

.uc-mid-cta { padding: 48px 24px; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.uc-mid-cta-inner { max-width: var(--ds-prose); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.uc-mid-cta p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin: 0; text-wrap: pretty; }

.uc-how { padding: 80px 24px; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uc-how-inner { max-width: var(--max); margin: 0 auto; }
.uc-how h2 { font-size: clamp(22px, 2.6vw, 29px); font-weight: 600; letter-spacing: -0.02em; text-align: center; margin-bottom: 48px; }
.uc-how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.uc-how-step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px; transition: border-color var(--transition-normal); }
.uc-how-step:hover { border-color: var(--line-2); }
.uc-how-step-num { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; margin-bottom: 16px; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); color: var(--ink-3); }
.uc-how-step h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.uc-how-step p { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

.uc-compare { padding: 80px 24px; }
.uc-compare-inner { max-width: 860px; margin: 0 auto; }
.uc-compare h2 { font-size: clamp(22px, 2.6vw, 29px); font-weight: 600; letter-spacing: -0.02em; text-align: center; margin-bottom: 40px; }
.uc-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: calc(100vw - 48px); }
.uc-compare-table { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.uc-compare-table thead th { padding: 14px 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--line-2); text-align: left; }
.uc-compare-table thead th:first-child { color: var(--ink-3); background: var(--paper-2); }
.uc-compare-table .col-diy { color: var(--ink-3); background: rgba(239,68,68,0.03); }
.uc-compare-table .col-generic { color: var(--ink-3); background: rgba(245,158,11,0.03); }
.uc-compare-table .col-delist { color: var(--ink-3); background: rgba(34,197,94,0.04); }
.uc-compare-table td { padding: 14px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.uc-compare-table tbody tr:last-child td { border-bottom: none; }
.uc-compare-table td:first-child { font-weight: 600; color: var(--ink); }
.uc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.uc-pill-yes { background: rgba(34,197,94,0.15); color: var(--ink-3); }
.uc-pill-no { background: rgba(239,68,68,0.12); color: #c96442; }
.uc-pill-partial { background: var(--paper-2); color: var(--ink-3); }

.uc-faq { padding: 80px 24px; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uc-faq-inner { max-width: 760px; margin: 0 auto; }
.uc-faq h2 { font-size: clamp(22px, 2.6vw, 29px); font-weight: 600; letter-spacing: -0.02em; text-align: center; margin-bottom: 40px; }
.uc-faq-list { display: flex; flex-direction: column; gap: 10px; }
.uc-faq-item { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.uc-faq-item.open { border-color: rgba(99,102,241,0.25); box-shadow: 0 0 20px rgba(99,102,241,0.05), 0 6px 24px rgba(0,0,0,0.25); }
.uc-faq-q { width: 100%; background: none; border: none; padding: 18px 20px; font-size: 15px; font-weight: 600; color: var(--ink); font-family: var(--sans); text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: color var(--transition-normal); }
.uc-faq-q:hover { color: var(--ink-3); }
.uc-faq-q-text { flex: 1; }
.uc-faq-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-3); transition: transform var(--transition-slow), color var(--transition-normal); }
.uc-faq-item.open .uc-faq-chevron { transform: rotate(180deg); color: var(--ink-3); }
.uc-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.uc-faq-item.open .uc-faq-a { grid-template-rows: 1fr; }
.uc-faq-a-inner { overflow: hidden; }
.uc-faq-a-content { padding: 0 20px 20px; font-size: 14px; color: var(--ink-2); line-height: 1.75; }

.uc-related { padding: 72px 24px; }
.uc-related-inner { max-width: var(--max); margin: 0 auto; }
.uc-related h2 { font-size: 14px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 20px; text-align: center; }
.uc-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 860px; margin: 0 auto; }
.uc-page-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; text-decoration: none; transition: border-color var(--transition-normal), transform var(--transition-slow), box-shadow var(--transition-slow); display: flex; flex-direction: column; }
.uc-page-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.10); }
.uc-page-card-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; color: var(--ink-3); }
.uc-page-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.uc-page-card p { font-size: 13px; color: var(--ink-2); line-height: 1.65; flex: 1; }
.uc-page-card-arrow { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-top: 16px; display: flex; align-items: center; gap: 4px; }
.uc-page-card-arrow svg { width: 14px; height: 14px; transition: transform var(--transition-normal); }
.uc-page-card:hover .uc-page-card-arrow svg { transform: translateX(3px); }
.uc-tag-audience, .uc-tag-situation, .uc-tag-profession { color: var(--ink-3); }

.uc-final-cta { padding: 80px 24px; text-align: center; background: var(--paper); }
.uc-final-cta h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; }
.uc-final-cta p { font-size: 16px; color: var(--ink-2); max-width: var(--ds-prose); margin: 0 auto 28px; line-height: 1.7; text-wrap: pretty; }
.uc-final-cta-sub { font-size: 13px; color: var(--ink-3); margin-top: 16px; }

@media (max-width: 768px) { .uc-hero { padding: 56px 24px 48px; } }
@media (max-width: 640px) {
  .uc-related-grid { grid-template-columns: 1fr; }
  .uc-compare-table { font-size: 12px; min-width: 480px; }
  .uc-compare-table th, .uc-compare-table td { padding: 10px 12px; }
}
@media (max-width: 480px) { .uc-trust-inner { gap: 8px; } .uc-trust-badge { padding: 8px 14px 8px 10px; font-size: 12px; } }


/* ══════════════════════════════════════════════════════════════════════════════
   Heading orphan policy — text-wrap: balance
   ══════════════════════════════════════════════════════════════════════════════
   Stops a single trailing word ("...within / weeks") from widowing onto its own
   line. The browser balances line lengths so multi-line headings break evenly.
   Copy-agnostic (no manual &nbsp;), so it holds across every page regardless of
   the heading text. Applies only to display headings; eyebrows/labels are single
   line and excluded. */
.ds-hero h1, .ds-h2, .ds-h3, .ds-final-cta h2,
.uc-hero h1, .uc-pain h2, .uc-how h2, .uc-compare h2, .uc-faq h2, .uc-final-cta h2,
.feat-hero h1, .feat-how h2, .feat-details h2, .feat-problem h2, .cta-section h2 {
  text-wrap: balance;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Product / features page archetype (ported from editorial.css, RE-TOKENED + ratified)
   ══════════════════════════════════════════════════════════════════════════════
   Used by /features/* pages (body.layout-product). Structure preserved; brand-unifying
   edits: feat-hero h1 → weight 600 / clamp(28,3.4vw,40) (was 900/48); section h2s →
   weight 600 / clamp(22,2.6vw,29) (was 800/38); .cta-inline → 999px pill (decision 1a,
   was 8px rect). The .layout-product type ramp was already weight-600 (calibrated to
   index), ported as-is. Page-specific inline <style> blocks (convo mock, surfaces,
   channels, tiers, diff cards) stay inline and resolve against the aliases above. */

/* Product layout wrapper */
.layout-product { --max: 1000px; }
.layout-product .product-main { max-width: 1180px; margin: 0 auto; padding: 0 60px; }
.layout-product h1 { font-family: var(--sans); font-weight: 600; font-size: clamp(28px, 3.6vw, 35px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.layout-product h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.layout-product h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--ink); }
.layout-product p { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
@media (max-width: 768px) { .layout-product .product-main { padding: 0 20px; } }

/* Bottom CTA section (shared) */
.cta-section { text-align: center; padding: 80px var(--section-gutter, 24px); }
.cta-section h2 { font-size: clamp(22px, 2.6vw, 29px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; }
.cta-section p { font-size: 16px; color: var(--ink-2); max-width: var(--ds-prose); margin: 0 auto 24px; line-height: 1.6; text-wrap: pretty; }
.cta-sub { font-size: 13px; color: var(--ink-3); margin-top: 20px; }
/* RATIFIED: 999px pill (was 8px rect) — matches .v2-submit / .ds-btn. */
.cta-inline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cta-bg); color: #ffffff; border: 0; border-radius: 999px;
  padding: 12px 22px; height: 44px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  font-family: var(--sans); text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.cta-inline:hover { background: var(--cta-bg-h); }

/* Feature hero */
.feat-hero { padding: 88px var(--section-gutter, 24px) 72px; text-align: center; background: var(--paper); }
/* RATIFIED: weight 600, ratified scale (was 900 / clamp(30,4.5vw,48)). */
.feat-hero h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 20px; max-width: var(--max); margin-left: auto; margin-right: auto; }
.feat-hero-sub { font-family: var(--serif-accent); font-weight: 400; font-size: 17px; line-height: 1.45; color: var(--ink-3); max-width: var(--ds-prose); margin: 0 auto 32px; text-wrap: pretty; }

/* Feature steps (numbered) */
.feat-how { padding: 80px var(--section-gutter, 24px); }
.feat-how-inner { max-width: var(--max); margin: 0 auto; }
.feat-how h2 { font-size: clamp(22px, 2.6vw, 29px); font-weight: 600; letter-spacing: -0.02em; text-align: center; margin-bottom: 48px; }
.feat-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 24px; }
.feat-step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px; position: relative; transition: border-color var(--transition-normal); }
.feat-step:hover { border-color: var(--line-2); }
.feat-step-num { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; margin-bottom: 16px; background: var(--ink); color: #fafaf7; }
.feat-step h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feat-step p { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* Problem statement (2-col) */
.feat-problem { padding: 72px var(--section-gutter, 24px); background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feat-problem-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feat-problem h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 16px; }
.feat-problem p { font-size: 15px; color: var(--ink-2); line-height: 1.75; margin-bottom: 12px; }
.feat-problem-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feat-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; text-align: center; }
.feat-stat-num { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.feat-stat-label { font-size: 12px; color: var(--ink-2); }
@media (max-width: 768px) { .feat-problem-inner { grid-template-columns: 1fr; gap: 32px; } }

/* Detail card grid */
.feat-details { padding: 72px var(--section-gutter, 24px); background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feat-details-inner { max-width: var(--max); margin: 0 auto; }
.feat-details h2 { font-size: clamp(22px, 2.6vw, 29px); font-weight: 600; letter-spacing: -0.02em; text-align: center; margin-bottom: 48px; }
.feat-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feat-detail-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; transition: border-color var(--transition-normal); }
.feat-detail-card:hover { border-color: var(--line-2); }
.feat-detail-icon { width: 20px; height: 20px; margin-bottom: 12px; }
.feat-detail-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.feat-detail-card p { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
@media (max-width: 640px) { .feat-detail-grid { grid-template-columns: 1fr; } }

/* "Explore other features" grid */
.feat-others { padding: 0 var(--section-gutter, 24px) 72px; }
.feat-others-inner { max-width: var(--max); margin: 0 auto; }
.feat-others h3 { font-size: 14px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 20px; text-align: center; }
.feat-others-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin: 0 auto; }
.feat-others-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; text-decoration: none; transition: border-color var(--transition-normal); display: flex; align-items: flex-start; gap: 12px; }
.feat-others-card:hover { border-color: var(--line-2); }
.feat-others-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--ink-3); }
.feat-others-card strong { font-size: 14px; font-weight: 700; display: block; margin-bottom: 4px; color: var(--ink); }
.feat-others-card span { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 520px) { .feat-others-grid { grid-template-columns: 1fr; } }


/* ══════════════════════════════════════════════════════════════════════════════
   Prose / article archetype (ported from editorial.css §6, re-tokened)
   ══════════════════════════════════════════════════════════════════════════════
   Used by /learn/* articles (body.layout-prose). Already weight-600 / ratified in
   editorial.css (calibrated to index), so this is a faithful port. These
   `.layout-prose .X` rules intentionally out-specify the per-article inline <style>
   shadow-stylesheets (which redeclare .article/.at-a-glance/.faq/.toc/.bottom-cta at
   lower specificity) — exactly as editorial.css did — so migrated pages render
   unchanged. Page-specific inline extras (.snippet-box, .broker-table, .related-*,
   .mid-cta) are not in the archetype and keep rendering from inline. */
.layout-prose .article { max-width: 720px; margin: 0 auto; padding: 24px 60px 96px; }
.layout-prose .article h1 { font-family: var(--sans); font-weight: 600; font-size: clamp(28px, 3.6vw, 35px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 16px 0 28px; }
.layout-prose .article h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 44px 0 16px; scroll-margin-top: 24px; }
.layout-prose .article h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--ink); margin: 28px 0 12px; }
.layout-prose .article p { font-size: 15px; line-height: 1.6; color: var(--ink-3); margin: 0 0 18px; }
.layout-prose .article ul, .layout-prose .article ol { margin: 0 0 22px 24px; padding: 0; }
.layout-prose .article li { font-size: 15px; line-height: 1.6; color: var(--ink-3); margin-bottom: 10px; }
.layout-prose .article strong { color: var(--ink); font-weight: 600; }
.layout-prose .article p a, .layout-prose .article li a, .layout-prose .article td a, .layout-prose .article dd a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ink-4); transition: text-decoration-color 0.15s; }
.layout-prose .article p a:hover, .layout-prose .article li a:hover, .layout-prose .article td a:hover, .layout-prose .article dd a:hover { text-decoration-color: var(--ink); }
.layout-prose .article code { background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--ink); }
.layout-prose .article hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

.layout-prose .at-a-glance { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 26px 30px 22px; margin: 24px 0 32px; }
.layout-prose .at-a-glance-title { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.layout-prose .at-a-glance ul { margin: 0 0 16px 22px; }
.layout-prose .at-a-glance li { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 6px; }
.layout-prose .at-a-glance .meta-row { display: flex; gap: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-4); }

.layout-prose .toc { background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 22px 28px; margin: 0 0 36px; }
.layout-prose .toc-title { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px; }
.layout-prose .toc ol { margin: 0; padding-left: 22px; }
.layout-prose .toc li { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0; }
.layout-prose .toc a { color: var(--ink-2); text-decoration: none; transition: color 0.15s; }
.layout-prose .toc a:hover { color: var(--ink); text-decoration: underline; }

.layout-prose .compare-table { width: 100%; border-collapse: collapse; margin: 16px 0 28px; font-size: 15px; }
.layout-prose .compare-table th, .layout-prose .compare-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.layout-prose .compare-table th { font-weight: 600; color: var(--ink); background: var(--paper-2); }
.layout-prose .compare-table td { color: var(--ink-2); }

.layout-prose .faq { margin: 20px 0 32px; }
.layout-prose .faq-item { border-top: 1px solid var(--line); padding: 14px 0; }
.layout-prose .faq-item:last-of-type { border-bottom: 1px solid var(--line); }
.layout-prose .faq-item summary { cursor: pointer; list-style: none; font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink); padding: 4px 0; position: relative; padding-right: 32px; }
.layout-prose .faq-item summary::-webkit-details-marker { display: none; }
.layout-prose .faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--ink-4); line-height: 1; transition: transform 0.2s ease; }
.layout-prose .faq-item[open] summary::after { content: '–'; }
.layout-prose .faq-body { padding: 8px 0 4px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }

.layout-prose .bottom-cta { margin: 56px 0 16px; }
.layout-prose .bottom-cta-box { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 36px 32px; text-align: center; }
.layout-prose .bottom-cta-box h2 { font-family: var(--sans); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--ink); }
.layout-prose .bottom-cta-box p { font-size: 16px; color: var(--ink-3); max-width: 480px; margin: 0 auto 22px; line-height: 1.6; }

.section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }


/* ══════════════════════════════════════════════════════════════════════════════
   Use-case HUB components (ported from use-cases.css, re-tokened + ratified)
   ══════════════════════════════════════════════════════════════════════════════
   The /use-cases hub + 3 category sub-hubs (audiences/professions/situations) — the
   routing/browse/category surfaces. Child-page components are already above; these are
   the hub-only ones. Ratified: uc-self-select h2 → weight 600 / clamp(22,2.6vw,29)
   (was 800/40); uc-category-hero h1 → weight 600 / clamp(28,3.4vw,40) (was 900/46). */
.uc-self-select { padding: 72px 24px; border-top: 1px solid var(--line); background: var(--paper-2); }
.uc-self-select-inner { max-width: var(--max); margin: 0 auto; }
.uc-self-select-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; text-align: center; }
.uc-self-select h2 { font-size: clamp(22px, 2.6vw, 29px); font-weight: 600; letter-spacing: -0.02em; text-align: center; margin-bottom: 40px; }

.uc-route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.uc-route-card { display: flex; flex-direction: column; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--ink-3); border-radius: var(--r); padding: 14px 18px; text-decoration: none; transition: border-color var(--transition-normal), background var(--transition-normal), transform var(--transition-fast); }
.uc-route-card:hover { background: var(--paper-2); border-color: var(--line-2); transform: translateY(-1px); }
.uc-route-head { display: flex; align-items: center; gap: 8px; }
.uc-route-head svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; color: var(--ink); }
.uc-route-card:hover .uc-route-head svg { opacity: 1; }
.uc-route-card strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.uc-route-card > span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

.uc-route-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.uc-route-col { display: flex; flex-direction: column; gap: 8px; }
.uc-route-col-head { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 0 2px 10px; margin-bottom: 2px; color: var(--ink); border-bottom: 2px solid var(--line-2); }
.uc-route-also { display: flex; flex-direction: column; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.uc-route-also a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-radius: 6px; transition: color var(--transition-normal), background var(--transition-normal); }
.uc-route-also a:hover { color: var(--ink); background: var(--paper-2); }
.uc-route-also a::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; opacity: 0.5; background: var(--ink-3); }
.uc-route-fallback { text-align: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.uc-route-fallback a { font-size: 15px; color: var(--ink-2); text-decoration: none; transition: color var(--transition-normal); }
.uc-route-fallback a strong { color: var(--ink-3); font-weight: 700; }
.uc-route-fallback a:hover { color: var(--ink); }

.uc-hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.uc-hero-ghost { display: inline-block; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 14px 24px; border-radius: var(--r); border: 1px solid var(--line-2); transition: color var(--transition-normal), border-color var(--transition-normal); }
.uc-hero-ghost:hover { color: var(--ink); border-color: var(--ink-3); }

.uc-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.uc-category-hero { padding: 80px 24px 32px; text-align: center; background: var(--paper); }
.uc-category-hero h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 16px; }
.uc-category-hero p { font-size: 17px; color: var(--ink-2); line-height: 1.7; max-width: 600px; margin: 0 auto; }
.uc-category-content { padding: 64px 24px; }
.uc-category-content-inner { max-width: var(--max); margin: 0 auto; }
.uc-category-featured-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; }
.uc-category-all-label { font-size: 14px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 48px 0 20px; }

.uc-trust-compact { padding: 40px 24px; background: var(--paper-2); border-top: 1px solid var(--line); }
.uc-trust-compact-inner { max-width: 700px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font-size: 13px; color: var(--ink-3); }
.uc-trust-compact-item { display: flex; align-items: center; gap: 6px; }
.uc-trust-compact-item svg { width: 14px; height: 14px; color: var(--ink-3); }

.uc-proof { padding: 56px 24px; border-bottom: 1px solid var(--line); }
.uc-proof-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.uc-proof-item { display: flex; align-items: flex-start; gap: 12px; }
.uc-proof-item > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-3); margin-top: 2px; }
.uc-proof-item strong { font-size: 14px; font-weight: 700; color: var(--ink); display: block; margin-bottom: 2px; }
.uc-proof-item span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 768px) {
  .uc-route-cols { grid-template-columns: 1fr; gap: 40px; }
  .uc-route-grid { grid-template-columns: repeat(2, 1fr); }
  .uc-proof-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .uc-route-grid { grid-template-columns: 1fr; }
  .uc-proof-inner { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   v2 email-capture form + page-hero (ported from editorial.css §9, re-tokened)
   ══════════════════════════════════════════════════════════════════════════════
   Used by long-tail layout-product pages (get-started, free, about, tools, etc.).
   .v2-submit was already ported with the chrome; these complete the set.
   v2-page-hero h1 ratified to weight 600 (was 900) for consistency. */
:root { --text-muted: var(--ds-ink-3); }  /* referenced on one page with no inline def */

.v2-page-hero { padding: 72px 24px 64px; text-align: center; background: var(--paper); }
.v2-page-hero-inner { max-width: 720px; margin: 0 auto; }
.v2-page-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.v2-page-hero h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 20px; }
.v2-page-hero-sub { font-size: 17px; color: var(--ink-2); line-height: 1.7; max-width: 600px; margin: 0 auto 32px; }

.v2-email-form { display: flex; align-items: stretch; gap: 8px; max-width: 460px; margin: 40px 0 0; }
.v2-email-form .v2-field { flex: 1; min-width: 0; }
.v2-email-form input[type="email"] { width: 100%; padding: 12px 18px; font-family: var(--sans); font-size: 14px; color: var(--ink); background: #ffffff; border: 1px solid var(--autopilot); border-radius: 999px; outline: none; transition: border-color 0.15s; height: 44px; box-sizing: border-box; }
.v2-email-form input[type="email"]:focus { border-color: var(--autopilot-d); }
.v2-email-form input[type="email"]::placeholder { color: var(--ink-4); }
.v2-email-form .v2-submit { flex: 0 0 auto; }
.v2-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; display: none; animation: v2-spin 0.8s linear infinite; }
.v2-email-form.is-loading .v2-spin { display: inline-block; }
.v2-email-form.is-loading .arrow { display: none; }
@keyframes v2-spin { to { transform: rotate(360deg); } }
.v2-form-error { display: none; color: var(--paper-accent, #c96442); font-size: 13px; margin-top: 8px; }
.v2-form-error.show { display: block; }
.v2-form-success { background: rgba(0,0,0,0.04); border: 1px solid var(--line); padding: 14px 16px; border-radius: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-top: 12px; max-width: 460px; }