/* ==========================================================================
   businesstoagent.com — B2A design system
   Semafor-inspired editorial styling: cream ground, warm ink, navy Helvetica
   kickers, serif headlines, dashed dividers, Semafor red accents.
   Zero-build: one stylesheet shared across all pages. Class contract is
   unchanged — only the visual language differs.
   ========================================================================== */

/* Hanken Grotesk is the free on-page STAND-IN for Sharp Type's paid "Hauss".
   Drop licensed/trial Hauss files into /assets/fonts/hauss/ (see @font-face
   below) and the real Hauss takes over automatically — no other change needed. */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&display=swap");

/* ---- Hauss (Sharp Type) trial — Regular / Bold / Black only ----
   Trial OTFs live in /assets/fonts/hauss/. Weight 600 (subheads) maps up to
   Bold and 900 maps to Black automatically, so three faces cover the whole UI.
   Swap these .otf trial files for licensed .woff2 web fonts before production. */
@font-face {
  font-family: "Hauss"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/hauss/Hauss-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Hauss"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/hauss/Hauss-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Hauss"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("/assets/fonts/hauss/Hauss-Black.otf") format("opentype");
}
@font-face {
  font-family: "Hauss"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("/assets/fonts/hauss/Hauss-Italic.otf") format("opentype");
}

:root {
  /* Semafor palette */
  --cream: #faf5f0;        /* page ground (warm off-white) */
  --cream-2: #fffdfa;      /* raised card surface (near-white warm) */
  --cream-3: #f2ebe3;      /* sunken panel / hover tint */
  --ink: #1f1d1a;          /* the single ink: all text, accents, icons */
  /* Every foreground tone collapses to the one ink per request.
     Only the warm surfaces and the neutral hairline remain non-ink. */
  --ink-soft: #1f1d1a;     /* (was muted) — now ink */
  --ink-faint: #1f1d1a;    /* (was caption grey) — now ink */
  --navy: #1f1d1a;         /* (was kicker navy) — now ink */
  --red: #1f1d1a;          /* (was live red) — now ink */
  --teal: #1f1d1a;         /* (was link teal) — now ink */
  --terra: #1f1d1a;        /* (was accent terracotta) — now ink */
  --rule: #e5dcd0;         /* soft warm hairline divider (structural, not text) */

  /* Type — Hauss is the site workhorse (headlines + body); Hanken Grotesk is
     the free stand-in until Hauss files are installed. Mono is kept only for
     technical labels (ticker, kickers of code, stepper) and code blocks. */
  --font-serif: "Hauss", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-sans:  "Hauss", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --maxw: 1120px;
  --maxw-prose: 900px;   /* body content measure (was 720px; +25%) */
  --radius: 0px;           /* Semafor is square-cornered and rule-based */
  --radius-sm: 2px;
  --pad-x: clamp(20px, 5vw, 48px);

  --ticker-h: 40px;
  --nav-h: 66px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;        /* avoid single-word last-line orphans everywhere */
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 0.4em;
  font-weight: 600;
  color: var(--ink);
}

p { margin: 0 0 1em; }

/* Balance short display / lead blocks across their lines (no orphans).
   Longer body text is handled by text-wrap: pretty inherited from body. */
h1, h2, h3, h4,
.hero__def, .hero__expand,
.definition dd, .lead-in,
.card p, .ref p, .breakdown__row p, .evo-node p,
.cta p, .stepper__caption, .stat__label {
  text-wrap: balance;
}

::selection { background: rgba(31, 29, 26, 0.14); color: var(--ink); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.prose { max-width: var(--maxw-prose); }

/* ---------- Ticker (breaking-news strip, editorial) ---------- */
.ticker {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--ticker-h);
  display: flex;
  align-items: center;
  background: var(--cream-2);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 12.5px;
}
.ticker__label {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--red);
  color: #faf5f0;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}
.ticker__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #faf5f0;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }

.ticker__viewport { flex: 1 1 auto; overflow: hidden; position: relative; }
.ticker__viewport::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 60px;
  background: linear-gradient(90deg, rgba(255,253,250,0), var(--cream-2));
  pointer-events: none;
}
.ticker__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll 60s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  color: var(--ink-soft);
  border-right: 1px dashed var(--rule);
  transition: color 0.15s ease;
}
.ticker__item:hover { color: var(--ink); }
.ticker__src { color: var(--navy); font-weight: 700; }
.ticker__item svg { opacity: 0.5; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__viewport { overflow-x: auto; }
}

