/* Roam commercial landing page — minimal, fast (<200KB total).
   Mirrors docs/site/ visual language but tuned for a buyer surface.
   Self-hosted fonts (no Google CDN) for GDPR + perf. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local('Space Grotesk'), url('/fonts/space-grotesk-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('IBM Plex Mono'), url('/fonts/plex-mono-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('IBM Plex Mono SemiBold'), url('/fonts/plex-mono-semibold.woff2') format('woff2');
}

:root {
  /* ─── Color tokens ───
     --ink is the deepest text colour, reserved for headings and the dark
     wedge background. --text is body copy. --bg is a warm off-white
     (paper). --bg-deep doubles as the dark-section background and matches
     --ink so any cross-section element keeps a visual relationship. */
  --ink: #0a0e16;
  --ink-30: rgba(10, 14, 22, 0.30);
  --ink-60: rgba(10, 14, 22, 0.60);
  --text: #1a1a1a;
  --muted: #595959;
  --muted-soft: #6b6b6b;
  --bg: #fafaf6;            /* warm paper */
  --bg-tint: #f3f3ec;       /* a touch deeper than bg, for tinted bands */
  --bg-alt: #f4f4f0;        /* legacy token retained for sub-pages */
  --bg-deep: #0a0e16;       /* the single dark wedge */
  --accent: #0049b7;
  --accent-deep: #02307a;
  --accent-soft: #eef2fb;
  --warn: #b04800;
  --pop: #007a3d;
  --border: #d6d6d0;
  --line-soft: rgba(10, 14, 22, 0.08);
  --pain-bg: #fff8ed;
  --footer-bg: #0a0e16;
  --footer-text: #fff;
  --footer-meta: #aaa;

  /* ─── Type scale (modular, ratio 1.25) ─── */
  --t-xs: 12px;
  --t-sm: 13px;
  --t-base: 16px;
  --t-md: 19px;
  --t-lg: 22px;
  --t-xl: 28px;
  --t-2xl: 34px;
  /* Display ramp — used by hero h1 + section h2 + card h3 + eyebrow. */
  --t-h1: clamp(34px, 5.2vw, 64px);
  --t-h2: clamp(26px, 3vw, 40px);
  --t-h3: 18px;
  --t-eyebrow: 12px;
  --t-hero: clamp(34px, 5.2vw, 64px);
  /* Fluid section-heading scale — floors at 26 px so 320 px phones show a
     readable section title without breaking onto three lines. */
  --t-section-h: clamp(26px, 3vw, 40px);
  /* Card h3 ramp (product cards, scenario cards). */
  --t-card-h: 18px;
  /* Big-number ramp (.num-cell strong, .price-amount). */
  --t-numeric: clamp(22px, 4vw, 26px);
  --t-price: clamp(26px, 5vw, 32px);
  --lh-tight: 1.06;          /* hero h1 */
  --lh-h2: 1.15;             /* h2 / h3 */
  --lh-snug: 1.4;
  --lh-base: 1.55;
  --ls-h1: -0.04em;
  --ls-h2: -0.03em;
  --ls-eyebrow: 0.08em;
  /* Standard easing + duration shared by all microinteractions. */
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 200ms;

  /* ─── Spacing scale (4px base) ─── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ─── Section + container rhythm — fluid across viewport ─── */
  /* Vertical padding inside sections. See bumped definition below in the
     Layout block; this comment is kept to mark the rhythm. The hero gets
     a touch more headroom up top, less below. */
  --section-y-hero-top: clamp(80px, 10vw, 140px);
  --section-y-hero-bottom: clamp(56px, 7vw, 100px);
  /* Minor section (audit-upsell, page-cta-strip) — slightly tighter. */
  --section-y-tight: clamp(32px, 5vw, 48px);
  /* Horizontal container padding. 16 px on phones, 24 px on tablets+. */
  --container-x: clamp(16px, 3vw, 24px);

  /* ─── Layout ─── */
  --radius: 14px;
  --radius-sm: 6px;
  --max-w: 1100px;

  /* ─── Section vertical breathing — bumped from clamp(48,7vw,64) so
     headlines + content rooms feel like a high-craft page rather than a
     generic LLM-default tight column. ─── */
  --section-y: clamp(64px, 8vw, 120px);
}

* { box-sizing: border-box; }
html {
  /* Pin against iOS' opportunistic font-rescale on rotation. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Match the browser-UI chrome (status bar, tab strip) to the page bg
     instead of the default "auto" which can flash dark on Android. */
  color-scheme: light;
  /* iOS / Android default tap flash is a translucent cyan blob that
     clashes with the brand. Replace with a soft accent tint. */
  -webkit-tap-highlight-color: rgba(0, 73, 183, 0.12);
  /* Smooth anchor scrolling. Reduced-motion users opt out via the media
     block at the bottom of this file. */
  scroll-behavior: smooth;
}
/* Brand the text-selection color so highlights blend with the accent. */
::selection {
  background: var(--accent);
  color: #fff;
}
::-moz-selection {
  background: var(--accent);
  color: #fff;
}
html, body {
  margin: 0;
  padding: 0;
  /* Hard-clamp horizontal overflow so a single accidental wide element
     (a 1200-px terminal demo, an unwrapped URL, an embedded svg) can't
     give the entire page a horizontal scrollbar. Section overflow is
     opt-in via .compare-table-wrap / .terminal where we want it. We use
     overflow-x: clip rather than hidden so position:sticky elsewhere
     (sticky nav, sticky compare-table first column) still works. */
  overflow-x: clip;
}
body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  /* Tabular figures keep counts ("200+", "459", "7,731") aligned vertically
     anywhere they appear in body copy. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
/* Long URLs in legal-style prose should wrap rather than blow out the
   viewport. Scoped to body-text containers so that monospace identifiers
   and short inline code stay intact. */
.legal-page,
.faq details p,
.trust-cell span,
.dogfood-list li,
.compare-foot {
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }

/* Mobile-overflow guard. Grid items default to min-width: min-content,
   which lets a long unbreakable child (mailto URL, monospace identifier,
   demo code span) push the column wider than the viewport on phones —
   and because the body uses overflow-x: clip, that excess gets silently
   chopped off the right edge. Forcing min-width: 0 on direct children of
   our layout grids lets them shrink to fit. Pairs with overflow-wrap on
   the long-content cells below. */
.products > *,
.scenarios-grid > *,
.demo-grid > *,
.replay-tiers > *,
.senses-grid > *,
.numbers-grid > *,
.verbs-grid > *,
.flow > * {
  min-width: 0;
}

/* Inline code, mailto links, and prefilled mockups can carry long
   unbreakable tokens. On mobile we'd rather wrap mid-token than
   overflow the viewport. Compare-table cells already opt out via
   white-space rules; terminal blocks scroll horizontally on purpose. */
.scenario p code,
.scenario p,
.pr-find,
.pr-find code,
.pr-find-loc,
.pr-find-body,
.pr-diff,
.product-card .features li code,
.product-card .features li,
.product-card .features li strong,
.dogfood-list li code,
.faq details p code,
.faq details p {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Display typography — distinct from body. Tighter line-height, negative
   tracking, balanced wrapping. Headings get the deeper --ink colour so
   they sit visually above body text rather than blurring with it.
   text-wrap: balance redistributes words across lines so a 3-line heading
   doesn't end on a single dangling word. Progressive-enhanced — Safari
   17.4+, Chrome 114+, Firefox 121+. Older browsers ignore. */
h1, h2, h3, h4 {
  color: var(--ink);
  text-wrap: balance;
  font-feature-settings: "ss01" 1, "tnum" 1;
}
h1 {
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  margin: 0 0 24px;
}
h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  margin: 0 0 16px;
}
h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: var(--lh-h2);
  margin: 0 0 8px;
}

code { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

a {
  color: var(--accent);
  text-decoration: none;
  /* Subtle underline on hover, never always-on. Animated thickness +
     colour ramp on the unified easing. */
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 73, 183, 0.40);
  text-underline-offset: 0.18em;
  transition:
    text-decoration-color var(--t-fast) var(--easing),
    text-decoration-thickness var(--t-fast) var(--easing),
    color var(--t-fast) var(--easing);
}
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}

/* Single source of truth for focus-visible outlines. Any focusable element
   gets the same accent ring at the same offset; element-specific overrides
   are reserved for spaced-around components like .faq summary that need a
   bit more breathing room (configured locally below).
   Inputs, selects, textareas, and labels receive the same ring so keyboard
   navigation through forms (mailto-builder dropdowns, future contact forms)
   shows where focus lives. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label:focus-within,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Sticky nav is ~58px; on docs pages a second sticky strip (.docs-subnav)
   stacks on top for ~110px combined. Use the larger value so anchor
   jumps land below BOTH sticky strips on docs pages — the homepage's
   single sticky absorbs the extra cushion as breathing room. */
