/* ============================================================================
   CallPing marketing theme — "The Signal Path" — redesign 2026-07
   ----------------------------------------------------------------------------
   Reference stylesheet for callping.app (website/). Companion to
   docs/marketing/redesign-2026-07/design-spec.md — the spec is the contract,
   this file is the implementation the builder assembles pages from.

   HARD RULES (do not "fix" these):
   - Text on ANY orange surface is literal #0F172A. Never white, never a var.
     (BRAND.md §6.1 — white-on-orange fails WCAG AA on every brand stop.)
   - No external assets. CSP is script-src 'self'; treat style/img/font the
     same. Fonts are self-hosted from /fonts/.
   - Orange is budgeted: CTAs + signal accents only. If you're reaching for
     orange on a border, icon, or divider "to make it pop" — stop.
   ========================================================================== */

/* ── 0. Fonts (self-hosted) ────────────────────────────────────────────── */
/* e-Ukraine ships in website/public/fonts/ already. Geist Mono must be added
   as a self-hosted woff2 (see design-spec §8.2); until it lands, the stack
   falls back to ui-monospace, which is acceptable. */
@font-face {
  font-family: 'e-Ukraine';
  src: url('/fonts/e-Ukraine-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'e-Ukraine';
  src: url('/fonts/e-Ukraine-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'e-Ukraine';
  src: url('/fonts/e-Ukraine-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Geist Mono @font-face intentionally omitted: the woff2 is not self-hosted
   yet and CSP forbids CDN fonts. The mono stack falls back to ui-monospace
   (sanctioned by design-spec §8.2). If the file lands in /fonts/ later,
   restore: @font-face { font-family:'Geist Mono'; src:url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight:100 900; font-display:swap; } */

/* ── 1. Design tokens ─────────────────────────────────────────────────── */
:root {
  /* Brand primaries — BRAND.md §1.1, canonical, do not drift */
  --cp-primary-from:   #EAA944;
  --cp-primary:        #DF7E21;
  --cp-primary-hover:  #C66B14;
  --cp-primary-active: #A85A0F;
  --cp-accent:         #FDBA56;
  --cp-primary-gradient: linear-gradient(45deg, #EAA944 0%, #DF7E21 100%);
  --cp-wordmark:       #2D2D2D;

  /* Light surfaces — BRAND.md §1.3 */
  --cp-bg:        #F8FAFC;
  --cp-surface:   #FFFFFF;
  --cp-surface-2: #F1F5F9;
  --cp-fg:        #0F172A;
  --cp-muted:     #64748B;
  --cp-border:    rgba(15, 23, 42, 0.12);

  /* Dark surfaces — deep-slate family, hero/nav/CTA-band/footer */
  --sp-dark-0: #0D0F12;   /* canvas */
  --sp-dark-1: #14171C;   /* raised panel (terminal, cards on dark) */
  --sp-dark-2: #1B2027;   /* hover / inset panel */
  --sp-dark-fg:      #F0F2F5;
  --sp-dark-muted:   #9CA3AF;
  --sp-dark-faint:   #6B7280;                    /* fineprint on dark only */
  --sp-dark-border:        rgba(240, 242, 245, 0.09);
  --sp-dark-border-strong: rgba(240, 242, 245, 0.16);

  /* Signal accents (the pulse) */
  --sp-signal:       #EAA944;
  --sp-signal-soft:  rgba(234, 169, 68, 0.35);
  --sp-signal-glow:  rgba(234, 169, 68, 0.55);
  --sp-signal-faint: rgba(234, 169, 68, 0.14);

  /* Grid rhythm */
  --sp-grid-line-light: rgba(15, 23, 42, 0.055);
  --sp-grid-dot-dark:   rgba(240, 242, 245, 0.055);

  /* Semantic — BRAND.md §1.3 light theme */
  --cp-success: #15803D;
  --cp-warning: #B45309;
  --cp-danger:  #B91C1C;
  --cp-info:    #1D4ED8;

  /* Type */
  --sp-font-sans: 'e-Ukraine', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sp-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;

  /* Fluid type scale (mobile → desktop). Desktop targets in comments. */
  --fs-hero: clamp(2.75rem, 2.05rem + 3.5vw, 4.5rem);   /* 44 → 72px */
  --fs-d1:   clamp(2rem, 1.55rem + 2.2vw, 3.25rem);      /* 32 → 52px */
  --fs-d2:   clamp(1.5rem, 1.32rem + 0.9vw, 2rem);       /* 24 → 32px */
  --fs-h4:   1.3125rem;                                  /* 21px */
  --fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);   /* 17 → 20px */
  --fs-base: 1rem;        /* 16px */
  --fs-sm:   0.875rem;    /* 14px */
  --fs-xs:   0.8125rem;   /* 13px */
  --fs-label: 0.75rem;    /* 12px — mono labels / eyebrows */

  /* Spacing (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --sp-section:   clamp(64px, 5vw + 40px, 112px);  /* section vertical pad */
  --sp-gutter:    clamp(20px, 4vw, 32px);          /* page side gutter */

  /* Containers */
  --w-container: 1200px;
  --w-narrow:    760px;
  --w-wide:      1360px;

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

  /* Elevation (light surfaces only; dark uses borders, not shadow) */
  --shadow-card:       0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-card-hover: 0 10px 28px rgba(15, 23, 42, 0.09);
  --shadow-tier:       0 6px 20px rgba(223, 126, 33, 0.10);

  /* Motion */
  --t-fast: 140ms ease;
  --t-med:  220ms ease;
  --pulse-period: 3.2s;

  /* Contextual tokens — light default; .sp-dark re-points them.
     ALL components read these, never the raw palette above (except orange
     CTAs, whose text is literal #0F172A everywhere). */
  --s-bg:       var(--cp-bg);
  --s-surface:  var(--cp-surface);
  --s-surface-2: var(--cp-surface-2);
  --s-fg:       var(--cp-fg);
  --s-muted:    var(--cp-muted);
  --s-border:   var(--cp-border);
  --s-border-strong: rgba(15, 23, 42, 0.24);

  /* Legacy aliases (one release cycle — BRAND.md §5.4) */
  --background: var(--cp-bg);
  --foreground: var(--cp-fg);
  --surface: var(--cp-surface);
  --accent: var(--cp-primary);
  --accent2: var(--cp-primary-hover);
  --border: var(--cp-border);
  --muted: var(--cp-muted);
  --cp-font-sans: var(--sp-font-sans);
  --cp-font-mono: var(--sp-font-mono);
}

/* Dark-section scope. Any section carrying .sp-dark flips the contextual
   tokens; components inside need no dark-specific rules. */
.sp-dark {
  --s-bg:        var(--sp-dark-0);
  --s-surface:   var(--sp-dark-1);
  --s-surface-2: var(--sp-dark-2);
  --s-fg:        var(--sp-dark-fg);
  --s-muted:     var(--sp-dark-muted);
  --s-border:        var(--sp-dark-border);
  --s-border-strong: var(--sp-dark-border-strong);
  background: var(--s-bg);
  color: var(--s-fg);
}

/* ── 2. Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sp-font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  background: var(--s-bg);
  color: var(--s-fg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* `clip`, NOT `hidden`. overflow-x: hidden turns <body> into a scroll
     container, so the sticky header (.sp-nav) pins to the body box instead
     of the viewport — on iPad Safari that leaves already-scrolled content
     visible above the header (founder, 2026-08-14; desktop Chrome hides the
     bug). `clip` clips the same overflow without creating a scroll
     container, so position: sticky keeps working. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  /* Pre-Safari-16 / pre-Chrome-90: fall back to the old behavior. */
  body { overflow-x: hidden; }
}

main { flex: 1 0 auto; }

img, svg { max-width: 100%; display: block; }

a { color: var(--cp-info); }
.sp-dark a:not([class]) { color: #60A5FA; }

code, kbd, pre { font-family: var(--sp-font-mono); }

::selection { background: var(--sp-signal-faint); color: var(--s-fg); }

/* Universal focus ring — BRAND.md §4.4, do not weaken */
*:focus-visible {
  outline: 2px solid var(--cp-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.cp-skip-link {
  position: absolute; top: -48px; left: 8px; z-index: 100;
  padding: 8px 16px;
  background: var(--cp-primary);
  color: #0F172A;               /* literal — never a var */
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 700; font-size: var(--fs-sm);
  transition: top var(--t-fast);
}
.cp-skip-link:focus { top: 8px; }

/* Reduced-motion safety net — kills ALL motion incl. signal pulses */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── 3. Layout utilities ──────────────────────────────────────────────── */
.sp-container         { max-width: var(--w-container); margin-inline: auto; padding-inline: var(--sp-gutter); }
.sp-container--narrow { max-width: var(--w-narrow); }
.sp-container--wide   { max-width: var(--w-wide); }

.sp-section { padding-block: var(--sp-section); }
.sp-section--tight { padding-block: calc(var(--sp-section) * 0.6); }
.sp-section--alt   { background: var(--s-surface-2); }

/* Visible grid rhythm on light sections (12 hairline columns, ≥1024 only).
   Apply .sp-gridlines to the SECTION, content sits in .sp-container above it. */
.sp-gridlines { position: relative; }
.sp-gridlines::before {
  content: ""; position: absolute; inset: 0;
  max-width: var(--w-container); margin-inline: auto;
  background-image: repeating-linear-gradient(
    to right,
    var(--sp-grid-line-light) 0 1px,
    transparent 1px calc(100% / 12)
  );
  pointer-events: none;
  display: none;
}
@media (min-width: 1024px) { .sp-gridlines::before { display: block; } }

/* Dot grid for dark sections (hero, CTA band) */
.sp-dotgrid {
  background-image: radial-gradient(var(--sp-grid-dot-dark) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── 4. Typography helpers ────────────────────────────────────────────── */
.sp-hero-title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.sp-d1 { font-size: var(--fs-d1); line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.sp-d2 { font-size: var(--fs-d2); line-height: 1.2;  font-weight: 700; letter-spacing: -0.01em; }
.sp-h4 { font-size: var(--fs-h4); line-height: 1.3;  font-weight: 500; }
.sp-lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--s-muted); max-width: 40em; }

/* Mono eyebrow / kicker. Orange ONLY inside .sp-dark (contrast).
   On light it renders muted slate with an orange tick — the tick is the
   signal accent, non-text, 3:1 exempt. */
.sp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sp-font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.sp-eyebrow::before {
  content: ""; width: 20px; height: 2px;
  background: var(--cp-primary); border-radius: 1px;
}
.sp-dark .sp-eyebrow { color: var(--sp-signal); }
.sp-dark .sp-eyebrow::before { background: var(--sp-signal); }

/* Inline mono chip — endpoints, header names, dispositions in prose */
.sp-mono-chip {
  font-family: var(--sp-font-mono);
  font-size: 0.85em;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: var(--s-surface-2);
  border: 1px solid var(--s-border);
  color: var(--s-fg);
  white-space: nowrap;
}

/* ── 5. Buttons ───────────────────────────────────────────────────────── */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sp-font-sans);
  font-weight: 700; font-size: var(--fs-base);
  line-height: 1;
  padding: 15px 28px;
  border-radius: var(--r-md);
  border: none; cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.sp-btn:active { transform: translateY(1px); }

/* Primary — the only gradient surface. Dark text is LAW. */
.sp-btn--primary {
  background: var(--cp-primary-gradient);
  color: #0F172A;               /* literal — BRAND.md §6.1 */
}
.sp-btn--primary::before {      /* hover darkening overlay (gradients can't transition) */
  content: ""; position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.10);
  opacity: 0; transition: opacity var(--t-fast);
}
.sp-btn--primary:hover::before  { opacity: 1; }
.sp-btn--primary:active::before { opacity: 1; background: rgba(15, 23, 42, 0.16); }
.sp-btn--primary:hover { color: #0F172A; box-shadow: 0 4px 18px var(--sp-signal-faint); }
.sp-btn--primary > * { position: relative; }

/* Secondary — outline on current surface */
.sp-btn--secondary {
  background: transparent;
  color: var(--s-fg);
  border: 1px solid var(--s-border-strong);
  font-weight: 500;
}
.sp-btn--secondary:hover { border-color: var(--cp-primary); background: var(--s-surface-2); }

/* Ghost / arrow link */
.sp-btn--ghost {
  background: none; border: none; padding: 8px 4px;
  color: var(--s-fg); font-weight: 500;
}
.sp-btn--ghost::after { content: "→"; transition: transform var(--t-fast); }
.sp-btn--ghost:hover::after { transform: translateX(4px); }
.sp-dark .sp-btn--ghost { color: var(--sp-dark-fg); }

.sp-btn--sm { padding: 10px 18px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.sp-btn--block { width: 100%; }

/* ── 6. Signal motifs (keyframes) ─────────────────────────────────────── */
/* Horizontal signal line with a traveling pulse. Height container = 2px. */
.sp-signal {
  position: relative; height: 2px; overflow: hidden;
  background: linear-gradient(90deg,
    transparent, var(--sp-signal-soft) 18%, var(--sp-signal-soft) 82%, transparent);
  border-radius: 1px;
}
.sp-signal::after {
  content: ""; position: absolute; top: 0; left: -64px;
  width: 64px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--sp-signal) 55%, var(--cp-accent));
  box-shadow: 0 0 12px var(--sp-signal-glow);
  animation: sp-travel var(--pulse-period) linear infinite;
}
@keyframes sp-travel { to { left: 100%; } }

/* Vertical variant (mobile pipelines, escalation chains) */
.sp-signal--v {
  width: 2px; height: auto; min-height: 32px;
  background: linear-gradient(180deg,
    transparent, var(--sp-signal-soft) 18%, var(--sp-signal-soft) 82%, transparent);
}
.sp-signal--v::after {
  top: -64px; left: 0; width: 2px; height: 64px;
  background: linear-gradient(180deg, transparent, var(--sp-signal) 55%, var(--cp-accent));
  animation: sp-travel-v var(--pulse-period) linear infinite;
}
@keyframes sp-travel-v { to { top: 100%; } }

/* Ringing indicator — concentric expanding rings around an orange dot */
.sp-ring {
  position: relative; width: 12px; height: 12px; border-radius: 50%;
  background: var(--sp-signal); flex-shrink: 0;
}
.sp-ring::before, .sp-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--sp-signal-glow);
  animation: sp-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.sp-ring::after { animation-delay: 1.2s; }
@keyframes sp-ping {
  from { transform: scale(1); opacity: 0.85; }
  to   { transform: scale(3.4); opacity: 0; }
}
/* Reduced motion: rings become a static halo */
@media (prefers-reduced-motion: reduce) {
  .sp-ring::before { transform: scale(2); opacity: 0.35; }
  .sp-ring::after  { transform: scale(3); opacity: 0.15; }
}

/* ── 7. Nav ───────────────────────────────────────────────────────────── */
/* Dark always — merges visually with the dark hero into one command band. */
.sp-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--sp-dark-0);
  border-bottom: 1px solid var(--sp-dark-border);
}
.sp-nav-inner {
  max-width: var(--w-container); margin-inline: auto;
  padding: 14px var(--sp-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
.sp-nav-logo { line-height: 0; flex-shrink: 0; }
.sp-nav-logo img {
  height: 34px; width: auto;
  aspect-ratio: 880 / 230;      /* cropped Color+White_Horizontal viewBox */
  display: block;
}
.sp-nav-links {
  display: none; gap: 28px; list-style: none;
  flex: 1; justify-content: center;
}
.sp-nav-links a {
  color: var(--sp-dark-muted); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  transition: color var(--t-fast);
}
.sp-nav-links a:hover { color: var(--sp-dark-fg); }
.sp-nav-links a.sp-nav-active {
  color: var(--sp-dark-fg);
  border-bottom: 2px solid var(--sp-signal);
  padding-bottom: 2px;
}
.sp-nav-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

.sp-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--sp-dark-border-strong);
  border-radius: var(--r-sm);
  color: var(--sp-dark-fg); cursor: pointer;
}
.sp-nav-toggle:hover { border-color: var(--sp-dark-muted); }
.sp-nav-mobile {
  display: none; flex-direction: column; gap: 2px;
  padding: 12px var(--sp-gutter) 20px;
  border-top: 1px solid var(--sp-dark-border);
  background: var(--sp-dark-0);
}
.sp-nav-mobile.sp-open { display: flex; }
.sp-nav-mobile a {
  color: var(--sp-dark-fg); text-decoration: none;
  font-size: 15px; font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid var(--sp-dark-border);
}
.sp-nav-mobile a:last-child { border-bottom: none; }

@media (min-width: 900px) {
  .sp-nav-links { display: flex; }
  .sp-nav-toggle { display: none; }
  .sp-nav-mobile { display: none !important; }
}
/* ── 8. Hero ──────────────────────────────────────────────────────────── */
.sp-hero {
  /* combine with .sp-dark .sp-dotgrid on the section element */
  padding-block: clamp(72px, 8vw, 128px) clamp(56px, 6vw, 96px);
  position: relative;
}
.sp-hero-inner {
  max-width: var(--w-container); margin-inline: auto;
  padding-inline: var(--sp-gutter);
}
.sp-hero .sp-eyebrow { margin-bottom: var(--sp-5); }
.sp-hero h1 { max-width: 17ch; margin-bottom: var(--sp-5); color: var(--sp-dark-fg); }
.sp-hero-sub {
  font-size: var(--fs-lede); line-height: 1.55; font-weight: 400;
  color: var(--sp-dark-muted);
  max-width: 34em; margin-bottom: var(--sp-6);
}
.sp-hero-ctas {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
@media (min-width: 640px) {
  .sp-hero-ctas { flex-direction: row; align-items: center; gap: var(--sp-5); }
  .sp-hero-ctas .sp-btn { width: auto; }
}
.sp-hero-trust {
  font-size: var(--fs-xs); line-height: 1.7;
  color: var(--sp-dark-muted); max-width: 560px;
}
.sp-hero-trust a { color: #60A5FA; text-decoration: underline; }

/* ── 9. Signal strip (the pipeline, in-hero or standalone) ───────────── */
/* WEBHOOK ─pulse─ ROUTE ─pulse─ TRUNK ─pulse─ ((RING)) */
.sp-pipe {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: clamp(40px, 5vw, 72px);
  max-width: var(--w-container); margin-inline: auto;
}
.sp-pipe-node {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sp-font-mono);
  font-size: clamp(0.625rem, 0.55rem + 0.4vw, 0.75rem);
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--s-muted);
  padding: 8px 12px;
  border: 1px solid var(--s-border-strong);
  border-radius: var(--r-sm);
  background: var(--s-surface);
  white-space: nowrap; flex-shrink: 0;
}
.sp-dark .sp-pipe-node { background: var(--sp-dark-1); color: var(--sp-dark-muted); }
.sp-pipe-node--live {          /* terminal "RING" node */
  color: var(--s-fg);
  border-color: var(--sp-signal);
}
.sp-dark .sp-pipe-node--live { color: var(--sp-dark-fg); }
.sp-pipe .sp-signal { flex: 1; min-width: 24px; }
/* Stagger the pulses so the signal appears to travel the whole path */
.sp-pipe .sp-signal:nth-of-type(1)::after { animation-delay: 0s; }
.sp-pipe .sp-signal:nth-of-type(2)::after { animation-delay: 0.35s; }
.sp-pipe .sp-signal:nth-of-type(3)::after { animation-delay: 0.7s; }

@media (max-width: 560px) {
  .sp-pipe { gap: var(--sp-2); }
  .sp-pipe-node { padding: 6px 8px; letter-spacing: 0.04em; }
}

/* ── 10. Terminal panel (curl demos, payload examples) ───────────────── */
.sp-terminal {
  background: var(--sp-dark-1);
  border: 1px solid var(--sp-dark-border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--sp-dark-fg);
  text-align: left;
}
.sp-terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--sp-dark-border);
  background: var(--sp-dark-2);
}
.sp-terminal-bar::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sp-dark-border-strong);
  box-shadow: 16px 0 0 var(--sp-dark-border-strong), 32px 0 0 var(--sp-dark-border-strong);
  margin-right: 32px;
}
.sp-terminal-title {
  font-family: var(--sp-font-mono);
  font-size: var(--fs-label); letter-spacing: 0.06em;
  color: var(--sp-dark-muted); text-transform: uppercase;
}
.sp-terminal pre {
  padding: var(--sp-5);
  font-size: 0.8125rem; line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}