/* ---------- Nav (masthead) ---------- */
.nav {
  position: sticky;
  top: var(--ticker-h);
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(250, 245, 240, 0.9);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--ink);
}
.nav__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex; align-items: center; gap: 24px;
}
.brand {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
}
.brand b { color: var(--ink); font-weight: 800; }
.brand span {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nav__links { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav__links a {
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.15s;
}
.nav__links a:hover { color: var(--navy); }
.nav__cta {
  background: var(--ink) !important;
  color: var(--cream) !important;
  padding: 9px 16px !important;
}
.nav__cta:hover { background: var(--navy) !important; color: var(--cream) !important; }

.nav__toggle {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--ink);
  border-radius: 0; color: var(--ink);
  width: 40px; height: 40px; cursor: pointer;
  align-items: center; justify-content: center;
}
@media (max-width: 820px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed;
    inset: calc(var(--ticker-h) + var(--nav-h)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--pad-x) 16px;
    background: var(--cream-2);
    border-bottom: 1px solid var(--ink);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }
  .nav__links[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav__links a { padding: 13px 4px; font-size: 15px; border-bottom: 1px dashed var(--rule); }
  .nav__cta { text-align: center; margin-top: 10px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: var(--navy); border-color: var(--navy); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

/* ---------- Section scaffolding ---------- */
section { padding: clamp(48px, 7vw, 88px) 0; }
.section-tight { padding: clamp(36px, 5vw, 64px) 0; }

.kicker {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.kicker::before {
  content: "";
  width: 24px; height: 2px; background: var(--red);
}

.section-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); }
.section-lead {
  color: var(--ink-soft);
  font-size: clamp(17px, 2vw, 19px);
  max-width: 860px;
}

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(36px, 5vw, 64px); position: relative; }
.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
}
.hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(96px, 24vw, 300px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  margin: 0 0 0.14em;
  color: var(--ink);
  font-weight: 800;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.06em;
}
.hero__expand {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 3vw, 30px);
  color: var(--ink-soft);
  margin: 0.5em 0 26px;
  font-weight: 500;
}
.hero__expand b { color: var(--ink); font-weight: 600; font-style: normal; }
.hero__def {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.22;
  max-width: 1040px;
  text-wrap: balance;
  font-weight: 500;
  margin-bottom: 22px;
  color: var(--ink);
}
.hero__def .hl { color: var(--navy); font-weight: 600; }
.hero__sub { font-family: var(--font-sans); color: var(--ink-soft); max-width: 900px; margin-bottom: 34px; font-size: 17px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Ask-AI bar (kick a prompt to each platform) ---------- */
.askai {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 18px 0;
}
.askai__label { display: flex; flex-direction: column; gap: 3px; }
.askai__kicker {
  font-family: var(--font-sans);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; color: var(--ink);
}
.askai__text {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 27px); font-weight: 600; color: var(--ink);
  line-height: 1.1;
}
.askai__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.askai__btn {
  width: 50px; height: 50px;
  border: 1px solid var(--ink);
  background: var(--cream-2);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.askai__btn:hover { background: var(--ink); color: var(--cream); }
.askai__btn svg { width: 22px; height: 22px; display: block; }
@media (max-width: 560px) {
  .askai { justify-content: flex-start; }
  .askai__btn { width: 46px; height: 46px; }
}

/* ---------- Animated agentic-web graphics (node net + stepper) ---------- */
.agentviz { display: grid; gap: 14px; }

/* Node network */
.netgraph {
  border: 1px solid var(--ink);
  background: var(--cream-2);
  padding: clamp(14px, 3vw, 30px);
  overflow: hidden;
}
.netgraph svg { width: 100%; height: auto; display: block; }
.netgraph .edge { stroke: var(--rule); stroke-width: 1.5; fill: none; }
.netgraph .route { stroke: var(--rule); stroke-width: 2; fill: none; }
.netgraph .route-live {
  stroke: var(--ink); stroke-width: 2; fill: none;
  stroke-dasharray: 5 9;
  animation: edgeflow 1.2s linear infinite;
}
@keyframes edgeflow { to { stroke-dashoffset: -28; } }
.netgraph .node { fill: var(--rule); transform-box: fill-box; transform-origin: center; }
.netgraph .node.on { fill: var(--ink); animation: nodepulse 2.6s ease-in-out infinite; }
.netgraph .node.on.b { animation-delay: .55s; }
.netgraph .node.on.c { animation-delay: 1.1s; }
@keyframes nodepulse {
  0%, 100% { transform: scale(.8); opacity: .7; }
  50% { transform: scale(1.15); opacity: 1; }
}
.netgraph .pulse {
  fill: var(--ink);
  offset-path: path("M250 70 L430 120 L640 180 L840 158 L905 168");
  animation: pulsemove 2.6s linear infinite;
}
.netgraph .pulse.p2 { animation-delay: 1.3s; }
@keyframes pulsemove { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.netgraph .hub { fill: var(--ink); }
.netgraph .hub-label { fill: var(--cream); font-family: var(--font-serif); font-weight: 800; font-size: 27px; }

/* Agent-scan graphic: how an agent reads a product page */
.scan { border: 1px solid var(--ink); background: var(--cream-2); padding: clamp(14px, 3vw, 30px); overflow: hidden; }
.scan svg { width: 100%; height: auto; display: block; }
.scan-frame { fill: var(--cream); stroke: var(--ink); stroke-width: 2; }
.scan-div { stroke: var(--ink); stroke-width: 1.5; }
.scan-dot { fill: var(--ink); }
.scan-url { fill: var(--cream-3); stroke: var(--rule); stroke-width: 1; }
.scan-urltext { font-family: var(--font-mono); font-size: 13px; fill: var(--ink-soft); }
.scan-img { fill: var(--cream-3); stroke: var(--ink); stroke-width: 1.5; }
.scan-imgicon { fill: none; stroke: var(--ink-faint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.scan-fill { fill: var(--ink); }
.scan-line { fill: var(--rule); }
.scan-btn { fill: var(--ink); }
.scan-btntext { font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; fill: var(--cream); }
.scan-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; fill: var(--ink-soft); }
.scan-name { font-family: var(--font-sans); font-weight: 700; font-size: 32px; fill: var(--ink); }
.scan-price { font-family: var(--font-sans); font-weight: 700; font-size: 30px; fill: var(--ink); }
.scan-desc { font-family: var(--font-sans); font-size: 16.5px; fill: var(--ink-soft); }
.scan-chip { fill: var(--cream); stroke: var(--ink); stroke-width: 2; }
.scan-chiptext { font-family: var(--font-sans); font-weight: 700; font-size: 16px; fill: var(--ink); }
/* Orange detection boxes appear one after another, looping. */
.det { opacity: 0; transform-box: fill-box; transform-origin: center; animation: detScan 6s ease-in-out infinite; }
.det.d2 { animation-delay: 0.5s; }
.det.d3 { animation-delay: 1s; }
.det.d4 { animation-delay: 1.5s; }
.det.d5 { animation-delay: 2s; }
.det.d6 { animation-delay: 2.5s; }
.det-box { fill: none; stroke: #f26a21; stroke-width: 2.5; }
.det-tag rect { fill: #f26a21; }
.det-tag text { font-family: var(--font-mono); font-size: 12px; font-weight: 700; fill: #fff; }
@keyframes detScan {
  0% { opacity: 0; transform: scale(0.94); }
  5% { opacity: 1; transform: scale(1); }
  82% { opacity: 1; transform: scale(1); }
  90% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .det { opacity: 1; animation: none; transform: none; }
}

/* Monospace stepper with looping return arrow */
.stepper__row { display: flex; align-items: stretch; }
.step {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--rule);
  background: var(--cream-2);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 18px;
}
.step__marker { width: 12px; height: 12px; background: var(--rule); transform-box: fill-box; transform-origin: center; }
.step__label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step__arrow { flex: 0 0 auto; display: flex; align-items: center; padding: 0 10px; color: var(--ink); font-family: var(--font-mono); font-size: 15px; }
.step.s1, .step.s1 .step__marker { animation: stepBox 8s infinite 0s; }
.step.s2, .step.s2 .step__marker { animation: stepBox 8s infinite 2s; }
.step.s3, .step.s3 .step__marker { animation: stepBox 8s infinite 4s; }
.step.s4, .step.s4 .step__marker { animation: stepBox 8s infinite 6s; }
.step { animation-name: stepBorder; }
.step.s1 { animation: stepBorder 8s infinite 0s; }
.step.s2 { animation: stepBorder 8s infinite 2s; }
.step.s3 { animation: stepBorder 8s infinite 4s; }
.step.s4 { animation: stepBorder 8s infinite 6s; }
.step.s1 .step__marker { animation: stepMark 8s infinite 0s; }
.step.s2 .step__marker { animation: stepMark 8s infinite 2s; }
.step.s3 .step__marker { animation: stepMark 8s infinite 4s; }
.step.s4 .step__marker { animation: stepMark 8s infinite 6s; }
@keyframes stepBorder { 0%, 17% { border-color: var(--ink); } 25%, 100% { border-color: var(--rule); } }
@keyframes stepMark { 0%, 17% { background: var(--ink); transform: scale(1.25); } 25%, 100% { background: var(--rule); transform: scale(1); } }

.stepper__loop { line-height: 0; }
.stepper__loop svg { width: 100%; height: 42px; display: block; }
.stepper__loop .loop-line { stroke: var(--rule); stroke-width: 1.5; fill: none; stroke-dasharray: 5 7; animation: edgeflow 1.6s linear infinite reverse; }
.stepper__loop .loop-arrow { fill: var(--ink); }
.stepper__caption { font-family: var(--font-sans); text-align: center; color: var(--ink); max-width: 700px; margin: 20px auto 0; }

@media (prefers-reduced-motion: reduce) {
  .netgraph .route-live, .netgraph .node.on, .stepper__loop .loop-line { animation: none; }
  .netgraph .pulse { display: none; }
  .step, .step .step__marker { animation: none !important; }
  .step.s1 { border-color: var(--ink); }
  .step.s1 .step__marker { background: var(--ink); }
}
@media (max-width: 720px) {
  .stepper__row { flex-direction: column; }
  .step__arrow { transform: rotate(90deg); padding: 6px 0; justify-content: center; }
  .step__label { white-space: normal; }
  .stepper__loop { display: none; }
}

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 0; }
.grid--2, .grid--3 {
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 > *, .grid--3 > * {
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  background: var(--cream-2);
  border: none;
  border-radius: 0;
  padding: 28px 26px;
  overflow: hidden;
  transition: background 0.2s ease;
}
.card::before { display: none; }
.card:hover { background: var(--cream-3); transform: none; }
.card__num {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 12px;
  line-height: 1;
}
.card__icon {
  width: 42px; height: 42px; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--ink);
  margin-bottom: 16px;
  color: var(--navy);
}
.card h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 600; }
.card p { font-family: var(--font-sans); color: var(--ink-soft); font-size: 15.5px; margin-bottom: 0; }
.card__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal);
}
.card__link:hover { gap: 10px; color: var(--navy); }
.card a.card__stretch { position: absolute; inset: 0; }

/* ---------- Definition block ---------- */
.definition {
  border: 1px solid var(--ink);
  border-left: 5px solid var(--navy);
  background: var(--cream-2);
  border-radius: 0;
  padding: 30px 34px;
}
.definition dt {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 12px;
}
.definition dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 500;
}
.definition dd b { color: var(--navy); font-weight: 700; }

