/* Preclari site stylesheet
   Sibling of Pramod Prasanth · Practice. Same Plex stack, same hairline-and-stone
   discipline, distinct accent (Graphite Blue) to read as its own product.        */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;1,300&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* No element may cause page-level horizontal scroll; wide code/traces scroll within their own overflow-x container. clip (not hidden) keeps position:sticky working. */
html, body { overflow-x: clip; }

:root {
  /* ── Ink + accent ─────────────────────────────────────── */
  --rc-graphite:       #2A2A2C;
  --rc-graphite-deep:  #1f1f21;   /* dark surfaces inside duet pane */
  --rc-mid:            #6A675F;   /* tertiary text — meets AA on paper */
  --rc-mid-soft:       #8C8880;   /* legacy quiet label — AA Large only */
  --rc-blue:           #1E3A5F;   /* Preclari accent, graphite blue */
  --rc-blue-deep:      #16304F;
  --rc-blue-light:     #8aafe5;   /* on-dark accent reference */
  --rc-teal:           #1F4D4A;   /* PPP sibling reference */
  --rc-teal-light:     #9cc6a8;   /* on-dark success / ok */

  /* ── Surfaces ─────────────────────────────────────────── */
  --rc-paper:      #FAFAF8;
  --rc-paper-bright: #FFFFFF;     /* used only on hover where extra lift is needed */
  --rc-stone:      #F2F0EC;
  --rc-stone-deep: #ECE9E2;
  --rc-dust:       #E4E1DB;
  --rc-alert:      #7A3B2E;

  /* ── Code-block syntax (on dark graphite ground) ──────── */
  --code-key:      #b0c4dd;
  --code-str:      #e6e2d6;
  --code-num:      #c2b0dd;

  /* ── On dark blue ─────────────────────────────────────── */
  --rc-on-blue-primary:   #FAFAF8;
  --rc-on-blue-secondary: rgba(250, 250, 248, 0.62);
  --rc-on-blue-eyebrow:   rgba(250, 250, 248, 0.45);
  --rc-on-blue-hairline:  rgba(250, 250, 248, 0.22);

  /* ── Type ─────────────────────────────────────────────── */
  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans:  'IBM Plex Sans', Arial, sans-serif;
  --mono:  'IBM Plex Mono', 'Courier New', monospace;

  /* ── Spacing 8px base ─────────────────────────────────── */
  --s-2: 4px;  --s-3: 8px;  --s-4: 12px; --s-5: 16px;
  --s-6: 20px; --s-7: 24px; --s-8: 32px; --s-9: 40px;
  --s-10: 48px; --s-11: 56px; --s-12: 64px; --s-13: 72px;
  --s-14: 80px; --s-15: 96px; --s-16: 120px;

  /* ── Layout ───────────────────────────────────────────── */
  --content-max: 1240px;
  --gutter: 48px;

  /* ── Accent ───────────────────────────────────────────── */
  --accent: var(--rc-blue);
  --accent-deep: var(--rc-blue-deep);
}

/* ─── Base ──────────────────────────────────────────────── */

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  background: var(--rc-paper);
  color: var(--rc-graphite);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--rc-paper); }

/* Site-wide tabular numerals for data / pricing / hashes */
.tier-price-num, .tier-quota, .tier-period,
.artifact-row .v, .artifact-foot, .about-meta,
.footer-legal, .scale-row, .hash, .mcp-trace,
.spec-code pre, .step-snippet, .swatch-row .hex,
.coverage-section .meta, .source-row .meta {
  font-variant-numeric: tabular-nums;
}

/* ─── Focus indicators (keyboard) ──────────────────────── */
a:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav-cta:focus-visible,
.cta-primary:focus-visible,
.tier-cta:focus-visible,
.access-cta-row .cta-primary:focus-visible {
  outline-offset: 4px;
}
/* On dark grounds (footer, duet, access block) use paper for visibility */
footer a:focus-visible,
.duet-pane.dark a:focus-visible,
.access-block a:focus-visible,
.tier-card.is-featured a:focus-visible {
  outline-color: var(--rc-paper);
}

/* ─── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
}

/* ─── Top stripe + skip ─────────────────────────────────── */

.top-stripe {
  height: 4px;
  background: var(--accent);
  position: sticky;
  top: 0;
  z-index: 50;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 12px;
  background: var(--rc-graphite);
  color: var(--rc-paper);
}
.skip:focus { left: 16px; top: 16px; z-index: 100; }

/* Private-beta banner — quiet hairline strip below the nav. Reads as
   informational, not as a marketing alert. Reuses --rc-stone / --rc-dust /
   --rc-mid / --rc-blue tokens; no new colour tokens. */
.beta-banner {
  display: flex;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-4) var(--gutter);
  background: var(--rc-stone);
  border-bottom: 1px solid var(--rc-dust);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--rc-graphite);
  max-width: var(--content-max);
  margin: 0 auto;
}
.beta-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rc-blue);
  font-weight: 500;
  flex-shrink: 0;
}
.beta-msg { color: var(--rc-mid); font-weight: 300; }
.beta-msg strong { color: var(--rc-graphite); font-weight: 500; }
@media (max-width: 760px) {
  .beta-banner { flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--gutter); }
}

/* ─── Nav ───────────────────────────────────────────────── */

/* Sticky header: the existing nav acts as the TOC on scroll. Paper
   background opaque so the rest of the page doesn't bleed through.
   Hairline border-bottom is permanent (paper-on-paper at the top is
   visually inert; gives clean separation once scrolling reveals content
   underneath). No script required. */
.nav {
  position: sticky;
  top: 4px;                /* clears the decorative .top-stripe (4px, z-index 50, sticky) */
  z-index: 20;
  background: var(--rc-paper);
  border-bottom: 1px solid var(--rc-dust);
}
.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-lockup { display: flex; flex-direction: column; line-height: 1; }

/* ── Wordmark: one component, two sizes ────────────────────
   Single wordmark used by both the nav and the footer (previously two
   per-location classes). Base size is the nav size; .wordmark--lg is the
   footer size. The "clari" root is set in brand blue (.wm-accent) as a
   logo treatment only; running-text "Preclari" stays one colour. */
.wordmark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  color: var(--rc-graphite);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: baseline;
}
.wordmark--lg { font-size: 22px; }

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

/* The mark reads as the full stop in "Preclari.", not a detached chip:
   small, tight to the final letter, sitting low on the baseline. The "."
   glyph stays in the DOM for screen readers but is visually replaced by
   the square. */
.wordmark .dot {
  display: inline-block;
  width: 0.30em;
  height: 0.30em;
  background: var(--accent);
  margin-left: 0.02em;
  vertical-align: baseline;
  text-indent: -999em;
  overflow: hidden;
  line-height: 1;
  position: relative;
  top: 0.02em;
}

/* Dark-ground variant. On a dark surface (the footer) the default dark navy
   wordmark is invisible. Lift the whole lockup: the "Pre" base text to the
   on-dark paper tone, and "clari" + the dot to the on-dark blue, all under
   one modifier (do not re-style per-location). */
.wm--on-dark { color: var(--rc-on-blue-primary); }
.wm--on-dark .wm-accent { color: var(--rc-blue-light); }
.wm--on-dark .dot { background: var(--rc-blue-light); }

/* Byline under the nav wordmark (the header brand lockup). Deliberately
   tiny and quiet so it never competes with the "Preclari" mark above it. */