/* Below 560px even ~54ch of mono can't fit at 13px — wrap instead of
   scrolling. overflow-wrap: anywhere (not break-word) so the unbreakable
   URL token participates in min-content sizing and breaks cleanly. */
@media (max-width: 560px) {
  .sp-terminal pre {
    padding: var(--sp-4);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}
/* Hero: at ≥1024px the terminal sits in the 5fr hero column (~380–453px).
   The longest command line (54ch) needs ~421px at 13px — fluid-size the
   mono type (10px @ 1024 → 12px @ 1200+) so it fits without a scrollbar. */
@media (min-width: 1024px) {
  .sp-hero-grid .sp-terminal pre {
    font-size: clamp(0.625rem, 1.14vw - 1.65px, 0.75rem);
  }
}
.sp-terminal .tk-cmd { color: var(--sp-dark-fg); }
.sp-terminal .tk-flag { color: var(--sp-dark-muted); }
.sp-terminal .tk-str { color: var(--cp-accent); }     /* orange = signal accent */
.sp-terminal .tk-url { color: #60A5FA; }
.sp-terminal .tk-comment { color: var(--sp-dark-faint); }

/* ── 11. Chapter block (numbered section header) ─────────────────────── */
.sp-chapter { border-top: 1px solid var(--s-border); padding-top: var(--sp-6); }
.sp-chapter-head {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-5);
  align-items: baseline;
  margin-bottom: var(--sp-6);
}
.sp-chapter-index {
  font-family: var(--sp-font-mono);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--s-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.sp-chapter-index::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--cp-primary);
}
.sp-chapter-head h2 { grid-column: 2; }
.sp-chapter-head .sp-lede { grid-column: 2; margin-top: var(--sp-3); }
@media (max-width: 639px) {
  .sp-chapter-head { grid-template-columns: 1fr; }
  .sp-chapter-head h2, .sp-chapter-head .sp-lede { grid-column: 1; }
}