/* ---------- Shift / evolution row ---------- */
.evolution { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px; }
.evo-node {
  min-width: 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 24px;
  background: var(--cream-2);
}
.evo-node.is-now { border: 2px solid var(--red); background: var(--cream-3); }
.evo-node h4 { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--ink); }
.evo-node.is-now h4 { color: var(--red); }
.evo-node p { font-family: var(--font-sans); color: var(--ink-soft); font-size: 14.5px; margin: 0; }
.evo-arrow { display: flex; align-items: center; justify-content: center; color: var(--ink-faint); }
@media (max-width: 640px) {
  .evolution { grid-template-columns: 1fr; }
  .evo-arrow { transform: rotate(90deg); }
}

/* ---------- Stat band ---------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
  border-radius: 0; overflow: hidden;
}
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }
.stat { background: var(--cream-2); padding: 32px 28px; border-right: 1px dashed var(--rule); }
.stat:last-child { border-right: none; }
@media (max-width: 640px) { .stat { border-right: none; border-bottom: 1px dashed var(--rule); } }
.stat__num {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.5vw, 62px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
}
.stat__label { font-family: var(--font-sans); color: var(--ink); font-size: 14.5px; margin-top: 12px; }
.stat__src { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; }
.stat__src a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Semafor "breakdown" block ---------- */
.breakdown {
  display: grid; gap: 0;
  border: 1px solid var(--ink);
  border-radius: 0; overflow: hidden;
}
.breakdown__row {
  background: var(--cream-2);
  padding: 24px 28px;
  display: grid; grid-template-columns: 190px 1fr; gap: 26px;
  border-bottom: 1px dashed var(--rule);
}
.breakdown__row:last-child { border-bottom: none; }
@media (max-width: 720px) { .breakdown__row { grid-template-columns: 1fr; gap: 8px; } }
.breakdown__label {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy);
  font-weight: 700;
  padding-top: 4px;
}
.breakdown__row p { font-family: var(--font-sans); margin: 0; color: var(--ink-soft); font-size: 16px; }
.breakdown__row p b { color: var(--ink); font-weight: 700; }