.nav-byline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.03em;
  color: var(--rc-mid);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--rc-mid);
  text-transform: lowercase;
  transition: color 0.15s;
  padding: 10px 0;             /* ~32px hit target, well over WCAG 2.5.8 24px */
  border-bottom: 1px solid transparent;
  line-height: 1;
}
.nav-link:hover { color: var(--rc-graphite); border-bottom-color: var(--rc-dust); }
.nav-link.is-current { color: var(--rc-graphite); border-bottom-color: var(--rc-dust); }

.nav-cta {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--rc-paper);
  text-transform: uppercase;
  background: var(--accent);
  padding: 9px 14px 8px;
  transition: background 0.15s;
}
.nav-cta:hover { background: var(--accent-deep); }

/* ── Mobile hamburger (≤760px) ─────────────────────────────
   Desktop: the toggle button and the panel are hidden entirely; the inline
   .nav-links carry the navigation. The ≤760px rules (in the breakpoint block
   below) hide .nav-links, reveal the hamburger top-right, and turn .nav-mobile
   into a dropdown anchored under the sticky header. Behaviour lives in
   src/scripts/mobile-nav.ts. */
.nav-toggle {
  display: none;                 /* shown only ≤760px */
  align-items: center;
  justify-content: center;
  padding: 7px;
  background: none;
  border: 1px solid var(--rc-dust);
  border-radius: 2px;
  color: var(--rc-graphite);
  cursor: pointer;
  transition: border-color 0.15s;
}
.nav-toggle:hover { border-color: var(--rc-mid); }
.nav-toggle-icon { display: block; }
.nav-toggle-icon line {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
}
.nav-mobile { display: none; }   /* never shown >760px */

/* ─── Main container ────────────────────────────────────── */

main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-16);
}

section { padding: var(--s-16) 0; }
section.no-border { border-top: 0; }
section.is-tight { padding-top: 0; padding-bottom: 0; }
section.is-flush-top { padding-top: 0; }
section.is-narrow-bottom { padding-bottom: 64px; }
section.is-tall-bottom { padding-bottom: 96px; }

/* small inline-content utilities — keep at top to override later rules */
.measure-narrow { max-width: 24ch; }
.in-card-link {
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.mono-inline {
  font-family: var(--mono);
  font-size: 0.92em;
}

/* ─── Eyebrow + section header ──────────────────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 32px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rc-dust);
}

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--rc-graphite);
  max-width: 22ch;
}

.section-sub {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--rc-mid);
  max-width: 60ch;
  margin-top: 12px;
}

/* ─── Hero ──────────────────────────────────────────────── */

.hero { padding: 80px 0 96px; border-top: 0; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: start;
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--rc-graphite);
  max-width: 16ch;
  text-wrap: balance;
}
.hero-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* hero-tagline: the brand line "Clarity before execution." sits directly
   under the H1 question as the answer-shaped promise, connecting what
   preflight means above to the value below. Medium-weight sans, accent. */
.hero-tagline {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--accent);
  margin-top: 14px;
}

/* hero-definition: the category statement. Sits under the brand tagline and
   names what Preclari is (regulatory decision infrastructure) before the
   Today/Next anchor narrows it to the live corpus. Sans body weight; the
   leading category clause is bold so the category reads first. */
.hero-definition {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--rc-graphite);
  margin-top: 16px;
  max-width: 54ch;
}
.hero-definition strong {
  font-weight: 600;
  color: var(--rc-graphite);
}

.hero-gloss {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--rc-mid);
  margin-top: 22px;
  max-width: 52ch;
}

/* hero-pif-def: above-the-fold definition of PIF. Sits right after
   .hero-gloss so a first-time reader meets the "preflight" definition
   and the "PIF" definition in the same eye-sweep, before any CTA or
   the worked example. Sans-light rhythm contrasts with the italic
   serif gloss above so the two definitions read as a paired note
   rather than one long run-on. */
.hero-pif-def {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rc-mid);
  margin-top: 12px;
  max-width: 56ch;
  padding: 10px 14px;
  background: var(--rc-stone);
  border-left: 2px solid var(--rc-dust);
}
.hero-pif-def strong {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--rc-graphite);
}

.hero-sub {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--rc-graphite);
  margin-top: 28px;
  max-width: 56ch;
}
.hero-sub strong {
  font-weight: 500;
  color: var(--rc-graphite);
}

/* hero-outcomes: three-bullet promise list sitting under .hero-sub.
   Skimmable beats dense prose on the home page. Mono-accent square
   markers in place of the default disc. */
.hero-outcomes {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  max-width: 56ch;
}
.hero-outcomes li {
  position: relative;
  padding-left: 22px;
  margin: 6px 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--rc-graphite);
}
.hero-outcomes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 1.5px;
  background: var(--accent);
}

/* Concrete worked-example block in the hero — bridges the abstract headline
   to a named workflow so non-AI readers get the picture in one read. */
.hero-example {
  position: relative;
  margin-top: 24px;
  padding: 14px 18px 14px 22px;
  background: var(--rc-stone);
  max-width: 56ch;
}
.hero-example::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--accent);
}
.hero-example-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.hero-example p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rc-graphite);
}
.hero-example em {
  font-style: italic;
  font-weight: 400;
  color: var(--rc-graphite);
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-paper);
  background: var(--accent);
  padding: 14px 22px 13px;
  transition: background 0.15s;
}
.cta-primary:hover { background: var(--accent-deep); }

.cta-secondary {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-graphite);
  padding: 9px 0 6px;          /* ~28px hit target */
  border-bottom: 1px solid var(--rc-graphite);
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}
.cta-secondary:hover { color: var(--accent); border-bottom-color: var(--accent); }

.hero-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--rc-dust);
}
.hero-meta-item {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-mid);
}
.hero-meta-item strong {
  font-weight: 400;
  color: var(--rc-graphite);
}

/* ─── Hero artifact (the product surface) ───────────────── */

.artifact-frame {
  background: var(--rc-stone);
  border: 1px solid var(--rc-dust);
  padding: 0;
  position: relative;
  font-family: var(--mono);
  color: var(--rc-graphite);
}

.artifact-source {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-mid);
  margin-top: 12px;
  text-align: right;
}
.artifact-source a {
  color: var(--rc-mid);
  border-bottom: 1px solid var(--rc-dust);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.artifact-source a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.artifact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 13px;
  border-bottom: 1px solid var(--rc-dust);
  background: var(--rc-paper);
}
.artifact-head .title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--rc-graphite);
}
.artifact-head .badge {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 7px 2px;
}

.artifact-body { padding: 22px 24px 24px; }

.artifact-row {
  display: grid;
  grid-template-columns: 17ch minmax(0, 1fr);
  gap: 16px;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  border-bottom: 1px dotted var(--rc-dust);
}
.artifact-row:last-child { border-bottom: 0; }
.artifact-row .k { color: var(--rc-mid); font-weight: 400; }
.artifact-row .v { color: var(--rc-graphite); font-weight: 400; overflow-wrap: anywhere; }
.artifact-row .v.accent { color: var(--accent); font-weight: 500; }
.artifact-row .v.alert { color: var(--rc-alert); font-weight: 500; }

.artifact-foot {
  padding: 14px 24px;
  background: var(--rc-paper);
  border-top: 1px solid var(--rc-dust);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--rc-mid);
  letter-spacing: 0.04em;
}
.artifact-foot .hash { color: var(--rc-graphite); }