/* ── 12. Feature card ─────────────────────────────────────────────────── */
.sp-feature-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
}
@media (min-width: 640px)  { .sp-feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1024px) { .sp-feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.sp-feature-card {
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med);
}
.sp-feature-card:hover {
  border-color: var(--s-border-strong);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.sp-feature-icon {
  width: 28px; height: 28px;
  color: var(--cp-primary);       /* non-text, 3:1 exempt */
  margin-bottom: var(--sp-4);
  stroke-width: 1.5;
}
.sp-feature-card h3 {
  font-size: 1.1875rem; font-weight: 500;
  margin-bottom: var(--sp-2); color: var(--s-fg);
}
.sp-feature-card p {
  font-size: 0.9375rem; line-height: 1.6; color: var(--s-muted);
}
.sp-feature-card code {
  font-size: 0.85em; background: var(--s-surface-2);
  padding: 1px 5px; border-radius: 4px; color: var(--s-fg);
}

/* Status badges — small qualifier placed immediately after a feature title
   (e.g. "Escalation chains <span class="sp-status-badge sp-status-badge--wip">").
   Muted, never orange (orange is reserved for CTAs/signal accents). Uses the
   contextual --s-* tokens so it reads correctly in both light sections and
   .sp-dark sections without any dark-mode override needed. */
.sp-status-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  font-family: var(--sp-font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  vertical-align: middle;
  border-radius: 4px;
  border: 1px solid var(--s-border-strong);
  color: var(--s-muted);
  background: var(--s-surface-2);
}
.sp-status-badge--planned { border-style: dashed; }

/* ── 13. Diagram frame + diagram language ─────────────────────────────── */
.sp-diagram {
  background: var(--s-surface);
  background-image: radial-gradient(rgba(15, 23, 42, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--s-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  overflow-x: auto;
}
.sp-diagram-caption {
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-family: var(--sp-font-mono);
  font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--s-muted);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--s-border);
}
.sp-diagram-caption b { color: var(--s-fg); font-weight: 500; }

/* Inline-SVG diagram classes (see design-spec §5 for authoring rules) */
.sp-diagram svg { min-width: 560px; width: 100%; height: auto; }
.sp-dg-node   { fill: var(--s-surface); stroke: rgba(15, 23, 42, 0.35); stroke-width: 1.5; rx: 10; }
.sp-dg-node--hot { stroke: var(--cp-primary); stroke-width: 2; }
.sp-dg-node--dim { stroke: rgba(15, 23, 42, 0.18); stroke-dasharray: 4 4; }
.sp-dg-edge   { stroke: rgba(15, 23, 42, 0.35); stroke-width: 1.5; fill: none; }
.sp-dg-edge--async { stroke-dasharray: 6 6; }
.sp-dg-edge--hot   { stroke: var(--cp-primary); stroke-width: 2; }
.sp-dg-arrow  { fill: rgba(15, 23, 42, 0.35); }
.sp-dg-arrow--hot { fill: var(--cp-primary); }
.sp-dg-label {
  font-family: var(--sp-font-mono);
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  fill: var(--cp-muted);
}
.sp-dg-label--strong { fill: var(--cp-fg); font-weight: 500; }
.sp-dg-badge { fill: var(--sp-signal-faint); stroke: var(--cp-primary); stroke-width: 1; rx: 4; }

/* ── 14. Tier card (pricing) ─────────────────────────────────────────── */
.sp-tier-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  align-items: stretch;
}
@media (min-width: 800px) { .sp-tier-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

.sp-tier {
  position: relative;
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}
.sp-tier--highlight {
  border: 2px solid var(--cp-primary);
  box-shadow: var(--shadow-tier);
}
.sp-tier-badge {
  position: absolute; top: -13px; left: var(--sp-5);
  background: var(--cp-primary);
  color: #0F172A;               /* literal — orange surface */
  font-family: var(--sp-font-mono);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
}
.sp-tier h3 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--sp-3); }
.sp-tier-price {
  font-family: var(--sp-font-mono);
  font-size: 2.75rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--s-fg);
}
.sp-tier-price small {
  font-family: var(--sp-font-sans);
  font-size: var(--fs-sm); font-weight: 400; color: var(--s-muted);
  letter-spacing: 0;
}
.sp-tier-cycle { font-size: var(--fs-sm); color: var(--s-muted); margin: var(--sp-1) 0 var(--sp-5); }
.sp-tier-features { list-style: none; margin-bottom: var(--sp-5); flex: 1; }
.sp-tier-features li {
  font-size: var(--fs-sm); line-height: 1.5;
  padding: 7px 0 7px 26px; position: relative;
  color: var(--s-fg);
  border-bottom: 1px solid var(--sp-grid-line-light);
}
.sp-tier-features li:last-child { border-bottom: none; }
.sp-tier-features li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  color: var(--cp-primary); font-weight: 700;
}
.sp-tier-features li.sp-tier-no { color: var(--s-muted); }
.sp-tier-features li.sp-tier-no::before { content: "—"; color: var(--s-muted); font-weight: 400; }