[id] { scroll-margin-top: 110px; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--accent);
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px;
  z-index: 100;
}
.skip-link:focus { top: 8px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Nav ─── */
.site-nav {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  /* Glassy fall-back-able backdrop on supporting browsers, so the nav
     doesn't visually punch a hole when content scrolls behind it. */
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.site-logo {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity var(--t-fast) var(--easing);
}
.site-logo:hover { opacity: 0.85; text-decoration: none; }
.site-logo .site-logo-mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent);
}
.logo-dot { color: var(--accent); }
.nav-links {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  flex-wrap: wrap;
}
.nav-links a {
  color: var(--ink-60);
  transition: color var(--t-fast) var(--easing);
  text-underline-offset: 0.18em;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Hamburger toggle — pure CSS, no JS, plays nicely with strict CSP.
   The hidden checkbox holds open/closed state; the label is the
   visible burger button. Below the breakpoint, the .nav-links list
   collapses to a slide-down drawer that the label toggles. */
.nav-toggle-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-toggle-label {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--text);
  transition: background-color 0.15s ease;
}
.nav-toggle-label:hover { background: var(--accent-soft); }
.nav-toggle-checkbox:focus-visible + .nav-toggle-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The burger glyph itself — three lines drawn with currentColor.
   Animates to an X when the checkbox is checked. */
.nav-burger,
.nav-burger::before,
.nav-burger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger {
  position: relative;
}
.nav-burger::before,
.nav-burger::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-burger::before { top: -7px; }
.nav-burger::after  { top:  7px; }
.nav-toggle-checkbox:checked + .nav-toggle-label .nav-burger {
  background: transparent;
}
.nav-toggle-checkbox:checked + .nav-toggle-label .nav-burger::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle-checkbox:checked + .nav-toggle-label .nav-burger::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 760px) {
  /* Show the hamburger button, collapse the link list into a drawer. */
  .nav-toggle-label { display: flex; }
  .nav-inner {
    flex-wrap: nowrap;
    /* Logo on the left, hamburger on the right. */
  }
  .nav-links {
    /* The list spans the full row below the logo+burger. Hidden by
       default; revealed by :checked. */
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 4px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    display: none;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 12px 6px;
    font-size: 16px;
    line-height: 1;
    border-radius: 6px;
  }
  .nav-links a:hover { background: var(--accent-soft); color: var(--text); }

  .nav-toggle-checkbox:checked ~ .nav-links { display: flex; }
}

/* ─── Hero ───
   Two layered SVGs as background: a 24×24 dot grid that fades downward,
   plus a small code-graph (3 nodes + edges) tucked into the top-right
   corner. Both at 0.06–0.08 opacity. The page bg colour shows through
   between dots — restraint over decoration. */
.hero {
  position: relative;
  background: var(--bg);
  padding: var(--section-y-hero-top) 0 var(--section-y-hero-bottom);
  overflow: hidden;
  isolation: isolate; /* keep the bg svgs behind text */
}
.hero::before {
  /* Dot grid — 24×24 px cells, 1.4 px dots in --ink, fading down. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(10, 14, 22, 0.18) 1px, transparent 1.5px);
  background-size: 24px 24px;
  background-position: 0 0;
  /* Soft fade to nothing at the bottom so the eye lands on hero text,
     not on the grid edge. */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.18) 70%, transparent 95%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.18) 70%, transparent 95%);
  pointer-events: none;
}
.hero-graph-mark {
  position: absolute;
  top: clamp(20px, 4vw, 60px);
  right: clamp(20px, 5vw, 80px);
  width: clamp(80px, 8vw, 120px);
  height: clamp(80px, 8vw, 120px);
  opacity: 0.18;
  z-index: -1;
  color: var(--accent);
  pointer-events: none;
}
/* On phones and small tablets the corner mark sits too close to the
   eyebrow / headline and competes for attention. Hide below the
   tablet break — hero text is the only thing that matters at narrow
   widths. (Was 540 px; bumped to 720 px after observing overlap on
   iPad portrait + landscape phones.) */
@media (max-width: 720px) {
  .hero-graph-mark { display: none; }
}
.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
  text-align: center;
  position: relative;
}
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-60);
  margin: 0 0 18px;
}
.hero-headline {
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0 0 24px;
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.hero-headline strong { font-weight: 600; color: var(--ink); }
.hero-subhead {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--ink-60);
  max-width: 640px;
  margin: 0 auto 40px;
  /* Read-flow optimization: text-wrap: pretty drops orphans + balances
     line lengths. Both progressive-enhanced — older browsers ignore. */
  text-wrap: pretty;
}
/* Inline command names (roam math / roam preflight / roam pr-replay)
   inside the hero subhead get a soft chip so they read as commands,
   not muted body text. Matches the chip treatment used elsewhere on
   the page (.faq code, .install-note code, .docs-page code). */
.hero-subhead code {
  background: rgba(0, 73, 183, 0.06);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  font-weight: 500;
  white-space: nowrap;
}
.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* CTA buttons — unified easing, single 200ms transition curve, soft
   y-translate on hover. Border stays 1px on the secondary; primary uses
   a single solid fill so it reads as the page's load-bearing action. */
.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--easing),
    color var(--t-fast) var(--easing),
    border-color var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 2px rgba(2,48,122,.12);
}
.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 8px 20px rgba(2,48,122,.22);
  text-decoration: none;
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 4px rgba(2,48,122,.20);
}
.btn-secondary {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.btn-secondary:hover {
  background: var(--bg);
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 20px rgba(10,14,22,.06);
}
.btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(10,14,22,.06);
}

.hero-trust-strip {
  font-size: 13px;
  color: var(--ink-60);
  margin: 32px 0 0;
  letter-spacing: -0.005em;
}

/* Tighter hero subhead variant — used for the "Maps before agents edit"
   support line so it reads as a single emphasised stanza beneath the
   primary subhead, not a second equally-weighted paragraph. */
.hero-subhead--tight {
  margin-top: 14px;
  font-size: 17px;
  color: var(--ink-80);
  line-height: 1.55;
}