/* inline code in body copy */
code.inline {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--rc-graphite);
}

/* ─── Category statement ────────────────────────────────── */

.category {
  padding: 96px 0 80px;
}
.category-display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--rc-graphite);
  max-width: 28ch;
  text-wrap: balance;
}
.category-display em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.category-quote { color: var(--rc-mid); font-style: italic; }
/* category-upstream: the positioning claim. Preclari sits above systems of
   record. Sits between the display line and the body prose, weighted heavier
   than the body so the upstream framing lands before the supporting detail. */
.category-upstream {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--rc-graphite);
  max-width: 60ch;
  margin-top: 28px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}
.category-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rc-graphite);
  max-width: 60ch;
  margin-top: 36px;
}
.category-body p + p { margin-top: 14px; }

/* compare-2col: workflow-first vs document-first ledger. Two columns;
   workflow-first sits in accent paper-on-stone, document-first is muted
   to keep the eye on the side Preclari takes. Reuses stone/dust/accent
   tokens; no new colour vocabulary. */
.compare-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 32px;
  max-width: 64ch;
}
.compare-col {
  background: var(--rc-stone);
  padding: 18px 22px 20px;
  border-top: 2px solid var(--accent);
}
.compare-col--muted {
  border-top-color: var(--rc-dust);
  opacity: 0.78;
}
.compare-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.compare-col--muted .compare-h { color: var(--rc-mid); }
.compare-dl { margin: 0; }
.compare-dl dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-mid);
  margin-top: 8px;
}
.compare-dl dt:first-child { margin-top: 0; }
.compare-dl dd {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--rc-graphite);
  margin: 2px 0 0;
}

/* ─── How it works ──────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 48px;
}
.step {
  background: var(--rc-stone);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
}
.step-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rc-mid);
  margin-bottom: 24px;
}
.step-num .n {
  color: var(--accent);
  font-weight: 500;
}
.step-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--rc-graphite);
  margin-bottom: 12px;
}
.step-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rc-graphite);
  margin-bottom: 24px;
}
.step-body code {
  font-family: var(--mono);
  font-size: 12px;
}
.step-snippet {
  margin-top: auto;
  background: var(--rc-paper);
  border: 1px solid var(--rc-dust);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--rc-graphite);
  position: relative;
  white-space: pre;
  overflow-x: auto;
}
.step-snippet .k { color: var(--rc-mid); }
.step-snippet .s { color: var(--rc-graphite); }
.step-snippet .a { color: var(--accent); }
/* step-snippet shows an illustrative shape, not a literal SAMPLE marker —
   real example JSON is linked from the hero artifact and Open Spec sections. */

/* step-detail: wraps the JSON snippet behind a <details>/<summary> toggle
   so non-technical QA/RA readers can skim the three steps without parsing
   shape-of-output code. Native disclosure widget is restyled to match the
   no-rounded-corners design vocabulary; the caret rotates on open. */
.step-detail {
  margin-top: auto;
}
.step-detail > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 0;
  border-bottom: 1px solid var(--rc-dust);
  transition: border-color 0.15s;
}
.step-detail > summary::-webkit-details-marker { display: none; }
.step-detail > summary::marker { content: ""; }
.step-detail > summary:hover { border-bottom-color: var(--accent); }
.step-detail > summary .caret {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.15s ease;
}
.step-detail[open] > summary .caret { transform: rotate(180deg); }
.step-detail[open] > summary { margin-bottom: 10px; }
.step-detail .step-snippet { margin-top: 0; }

/* ─── MCP trace ─────────────────────────────────────────── */

.mcp-trace { padding: 20px 22px; font-family: var(--mono); font-size: 12px; line-height: 1.65; overflow-x: auto; }
.mcp-trace .ln { display: block; color: var(--rc-graphite); white-space: pre; }
.mcp-trace .ln.dim { color: var(--rc-mid); }
.mcp-trace .marker-in  { color: var(--accent); font-weight: 500; }
.mcp-trace .marker-out { color: var(--rc-teal); font-weight: 500; }
.mcp-trace .str { color: var(--rc-graphite); }
.mcp-trace .key { color: var(--rc-mid); }
.mcp-trace .ok  { color: var(--rc-teal); font-weight: 500; }
.mcp-trace .warn { color: var(--rc-alert); font-weight: 500; }
.mcp-trace .hash { color: var(--rc-mid); }
.mcp-trace .sep {
  display: block;
  margin: 12px 0;
  border-top: 1px dotted var(--rc-dust);
}

/* Compact brief-mock variant for the duet-pane preview */
.brief-mock.is-compact { padding: 28px 28px 24px; }
.brief-mock.is-compact h4 { font-size: 18px; }
.brief-mock.is-compact .subj { margin-bottom: 14px; padding-bottom: 10px; }
.brief-mock.is-compact .findings { margin-bottom: 8px; }
.brief-mock.is-compact .sig-row { margin-top: 16px; padding-top: 12px; }

/* ─── Audience routing links ────────────────────────────── */
.audience-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--rc-dust);
  transition: border-color 0.15s;
}
.audience-link:hover { border-bottom-color: var(--accent); }

/* ─── Where it fits in your pipeline ──────────────────── */

.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 48px;
}
.pipeline-card {
  background: var(--rc-stone);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.pipeline-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.pipeline-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--rc-graphite);
  margin-bottom: 12px;
}
.pipeline-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rc-graphite);
}
.pipeline-body code {
  font-family: var(--mono);
  font-size: 12.5px;
}
.pipeline-snippet {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--rc-graphite);
  white-space: pre;
  overflow-x: auto;
}
.pipeline-snippet .k { color: var(--accent); font-weight: 500; }
.pipeline-snippet .s { color: var(--rc-graphite); }
.pipeline-snippet .com { color: var(--rc-mid); font-style: italic; }
.pipeline-foot {
  margin-top: 36px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--rc-graphite);
  max-width: 60ch;
}
.pipeline-foot strong { font-weight: 500; color: var(--accent); }

/* Labelled concrete note (stone panel, accent rule). Re-homed from §08 to
   §07 (the "In practice" enforcement line) and §11 (the "For auditors"
   line); used standalone, one per section. */
.surfaces-concrete-line {
  margin: 12px 0 0;
  padding: 12px 18px;
  background: var(--rc-stone);
  border-left: 2px solid var(--accent);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rc-graphite);
  max-width: 78ch;
}
.surfaces-concrete-line .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 10px;
}

/* ─── Agent patterns panels ───────────────────────────
   Standalone panels re-homed from §08: the escalation-rules code block now
   lives in §07 (design-loop behaviour), the deployment list in §11 (data
   residency for the function that signs off). */
.patterns-card {
  background: var(--rc-stone);
  padding: 32px 28px 28px;
  margin-top: 24px;
}
.patterns-card.dark {
  background: var(--rc-graphite);
  color: var(--rc-paper);
}
.patterns-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rc-mid);
  margin-bottom: 18px;
}
.patterns-card.dark .patterns-label { color: rgba(250,250,248,0.5); }
.patterns-snippet {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
}
.patterns-snippet .ln { display: block; color: rgba(250,250,248,0.88); }
.patterns-snippet .ln.dim { color: rgba(250,250,248,0.5); }
.patterns-snippet .key { color: var(--rc-blue-light); font-weight: 500; }
.patterns-snippet .str { color: var(--code-str); }
.patterns-list {
  list-style: none;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--rc-graphite);
}
.patterns-list li {
  padding: 12px 0 12px 22px;
  border-bottom: 1px dotted var(--rc-dust);
  position: relative;
}
.patterns-list li:last-child { border-bottom: 0; }
.patterns-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--mono);
}
.patterns-list strong { font-weight: 500; }