/* ── 15. Stat band (agencies page, social proof) ─────────────────────── */
.sp-statband {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5);
}
@media (min-width: 800px) { .sp-statband { grid-template-columns: repeat(4, 1fr); } }
.sp-stat { border-left: 2px solid var(--sp-signal); padding-left: var(--sp-4); }
.sp-stat-num {
  font-family: var(--sp-font-mono);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--s-fg);
}
.sp-stat-label { font-size: var(--fs-sm); color: var(--s-muted); margin-top: var(--sp-1); }

/* ── 16. FAQ (flat hairline accordion) ───────────────────────────────── */
.sp-faq { max-width: var(--w-narrow); margin-inline: auto; border-top: 1px solid var(--s-border); }
.sp-faq details { border-bottom: 1px solid var(--s-border); }
.sp-faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-4) var(--sp-2);
  font-weight: 500; font-size: var(--fs-base);
  color: var(--s-fg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  transition: background var(--t-fast);
}
.sp-faq summary:hover { background: var(--s-surface-2); }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after {
  content: "+";
  font-family: var(--sp-font-mono);
  font-size: 1.25rem; font-weight: 400;
  color: var(--s-muted);
  transition: transform var(--t-med), color var(--t-fast);
  flex-shrink: 0;
}
.sp-faq details[open] summary::after { transform: rotate(45deg); color: var(--cp-primary); }
.sp-faq summary:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.sp-faq details > div {
  padding: 0 var(--sp-2) var(--sp-5);
  color: var(--s-muted); line-height: 1.65; font-size: 0.9375rem;
  max-width: 62ch;
}
.sp-faq strong { color: var(--s-fg); }