/* ─── Lead band: "Roam reads what it touches" ─── */
.reads-touches {
  padding: 36px 0;
  background: var(--bg-tint);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.reads-touches-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--container-x);
  text-align: center;
}
.reads-touches-eyebrow {
  margin: 0 0 12px;
  text-align: center;
}
.reads-touches-line {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.reads-touches-line em { font-style: italic; }
.reads-touches-line strong { color: var(--accent); font-weight: 600; }

/* Compare table — 3-row layered variant. The base .compare-table rules
   centre all body cells; the layered version reads as prose (left-align
   the "what it sees" column for readability). */
.compare-table--layered tbody td { text-align: left; }
.compare-table--layered tbody th[scope="row"] { width: 180px; min-width: 160px; }

/* ─── What's in the free CLI ─── */
.whats-in {
  padding: var(--section-y) 0;
  background: var(--bg);
}
/* Section variants — alternation rhythm. Default sections use --bg
   (paper). Tinted sections use --bg-tint. Dark wedge uses --bg-deep. */
.whats-in.section-tinted { background: var(--bg-tint); }

/* ─── Dark wedge ───
   The single dark section on the page — algo-wedge is the differentiator,
   so it gets the visual moment. Faint dot grid (lower-contrast variant of
   the hero grid), light copy, accent strong-tags, hairline-bordered cards
   with a subtle inner highlight. */
section.whats-in--dark {
  position: relative;
  background: var(--bg-deep);
  isolation: isolate;
  overflow: hidden;
}
section.whats-in--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
  pointer-events: none;
}
section.whats-in--dark h2 { color: #f5f5f0; }
section.whats-in--dark .lede { color: rgba(245, 245, 240, 0.72); }
section.whats-in--dark .lede strong { color: #ffffff; }
section.whats-in--dark .num-cell {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 1px 24px rgba(0, 0, 0, 0.20);
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
}
section.whats-in--dark .num-cell:hover {
  border-color: rgba(0, 73, 183, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 32px rgba(0, 73, 183, 0.18);
}
section.whats-in--dark .num-cell strong {
  color: #ffffff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 6px;
}
section.whats-in--dark .num-cell span {
  color: rgba(245, 245, 240, 0.72);
  font-size: 13px;
  line-height: 1.55;
}
section.whats-in--dark .how-it-works-foot {
  color: rgba(245, 245, 240, 0.66);
}
section.whats-in--dark .how-it-works-foot code {
  background: rgba(255, 255, 255, 0.06);
  color: #cfd8ec;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}
.whats-in--wide .whats-in-inner { max-width: 980px; }
.wedge-trylist { text-align: center; margin-top: 32px; }
.eyebrow--on-dark { color: rgba(255, 255, 255, 0.55); }
.how-it-works-foot--centered { text-align: center; }
.how-it-works-foot--spaced-top { margin-top: var(--s-6); }
/* Inline-source caption inside .lede paragraphs (e.g. Faros source line). */
.lede-source {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-60);
  font-style: italic;
}
.lede-source a { color: var(--ink-60); }
/* Dogfood band centered variant — uses class-based centering instead of
   inline styles so the rule lives with the component. */
.dogfood-band-inner--centered { text-align: center; max-width: 760px; }
.dogfood-band-inner--centered .lede { max-width: 720px; margin: 0 auto var(--s-5); }
.dogfood-band-inner--centered .dogfood-list { text-align: left; }
.whats-in-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
  text-align: center;
}
.whats-in h2 {
  font-size: var(--t-section-h);
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
}
.whats-in .lede {
  font-size: 17px;
  color: var(--ink-60);
  max-width: 680px;
  margin: 0 auto 40px;
  line-height: 1.55;
  text-wrap: pretty;
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 0 0 36px;
}
@media (max-width: 900px) { .numbers-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .numbers-grid { grid-template-columns: repeat(2, 1fr); } }
.num-cell {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  min-width: 0;
  word-break: keep-all;
  padding: 22px 14px;
  text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
}
.num-cell:hover {
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(2,48,122,.06);
}
.num-cell strong {
  display: block;
  font-size: var(--t-numeric);
  font-weight: 700;
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: -0.5px;
  /* Tabular figures so "1,499" lines up vertically with "299" / "459" /
     "7,731" in the numbers grid — varying digit widths look messy on a
     comparison row. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.num-cell span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.3;
}
.install-cmd {
  background: var(--ink);
  color: #fff;
  padding: 18px 22px;
  border-radius: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  display: inline-block;
  margin: 0 auto 16px;
  text-align: left;
  /* On phones the command can be wider than the container; scroll instead
     of either wrapping ("pip install roam-" / "code &&") or overflowing. */
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  vertical-align: top;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 32px rgba(10,14,22,.10);
}
.install-cmd code { color: #fff; }
.install-cmd code::before {
  content: "$ ";
  color: #6a7280;
}
.install-note {
  font-size: 14px;
  color: var(--muted);
  max-width: 720px;
  margin: 16px auto 24px;
}
.install-note code {
  background: var(--bg-alt);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13px;
}

/* ─── Five-verbs grid ─── */
.verbs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 900px) { .verbs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .verbs-grid { grid-template-columns: 1fr; } }
/* Class modifiers used in setup.html / 404.html so they collapse correctly
   on mobile (inline style="grid-template-columns:..." would block the
   media-query override). */
.verbs-grid--3,
.numbers-grid--3 { grid-template-columns: repeat(3, 1fr); }
.numbers-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .numbers-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .verbs-grid--3,
  .numbers-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .verbs-grid--3,
  .numbers-grid--3 { grid-template-columns: 1fr; }
}
.verb-cell {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 18px;
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition:
    background-color var(--t-fast) var(--easing),
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
}
a.verb-cell:hover {
  background: var(--bg);
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(2,48,122,.06);
  text-decoration: none;
  transform: translateY(-1px);
}
a.verb-cell:active { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 30%); }
.verb-cell code {
  display: block;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.verb-cell span {
  display: block;
  font-size: 13px;
  color: var(--ink-60);
  line-height: 1.5;
}

/* ─── How it works (MCP flow) ─── */
.how-it-works {
  padding: var(--section-y) 0;
  background: var(--bg-tint);
}
.how-it-works-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--container-x);
  text-align: center;
}
.how-it-works h2 {
  font-size: var(--t-section-h);
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
}
.how-it-works .lede {
  font-size: 17px;
  color: var(--ink-60);
  margin: 0 auto 40px;
  max-width: 720px;
  line-height: 1.55;
  text-wrap: pretty;
}
.flow {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  text-align: left;
}
@media (max-width: 800px) { .flow { grid-template-columns: 1fr; } }
.flow li {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
}
.flow li:hover {
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(2,48,122,.06);
}
.flow-num {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.flow li strong { display: block; font-size: 15px; margin-bottom: 6px; }
.flow li em { color: var(--muted); font-style: italic; font-size: 14px; line-height: 1.5; }
.how-it-works-foot {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
/* Inline commands inside the section foot get the same soft chip
   treatment as .hero-subhead code so they read as a runnable command
   rather than muted body text. */
.how-it-works-foot code {
  background: var(--bg-tint);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  font-size: 0.92em;
}

/* ─── Demo block (terminal screenshot) ─── */
.demo-block {
  padding: var(--section-y) 0;
  background: var(--bg);
}
.demo-block-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--container-x);
  text-align: center;
}
.demo-block h2 {
  font-size: var(--t-section-h);
  font-weight: 600;
  margin: 0 0 12px;
}
.demo-block .lede {
  font-size: 16px;
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto var(--s-6);
}
.demo-block .lede code {
  background: var(--bg-alt);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 14px;
}
.terminal {
  background: var(--ink);
  color: #e8e8e8;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  padding: 24px 28px;
  border-radius: 10px;
  text-align: left;
  overflow-x: auto;
  white-space: pre;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 18px;
  /* Outer drop + 1px top inner highlight for terminal-window depth. */
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 12px 32px rgba(10, 14, 22, 0.16);
  -webkit-overflow-scrolling: touch;
  transition: box-shadow var(--t-fast) var(--easing);
}
.terminal:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 1px 0 rgba(255,255,255,.06) inset,
    0 16px 40px rgba(10, 14, 22, 0.20);
}

/* Terminal-in-narrow-card override: scenarios live in a 3-column grid,
   so each card is ~280-360px on desktop. The default `white-space: pre`
   forces lines like `cleanup_old_records  db/maintenance.py:84` to scroll
   horizontally inside the card and clip the right edge — the line stays
   on one line while the card stays narrow. Wrap mid-token instead so
   every char is readable without a scrollbar. Drop a notch in font-size
   to keep the terminal aesthetic without the scroll. */
.scenario .terminal {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: visible;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.6;
  padding: 16px 18px;
}
.scenario .terminal .t-prompt,
.scenario .terminal .t-cmd,
.scenario .terminal .t-line {
  display: inline;
}
.terminal .t-prompt { color: #6a6a6a; user-select: none; }
.terminal .t-cmd { color: #fff; font-weight: 500; }
.terminal .t-line { color: #d6d6d6; }
.terminal .t-em { color: #79c0ff; }
.demo-foot {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* ─── Numbers date caption ─── */
.numbers-date {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin: -24px 0 28px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* ─── First 5 minutes block ─── */
.first-5-min {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 28px;
  max-width: 720px;
  margin: 28px auto 0;
  text-align: left;
}
.first-5-min h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--accent);
}
.first-5-min ol {
  margin: 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.7;
}
.first-5-min ol li { margin-bottom: 4px; color: var(--text); }
.first-5-min code {
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 13px;
  border: 1px solid var(--border);
}

/* ─── How-it-works subheading ─── */
.how-it-works-sub {
  font-size: 17px;
  font-weight: 600;
  margin: 32px 0 14px;
  color: var(--text);
  text-align: center;
}

/* ─── Pain band individual cell ─── */
.pain-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tie-back {
  margin: 0;
  font-size: 13px;
  color: var(--pop);
  font-weight: 500;
  padding-left: 14px;
}
.tie-back code {
  background: rgba(0, 122, 61, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--pop);
}

/* ─── Demo grid (terminal + GitHub PR mockup) ─── */
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-single { max-width: 660px; margin: 0 auto; text-align: left; }
.demo-col { display: flex; flex-direction: column; }
.demo-col > * {
  min-width: 0;
  max-width: 100%;
}
.demo-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin: 0 0 10px;
}

/* ─── PR review comment mockup (authentic Primer tokens + Roam touches) ───
   Replaces the older .gh-pr block. Uses GitHub's actual color tokens for
   credibility (--gh-canvas, --gh-border, severity pills) and adds two
   Roam-distinctive moments competitors don't ship: an inline blast-radius
   SVG visualisation under the medium finding, and a real diff-suggestion
   block under the high finding rendered in GitHub's green-on-paper style. */
:root {
  --gh-canvas: #fff;
  --gh-canvas-subtle: #f6f8fa;
  --gh-canvas-inset: #eff2f5;
  --gh-border: #d1d9e0;
  --gh-border-muted: #d8dee4;
  --gh-fg-default: #1f2328;
  --gh-fg-muted: #59636e;
  --gh-accent-fg: #0969da;
  --gh-danger-fg: #cf222e;
  --gh-danger-emphasis: #cf222e;
  --gh-danger-bg: #ffebe9;
  --gh-danger-border: #ffcecb;
  --gh-attention-fg: #9a6700;
  --gh-attention-bg: #fff8c5;
  --gh-attention-border: #d4a72c;
  --gh-success-fg: #1a7f37;
  --gh-success-bg: #dafbe1;
  --gh-success-border: #aceebb;
}

.pr-card {
  background: var(--gh-canvas);
  border: 1px solid var(--gh-border);
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  color: var(--gh-fg-default);
  line-height: 1.5;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04), 0 8px 24px rgba(31, 35, 40, 0.08);
}

.pr-card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gh-border);
  background: var(--gh-canvas-subtle);
  font-size: 12px;
}
.pr-avatar {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pr-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--gh-fg-muted);
}
.pr-author { font-weight: 600; color: var(--gh-fg-default); }
.pr-app-tag {
  background: var(--gh-canvas-inset);
  border: 1px solid var(--gh-border-muted);
  color: var(--gh-fg-muted);
  border-radius: 3px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pr-meta-sep { color: var(--gh-fg-muted); opacity: 0.6; }

.pr-checks {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--gh-border);
}
.pr-checks--block {
  background: linear-gradient(0deg, var(--gh-danger-bg) 0%, #fff 80%);
  color: var(--gh-fg-default);
}
.pr-checks-icon { display: inline-flex; }
.pr-checks strong { color: var(--gh-danger-emphasis); font-weight: 600; }
.pr-checks-summary { color: var(--gh-fg-muted); }

.pr-findings {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pr-find {
  border: 1px solid var(--gh-border);
  border-left: 3px solid var(--gh-border-muted);
  border-radius: 4px;
  padding: 10px 12px;
  background: var(--gh-canvas);
  font-size: 13px;
}
.pr-find-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pr-sev {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.pr-sev--high {
  background: var(--gh-danger-bg);
  color: var(--gh-danger-fg);
  border-color: var(--gh-danger-border);
}
.pr-sev--med {
  background: var(--gh-attention-bg);
  color: var(--gh-attention-fg);
  border-color: rgba(212, 167, 44, 0.45);
}
.pr-find-kind {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--gh-fg-default);
}
.pr-find-conf {
  font-size: 11px;
  color: var(--gh-fg-muted);
  margin-left: auto;
  font-feature-settings: 'tnum';
}

.pr-find-loc {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--gh-fg-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pr-find-loc a {
  color: var(--gh-accent-fg);
  text-decoration: none;
}
.pr-find-loc a:hover { text-decoration: underline; }
.pr-arrow { color: var(--gh-fg-muted); flex-shrink: 0; }
.pr-find-pct {
  background: var(--gh-canvas-inset);
  border-radius: 3px;
  padding: 0 6px;
  font-size: 11px;
}

.pr-find-body {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--gh-fg-default);
}
.pr-find-body code,
.pr-find-loc code {
  background: var(--gh-canvas-inset);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--gh-fg-default);
}

/* GitHub-style suggestion diff block. Real GH renders this with a header
   strip, then a removed line in pink, an added line in green. We mirror the
   tokens exactly so a dev who's seen GH will recognise it instantly. */
.pr-suggestion {
  margin-top: 8px;
  border: 1px solid var(--gh-border);
  border-radius: 4px;
  overflow: hidden;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.pr-suggestion-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--gh-canvas-subtle);
  border-bottom: 1px solid var(--gh-border);
  font-size: 11px;
  color: var(--gh-fg-muted);
}
.pr-suggestion-hd svg { color: var(--gh-success-fg); }
.pr-suggestion-file {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gh-fg-default);
}
.pr-diff {
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--gh-canvas);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.pr-diff-rm {
  display: block;
  background: #ffebe9;
  color: #82071e;
  padding: 0 6px;
  margin: 0 -6px;
}
.pr-diff-add {
  display: block;
  background: var(--gh-success-bg);
  color: #0a3622;
  padding: 0 6px;
  margin: 0 -6px;
}
.pr-diff-ctx {
  display: block;
  color: var(--gh-fg-muted);
  padding: 0 6px;
  margin: 0 -6px;
}