/* ---------- Reference cards ---------- */
.ref { display: flex; flex-direction: column; }
.ref__src {
  font-family: var(--font-sans);
  font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--navy); text-transform: uppercase; font-weight: 700; margin-bottom: 12px;
}
.ref h3 { font-family: var(--font-serif); font-size: 20px; line-height: 1.2; font-weight: 600; }
.ref p { font-family: var(--font-sans); font-size: 14.5px; color: var(--ink-soft); }
.ref__go { margin-top: auto; padding-top: 16px; font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--ink); border-radius: 0; overflow: hidden; }
.faq details { border-bottom: 1px dashed var(--rule); background: var(--cream-2); }
.faq details:last-child { border-bottom: none; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 28px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: color 0.15s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--navy); }
.faq summary .chev { flex: 0 0 auto; transition: transform 0.2s ease; color: var(--red); }
.faq details[open] summary .chev { transform: rotate(45deg); }
.faq__body { padding: 0 28px 26px; font-family: var(--font-sans); color: var(--ink-soft); font-size: 16px; max-width: 760px; }
.faq__body p { margin-bottom: 0.8em; }
.faq__body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* FAQ category headings (grouped, deep FAQ) */
.faq-cat {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 700;
  color: var(--ink);
  margin: 46px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
  display: flex; align-items: baseline; gap: 12px;
}
.faq-cat:first-of-type { margin-top: 10px; padding-top: 0; border-top: none; }
.faq-cat .n {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--ink); flex: 0 0 auto;
}