/* ── 17. Comparison table ─────────────────────────────────────────────── */
.sp-table-wrap { overflow-x: auto; border: 1px solid var(--s-border); border-radius: var(--r-lg); }
.sp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--s-surface); }
.sp-table th, .sp-table td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--sp-grid-line-light);
}
.sp-table thead th {
  font-family: var(--sp-font-mono);
  font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500; color: var(--s-muted);
  background: var(--s-surface-2);
  border-bottom: 1px solid var(--s-border);
  position: sticky; top: 0;
}
.sp-table tbody tr:last-child td { border-bottom: none; }
.sp-table tbody tr:hover { background: var(--cp-bg); }
.sp-table td.sp-yes::before { content: "✓ "; color: var(--cp-primary); font-weight: 700; }
.sp-table td.sp-no { color: var(--s-muted); }
.sp-table td .sp-num { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums; }
.sp-table th[scope="row"] { font-weight: 500; color: var(--s-fg); }

/* ── 18. CTA band (dark, signal running through) ─────────────────────── */
.sp-ctaband {
  /* section element carries .sp-dark .sp-dotgrid */
  position: relative;
  padding-block: var(--sp-section);
  text-align: center;
  overflow: hidden;
}
.sp-ctaband .sp-signal {
  /* In flow between the heading and the lede — always in the whitespace,
     never through a text line, at any viewport/wrap. Full-bleed via the
     negative-margin trick; the section's overflow: hidden clips it. */
  margin: var(--sp-2) calc(50% - 50vw) var(--sp-5);
}
.sp-ctaband-inner {
  position: relative; z-index: 1;
  max-width: var(--w-narrow); margin-inline: auto;
  padding-inline: var(--sp-gutter);
}
.sp-ctaband h2 { color: var(--sp-dark-fg); margin-bottom: var(--sp-3); }
.sp-ctaband p  { font-size: var(--fs-lede); color: var(--sp-dark-muted); margin-bottom: var(--sp-6); }
.sp-ctaband-row {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}
@media (min-width: 640px) { .sp-ctaband-row { flex-direction: row; justify-content: center; gap: var(--sp-5); } }
.sp-ctaband-fineprint {
  font-size: var(--fs-label); color: var(--sp-dark-faint);
  margin-top: var(--sp-7); line-height: 1.7; max-width: 640px; margin-inline: auto;
}
.sp-ctaband-fineprint a { color: #60A5FA; text-decoration: underline; }

/* ── 19. Footer (dark bookend) ───────────────────────────────────────── */
.sp-footer {
  /* element carries .sp-dark */
  border-top: 1px solid var(--sp-dark-border);
  margin-top: auto;
  color: var(--sp-dark-muted);
  font-size: var(--fs-sm);
}
.sp-footer-inner {
  max-width: var(--w-container); margin-inline: auto;
  padding: var(--sp-8) var(--sp-gutter) var(--sp-6);
}
.sp-footer-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
@media (min-width: 640px)  { .sp-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sp-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.sp-footer-heading {
  font-family: var(--sp-font-mono);
  font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--sp-dark-fg);
  margin-bottom: var(--sp-4);
}
.sp-footer ul { list-style: none; }
.sp-footer li { margin-bottom: 10px; }
.sp-footer a, .sp-footer .cp-link-button {
  color: var(--sp-dark-muted); text-decoration: none; font-size: var(--fs-sm);
  background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; text-align: left;
}
.sp-footer a:hover, .sp-footer .cp-link-button:hover { color: var(--sp-dark-fg); }
.sp-footer-bottom {
  border-top: 1px solid var(--sp-dark-border);
  padding-top: var(--sp-5);
  display: flex; flex-direction: column-reverse; gap: var(--sp-4);
  justify-content: space-between; align-items: stretch;
}
@media (min-width: 640px) { .sp-footer-bottom { flex-direction: row; align-items: center; } }
.sp-footer-copy { font-size: var(--fs-label); color: var(--sp-dark-muted); }
.sp-footer-sep { margin: 0 8px; opacity: 0.5; }
.sp-footer-version { font-family: var(--sp-font-mono); opacity: 0.75; }
.sp-footer-logo {
  height: 30px; width: auto; aspect-ratio: 880 / 230; display: block;
  opacity: 0.85; transition: opacity var(--t-fast);
}
.sp-footer-credit {
  margin-top: var(--sp-3);
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-label); color: var(--sp-dark-muted); opacity: 0.6;
}
.sp-footer-credit a { display: inline-flex; align-items: center; opacity: 0.85; transition: opacity var(--t-fast); }
.sp-footer-credit a:hover { opacity: 1; }
.sp-footer-credit-logo { height: 16px; width: auto; display: block; }
.sp-footer-home:hover .sp-footer-logo { opacity: 1; }
.sp-footer-operator {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--sp-dark-border);
  font-size: var(--fs-label); line-height: 1.6; color: var(--sp-dark-muted);
}
.sp-footer-operator strong { color: var(--sp-dark-fg); font-weight: 500; }
.sp-footer-operator a { color: inherit; text-decoration: underline; }
.sp-footer-operator a:hover { color: var(--sp-dark-fg); }
.sp-locale-badge {
  display: inline-block; padding: 2px 6px;
  font-family: var(--sp-font-mono); font-size: var(--fs-label); font-weight: 500;
  border: 1px solid var(--sp-dark-border-strong); border-radius: 4px;
  color: var(--sp-dark-muted);
}