/* Roam-distinctive: tiny embedded blast-radius graph. No competitor
   ships this — it visualises the "47 callers" claim instead of just
   stating it as a number. */
.pr-blast {
  margin: 8px 0 0 0;
  padding: 8px 10px;
  background: var(--gh-canvas-subtle);
  border: 1px solid var(--gh-border);
  border-radius: 4px;
}
.pr-blast svg { display: block; }

.pr-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--gh-border);
  background: var(--gh-canvas-subtle);
  font-size: 12px;
  color: var(--gh-fg-muted);
}
.pr-cmd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--gh-accent-fg);
  background: var(--gh-canvas-inset);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--gh-border-muted);
}
.pr-cmd-sep { color: var(--gh-fg-muted); opacity: 0.6; }
.pr-cmd-link {
  margin-left: auto;
  color: var(--gh-accent-fg);
  font-size: 12px;
  text-decoration: none;
}
.pr-cmd-link:hover { text-decoration: underline; }

@media (max-width: 540px) {
  .pr-find-hd { gap: 6px; }
  .pr-find-conf { margin-left: 0; width: 100%; }
  .pr-actions { font-size: 11px; }
  .pr-cmd-link { margin-left: 0; width: 100%; padding-top: 4px; }
}

/* ─── Comparison table ─── */
.compare {
  padding: var(--section-y) 0;
  background: var(--bg-tint);
}
.compare-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--container-x);
  text-align: center;
}
.compare h2 { font-size: var(--t-section-h); margin: 0 0 var(--s-3); }
.compare .lede {
  font-size: 16px;
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto var(--s-6);
}
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--container-x));
  padding: 0 var(--container-x);
  /* Subtle scroll-hint shadow on mobile so readers know the table scrolls */
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(253, 253, 253, 0)) 0 0 / 24px 100% no-repeat,
    linear-gradient(to right, rgba(253, 253, 253, 0), var(--bg) 70%) 100% 0 / 24px 100% no-repeat,
    linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0)) 0 0 / 12px 100% no-repeat,
    linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0)) 100% 0 / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
@media (max-width: 600px) {
  .compare-table { font-size: 12px; }
  .compare-table tbody td,
  .compare-table tbody th { padding: 12px 10px; }
  .compare-table tbody th[scope="row"],
  .compare-table tbody td:first-child { padding-left: 14px; }
  .compare-table thead th:first-child { padding-left: 14px; min-width: 180px; }
  /* Sticky first column on phones so the user can keep scrolling
     horizontally without losing track of which row they're reading.
     border-collapse on the table prevents border on the sticky column,
     so we re-paint the right edge with a box-shadow. */
  .compare-table thead th:first-child,
  .compare-table tbody th[scope="row"],
  .compare-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 2;
    box-shadow: 1px 0 0 var(--border);
  }
  .compare-table thead th:first-child {
    background: var(--bg-alt);
  }
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  /* No overflow:hidden — it would round the corners but also break Safari's
     position:sticky on the first column. We'd rather have working sticky
     than rounded corners on a horizontally-scrolling table. */
  min-width: 760px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.compare-table thead th {
  background: var(--bg-tint);
  padding: 16px 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  color: var(--ink);
}
.compare-table thead th:first-child { text-align: left; padding-left: 18px; min-width: 240px; }
.compare-table thead th strong { color: var(--accent); }
.compare-table tbody tr:not(:last-child) td,
.compare-table tbody tr:not(:last-child) th { border-bottom: 1px solid var(--bg-alt); }
.compare-table tbody td,
.compare-table tbody th { padding: 14px 12px; vertical-align: middle; }
.compare-table tbody td { text-align: center; }
.compare-table tbody th[scope="row"],
.compare-table tbody td:first-child { text-align: left; padding-left: 18px; color: var(--text); font-weight: 500; }

.limits .compare-inner { text-align: left; }
.limits .compare-inner h2 { text-align: center; }
.limits .compare-inner > p { max-width: 760px; margin: 0 auto 24px; }
.limits .compare-inner h3 { font-size: 18px; font-weight: 600; margin: 32px 0 12px; }
.limits .compare-inner ul { max-width: 820px; margin: 0 auto 24px; padding-left: 26px; }
.limits .compare-inner ul li { margin-bottom: 8px; line-height: 1.55; }

/* ─── Persona-band detail line (under the headline tier picker) ─── */
.persona-band-detail {
  text-align: center;
  max-width: 820px;
  margin: 16px auto 0;
  font-size: var(--t-sm);
  color: var(--muted);
}

/* ─── Numbers-grid label variant (used for "+ CodeRabbit / Greptile / Qodo" stack-fit cells) ─── */
.numbers-grid--labels { grid-template-columns: repeat(2, 1fr); }
.numbers-grid--labels .num-cell strong { font-size: var(--t-base); color: var(--accent); font-family: 'Space Grotesk', sans-serif; }
@media (max-width: 540px) { .numbers-grid--labels { grid-template-columns: 1fr; } }
/* When --3 + --labels combine (e.g. on /404), respect the --3 cascade. */
.numbers-grid--3.numbers-grid--labels { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .numbers-grid--3.numbers-grid--labels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .numbers-grid--3.numbers-grid--labels { grid-template-columns: 1fr; }
}
/* Link variant of .num-cell — used on the 404 page's destination grid. */
.num-cell--link {
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.num-cell--link:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  text-decoration: none;
}
.num-cell--link:active { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 30%); }
.compare-table .yes { color: var(--pop); font-weight: 600; font-size: 13px; }
.compare-table .no  { color: var(--muted-soft); font-size: 13px; }
.compare-table .ltd { color: var(--warn); font-weight: 500; font-size: 13px; }
.compare-table sup { font-weight: 400; color: var(--muted); margin-left: 2px; font-size: 12px; vertical-align: super; }
/* sup inside the comparison footnote prose: keep at base body size so
   browser-default `font-size: smaller` doesn't pull it below 12 px on
   already-shrunk parents. */