/* ─── Open Spec callout ─────────────────────────────────── */

.spec-callout {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--rc-graphite);
  border-left: 0;
  padding: 14px 0 14px 22px;
  margin-top: 18px;
  margin-bottom: 18px;
  position: relative;
  max-width: 50ch;
}
.spec-callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--accent);
}

/* ─── Regulatory guardrails ─────────────────────────────── */

.guardrails-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 48px;
}
.guardrails-card {
  background: var(--rc-stone);
  padding: 32px 28px 28px;
}
.guardrails-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rc-dust);
}
.guardrails-list {
  list-style: none;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rc-graphite);
}
.guardrails-list li {
  padding: 8px 0 8px 22px;
  position: relative;
  border-bottom: 1px dotted var(--rc-dust);
}
.guardrails-list li:last-child { border-bottom: 0; }
.guardrails-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--rc-mid);
  font-family: var(--mono);
}
.guardrails-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rc-dust);
  font-family: var(--sans);
  font-weight: 300;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rc-mid);
}
.guardrails-foot a {
  color: var(--rc-mid);
  border-bottom: 1px solid var(--rc-dust);
}
.guardrails-foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.guardrails-panel {
  margin-top: 2px;
  background: var(--rc-graphite);
  color: var(--rc-paper);
  padding: 32px 36px 32px;
}
.guardrails-panel-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250,250,248,0.5);
  margin-bottom: 18px;
}
.guardrails-panel-list {
  list-style: none;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(250,250,248,0.88);
}
.guardrails-panel-list li {
  padding: 12px 0 12px 22px;
  border-bottom: 1px dotted rgba(250,250,248,0.15);
  position: relative;
}
.guardrails-panel-list li:last-child { border-bottom: 0; }
.guardrails-panel-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--rc-blue-light);
  font-family: var(--mono);
}
.guardrails-panel-list strong { font-weight: 500; color: var(--rc-paper); }
.guardrails-panel-list code {
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(250,250,248,0.08);
  color: var(--rc-paper);
  padding: 1px 6px;
}

/* ─── Impact ────────────────────────────────────────────── */

.impact-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 48px;
  margin-top: 48px;
  align-items: start;
}
.impact-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rc-dust);
}
.impact-list {
  list-style: none;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--rc-graphite);
}
.impact-list li {
  padding: 14px 0 14px 22px;
  border-bottom: 1px solid var(--rc-dust);
  position: relative;
}
.impact-list li:last-child { border-bottom: 0; }
.impact-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--accent);
  font-family: var(--mono);
}

.impact-case {
  background: var(--rc-stone);
  padding: 32px 32px 28px;
  border-top: 4px solid var(--accent);
}
.impact-case-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rc-mid);
  margin-bottom: 14px;
}
.impact-case-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--rc-graphite);
  margin-bottom: 16px;
}
.impact-case-body, .impact-case-result {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--rc-graphite);
  margin-bottom: 14px;
}
.impact-case-body strong, .impact-case-result strong { font-weight: 500; }
.impact-case-result {
  padding-top: 14px;
  border-top: 1px solid var(--rc-dust);
}
.impact-case-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dotted var(--rc-dust);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--rc-mid);
  line-height: 1.6;
  margin-bottom: 0;
}
.impact-owner {
  margin-top: 56px;
  padding: 20px 24px;
  background: var(--rc-paper);
  border: 1px solid var(--rc-graphite);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rc-graphite);
  max-width: 70ch;
}
.impact-owner-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 12px;
}

/* ─── Pricing lead-owner line ───────────────────────────── */
.page-hero .lead-owner {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rc-mid);
  max-width: 70ch;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dotted var(--rc-dust);
}
.page-hero .lead-owner strong {
  font-weight: 500;
  color: var(--rc-graphite);
}

/* ─── Two-column: agents / humans ───────────────────────── */

.duet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 48px;
}
/* §08 closing payoff: one line under the duet, the single idea the section
   now makes (replaced the old multi-block surfaces sub-sections). */
.duet-payoff {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--rc-graphite);
  max-width: 60ch;
}
.duet-pane {
  background: var(--rc-stone);
  padding: 40px 36px 36px;
  min-width: 0;
}
.duet-pane.dark {
  background: var(--rc-graphite);
  color: var(--rc-paper);
}
.duet-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rc-mid);
  margin-bottom: 20px;
}
.duet-pane.dark .duet-label {
  color: rgba(250,250,248,0.45);
}
.duet-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-bottom: 20px;
}
.duet-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 38ch;
}
.duet-body code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: inherit;
}
.duet-pane.dark .duet-body { color: rgba(250,250,248,0.78); }
.duet-surface {
  background: var(--rc-paper);
  border: 1px solid var(--rc-dust);
  padding: 0;
}
.duet-pane.dark .duet-surface {
  background: var(--rc-graphite-deep);
  border-color: rgba(250,250,248,0.12);
  color: var(--rc-paper);
}
.duet-pane.dark .mcp-trace .ln { color: rgba(250,250,248,0.86); }
.duet-pane.dark .mcp-trace .ln.dim { color: rgba(250,250,248,0.45); }
.duet-pane.dark .mcp-trace .key { color: rgba(250,250,248,0.50); }
.duet-pane.dark .mcp-trace .sep { border-color: rgba(250,250,248,0.15); }
.duet-pane.dark .mcp-trace .marker-in,
.duet-pane.dark .mcp-trace .marker-out { color: var(--rc-blue-light); }
.duet-pane.dark .mcp-trace .ok { color: var(--rc-teal-light); }
.duet-pane.dark .mcp-trace .hash { color: rgba(250,250,248,0.45); }

/* ─── Open spec ─────────────────────────────────────────── */

.spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  margin-top: 48px;
  align-items: start;
}
.spec-copy h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  max-width: 18ch;
}
.spec-copy p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--rc-graphite);
  max-width: 50ch;
  margin-bottom: 14px;
}
.spec-copy code {
  font-family: var(--mono);
  font-size: 14px;
}
.spec-copy .spec-link {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-graphite);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rc-graphite);
}
.spec-copy .spec-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.spec-code {
  background: var(--rc-graphite);
  color: var(--rc-paper);
  padding: 0;
  position: relative;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  /* Grid item: allow it to shrink below the <pre>'s min-content width so the
     pre's own overflow-x:auto handles long code lines, instead of the track
     blowing out to the longest line and overflowing the page on mobile. */
  min-width: 0;
}
.spec-code .code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(250,250,248,0.12);
}
.spec-code .code-head .name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rc-paper);
}
.spec-code .code-head .stub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,250,248,0.45);
}
.spec-code pre {
  margin: 0;
  padding: 20px 24px 24px;
  white-space: pre;
  overflow-x: auto;
}
.spec-code .key { color: var(--code-key); }
.spec-code .str { color: var(--code-str); }
.spec-code .num { color: var(--code-num); }
.spec-code .com { color: rgba(250,250,248,0.45); font-style: italic; }
.spec-code .acc { color: var(--rc-blue-light); }

/* ─── Honesty list ──────────────────────────────────────── */