/* ── 20. Prose (legal pages, blog) ───────────────────────────────────── */
.sp-prose { max-width: var(--w-narrow); margin-inline: auto; }
.sp-prose h1 { font-size: var(--fs-d1); line-height: 1.15; margin-bottom: var(--sp-5); }
.sp-prose h2 { font-size: var(--fs-d2); margin: var(--sp-7) 0 var(--sp-4); }
.sp-prose h3 { font-size: var(--fs-h4); font-weight: 700; margin: var(--sp-6) 0 var(--sp-3); }
.sp-prose p, .sp-prose li { line-height: 1.7; margin-bottom: var(--sp-4); color: var(--s-fg); }
.sp-prose ul, .sp-prose ol { padding-left: 1.4em; margin-bottom: var(--sp-4); }
.sp-prose a { color: var(--cp-info); }
.sp-prose code { font-size: 0.875em; background: var(--s-surface-2); padding: 1px 5px; border-radius: 4px; }
.sp-prose blockquote {
  border-left: 2px solid var(--cp-primary);
  padding-left: var(--sp-4); color: var(--s-muted); margin-bottom: var(--sp-4);
}

/* ── 21. Site additions (builder, 2026-07-19) ────────────────────────────
   Small components the copy decks need that the reference stylesheet does
   not carry. Everything below follows the same contextual-token contract
   (--s-*) and the orange budget. No new colors, no new fonts. */