.compare-foot sup { font-size: 1em; line-height: 1; }
.compare-table small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 400; line-height: 1.4; }
.compare-foot {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* ─── Footer meta line ─── */
.footer-meta {
  color: #888 !important;
  font-size: 12px !important;
  font-style: italic;
}

/* ─── Legal pages (privacy / terms / refund) ─── */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--section-y) var(--container-x) clamp(56px, 8vw, 80px);
  font-size: 16px;
  line-height: 1.7;
}
.legal-header { margin-bottom: 36px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.legal-header h1 {
  font-size: clamp(28px, 5vw, 36px);
  line-height: var(--lh-tight);
  margin: 0 0 8px;
  font-weight: 600;
}
.legal-meta { font-size: 13px; color: var(--muted); margin: 0; }
.legal-page article h2 {
  font-size: 20px;
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--accent);
}
.legal-page article h3 { line-height: var(--lh-snug); }
.legal-page article p { margin: 0 0 14px; }
.legal-page article ul, .legal-page article ol { margin: 0 0 14px; padding-left: 26px; }
.legal-page article li { margin-bottom: 6px; }
.legal-page article code {
  background: var(--bg-alt);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 14px;
}
.legal-foot {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}

/* ─── Back-to-product CTA strip (on info/legal pages) ─── */
.page-cta-strip {
  background: var(--accent-soft);
  padding: var(--s-6) var(--container-x);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.page-cta-inner p {
  margin: 0;
  font-size: 15px;
  color: var(--text);
}
.page-cta-inner .btn-primary {
  display: inline-block;
  margin: 0 6px;
  padding: 8px 18px;
  font-size: 14px;
  vertical-align: middle;
}

/* ─── Status page dots ─── */
.status-grid { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 32px; }
.status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
}
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-up { background: var(--pop); box-shadow: 0 0 0 4px rgba(0, 122, 61, 0.15); }
.status-pending { background: var(--warn); box-shadow: 0 0 0 4px rgba(194, 84, 0, 0.15); }
.status-row strong { color: var(--text); flex-shrink: 0; }
.status-row .status-text { color: var(--muted); margin-left: auto; text-align: right; }
@media (max-width: 600px) {
  /* Two-row layout on phones: [dot · name] on the first line, status text
     wrapping below. Keeps the dot anchored to the service it labels. */
  .status-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .status-row .status-text {
    flex-basis: 100%;
    margin-left: 24px; /* line up with strong, past the 12px dot + 12px gap */
    text-align: left;
  }
}

/* ─── Products intro ─── */
.products-intro {
  padding: var(--section-y) 0 0;
  background: var(--bg);
}
.products-intro-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--container-x);
  text-align: center;
}
.products-intro h2 {
  font-size: var(--t-section-h);
  font-weight: 600;
  margin: 0 0 12px;
}
.products-intro .lede {
  font-size: 17px;
  color: var(--muted);
  margin: 0;
}

/* ─── Product cards ─── */
.products {
  max-width: var(--max-w);
  margin: var(--s-6) auto var(--section-y);
  padding: 0 var(--container-x);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-5);
}
/* Tablet: 2-col so three product cards don't immediately stack on iPad
   portrait. The third (Self-Hosted) wraps under the first two — span it
   across both columns and constrain its max-width so it reads as a
   centered "and one more option" beat instead of a stranded left card. */
@media (max-width: 960px) {
  .products { grid-template-columns: repeat(2, 1fr); }
  .products > :nth-child(3):last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--s-5) / 2);
    justify-self: center;
  }
}
@media (max-width: 620px) {
  .products { grid-template-columns: 1fr; }
  .products > :nth-child(3):last-child { max-width: none; }
}

.product-card {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
}
.product-card:hover {
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 8px 24px rgba(2, 48, 122, 0.08);
  transform: translateY(-1px);
}
.product-card.popular:hover {
  /* The popular card already has accent border + heavier shadow at rest;
     match the lift but keep the existing static shadow. */
  border-color: var(--accent);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 12px 32px rgba(0, 73, 183, 0.16);
}

/* Cross-product bridge link under each product card. Subordinate to
   the primary CTA — small, muted, single-line on desktop — but
   surfaces the upsell path so visitors don't have to scroll back to
   the comparison table to find what fits next. */
.product-bridge {
  margin: 14px 0 0;
  font-size: var(--t-xs);
  color: var(--ink-60);
  text-align: center;
  line-height: 1.5;
}
.product-bridge a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-30);
}
.product-bridge a:hover {
  text-decoration-color: var(--accent);
}

/* ─── Agent senses grid (Section 1B) ───
   Each cell is one engineering question agents miss. Featured cell
   (algorithmic judgment) gets a thicker accent border because it's
   our biggest differentiator. */
.senses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 32px auto 0;
}
.sense-cell {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
}
.sense-cell:hover {
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(2, 48, 122, 0.06);
  transform: translateY(-1px);
}
.sense-cell strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sense-cell .sense-q {
  font-size: 13px;
  color: var(--ink-60);
  font-style: italic;
  line-height: 1.5;
  min-height: 2.2em;
}
.sense-cell code {
  font-size: 12px;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.7;
  display: inline;
}
.sense-cell .sense-aside {
  font-size: 12px;
  color: var(--ink-60);
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
  font-style: normal;
  line-height: 1.55;
}
.sense-cell--featured {
  border-color: var(--accent);
  background: var(--accent-soft);
  grid-column: span 1;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 0 0 1px rgba(0, 73, 183, 0.08),
    0 8px 28px rgba(0, 73, 183, 0.10);
}
.sense-cell--featured:hover {
  border-color: var(--accent);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 0 0 1px rgba(0, 73, 183, 0.16),
    0 12px 36px rgba(0, 73, 183, 0.16);
}
@media (max-width: 900px) {
  .senses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .senses-grid { grid-template-columns: 1fr; }
  .sense-cell { padding: 14px 16px; }
}
.product-card h3 {
  margin: 0 0 6px;
  font-size: var(--t-card-h);
  font-weight: 600;
}
.product-card .tagline {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}
.honest-banner {
  /* Inline disclosure inside a product card for "not built yet / early
     access" honesty notes. Muted but more present than .replay-checkout-note
     (which is a centred sub-footnote) — left border + soft background so it
     reads as a callout, not body copy. Italic kept off so embedded <code>
     and <strong> stay legible at 13px. */
  margin: 0 0 18px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-60);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.honest-banner code {
  font-size: 12px;
}
.product-card .features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 14px;
  flex-grow: 1;
}
.product-card .features li {
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: flex-start;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.product-card .features li::before {
  content: "→";
  color: var(--pop);
  margin-right: 8px;
  flex-shrink: 0;
}
/* Named capabilities = the productised senses (Structural Risk Review,
   Algorithmic Risk Review, etc.). Slightly tighter than the generic
   features list so the bold capability name + dash + description
   reads as one phrase per line. */
.product-card .features.named-capabilities li {
  display: list-item;
  padding-left: 0;
}
.product-card .features.named-capabilities li::before {
  content: "";
  margin-right: 0;
}
.product-card .features.named-capabilities li strong {
  color: var(--accent);
  font-weight: 600;
}
.product-card .features code {
  background: var(--bg-alt);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}
.product-card .price {
  margin: 18px 0;
  padding-top: 18px;
  border-top: 1px solid var(--bg-alt);
  text-align: center;
}

.product-card.popular {
  border-color: var(--accent);
  border-width: 2px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 73, 183, 0.08);
}
.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  /* Lift the badge over its card with a soft shadow that matches the
     card's hover-lift shadow so they read as the same elevation. */
  box-shadow: 0 2px 8px rgba(0, 73, 183, 0.25);
  letter-spacing: 0.2px;
}

.persona-band {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-5) 0;
}
.persona-band-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
}
.persona-band .lede {
  margin: 0;
  font-size: var(--t-md);
  line-height: var(--lh-snug);
  color: var(--text);
}