/* honesty-bullets: compact one-line schema field list. § 10 was reordered
   so the schema fields lead and the philosophical close trails; this list
   has to read fast (each row a single line on desktop) without giving up
   the typographic distinction between field name (mono) and description
   (sans). */
.honesty-bullets {
  margin-top: 36px;
  padding: 24px 28px;
  list-style: none;
  background: var(--rc-stone);
  border-top: 1px solid var(--rc-graphite);
  border-bottom: 1px solid var(--rc-dust);
  max-width: 78ch;
}
.honesty-bullets li {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rc-graphite);
  padding: 6px 0;
  border-top: 1px dotted var(--rc-dust);
}
.honesty-bullets li:first-child { border-top: 0; }
.honesty-bullets li code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accent);
  padding: 0 4px 0 0;
  background: none;
}

.honesty-list {
  margin-top: 48px;
  border-top: 1px solid var(--rc-graphite);
}
.honesty-row {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 48px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rc-dust);
  align-items: baseline;
}
.honesty-row .k {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--rc-graphite);
  letter-spacing: 0;
}
.honesty-row .d {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rc-graphite);
  max-width: 62ch;
}
.honesty-row .d em {
  font-style: italic;
  color: var(--rc-mid);
}
.honesty-close {
  margin-top: 32px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--rc-graphite);
  max-width: 64ch;
}

.pull-quote {
  margin: 56px auto 16px;
  padding: 28px 0 0;
  max-width: 32ch;
  border-top: 1px solid var(--rc-graphite);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--rc-graphite);
  text-align: center;
  text-wrap: balance;
}
.honesty-close strong {
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}

/* ─── Audience ──────────────────────────────────────────── */

.audience {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.audience-item {
  background: var(--rc-stone);
  padding: 28px 28px 28px;
  display: flex;
  gap: 16px;
}
.audience-item .num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 3px;
}
.audience-item .body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rc-graphite);
}
.audience-item .body strong {
  font-weight: 500;
  color: var(--rc-graphite);
  display: block;
  margin-bottom: 8px;
}
.audience-item .body p {
  margin: 0 0 6px;
  color: var(--rc-mid);
}
.audience-item .body p:last-of-type { margin-bottom: 10px; }
.audience-item .body p strong {
  display: inline;
  font-weight: 500;
  color: var(--rc-graphite);
  margin-bottom: 0;
}

/* Persona anchor bar: sits between the hero and § 02. Lets a self-selecting
   reader jump to the audience entry that matches their role without
   scrolling past the plain-language section. Subtle: a thin paper-on-stone
   strip with a mono label and four mono links. */
.audience-anchors {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  border-top: 1px solid var(--rc-dust);
  border-bottom: 1px solid var(--rc-dust);
  background: var(--rc-stone);
}
.audience-anchors-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.audience-anchor {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--rc-mid);
  text-transform: lowercase;
  border-bottom: 1px solid transparent;
  padding: 6px 0;
  transition: color 0.15s, border-color 0.15s;
}
.audience-anchor:hover {
  color: var(--rc-graphite);
  border-bottom-color: var(--rc-dust);
}

/* ─── Access block ──────────────────────────────────────── */

.access-block {
  background: var(--accent);
  color: var(--rc-paper);
  padding: 72px 64px 64px;
  margin-top: 48px;
}
.access-block .eyebrow {
  color: var(--rc-on-blue-eyebrow);
}
.access-block .eyebrow::after {
  background: var(--rc-on-blue-hairline);
}
.access-block h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--rc-paper);
  max-width: 20ch;
  margin-bottom: 18px;
}
.access-block p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--rc-on-blue-secondary);
  max-width: 58ch;
}
.access-tiers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 40px;
  border-top: 1px solid var(--rc-on-blue-hairline);
  padding-top: 24px;
}
.access-tier {
  padding-right: 24px;
}
.access-tier .tier-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rc-on-blue-eyebrow);
  margin-bottom: 12px;
}
.access-tier .tier-desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rc-paper);
}
.access-enterprise-note {
  margin: 22px 0 0;
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.12);
  border-left: 2px solid var(--rc-paper);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rc-on-blue-primary);
  max-width: 64ch;
}
.access-cta-row {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.access-cta-row .cta-primary {
  background: var(--rc-paper);
  color: var(--rc-graphite);
}
.access-cta-row .cta-primary:hover { background: var(--rc-paper-bright); }
.access-cta-row .note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-on-blue-eyebrow);
}

/* ─── About ─────────────────────────────────────────────── */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  margin-top: 48px;
  align-items: start;
}
.about-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rc-mid);
  line-height: 2.1;
}
.about-meta .row { display: grid; grid-template-columns: 10ch 1fr; gap: 12px; }
.about-meta .row .k { color: var(--rc-mid); }
.about-meta .row .v { color: var(--rc-graphite); }
.about-body p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--rc-graphite);
  max-width: 64ch;
}
.about-body p + p { margin-top: 18px; }
.about-body em { font-style: italic; color: var(--accent); }
.about-body a {
  color: var(--rc-graphite);
  border-bottom: 1px solid var(--rc-dust);
  transition: border-color 0.15s, color 0.15s;
}
.about-body a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── Tokens block ──────────────────────────────────────── */

.tokens-block {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
}
.tk-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rc-mid);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rc-dust);
}
.swatch-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  border-bottom: 1px dotted var(--rc-dust);
}
.swatch-row:last-child { border-bottom: 0; }
.swatch-row .sw {
  width: 28px;
  height: 28px;
  border: 1px solid var(--rc-dust);
}
.swatch-row .name { color: var(--rc-graphite); }
.swatch-row .hex { color: var(--rc-mid); }

.type-row {
  padding: 12px 0;
  border-bottom: 1px dotted var(--rc-dust);
}
.type-row:last-child { border-bottom: 0; }
.type-row .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rc-mid);
  margin-bottom: 4px;
}
.type-row .demo { color: var(--rc-graphite); }
.type-row .demo.serif  { font-family: var(--serif); }
.type-row .demo.sans   { font-family: var(--sans); }
.type-row .demo.monoft { font-family: var(--mono); }

.scale-row {
  display: grid;
  grid-template-columns: 6ch 1fr;
  gap: 14px;
  align-items: center;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  border-bottom: 1px dotted var(--rc-dust);
}
.scale-row:last-child { border-bottom: 0; }
.scale-row .px { color: var(--rc-mid); }
.scale-row .bar {
  height: 2px;
  background: var(--rc-graphite);
}

/* ─── Footer ────────────────────────────────────────────── */

footer {
  background: var(--rc-graphite);
  color: var(--rc-paper);
  padding: 64px var(--gutter) 32px;
  margin-top: 96px;
}
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
}
.footer-lockup .wordmark { margin-bottom: 4px; }

/* Footer tagline: the brand line under the footer wordmark. Set in the
   on-dark blue so it ties to the wordmark's "clari" and reads clearly on
   the dark footer ground (not a muted whisper). */
.footer-tagline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--rc-blue-light);
  margin-bottom: 16px;
}
.footer-lockup .blurb {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(250,250,248,0.78);
  max-width: 36ch;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col-h {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250,250,248,0.5);
  margin-bottom: 16px;
}
.footer-link {
  display: block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.95;
  color: rgba(250,250,248,0.88);
  padding: 2px 0;             /* small extra hit-area on link list */
  /* footer CTA is a <button> (SignupModal trigger); reset UA chrome so it reads as a link */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.footer-link:hover { color: var(--rc-paper-bright); }

.footer-legal {
  max-width: var(--content-max);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(250,250,248,0.15);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250,250,248,0.5);
}