/* Section header stack — eyebrow + heading + optional lede */
.sp-sechead { margin-bottom: var(--sp-7); }
.sp-sechead .sp-eyebrow { margin-bottom: var(--sp-4); }
.sp-sechead .sp-lede { margin-top: var(--sp-4); }
.sp-sechead--center { text-align: center; }
.sp-sechead--center .sp-lede { margin-inline: auto; }

/* Hero variants */
.sp-hero--short { padding-block: clamp(56px, 6vw, 88px) clamp(40px, 5vw, 64px); }
.sp-hero-grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 1024px) {
  .sp-hero-grid { grid-template-columns: 7fr 5fr; }
}

/* Callout — honesty blocks, legal notes. Warning variant carries the
   safety claim (orange rule is a non-text accent, budget-legal). */
.sp-callout {
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-left: 3px solid var(--s-border-strong);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--s-muted);
}
.sp-callout p { margin-bottom: var(--sp-3); }
.sp-callout p:last-child { margin-bottom: 0; }
.sp-callout strong { color: var(--s-fg); }
.sp-callout--warning { border-left-color: var(--cp-primary); color: var(--s-fg); }
.sp-callout + .sp-callout { margin-top: var(--sp-4); }

/* Checklist — capability bullets (product chapters) */
.sp-checklist { list-style: none; }
.sp-checklist li {
  font-size: 0.9375rem; line-height: 1.55;
  padding: 7px 0 7px 26px; position: relative;
  color: var(--s-fg);
}
.sp-checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: 7px;
  color: var(--cp-primary); font-weight: 700;
}

/* Check grid — "every plan includes" (pricing) */
.sp-check-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 2px 32px; }
@media (min-width: 640px)  { .sp-check-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sp-check-grid { grid-template-columns: repeat(3, 1fr); } }
.sp-check-grid li {
  font-size: var(--fs-sm); line-height: 1.5;
  padding: 7px 0 7px 26px; position: relative;
  color: var(--s-fg);
}
.sp-check-grid li::before {
  content: "\2713"; position: absolute; left: 0; top: 7px;
  color: var(--cp-primary); font-weight: 700;
}

/* Dash list — "what this is not" rows */
.sp-notlist { list-style: none; border-top: 1px solid var(--s-border); }
.sp-notlist li {
  font-size: 0.9375rem; line-height: 1.65;
  padding: var(--sp-4) 0 var(--sp-4) 28px; position: relative;
  color: var(--s-muted);
  border-bottom: 1px solid var(--s-border);
}
.sp-notlist li::before {
  content: "\2014"; position: absolute; left: 0; top: var(--sp-4);
  color: var(--s-muted);
}
.sp-notlist strong { color: var(--s-fg); }

/* Tail link row under grids */
.sp-tail { text-align: center; margin-top: var(--sp-6); }

/* Fineprint / consent micro-copy (12px minimum per a11y contract) */
.sp-fineprint { font-size: var(--fs-label); color: var(--s-muted); line-height: 1.6; }
.sp-fineprint a { color: inherit; text-decoration: underline; }
.sp-fineprint a:hover { color: var(--s-fg); }
.sp-consent { font-size: var(--fs-label); color: var(--s-muted); text-align: center; margin-top: 10px; line-height: 1.5; }
.sp-consent a { color: inherit; text-decoration: underline; }