/* ---------- CTA band (ink block) ---------- */
.cta {
  position: relative;
  border-radius: 0;
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
  overflow: hidden;
  border: none;
  background: var(--ink);
}
.cta::before { display: none; }
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 48px); color: var(--cream); font-weight: 600; }
.cta p { font-family: var(--font-sans); color: rgba(250,245,240,0.82); max-width: 560px; margin-inline: auto; }
.cta .kicker { color: var(--cream); }
.cta .kicker::before { background: var(--red); }
.cta .hero__actions { justify-content: center; }
.cta .btn--primary { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.cta .btn--primary:hover { background: #fff; border-color: #fff; }
.cta .btn--ghost { border-color: var(--cream); color: var(--cream); }
.cta .btn--ghost:hover { background: var(--cream); color: var(--ink); }

/* ---------- Article / guide layout ---------- */
.article-head { padding: clamp(40px, 7vw, 80px) 0 28px; border-bottom: 1px solid var(--ink); }
.breadcrumb { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); margin-bottom: 20px; }
.breadcrumb a { color: var(--navy); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { margin: 0 8px; opacity: 0.5; }

.article-title { font-family: var(--font-serif); font-size: clamp(36px, 6vw, 64px); letter-spacing: -0.01em; line-height: 1.02; max-width: 960px; font-weight: 700; }
.article-meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); margin-top: 20px; }

.article-body { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(48px, 7vw, 88px); }
.article-body h2 { font-family: var(--font-serif); font-size: clamp(26px, 3.6vw, 36px); margin-top: 1.7em; font-weight: 600; }
.article-body h3 { font-family: var(--font-serif); font-size: 23px; margin-top: 1.5em; font-weight: 600; }
.article-body p, .article-body li { font-family: var(--font-sans); color: var(--ink-soft); font-size: 18px; line-height: 1.6; }
.article-body p b, .article-body li b { color: var(--ink); font-weight: 700; }
.article-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body ol.steps { padding-left: 0; }   /* step cards align full-width, not indented */
.article-body li { margin-bottom: 0.5em; }
.article-body li::marker { color: var(--red); }
.article-body hr { border: none; border-top: 1px dashed var(--rule); margin: 2.4em 0; }