/* ─── Scenarios grid (3 case-study cards) ─── */
.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.scenario {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
}
.scenario:hover {
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(2, 48, 122, 0.06);
  transform: translateY(-1px);
}
.scenario h3 {
  margin: 0 0 8px;
  font-size: var(--t-card-h);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.scenario-cite {
  font-size: var(--t-sm);
  color: var(--ink-60);
  font-style: italic;
  margin: 0 0 var(--s-3);
  line-height: 1.55;
}
.scenario p {
  font-size: 14px;
  margin: 0 0 var(--s-3);
  line-height: 1.55;
}
.scenario .terminal {
  font-size: var(--t-xs);
  margin: 0 0 var(--s-3);
  padding: var(--s-3);
}
.scenario .tie-back {
  margin-top: auto;
  font-weight: 500;
  color: var(--text);
  border-top: 1px solid var(--bg-alt);
  padding-top: var(--s-3);
}
@media (max-width: 880px) {
  .scenarios-grid { grid-template-columns: 1fr; }
}

/* ─── Docs pages ─── */
.docs-subnav {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-3) 0;
  font-size: var(--t-sm);
  position: sticky;
  top: 56px;
  z-index: 9;
}
.docs-subnav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}
.docs-subnav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 0;
}
.docs-subnav a:hover {
  color: var(--accent);
}
.docs-subnav a[aria-current="page"] {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

.docs-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--section-y) var(--container-x);
}
.docs-page h1 {
  font-size: var(--t-2xl);
  font-weight: 700;
  margin: 0 0 var(--s-3);
  line-height: var(--lh-tight);
}
.docs-page > .eyebrow {
  margin: 0 0 var(--s-3);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.docs-page .subtitle {
  font-size: var(--t-md);
  color: var(--muted);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-7);
}
.docs-page section {
  margin-bottom: var(--s-7);
}
.docs-page h2 {
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--text);
  margin: var(--s-7) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.docs-page h3 {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text);
  margin: var(--s-5) 0 var(--s-3);
}
.docs-page p {
  font-size: var(--t-base);
  line-height: var(--lh-base);
  margin: 0 0 var(--s-4);
}
.docs-page ul, .docs-page ol {
  font-size: var(--t-base);
  line-height: var(--lh-base);
  margin: 0 0 var(--s-4);
  padding-left: var(--s-5);
}
.docs-page li {
  margin-bottom: var(--s-2);
}
.docs-page pre {
  background: var(--text);
  color: #e8e8e8;
  padding: var(--s-4);
  border-radius: var(--radius);
  overflow-x: auto;
  margin: var(--s-3) 0 var(--s-4);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--t-sm);
  line-height: 1.55;
}
.docs-page pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}
.docs-page code {
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.92em;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.docs-page table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-3) 0 var(--s-4);
  font-size: var(--t-sm);
}
.docs-page th, .docs-page td {
  text-align: left;
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.docs-page th {
  background: var(--bg-alt);
  font-weight: 600;
}
.docs-page .callout {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-sm);
  color: var(--text);
}
.docs-page .step-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin: var(--s-4) 0;
}
.docs-page .step {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4);
}
.docs-page .step h3 {
  margin-top: 0;
  font-size: var(--t-md);
  color: var(--accent);
}
.docs-page .step p {
  font-size: var(--t-sm);
  color: var(--muted);
  margin-bottom: 0;
}
.docs-page .step pre {
  margin-bottom: var(--s-3);
}
.docs-footer-nav {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}
.docs-footer-nav a {
  flex: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.docs-footer-nav a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.docs-footer-nav a:active { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 30%); }
.docs-footer-nav .label {
  display: block;
  font-size: var(--t-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.docs-footer-nav .next {
  text-align: right;
}
@media (max-width: 700px) {
  .docs-page .step-grid { grid-template-columns: 1fr; }
  .docs-footer-nav { flex-direction: column; }
}

/* ─── Dogfood band ─── */
.dogfood-band {
  padding: var(--section-y) 0;
  background: var(--bg);
}
.dogfood-band-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--container-x);
}
.dogfood-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5);
}
.dogfood-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.dogfood-list li:last-child {
  border-bottom: none;
}
.dogfood-list code {
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--t-xs);
}
.dogfood-list a {
  color: var(--accent);
}
.dogfood-foot {
  font-size: var(--t-sm);
  color: var(--muted);
  text-align: center;
  margin: var(--s-3) 0 0;
}
.price-amount {
  display: block;
  font-size: var(--t-price);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: var(--lh-tight);
}
.price-unit {
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}
.price-note {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 4px auto 0;
  max-width: 36ch;
  line-height: 1.5;
}

/* ─── Audit upsell ─── */
.audit-upsell {
  background: var(--bg-tint);
  padding: var(--section-y) 0;
}
.audit-upsell-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
  text-align: center;
}
.audit-upsell h2 { font-size: var(--t-section-h); margin: 0 0 var(--s-3); }
.audit-upsell .lede {
  font-size: 16px;
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto var(--s-6);
}
.audit-upsell p { font-size: 16px; color: var(--text); }

/* PR Replay tier picker — three side-by-side cards on desktop, stacked
   on phones. Each card has a name, price, body, and CTA. The Sample
   card replaces its CTA with the install command since the user can run
   it without an email exchange. */
.replay-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
  text-align: left;
}
/* Tablet: 2-col with the third tier (Deep) centered on row 2 — keeps
   the "and one more option" tier visible without leaving an orphaned
   left-aligned card. */
@media (max-width: 960px) {
  .replay-tiers { grid-template-columns: repeat(2, 1fr); }
  .replay-tiers > :nth-child(3):last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--s-5) / 2);
    justify-self: center;
  }
}
@media (max-width: 620px) {
  .replay-tiers { grid-template-columns: 1fr; }
  .replay-tiers > :nth-child(3):last-child { max-width: none; }
}
.replay-tier {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
}
.replay-tier:hover {
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(2, 48, 122, 0.06);
  transform: translateY(-1px);
}
.replay-tier h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-card-h);
  font-weight: 600;
  color: var(--accent);
}
.replay-tier .replay-price {
  margin: 0 0 var(--s-3);
  font-size: var(--t-base);
  color: var(--text);
}
.replay-tier .replay-price strong {
  font-size: var(--t-md);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.replay-tier .replay-body {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--muted);
  margin: 0 0 var(--s-4);
  flex-grow: 1;
}
.replay-tier .replay-cmd {
  margin: 0 0 var(--s-3);
  font-size: 13px;
  display: block;
  text-align: left;
  /* The tier card is intentionally narrow (3 across on desktop) — the
     hero .install-cmd's default `white-space: nowrap; overflow-x: auto`
     would force an in-card horizontal scrollbar that looks broken. Wrap
     the command at all widths instead. */
  white-space: normal;
  overflow-x: visible;
}
.replay-tier .replay-cmd code {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.replay-tier .replay-foot {
  font-size: var(--t-xs);
  color: var(--muted);
  margin: 0;
  font-style: italic;
}
/* Sample tier sits between two paid tiers — give it a softer affordance
   so the eye lands on Team and Deep first; sample is a self-serve nudge,
   not the intended commercial path. */
.replay-tier--sample {
  background: var(--bg-alt);
  border-style: dashed;
}

/* Fine-print under the tier picker — turnaround / data-handling, the
   things a procurement-conscious buyer wants to see before clicking. */
.replay-fineprint {
  margin: var(--s-5) auto 0;
  max-width: 820px;
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: var(--lh-snug);
  text-align: left;
}
.replay-fineprint a { color: var(--muted); text-decoration: underline; }
.replay-fineprint a:hover { color: var(--accent); }

/* Mailto fallback under the primary Stripe button on each paid tier card.
   Visually subordinate so the eye lands on Buy first, but easy enough to
   reach for buyers who want to ask a question before paying. */
.replay-mailto-fallback {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  padding: 8px 14px;
  /* Override .btn-secondary's default 14px 22px to keep the visual
     weight low — this is a "or" link, not a peer CTA. */
}

/* Pre-launch checkout note: the primary CTA is currently a mailto:
   while Stripe Payment Links are being set up. This subordinate line
   manages expectations without breaking the visual hierarchy. */
.replay-checkout-note {
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  color: var(--ink-60);
  text-align: center;
}

/* ─── Trust strip ─── */
.trust-strip {
  padding: var(--section-y) 0;
  background: var(--bg-tint);
}
.trust-strip-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--container-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.trust-strip-inner > .trust-cell:nth-child(odd):last-child { grid-column: 1 / -1; }
@media (max-width: 700px) { .trust-strip-inner { grid-template-columns: 1fr; } }
.trust-cell {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing);
}
.trust-cell:hover {
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(2, 48, 122, 0.06);
}
.trust-cell strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.trust-cell span { font-size: 13px; color: var(--ink-60); line-height: 1.55; }
.trust-cell a { color: var(--accent); }

/* ─── FAQ ─── */
.faq {
  background: var(--bg);
  padding: var(--section-y) 0;
}
.faq-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-x);
}
.faq h2 { font-size: var(--t-section-h); margin: 0 0 32px; text-align: center; }
.faq details {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 28px;
  margin-bottom: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition: border-color var(--t-fast) var(--easing), box-shadow var(--t-fast) var(--easing);
}
.faq details:hover { border-color: rgba(0, 73, 183, 0.16); }
.faq details[open] {
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(2, 48, 122, 0.04);
}
.faq summary {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: color var(--t-fast) var(--easing);
}
.faq summary:hover { color: var(--accent); }
.faq details[open] summary { color: var(--accent); }
.faq summary:focus-visible {
  /* FAQ summaries sit inside their padded details box, so the standard
     2 px offset crowds the accordion chevron. Push the ring further out. */
  outline-offset: 4px;
}
.faq summary::after {
  content: "▾";
  float: right;
  /* Slow the chevron rotation slightly + add a tiny spring via cubic-bezier
     so the open/close feels purposeful rather than mechanical. */
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1.4);
  display: inline-block;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
}
.faq code { background: var(--bg-alt); padding: 1px 5px; border-radius: 3px; font-size: 13px; }