/* Tier card extras — "typical fit" caption + per-card tax note */
.sp-tier-fit { font-size: var(--fs-xs); color: var(--s-muted); line-height: 1.5; margin-bottom: var(--sp-4); }
.sp-tier-tax { font-size: var(--fs-label); color: var(--s-muted); line-height: 1.5; margin: var(--sp-3) 0 0; }

/* Desktop ordering utilities (highlight tier first on mobile, middle on desktop) */
@media (min-width: 800px) {
  .sp-md-order-1 { order: 1; }
  .sp-md-order-2 { order: 2; }
  .sp-md-order-3 { order: 3; }
}

/* Two-panel comparison grid (per-seat vs flat) */
.sp-panel-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 800px) { .sp-panel-grid { grid-template-columns: repeat(2, 1fr); } }

/* Category heading — integrations source groups */
.sp-cat {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--sp-font-mono);
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--s-muted);
  margin: var(--sp-7) 0 var(--sp-4);
}
.sp-cat::after { content: ""; flex: 1; height: 1px; background: var(--s-border); }

/* Pool-vs-cap bar illustration (pricing §5) */
.sp-bars { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }
.sp-bar-label {
  font-family: var(--sp-font-mono);
  font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--s-muted); margin-bottom: 6px;
}
.sp-bar { height: 14px; border-radius: 4px; background: var(--sp-signal-faint); border: 1px solid var(--cp-primary); }
.sp-bar--cap { width: 6.5%; min-width: 44px; }

/* Multi-signal hero motif (for-noc-teams) — three client lines, one ring */
.sp-multipipe {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: clamp(40px, 5vw, 72px);
}
.sp-multipipe-rows { flex: 1; display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.sp-multipipe-row { display: flex; align-items: center; gap: var(--sp-3); }
.sp-multipipe-row .sp-signal { flex: 1; min-width: 24px; }
.sp-multipipe-row:nth-child(2) .sp-signal::after { animation-delay: 0.5s; }
.sp-multipipe-row:nth-child(3) .sp-signal::after { animation-delay: 1s; }

/* Anchor-link pipe nodes (product hero chapter nav) */
a.sp-pipe-node { text-decoration: none; transition: border-color var(--t-fast), color var(--t-fast); }
a.sp-pipe-node:hover { border-color: var(--sp-signal); color: var(--s-fg); }
/* Nav variant of the pipe: five chapter chips; wraps below 560px instead of
   overflowing (the connecting lines hide when wrapped). */
.sp-pipe--nav { flex-wrap: wrap; }
@media (max-width: 559px) { .sp-pipe--nav .sp-signal { display: none; } }

/* Prose column for narrative sections */
.sp-copy { max-width: var(--w-narrow); }
.sp-copy p { margin-bottom: var(--sp-4); line-height: 1.7; }
.sp-copy p:last-child { margin-bottom: 0; }

/* Simple divider row */
.sp-divider { border: none; border-top: 1px solid var(--s-border); margin: var(--sp-7) 0; }

/* Margin-top utilities (avoid inline style attributes in markup) */
.sp-mt-3 { margin-top: var(--sp-3); }
.sp-mt-4 { margin-top: var(--sp-4); }
.sp-mt-5 { margin-top: var(--sp-5); }
.sp-mt-6 { margin-top: var(--sp-6); }

/* Small-viewport tightening — the 375px viewport must never scroll
   horizontally (QA checklist). Nav: smaller logo + tighter gaps; pipe:
   tighter nodes + shorter minimum signal segments. */
@media (max-width: 480px) {
  .sp-nav-logo img { height: 28px; }
  .sp-nav-inner { gap: var(--sp-3); }
  .sp-nav-actions { gap: var(--sp-2); }
  .sp-nav-actions .sp-btn--sm { padding: 10px 12px; }
}
@media (max-width: 400px) {
  .sp-pipe { gap: 6px; }
  .sp-pipe-node { padding: 6px 6px; letter-spacing: 0.02em; }
  .sp-pipe .sp-signal { min-width: 12px; }
}

/* Diagram spacing helper */
.sp-diagram-wrap { margin-top: var(--sp-6); }

/* Trust strip — one-line dogfooding bar under page heroes (trust-layer.md,
   2026-07-19). Full-bleed hairline bar on surface-2; orange is reserved for
   the inline status-page link. Link uses the darkest brand stop because
   --cp-primary itself fails WCAG AA at 14px on surface-2. */
.sp-trust-strip {
  background: var(--s-surface-2);
  border-top: 1px solid var(--s-border);
  border-bottom: 1px solid var(--s-border);
  padding: var(--sp-4) 0;
}
.sp-trust-strip p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: center;
  color: var(--s-muted);
}
.sp-trust-strip a { color: var(--cp-primary-active); text-decoration: underline; }
.sp-trust-strip a:hover { color: var(--s-fg); }

/* Stat cards — /reliability production numbers (2026-07-19). 4-up card grid
   reusing .sp-feature-card anatomy with a .sp-stat-num mono figure on top.
   Same contextual-token contract; no new colors. */
.sp-stat-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px)  { .sp-stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1024px) { .sp-stat-grid { grid-template-columns: repeat(4, 1fr); } }
/* Re-assert the numeral treatment: `.sp-feature-card p` (0,1,1) otherwise
   out-specifies `.sp-stat-num` (0,1,0) and shrinks/mutes the figure. */
.sp-stat-grid .sp-stat-num {
  margin-bottom: var(--sp-3);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  color: var(--s-fg);
}