.lead-in {
  font-family: var(--font-serif) !important;
  font-size: clamp(21px, 2.6vw, 26px) !important;
  line-height: 1.4;
  color: var(--ink) !important;
  font-weight: 500;
  border-left: 5px solid var(--navy);
  padding-left: 24px;
  margin: 0 0 2em;
}

/* Checklist / step list */
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--cream-2);
  padding: 26px 28px 26px 82px;
  margin-bottom: 14px;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 24px; top: 24px;
  width: 40px; height: 40px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 20px;
  color: var(--cream); background: var(--ink);
}
.steps > li h3 { margin-top: 0; font-family: var(--font-serif); font-size: 22px; font-weight: 600; }
.steps > li p:last-child { margin-bottom: 0; }

/* Code / snippet — light editorial treatment */
pre {
  background: #fffdfa;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 20px 22px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  margin: 1.4em 0;
}
pre .tok-key { color: var(--navy); font-weight: 600; }
pre .tok-str { color: var(--terra); }
pre .tok-com { color: var(--ink-faint); font-style: italic; }
code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--cream-3);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 1px 6px;
  color: var(--ink);
}
.article-body pre code { background: none; border: none; padding: 0; font-size: inherit; }

/* Callout */
.callout {
  border: 1px solid var(--ink);
  background: rgba(31, 29, 26, 0.05);
  border-left: 5px solid var(--ink);
  border-radius: 0;
  padding: 20px 24px;
  margin: 1.6em 0;
}
.callout strong { color: var(--navy); }

/* Table of contents */
.toc {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--cream-2);
  padding: 22px 26px;
  margin: 0 0 2.4em;
}
.toc__title { font-family: var(--font-sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy); font-weight: 700; margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { font-family: var(--font-sans); color: var(--ink-soft); margin-bottom: 7px; }
.toc li::marker { color: var(--red); font-family: var(--font-serif); font-weight: 700; }
.toc a { color: var(--ink-soft); }
.toc a:hover { color: var(--teal); text-decoration: underline; }

/* ---------- Comparison table (knowledge-base pages) ---------- */
.article-body table { width: 100%; border-collapse: collapse; border: 1px solid var(--ink); margin: 1.7em 0; font-family: var(--font-sans); }
.article-body th, .article-body td { border: 1px solid var(--rule); padding: 12px 15px; text-align: left; vertical-align: top; font-size: 15.5px; color: var(--ink); }
.article-body thead th { background: var(--cream-3); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.article-body tbody th { background: var(--cream-2); font-weight: 700; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* ---------- Source / provenance tags ---------- */
.tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; border: 1px solid var(--ink); padding: 2px 7px; margin-right: 8px; vertical-align: middle; }
.provenance { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 2em; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.provenance span { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.provenance b { font-weight: 700; }

/* ---------- Simple form field (readiness index / signup) ---------- */
.field-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 1.5em 0 0.6em; }
.field { flex: 1 1 260px; min-width: 0; border: 1px solid var(--ink); background: var(--cream-2); padding: 14px 16px; font-family: var(--font-sans); font-size: 16px; color: var(--ink); border-radius: 0; }
.field::placeholder { color: var(--ink); opacity: 0.45; }
.field:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.field-note { font-family: var(--font-mono); font-size: 12px; color: var(--ink); opacity: 0.7; margin-top: 10px; }

/* ---------- Footer ---------- */
.footer { border-top: 2px solid var(--ink); padding: 52px 0 40px; margin-top: 48px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; } }
.footer__brand { max-width: 340px; }
.footer__brand p { font-family: var(--font-sans); color: var(--ink-soft); font-size: 14px; margin-top: 12px; }
.footer h4 { font-family: var(--font-sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy); font-weight: 700; margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; }
.footer li a { font-family: var(--font-sans); color: var(--ink-soft); font-size: 14.5px; }
.footer li a:hover { color: var(--ink); text-decoration: underline; }
.footer__base { margin-top: 44px; padding-top: 22px; border-top: 1px dashed var(--rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--ink-faint); font-size: 12px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 56px; }
.eyebrow-center { display: flex; justify-content: center; }
.max-680 { max-width: 680px; }
.muted { color: var(--ink-soft); }