/* ─── Footer ─── */
footer {
  background: var(--ink);
  color: #ccc;
  padding: var(--section-y-tight) 0;
  font-size: 14px;
}
footer .footer-col strong { color: #fff; font-weight: 600; letter-spacing: -0.01em; }
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
  display: grid;
  /* Five columns: brand block is wider so the four nav/contact columns
     read as a tighter cluster on the right. Prior `2fr 1fr 1fr 1fr` only
     declared four tracks for five children — the contact column stranded
     onto a second row, leaving the right half of the footer empty. */
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: var(--s-5);
}
@media (max-width: 960px) {
  /* Tablet: brand spans the full first row, four nav columns sit beneath
     it. Keeps the contact column readable instead of squashing five
     tracks into 768 px. */
  .footer-inner { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .footer-inner > .footer-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-col span { color: var(--footer-meta); font-size: var(--t-sm); }
footer a { color: #fff; }

/* ─── Forced-colors (Windows high-contrast, "More contrast" on macOS) ───
   When the OS overrides our color tokens with system colors, the things
   we care about most are: focus rings remain visible, button borders
   exist, gradient/box-shadow fades that conveyed depth get explicit
   borders, and link/button states remain distinct. */
@media (forced-colors: active) {
  /* The accent gradient hero fades the headline into the page; in
     forced-colors, gradients are stripped, so just paint a flat bg. */
  .hero { background: Canvas; }
  /* Buttons rely on background + border for affordance; in forced-colors
     we lose that, so promote the outline to be explicit. */
  .btn-primary,
  .btn-secondary {
    border: 2px solid ButtonText;
  }
  /* Focus rings can disappear into system colors — pin them to
     CanvasText so they're visible on every theme. */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible {
    outline-color: CanvasText;
  }
  /* The "popular" product card relies on accent border + drop-shadow.
     In forced-colors, replace with a thicker explicit border. */
  .product-card.popular {
    border: 3px solid Highlight;
    box-shadow: none;
  }
  .popular-badge {
    background: Highlight;
    color: HighlightText;
  }
  /* Status-dot meaning is conveyed only by color; in forced-colors,
     bring back the dot with explicit borders. */
  .status-dot {
    border: 2px solid CanvasText;
  }
}

/* ─── prefers-contrast: more — boost border weight where the page leans
   on a 1px hairline border for affordance. */
@media (prefers-contrast: more) {
  .num-cell,
  .verb-cell,
  .product-card,
  .trust-cell,
  .scenario,
  .compare-table {
    border-width: 2px;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  /* Suppress every transform/transition site-wide. Targeted at every
     element that animates above (buttons, hero CTAs, FAQ chevron rotate,
     num-cell-link tint), not just hover states — :active transitions
     count too. */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-primary:active,
  .btn-secondary:active,
  .faq summary::after,
  .faq details[open] summary::after {
    transform: none;
  }
}

/* ─── Archive backup link (Wayback) — small, de-emphasized ─── */
.archive-link {
  font-size: 0.78em;
  color: var(--muted);
  text-decoration: none;
  margin-left: 2px;
  opacity: 0.7;
}
.archive-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ─── Touch targets — WCAG 2.5.5 / Apple HIG: 44x44 minimum on mobile ─── */
@media (max-width: 800px) and (pointer: coarse) {
  .nav-links a,
  .footer-col a,
  .verb-cell,
  .num-cell,
  .faq summary,
  .docs-subnav a,
  .dogfood-list a,
  .trust-cell a,
  .compare-foot a,
  .legal-foot a,
  .legal-page article a,
  .audit-upsell a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 8px;
  }
  .num-cell {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .num-cell--link { padding-block: 12px; }
  /* The verb-cell holds <code> + <span> as stacked block children. The
     shared touch-target rule above flips it to `inline-flex` (row), so
     restore the column flow so the command name sits above its caption
     on touch widths. Its 18 px padding already exceeds the 44 px floor. */
  .verb-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block: 18px;
  }
  .footer-col a {
    padding-block: 10px;
  }
  /* The legal-page CTA strip uses a smaller button for visual rhythm; on
     touch screens lift it back above WCAG 2.5.5 minimum. */
  .page-cta-inner .btn-primary {
    padding: 12px 18px;
    min-height: 44px;
  }
}

/* ─── Tight viewport refinements (≤480px). Container padding is already
       fluid via --container-x; this block just tightens hero rhythm and
       shrinks .hero-subhead from 19px to 17px so a 2-line subhead doesn't
       dominate the fold. ─── */
@media (max-width: 480px) {
  .compare-table-wrap {
    /* Match the fluid container-x bleed-through. */
    margin-left: calc(-1 * var(--container-x));
    margin-right: calc(-1 * var(--container-x));
    padding-left: var(--container-x);
    padding-right: var(--container-x);
  }
  .hero-headline { margin-bottom: 18px; }
  .hero-subhead { margin-bottom: 28px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Sub-page visual polish — bring docs/pricing/compare/setup into the
   same refined-card / paper-bg / line-soft / 14-px-radius / 200-ms
   easing world as the homepage. Additive only — none of these rules
   override homepage-only selectors. The legacy --text / --bg-alt /
   --border tokens stay defined upstream so existing references keep
   working; new rules below prefer --ink / --bg-tint / --line-soft.
   ────────────────────────────────────────────────────────────────────── */

/* Mobile-overflow guard for the docs grids. Matches the .products /
   .scenarios-grid pattern at the top of the file: grid items default to
   min-width: min-content, which lets a wide unbreakable child push the
   column wider than the viewport. Force min-width: 0 on direct children
   so they shrink to fit; pair with overflow-wrap on the inline tokens. */
.docs-page .step-grid > *,
.docs-page .step-grid > .step,
.docs-footer-nav > * {
  min-width: 0;
}
.docs-page .step,
.docs-page .step *,
.docs-page .callout,
.docs-page .callout * {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Long inline code tokens inside docs prose can be wider than a phone
   column. Wrap mid-token rather than overflow. */
.docs-page p code,
.docs-page li code,
.docs-page td code,
.docs-page th code,
.docs-page .callout code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Docs pages — hero vs body rhythm + token re-anchor. The hero (header.hero)
   already paints the dot grid + clamp typography from the global rule.
   These overrides rebalance the body of .docs-page so the colour family
   matches the homepage paper + ink + line-soft trio rather than the older
   grey --text / --border one. */
.docs-page {
  /* Bump section breathing to match the homepage rhythm. The previous
     rule set a single padding pair; we keep it but switch to the same
     fluid clamp the homepage sections use. */
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(64px, 8vw, 96px);
  position: relative;
  isolation: isolate;
}
/* Subtle dot-grid lede so docs pages — which don't have a header.hero —
   still inherit the homepage's paper-with-grain texture in the upper
   region. Fades out before the prose starts so the reading column stays
   plain. The mask keeps the grid at low opacity through the eyebrow +
   h1 + subtitle, then drops off. */
.docs-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 360px;
  z-index: -1;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(10, 14, 22, 0.10) 1px, transparent 1.5px);
  background-size: 24px 24px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 50%, transparent 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 50%, transparent 100%);
  pointer-events: none;
}
.docs-page h1 { color: var(--ink); }
.docs-page h2 {
  color: var(--ink);
  border-bottom-color: var(--line-soft);
}
.docs-page h3 { color: var(--ink); }
.docs-page p,
.docs-page ul,
.docs-page ol,
.docs-page li { color: var(--text); }
.docs-page .subtitle { color: var(--ink-60); }
.docs-page .step {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  padding: 22px 22px;
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
}
.docs-page .step:hover {
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(2, 48, 122, 0.06);
}
.docs-page .step h3 {
  margin-top: 0;
  color: var(--accent);
  font-size: 15px;
  letter-spacing: -0.01em;
}
.docs-page .step p { color: var(--ink-60); font-size: 14px; }
.docs-page .step pre {
  /* Wrap inside the narrow step card; otherwise long commands force the
     card wider than the viewport on phones. */
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.55;
  margin-bottom: 12px;
}
.docs-page pre {
  /* Bring the docs pre block in line with the homepage .terminal — the
     deep --ink fill, soft inner highlight, and 14-px radius. */
  background: var(--ink);
  color: #e8e8e8;
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 32px rgba(10, 14, 22, 0.10);
}
.docs-page code {
  background: var(--bg-tint);
  border: 1px solid var(--line-soft);
}
.docs-page pre code {
  background: transparent;
  border: none;
}

/* Docs callout — keep the warm tint, switch to a softer hairline so
   the panel reads as sibling to the new card system. */
.docs-page .callout {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
  color: var(--text);
  padding: 14px 18px;
  line-height: 1.6;
}

/* Docs tables — wrap any plain table inside a .docs-page in a horizontal
   scroller via a flex/grid trick. The table itself gets the new card
   treatment. We add display:block + overflow-x:auto on the table so
   long-cell content (Codex CLI command lines) doesn't blow out the
   viewport on phones. */
.docs-page table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  /* Reset the table-element border-collapse since display:block changes
     box rendering — re-establish hairline rules between rows via th/td
     bottom-border below. */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg);
}
/* Force each row + cell to behave like a normal table inside the block
   wrapper. */
.docs-page table thead,
.docs-page table tbody { display: table; width: 100%; min-width: 100%; }
.docs-page table th,
.docs-page table td {
  border-bottom: 1px solid var(--line-soft);
}
.docs-page table tr:last-child th,
.docs-page table tr:last-child td { border-bottom: none; }
.docs-page table th {
  background: var(--bg-tint);
  color: var(--ink);
}
.docs-page table th code,
.docs-page table td code {
  /* Plex Mono inside cells already short — keep the soft tint but no
     border so it doesn't fight the cell's bottom rule. */
  border: none;
  background: var(--bg-tint);
}

/* Docs pagination — promote the prev/next pair to the same refined-card
   treatment with a subtle accent on hover instead of the old fill. */
.docs-footer-nav {
  border-top: 1px solid var(--line-soft);
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: clamp(20px, 3vw, 28px);
  gap: 16px;
}
.docs-footer-nav a {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
}
.docs-footer-nav a:hover {
  background: var(--bg);
  border-color: rgba(0, 73, 183, 0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(2, 48, 122, 0.06);
  transform: translateY(-1px);
}
.docs-footer-nav .label { color: var(--ink-60); }

/* Docs subnav — switch from the older grey track to the same paper +
   line-soft pair the rest of the page uses. The sticky behaviour stays
   intact (top: 56px from earlier rule). */
.docs-subnav {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.docs-subnav a {
  color: var(--ink-60);
  transition: color var(--t-fast) var(--easing);
}
.docs-subnav a:hover { color: var(--ink); }

/* Compare-page: the four-layer "verbs-grid" + accent-tinted cells.
   Already use --line-soft via the .verb-cell rule. The compare table
   itself already uses the new style. We refine the accent-tinted cells
   so they read as a layered companion rather than a default contrast. */
.verb-cell--accent {
  border-color: rgba(0, 73, 183, 0.30) !important;
  background: var(--accent-soft) !important;
}
.verb-cell--accent code { color: var(--accent); }

/* Setup-page editor cards — the verb-cells already pick up the new
   border + radius + shadow + 200ms easing. Slightly larger vertical
   padding so the editor name reads as a product card, not a row. */
.setup-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 900px) { .setup-editor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .setup-editor-grid { grid-template-columns: 1fr; } }
.setup-editor-grid > * { min-width: 0; }
.setup-editor-grid .verb-cell { padding: 22px 22px; }
.setup-editor-grid .verb-cell code { font-size: 14px; margin-bottom: 10px; }
.setup-editor-grid .verb-cell span { font-size: 13px; line-height: 1.55; }

/* Pricing-page: the "buying path" flow already inherits .flow + .flow-num
   from the homepage. The intro section uses inline padding-top — we add
   a class modifier so the centred-inner pattern is class-driven. */
.section-intro-tight { padding-top: clamp(40px, 5vw, 56px); }
.whats-in-inner--narrow { max-width: 880px; text-align: left; }
.whats-in-inner--narrow > h2,
.whats-in-inner--narrow > .lede,
.whats-in-inner--narrow > .how-it-works-foot { text-align: center; }
/* Pricing — persona-band lede (replaces a former inline style chain). */
.persona-band-lede {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
/* Pricing — the product cards immediately follow the persona band, so
   we collapse the top margin so the row sits flush to the band. */
.products--flush-top { margin-top: 0; }

/* Compare-page helper classes (replaces inline style chains). */
.whats-in-inner--wide { max-width: 980px; }
.whats-in--flush-top { padding-top: 0 !important; }
.whats-in-inner--prose { max-width: 760px; text-align: left; }
.compare-h2--tight {
  text-align: center;
  margin-bottom: 8px;
}
.compare-lede--tight {
  text-align: center;
  margin-bottom: 24px;
}
.text-center { text-align: center; }
.prose-h3-spaced { margin-top: 36px; }
.prose-list { line-height: 1.8; }
/* Long URLs inside the .prose-list (vendor-source list on /compare) can
   blow out a 320-px column. Wrap mid-token rather than overflow. */
.prose-list a,
.prose-list li { overflow-wrap: anywhere; word-break: break-word; }
/* Compare 4-layer grid — 2-column on desktop, 1-column on phones. The
   .verbs-grid--3 modifier already sets 3-up which we don't want here. */
.verbs-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto; }
@media (max-width: 700px) { .verbs-grid--2 { grid-template-columns: 1fr; } }
.review-layers-grid {} /* hook for future tweaks */
.review-layers-foot {
  margin-top: 28px;
  text-align: center;
}
/* Legend swatch colours pinned to existing tokens — replaces the inline
   color attribute on the strong elements. */
.legend-yes { color: var(--pop); }
.legend-ltd { color: var(--warn); }
.legend-no { color: var(--muted-soft); }

/* Compare table inside the limits / pricing comparison sections — the
   rule already targets .compare-table; this just ensures small captions
   and pricing-tier first cells align with the new ink colour. */
.limits .compare-table tbody th[scope="row"] { color: var(--ink); }

/* Docs index — the "8 guides" grid uses .num-cell as a clickable link
   with inline accent + larger title. Promote those to a class so the
   links carry hover and focus consistently with the rest of the system. */
.docs-card {
  text-decoration: none;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px;
}
.docs-card:hover { text-decoration: none; }
.docs-card strong {
  display: block;
  font-size: 17px;
  color: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.docs-card span {
  display: block;
  font-size: 13px;
  color: var(--ink-60);
  line-height: 1.55;
  margin-top: 0;
}

/* Compare-page footnote line of mailto links can be longer than the
   320-px viewport. Keep them inside .compare-foot's wrap rule. */
.compare-foot a { overflow-wrap: anywhere; }

/* Documentation hero on the docs/agent-contract page used to live in
   .legal-page; now it inherits .docs-page. Tighten the article's prose
   nudge so terminal blocks don't blow out the gutter. */
.docs-page article > p:first-of-type { margin-top: 0; }
.docs-page article {
  /* The agent-contract / demos terminal blocks contain very long lines
     (`<span class="t-cmd">git diff main..HEAD | roam critique</span>`) —
     preserve the existing terminal's pre-wrap behaviour but ensure the
     containing article doesn't shrink-wrap the column. */
  min-width: 0;
}
.docs-page article > .terminal {
  /* Standalone terminals embedded in prose look better with the same
     wrap-mid-token treatment as in scenario cards on the homepage. */
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 12px;
  margin: 14px 0 18px;
}

/* ─── Print: legal/info pages should print clean ─── */
@media print {
  /* Hide non-essential UI */
  .site-nav,
  footer,
  .skip-link,
  .page-cta-strip,
  .audit-upsell,
  .hero-ctas,
  .btn-primary,
  .btn-secondary,
  .nav-cta,
  .docs-subnav,
  .docs-footer-nav {
    display: none !important;
  }
  /* Reset to print-friendly defaults */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }
  .legal-page,
  .hero-inner,
  .whats-in-inner,
  .compare-inner,
  .faq-inner,
  main {
    max-width: none;
    padding: 0 1cm;
  }
  /* Force compare-tables and FAQ details to render fully (no scroll, no
     hidden content) when printed. */
  .compare-table-wrap { overflow-x: visible; }
  .compare-table { min-width: 0; }
  .faq details { /* Open every details so printed pages show all answers. */ }
  .faq details > summary::after { content: ""; }
  .faq details > p { display: block; }
  /* Code blocks should wrap rather than scroll on paper. */
  .terminal,
  .docs-page pre {
    white-space: pre-wrap;
    overflow-x: visible;
    box-shadow: none;
    border: 1pt solid #000;
    background: #f6f6f6 !important;
    color: #000 !important;
  }
  /* Show full URLs after links */
  a[href^="http"]:after,
  a[href^="/"]:after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }
  a[href^="mailto:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }
  h2, h3 {
    page-break-before: auto;
    break-before: auto;
  }
  pre, code, table, blockquote, .pr-card, .scenario {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Header/footer-style at top of every printed page (page meta) */
  .legal-header,
  .hero-inner > .eyebrow {
    border-bottom: 1pt solid #000;
    padding-bottom: 0.5cm;
    margin-bottom: 0.5cm;
  }
}

/* ─── Pricing tier pills ───
   Used on /pricing for the "Limits and definitions" sub-table so the
   four tiers read as a hierarchy at a glance instead of plain row text.
   Subtle colour ramp from soft → bold matching the four price points. */
.tier-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
  margin-right: 8px;
  border: 1px solid transparent;
  text-transform: uppercase;
}
.tier-pill--starter {
  background: #e6f4ea;
  color: #1f6f43;
  border-color: #c4e3d0;
}
.tier-pill--team {
  background: #e7eefb;
  color: var(--accent);
  border-color: #c8d6f2;
}
.tier-pill--business {
  background: #efe4f6;
  color: #6b3e9c;
  border-color: #d8c3e6;
}
.tier-pill--scale {
  background: #fbf2dc;
  /* Darkened from #876016 (5.14:1) to #6e4f12 (6.81:1) so 11px text
     keeps WCAG AA margin under low-contrast monitors / sunlight.
     Border kept warm so the pill still reads as the gold tier. */
  color: #6e4f12;
  border-color: #e8d39a;
}
.tier-pill--planned {
  /* Muted warm-grey for "planned / early access" — distinct from the four
     shipped tiers (green/blue/purple/gold) so readers parse it as a state
     marker, not a fifth price tier. Contrast ratio 7.4:1 against the
     #f3eee3 background for WCAG AAA on 11px text. */
  background: #f3eee3;
  color: #6b5530;
  border-color: #d9cdb3;
}
.tier-price {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: 'tnum';
}