/* ─── Responsive ────────────────────────────────────────── */

/* Tablet — keep important 2-up comparisons before going single-column */
@media (max-width: 980px) {
  :root { --gutter: 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .steps { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .access-tiers { grid-template-columns: 1fr 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .tokens-block { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .pipeline-grid { grid-template-columns: 1fr; }
  .guardrails-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr; gap: 32px; }
  section { padding: 80px 0; }
  .hero { padding: 56px 0 64px; }
  .nav-links { gap: 18px; }
}

/* Narrower tablet / large phone — collapse remaining 2-up grids */
@media (max-width: 760px) {
  .duet { grid-template-columns: minmax(0, 1fr); }
  .audience { grid-template-columns: 1fr; }

  /* ── Nav collapses to a hamburger ──────────────────────────
     Inline links give way to the toggle button (top-right of the row); the
     panel drops down under the sticky header. Absolute positioning means
     opening it never reflows the page (no layout shift). */
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }

  .nav-mobile {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--rc-paper);
    border-bottom: 1px solid var(--rc-dust);
    box-shadow: 0 14px 26px -18px rgba(42, 42, 44, 0.4);
    padding: var(--s-3) var(--gutter) var(--s-6);
    /* Enter/exit motion. mobile-nav.ts owns the [hidden] attribute (the state
       of record): when closed, [hidden] → display:none, so the links leave the
       a11y tree and the tab order entirely. On open it adds .is-open one frame
       later so opacity/transform animate in from this start state. The
       transition is zeroed under the global prefers-reduced-motion rule. */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .nav-mobile[hidden] { display: none; }
  .nav-mobile.is-open { opacity: 1; transform: none; }

  .nav-mlink {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--rc-graphite);
    text-transform: lowercase;
    padding: 13px 0;
    border-bottom: 1px solid var(--rc-stone-deep);
  }
  .nav-mlink:hover { color: var(--accent); }
  .nav-mlink.is-current { color: var(--accent); }

  .nav-mobile-cta {
    margin-top: var(--s-5);
    width: 100%;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--rc-paper);
    text-transform: uppercase;
    background: var(--accent);
    border: none;
    cursor: pointer;
    padding: 13px 14px;
    transition: background 0.15s;
  }
  .nav-mobile-cta:hover { background: var(--accent-deep); }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .nav-inner { padding: 14px var(--gutter); }
  .audience-anchors { gap: 14px; padding: 12px var(--gutter); }
  .audience-anchor { font-size: 12px; padding: 6px 0; }
  .compare-2col { grid-template-columns: 1fr; }
  .access-block { padding: 48px 28px 40px; }
  .access-tiers { grid-template-columns: 1fr; }
  .honesty-row { grid-template-columns: 1fr; gap: 8px; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; gap: 8px; }
  .hero-meta { flex-wrap: wrap; gap: 12px; }
}

/* print */
@media print {
  .top-stripe { display: none; }
  body { background: #fff; }
  section { page-break-inside: avoid; padding: 48px 0; border-color: #ccc; }
  .access-block { background: #fff; color: #000; border: 1px solid #ccc; }
  .access-block h3, .access-block p { color: #000; }
  footer { background: #fff; color: #000; }
  .duet-pane.dark { background: #f5f5f5; color: #000; }
}


/* ════════════════════════════════════════════════════════════
   DOC PAGES — PIF spec, coverage, future internal docs
   ════════════════════════════════════════════════════════════ */

.doc-page {
  padding: 80px 0 96px;
  border-top: 0;
}
.doc-page .eyebrow { margin-bottom: 40px; }

.spec-body {
  max-width: 72ch;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rc-graphite);
}
.spec-body > * + * { margin-top: 18px; }

.spec-body h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--rc-graphite);
  margin-top: 0;
  max-width: 24ch;
  text-wrap: balance;
}
.spec-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--rc-graphite);
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--rc-dust);
}
.spec-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--rc-graphite);
  margin-top: 36px;
}
.spec-body h4 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 28px;
}

.spec-body p { max-width: 72ch; }
.spec-body strong { font-weight: 500; color: var(--rc-graphite); }
.spec-body em { font-style: italic; }

.spec-body a {
  color: var(--rc-graphite);
  border-bottom: 1px solid var(--rc-dust);
  transition: color 0.15s, border-color 0.15s;
}
.spec-body a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.spec-body ul, .spec-body ol {
  margin-top: 12px;
  padding-left: 22px;
}
.spec-body li {
  margin: 6px 0;
  line-height: 1.65;
}
.spec-body li::marker { color: var(--rc-mid); }

.spec-body blockquote {
  position: relative;
  margin: 24px 0;
  padding: 16px 20px 16px 28px;
  background: var(--rc-stone);
  font-family: var(--serif);
  font-style: italic;
  color: var(--rc-graphite);
}
.spec-body blockquote::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--accent);
}

.spec-body code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--rc-stone);
  padding: 1px 6px;
  color: var(--rc-graphite);
}
.spec-body pre {
  margin: 20px 0;
  padding: 18px 22px;
  background: var(--rc-graphite);
  color: var(--rc-paper);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}
.spec-body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.spec-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 300;
}
.spec-body th, .spec-body td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rc-dust);
  vertical-align: top;
}
.spec-body th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-mid);
  font-weight: 500;
  border-bottom: 1px solid var(--rc-graphite);
}

.spec-body hr {
  border: 0;
  border-top: 1px solid var(--rc-dust);
  margin: 40px 0;
}

.doc-footer-links {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--rc-dust);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--rc-mid);
  text-transform: lowercase;
}
.doc-footer-links a {
  color: var(--rc-graphite);
  border-bottom: 1px solid var(--rc-dust);
}
.doc-footer-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── Coverage page ─────────────────────────────────────── */

.doc-page > header {
  max-width: 72ch;
  margin-bottom: 16px;
}
.doc-page > header h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--rc-graphite);
  max-width: 18ch;
  text-wrap: balance;
}
.doc-page > header .lede {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--rc-graphite);
  max-width: 62ch;
  margin-top: 22px;
}
.doc-page > header em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rc-mid);
  display: inline-block;
  margin-top: 18px;
}

.coverage-section { margin-top: 64px; }
.coverage-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rc-graphite);
  margin-bottom: 28px;
}
.coverage-section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--rc-graphite);
}
.coverage-section-head .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.coverage-note {
  font-family: var(--sans);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: var(--rc-mid);
  max-width: 60ch;
  padding: 18px 24px;
  background: var(--rc-stone);
}

.authority-group { margin: 24px 0 32px; }
.authority-group h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rc-mid);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dotted var(--rc-dust);
}

.source-row {
  padding: 16px 0;
  border-bottom: 1px dotted var(--rc-dust);
  max-width: 72ch;
}
.source-row:last-child { border-bottom: 0; }
.source-row .title {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.3;
  color: var(--rc-graphite);
  margin-bottom: 6px;
}
.source-row .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--rc-mid);
  margin-bottom: 4px;
}
.source-row .url {
  font-family: var(--mono);
  font-size: 11.5px;
  word-break: break-all;
  margin-top: 4px;
}
.source-row .url a {
  color: var(--rc-graphite);
  border-bottom: 1px solid var(--rc-dust);
}
.source-row .url a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.source-row p strong {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rc-mid);
}
.source-row p:has(strong) {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rc-graphite);
  margin-top: 4px;
}

.notyet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.notyet-row {
  background: var(--rc-stone);
  padding: 22px 24px;
}
.notyet-row .topic {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.notyet-row .reason {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rc-graphite);
}
.notyet-row .reason em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-mid);
}
.notyet-row .priority-note {
  margin-bottom: 8px;
}
.notyet-row .priority-note em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--rc-graphite);
  line-height: 1.55;
}

/* AI-specific inline tag (Roadmap source rows). Standalone accent-on-stone
   pill — uses the existing --accent token only; not derived from .badge.
   No new colour tokens introduced. */
.tag-ai {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 0 0 8px;
  margin-left: 6px;
  border-left: 2px solid var(--accent);
  vertical-align: middle;
  white-space: nowrap;
}

.coverage-cta {
  position: relative;
  margin-top: 80px;
  padding: 32px 32px 32px 36px;
  background: var(--rc-stone);
  max-width: 72ch;
}
.coverage-cta::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: var(--accent);
}
.coverage-cta h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--rc-graphite);
  margin-bottom: 10px;
}
.coverage-cta p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--rc-graphite);
}
.coverage-cta a {
  color: var(--rc-graphite);
  border-bottom: 1px solid var(--rc-dust);
}
.coverage-cta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 980px) {
  .notyet-grid { grid-template-columns: 1fr; }
  .coverage-section-head { flex-direction: column; gap: 4px; }
}


/* ════════════════════════════════════════════════════════════
   PRICING PAGE
   ════════════════════════════════════════════════════════════ */

.page-hero {
  padding: 96px 0 64px;
  border-top: 0;
}
.page-hero .eyebrow { margin-bottom: 24px; }
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--rc-graphite);
  max-width: 18ch;
  text-wrap: balance;
}
.page-hero h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
.page-hero .lead {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--rc-graphite);
  max-width: 62ch;
  margin-top: 28px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 64px;
}
.tier-card {
  background: var(--rc-stone);
  padding: 40px 32px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 640px;
}
.tier-card.is-featured {
  background: var(--rc-graphite);
  color: var(--rc-paper);
}
.tier-card.is-featured .tier-name { color: rgba(250,250,248,0.62); }
.tier-card.is-featured .tier-price-num { color: var(--rc-paper); }
.tier-card.is-featured .tier-period { color: rgba(250,250,248,0.55); }
.tier-card.is-featured .tier-desc { color: rgba(250,250,248,0.78); }
.tier-card.is-featured .feature { color: rgba(250,250,248,0.88); border-color: rgba(250,250,248,0.16); }
.tier-card.is-featured .feature::before { color: var(--rc-blue-light); }
.tier-card.is-featured .tier-cta {
  background: var(--rc-paper);
  color: var(--rc-graphite);
}
.tier-card.is-featured .tier-cta:hover { background: var(--rc-paper-bright); }

.tier-badge {
  position: absolute;
  top: -1px;
  right: 24px;
  background: var(--accent);
  color: var(--rc-paper);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 10px 4px;
}

.tier-name {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.tier-card.is-featured .tier-name { color: var(--rc-blue-light); }

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.tier-price-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--rc-graphite);
}
.tier-price-num .currency {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--rc-mid);
  letter-spacing: 0.04em;
  margin-right: 4px;
  vertical-align: top;
  position: relative;
  top: 8px;
}
.tier-period {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--rc-mid);
}
.tier-card.is-featured .tier-price-num .currency { color: rgba(250,250,248,0.5); }

.tier-desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rc-graphite);
  margin: 16px 0 12px;
  max-width: 32ch;
}

/* "Ideal for:" line — sits between tier-desc and tier-quota. Italic dim
   ink, reuses --rc-mid and the serif body family; no new tokens. */
.tier-ideal-for {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--rc-mid);
  max-width: 36ch;
  margin: 0 0 24px;
}
.tier-card.is-featured .tier-ideal-for { color: rgba(250,250,248,0.65); }

/* Session→workflow mapping line — sits directly under tier-quota. Same
   small-italic treatment but reads as a footnote to the quota number above;
   tier-quota's bottom margin is tightened in tandem (see .tier-quota below). */
.tier-mapping {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--rc-mid);
  margin: 0 0 16px;
  max-width: 38ch;
}
.tier-card.is-featured .tier-mapping { color: rgba(250,250,248,0.6); }

/* ROI anchor — sits just above the CTA. Small italic, dim. */
.tier-roi {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--rc-mid);
  margin: 0 0 18px;
  padding-top: 14px;
  border-top: 1px dotted var(--rc-dust);
  max-width: 32ch;
}
.tier-card.is-featured .tier-roi { color: rgba(250,250,248,0.7); border-color: rgba(250,250,248,0.16); }

.tier-quota {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rc-dust);
}
/* Tighten the gap below tier-quota only when tier-mapping immediately
   follows it, so the two read as a footnote-pair on paid tiers. Cards
   without tier-mapping keep the default 16px below. */
.tier-quota:has(+ .tier-mapping) {
  margin-bottom: 8px;
}
.tier-card.is-featured .tier-quota { color: var(--rc-blue-light); border-color: rgba(250,250,248,0.16); }

.features { list-style: none; margin-bottom: 32px; flex: 1; }
.feature {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rc-graphite);
  padding: 10px 0 10px 22px;
  border-bottom: 1px dotted var(--rc-dust);
  position: relative;
}
.feature:last-child { border-bottom: 0; }
.feature::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--mono);
}
.feature code {
  font-family: var(--mono);
  font-size: 12px;
}
.feature.muted { color: var(--rc-mid); }
.feature.muted::before { color: var(--rc-mid); }

.tier-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-paper);
  background: var(--accent);
  padding: 14px 18px 13px;
  margin-top: auto;
  text-decoration: none;
  transition: background 0.15s;
}
.tier-cta:hover { background: var(--accent-deep); }
.tier-cta.outline {
  background: transparent;
  color: var(--rc-graphite);
  border: 1px solid var(--rc-graphite);
  padding: 13px 17px 12px;
}
.tier-cta.outline:hover { background: var(--rc-graphite); color: var(--rc-paper); }

.common-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 48px;
}
.common-item { background: var(--rc-stone); padding: 24px; display: flex; flex-direction: column; }
.common-item .b { margin-bottom: 14px; }
.common-item-note { margin-top: 8px; }
.common-item-note em { color: var(--rc-mid); font-style: italic; }
.common-item .tier-cta {
  margin-top: auto;
  align-self: flex-start;
  width: auto;
}
.common-item .h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.common-item .b {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rc-graphite);
}
.common-item .b code {
  font-family: var(--mono);
  font-size: 12.5px;
}

.faq { margin-top: 48px; border-top: 1px solid var(--rc-graphite); }
.faq-item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rc-dust);
  align-items: baseline;
}
.faq-q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--rc-graphite);
}
.faq-q .n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--rc-mid);
  display: block;
  margin-bottom: 8px;
}
.faq-a {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--rc-graphite);
  max-width: 64ch;
}
.faq-a em { font-style: italic; color: var(--rc-mid); }
.faq-a code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--rc-stone);
  padding: 1px 6px;
  color: var(--rc-graphite);
}
.faq-a a {
  color: var(--rc-graphite);
  border-bottom: 1px solid var(--rc-dust);
}
.faq-a a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.cta-stripe {
  margin-top: 96px;
  padding: 56px 0;
  border-top: 1px solid var(--rc-dust);
  border-bottom: 1px solid var(--rc-dust);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.cta-stripe .cta-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rc-graphite);
  max-width: 22ch;
}
.cta-stripe .cta-h em { font-style: italic; color: var(--accent); }
.cta-stripe .cta-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pricing-footnote {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--rc-mid);
  margin-top: 32px;
  line-height: 1.7;
}

/* Hero anchor block: static "Today / Next" pair below the H1. Replaces
   the PR #15 rotating ticker. Lock one ICP first, make scope visible
   all at once, no rotation. Two rows in a tight monospace-label +
   serif-value rhythm; the "Next" row is muted to keep the Today row
   anchoring the eye. */
.hero-anchor {
  margin: 18px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-anchor-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 14px;
  align-items: baseline;
  margin: 0;
}
.hero-anchor-row .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-anchor-row .value {
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--rc-graphite);
}
.hero-anchor-next .label { color: var(--rc-mid); }
.hero-anchor-next .value {
  font-size: 15.5px;
  color: var(--rc-mid);
}
.hero-anchor-next .value a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--rc-dust);
}
.hero-anchor-next .value a:hover {
  text-decoration-color: var(--accent);
}

/* § 06 · APPLIES TO — three-column grid of vertical cards. Reuses the same
   stone-paper background + dust border vocabulary as other card grids on
   this page. The featured card (AI Act) carries a subtle accent border to
   signal strategic emphasis without breaking the no-rounded-corners rule. */
.applies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 36px;
}
.applies-card {
  background: var(--rc-stone);
  padding: 28px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.applies-card--featured {
  background: var(--rc-paper);
  border-top: 2px solid var(--accent);
}
.applies-status {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-mid);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rc-dust);
}
.applies-status--live { color: var(--accent); }
.applies-status--active { color: var(--rc-mid); }
.applies-h {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--rc-graphite);
  margin: 0;
}
.applies-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rc-graphite);
  margin: 0;
}
.applies-example {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--rc-mid);
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid var(--rc-dust);
  background: rgba(0, 0, 0, 0.015);
}
.applies-card--featured .applies-example {
  background: var(--rc-stone);
  border-left-color: var(--accent);
}
.applies-citations {
  border-top: 1px dotted var(--rc-dust);
  padding-top: 14px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.applies-cit-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-mid);
}
.applies-citations p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--rc-graphite);
  margin: 0 0 8px;
}
.applies-citations p:last-child { margin-bottom: 0; }
.applies-cta {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid var(--accent);
  margin-top: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.applies-cta:hover {
  background: var(--accent);
  color: var(--rc-paper);
}
.applies-card--featured .applies-cta {
  background: var(--accent);
  color: var(--rc-paper);
}
.applies-card--featured .applies-cta:hover {
  background: var(--accent-deep);
}
.applies-foot {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--rc-mid);
  max-width: 72ch;
}
.applies-foot a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--rc-dust);
}
.applies-foot a:hover { text-decoration-color: var(--accent); }

@media (max-width: 980px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .tier-card { min-height: auto; }
  .common-grid { grid-template-columns: 1fr; }
  .faq-item { grid-template-columns: 1fr; gap: 12px; }
  .cta-stripe { grid-template-columns: 1fr; }
  .cta-stripe .cta-actions { justify-content: flex-start; }
  .applies-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────
   INSIGHTS — index page + article layout
   ─────────────────────────────────────────────────────────────
   Design contract: editorial, not marketing. IBM Plex Serif body
   at a reading width. Same hairline-and-stone discipline as the
   rest of the site; no new colour tokens.
   ───────────────────────────────────────────────────────────── */

/* ─── Insights index ────────────────────────────────────────── */

.insights-index { padding-top: var(--s-12); }

.insights-sub { max-width: 52ch; margin-top: 20px; margin-bottom: 56px; }

.insights-list {
  list-style: none;
  padding: 0;
  margin: 0 0 56px;
  border-top: 1px solid var(--rc-dust);
}

.insights-item { border-bottom: 1px solid var(--rc-dust); }

.insights-link {
  display: block;
  padding: 36px 0;
  text-decoration: none;
  transition: background 0.1s;
}
.insights-link:hover .insights-title { color: var(--accent); }

.insights-date {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--rc-mid);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.insights-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--rc-graphite);
  margin-bottom: 12px;
  transition: color 0.15s;
}

.insights-desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  color: var(--rc-mid);
  line-height: 1.6;
  max-width: 58ch;
  margin-bottom: 14px;
}

.insights-read {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}

.insights-empty {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--rc-mid);
  padding: 40px 0;
  font-style: italic;
}

.insights-feeds {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
}

.insights-feeds-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-mid-soft);
}

.insights-feed-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rc-mid);
  border-bottom: 1px solid var(--rc-dust);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.insights-feed-link:hover { color: var(--rc-graphite); border-color: var(--rc-graphite); }

/* ─── Article layout ────────────────────────────────────────── */

.article-layout {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-12) 0 var(--s-16);
}

.article-header { margin-bottom: 56px; }

.article-back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rc-mid);
  margin-bottom: 32px;
}
.article-back a {
  color: inherit;
  transition: color 0.15s;
}
.article-back a:hover { color: var(--rc-graphite); }

.article-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--rc-graphite);
  margin: 24px 0 20px;
  max-width: 20ch;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--rc-mid);
}

.article-sep { opacity: 0.5; }

/* ─── Article body (prose) ──────────────────────────────────── */

.article-body {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--rc-graphite);
  max-width: 65ch;
}

.article-body p {
  margin-bottom: 1.5em;
}

.article-body h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-mid);
  margin: 3em 0 1.2em;
  padding-top: 2em;
  border-top: 1px solid var(--rc-dust);
}

.article-body a {
  color: var(--accent);
  border-bottom: 1px solid var(--rc-dust);
  padding-bottom: 1px;
  transition: border-color 0.15s;
}
.article-body a:hover { border-bottom-color: var(--accent); }

.article-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--rc-stone);
  padding: 2px 6px;
  border-radius: 2px;
}

.article-body hr {
  border: none;
  border-top: 1px solid var(--rc-dust);
  margin: 2.5em 0;
}

.article-body em {
  font-style: italic;
}

.article-body strong {
  font-weight: 500;
}

/* Footer italic note (sources/further reading) */
.article-body p:last-child { color: var(--rc-mid); }

/* ─── Pullquotes ────────────────────────────────────────────── */

.article-body .article-pullquote {
  margin: 2.5em 0;
  padding: 28px 0 0;
  border-top: 2px solid var(--rc-graphite);
  border-left: none;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--rc-graphite);
  max-width: 34ch;
  text-wrap: balance;
}

/* ─── Article footer ────────────────────────────────────────── */

.article-footer {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--rc-dust);
}

.article-footer-back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rc-mid);
  transition: color 0.15s;
}
.article-footer-back:hover { color: var(--rc-graphite); }

/* ─── Insights responsive ───────────────────────────────────── */

@media (max-width: 760px) {
  .insights-link { padding: 28px 0; }
  .article-layout { padding-top: var(--s-10); }
  .article-title { max-width: none; }
  .article-body { font-size: 16px; }
  .article-body .article-pullquote { font-size: 20px; max-width: none; }
}