/* ============================================================================
   KS Media - dark, evidence-dense system (redesign phase 1, September 2026)
   Source: research/13-design-system-decision.md. ClickHouse's monochrome plus
   one accent, recoloured to ink navy and signal cyan. No shadows, no gradients
   except the closing stripe, radii 4 / 6 / 8 only, hairline depth. The AI
   answer window is the central component: it shows a real prompt, a real
   dated answer and the real result, or it is not shown.

   Two scopes. :root is dark (hero, proof band, ladder, CTA band, footer).
   .band-paper is light and is where long prose, FAQ, forms and article bodies
   live. Never long prose on dark. Every component reads the same semantic
   tokens, so it is correct in either scope without a second rule set.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* Surfaces */
  --bg: #0E1420;
  --bg-2: #16202F;
  --bg-3: #1C2837;
  /* Text */
  --fg: #F4F6F8;
  --fg-2: #B4BCC6;
  /* #7C8794 measured 4.49:1 on --bg-2 and 4.08:1 on --bg-3, so the dark
     scope uses a step lighter (6.0 / 5.3 / 4.9). Paper keeps its own value. */
  --fg-3: #8A94A2;
  /* Hairlines. --line is decorative. --line-strong draws input and outlined
     button boundaries, so it must hold 3:1 against the canvas. At .32 alpha
     it measured 2.75:1; .36 measures 3.15:1 on --bg and 3.14:1 on --bg-2. */
  --line: rgba(244, 246, 248, 0.10);
  --line-strong: rgba(244, 246, 248, 0.36);
  /* The one accent. Fills appear in exactly two places: the primary button
     and the accent band. --accent-text is what accent-coloured text uses,
     and it changes under .band-paper because raw cyan fails on paper. */
  --accent: #38C6D9;
  --accent-active: #2FB3C5;
  --accent-text: #38C6D9;
  --on-accent: #06121A;
  --focus: #38C6D9;
  --selection: rgba(56, 198, 217, 0.28);

  /* The closing stripe: the only gradient in the system. */
  --stripe: linear-gradient(90deg, #147A88 0%, #2FB3C5 40%, #38C6D9 70%, #9BE3EE 100%);

  /* Faces. Inter carries display and body; JetBrains Mono carries eyebrows,
     stats, prices and answer windows. The former display stand-in is gone. */
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Radii: 4 / 6 / 8 only. Badges 4, buttons and inputs 6, cards 8. No pills. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-xl: 8px;
  --r-full: 4px;

  /* Spacing */
  --s-xxs: 4px;  --s-xs: 8px;   --s-sm: 12px;  --s-md: 16px;
  --s-lg: 20px;  --s-xl: 24px;  --s-xxl: 32px; --s-xxxl: 40px;
  --sec-sm: 48px; --sec: 64px;  --sec-lg: 96px; --hero: 112px;

  /* Elevation: none. Depth comes from surface steps and hairlines. */
  --e1: none;
  --e2: none;
  --e3: none;

  --container: 1280px;
  --gutter: 32px;
}

/* Paper scope: long prose, FAQ, forms, article bodies. */
.band-paper {
  --bg: #F4F6F8;
  --bg-2: #FFFFFF;
  --bg-3: #E9EDF1;
  --fg: #0E1420;
  --fg-2: #3A4552;
  --fg-3: #5B6672;
  --line: rgba(14, 20, 32, 0.10);
  --line-strong: #7C8794;
  --accent-text: #147A88;
  --focus: #147A88;
  --selection: rgba(20, 122, 136, 0.18);
  background: var(--bg);
  color: var(--fg);
}
/* Legacy alias: the old cream and surface bands become paper. */
.band-cream, .band-cream-soft, .band-surface { background: var(--bg-2); }
.band-ink { background: var(--bg); color: var(--fg); }

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Same-page anchors would land under the 64px sticky header without this. */
  scroll-padding-top: 80px;
  background: #0E1420;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Body is a flat 16 / 400 / 1.55 at every width. Six of the nine reference
   systems set exactly that; the old 17px rising to 18px was the reason
   ordinary copy read as an essay. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, blockquote, figure, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
::selection { background: var(--selection); color: var(--fg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
a, button, input, textarea, label, summary { touch-action: manipulation; }

/* Skip link: first focusable element on every page, targets #main. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: #38C6D9;
  color: #06121A;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-250%);
  transition: transform 0.18s ease;
}
.skip-link:focus { transform: translateY(0); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 600px) { .container { padding-inline: 20px; } }

/* 96 desktop, 72 tablet, 56 mobile. */
.section { padding-block: var(--sec-lg); }
.section--sm { padding-block: var(--sec); }
@media (max-width: 1023px) { .section { padding-block: 72px; } .section--sm { padding-block: 56px; } }
@media (max-width: 767px) { .section { padding-block: 56px; } .section--sm { padding-block: 48px; } }

/* ------------------------------------------------------------ typography --
   Hard breakpoints at 1200 / 810, not clamp(). Tracking is em-relative so it
   scales for free. Line-height collapses as size grows. Weights are plain
   font-weight values on Inter's wght axis; font-variation-settings appears in
   exactly one rule (.brand .word) and must never spread.
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h1-editorial, h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (max-width: 1199px) {
  .display, .display-lg { font-size: 40px; }
  .h1-editorial, h2, .h2 { font-size: 30px; }
}
@media (max-width: 809px) {
  .display, .display-lg { font-size: 32px; letter-spacing: -0.024em; }
  .h1-editorial, h2, .h2 { font-size: 26px; }
}

h3, .h3 { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; }
.h4 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; }
.h5 { font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; }
.subtitle { font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: var(--fg-2); }
.body-md { font-size: 16px; line-height: 1.55; }
.body-sm { font-size: 14px; line-height: 1.5; }
.caption { font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--fg-3); }
/* Eyebrow: mono, uppercase, positive tracking, muted. The accent is spent on
   the brand mark, the primary button, the focus ring and link emphasis only,
   so taxonomy labels are --fg-3 (6.0:1 on ink, 5.3:1 on paper). */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.micro { font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.02em; color: var(--fg-3); }
.mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: normal; font-variant-numeric: tabular-nums; }

.accent { color: var(--accent-text); }
.italic-em { font-style: normal; }
/* Measures are in pixels, never in ch. Inter's zero is 1.21 times its average
   lowercase advance, so a max-width in ch renders 21 per cent wider than the
   character count it names. Every figure below is the pixel width that
   produces the stated count: chars = px / (0.514 x font-size). */
.lead { font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; color: var(--fg-2); max-width: 600px; } /* 65 chars */
.measure { max-width: 560px; } /* 68 chars at 16px */

.section-head { max-width: 720px; display: grid; gap: var(--s-sm); margin-bottom: var(--sec-sm); }
.section-head .subtitle { margin-top: 0; max-width: 600px; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* Primary: the one cyan fill. Ink text, never white on cyan. */
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-active); }
/* Dark: inverse of the scope. On the navy canvas it is a pale button with ink
   text; under .band-paper it is a navy button with paper text. */
.btn-dark { background: var(--fg); color: var(--bg); }
.btn-dark:hover { background: var(--fg-2); }
.band-paper .btn-dark:hover { background: #2A3646; }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--fg); }
.btn-cream, .btn-on-cream { background: var(--bg-2); color: var(--fg); border-color: var(--line-strong); }
.btn-cream:hover, .btn-on-cream:hover { border-color: var(--fg); }
.btn[disabled], .btn:disabled { background: var(--bg-3); color: var(--fg-3); border-color: transparent; cursor: default; }
.btn-link { padding: 0; min-height: 0; color: var(--accent-text); font-size: 14px; font-weight: 500; border: 0; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Links inside 12 and 13px notes: padding-block takes the hit area to 24px. */
.aw-method a, .proof-method a, .stat .m a, .sectors-note a, .caption a, .hero-note a { padding-block: 3px; }

/* Standalone link. Padding takes the target to 29px. */
.link {
  display: inline-block;
  padding-block: 4px;
  color: var(--accent-text);
  font-weight: 500;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Links inside running text. */
p a.inline, .prose a, .article-prose a, .faq-inner a, .humility a, .aw-answer a, .subtitle a, .fornot a, .lead a {
  color: var(--accent-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
}
.badge-accent { border-color: var(--accent-text); color: var(--accent-text); }
.badge-cream, .badge-dark { background: var(--bg-3); color: var(--fg); border-color: transparent; }

/* ----------------------------------------------------------- promo strip -- */
.promo {
  background: var(--bg-2);
  color: var(--fg-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: var(--s-sm) var(--s-md);
  text-align: center;
}
.promo a {
  display: inline-block;
  padding-block: 4px;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.promo .sep { color: var(--fg-3); margin-inline: 10px; }
@media (max-width: 479px) {
  .promo { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 10px; font-size: 12px; line-height: 1.4; padding-block: 8px; }
  .promo .sep { display: none; }
}

/* -------------------------------------------------------------------- nav -- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #0E1420;
  color: #F4F6F8;
  border-bottom: 1px solid rgba(244, 246, 248, 0.10);
  transition: border-color 0.25s ease;
}
.nav-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xl);
}
@media (max-width: 600px) { .nav-inner { padding-inline: 20px; } }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mark { width: 28px; height: 28px; }
/* The one deliberate optical-size decoupling: the wordmark renders at 16px
   but asks for the opsz-32 display cut. font-variation-settings wipes
   font-weight, so wght is restated. This is the ONLY rule that may use it. */
.brand .word {
  font-size: 16px;
  letter-spacing: 0.02em;
  font-variation-settings: "opsz" 32, "wght" 620;
}
.brand .word em { font-style: normal; color: #38C6D9; }
.nav-links { display: flex; align-items: center; gap: var(--s-xl); }
/* padding-block takes the hit area to 30px. */
.nav-links a:not(.btn) {
  font-size: 14px;
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.1px;
  padding-block: 8px;
  color: #B4BCC6;
}
.nav-links a:not(.btn):hover { color: #F4F6F8; }
.nav-links a[aria-current="page"] { color: #F4F6F8; font-weight: 560; }
.nav-links .btn { min-height: 38px; padding: 8px 16px; }
.nav-toggle {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F4F6F8;
  border: 1px solid rgba(244, 246, 248, 0.36);
  border-radius: var(--r-sm);
  padding: 9px 14px;
}
@media (max-width: 1023px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #0E1420;
    border-bottom: 1px solid rgba(244, 246, 248, 0.10);
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-md);
    padding: var(--s-xl) var(--gutter) var(--s-xxl);
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { font-size: 17px; }
}
/* Condensing header: visual only, so scroll-padding-top stays constant. */
.nav--condensed { border-bottom-color: rgba(244, 246, 248, 0.18); }
.brand .mark { transition: width 0.25s ease, height 0.25s ease; }
.nav--condensed .brand .mark { width: 22px; height: 22px; }
/* ------------------------------------------------------------------ hero -- */
.hero { padding-block: clamp(56px, 8vw, var(--hero)); border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; align-items: start; } }
/* Eyebrow to heading 12, heading to lead 12, lead to buttons 24. */
.hero-copy { display: grid; gap: var(--s-sm); justify-items: start; }
.hero-copy .display { margin-block: 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-sm); }
/* The homepage no longer carries a support note under the buttons. Three
   pages outside this pass still do, so the rule stays until they are cut. */
.hero-note { font-size: 13px; line-height: 1.4; color: var(--fg-3); max-width: 470px; }
.hero-note a { color: var(--accent-text); }
/* The old atmospheric panel is gone. The answer window sits on the canvas. */
.hero-art { position: relative; display: grid; align-items: start; }

/* ---------------------------------------------------------- answer window --
   The central component, and the only picture-like object on the site. A
   title bar in mono (the source, at most five words, plus a date and nothing
   else), a real prompt, a real answer, one verdict line. Colour is used on
   exactly one element: the verdict flag. There is no illustrative variant,
   no placeholder variant and no typing animation.

   Geometry: radius 8, 1px hairline, --bg-2 ground, no shadow, 24px interior
   padding, 38px title bar, 520px maximum content width (62 characters at
   14px JetBrains Mono, whose advance is 0.600em).
   -------------------------------------------------------------------------- */
.answer-window {
  position: relative;
  z-index: 1;
  max-width: 568px; /* 520 content + 2 x 24 padding */
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: normal;
  display: grid;
  align-content: start;
}
.aw-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-xs) var(--s-xl);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
  min-height: 38px;
}
.aw-bar .aw-name { color: var(--fg-2); }
.aw-bar .aw-date { font-variant-numeric: tabular-nums; }
.aw-body { padding: var(--s-xl); }
.aw-prompt { color: var(--fg); margin: 0; }
.aw-prompt .aw-caret { color: var(--accent-text); }
.aw-answer { color: var(--fg-2); margin-top: var(--s-sm); }
.aw-answer p + p { margin-top: 8px; }
.aw-verdict {
  max-width: 490px; /* 68 chars: the verdict is 14px sans inside a 520px mono box */
  margin-top: var(--s-md);
  padding-top: var(--s-sm);
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--fg);
}
.aw-verdict .aw-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-right: 8px;
}
.aw-method { padding: 10px var(--s-xl); border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--fg-3); max-width: 470px; } /* 65 chars at 12px mono */
.aw-method a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* Proof band: three dated windows, the one deliberate exception to one
   window per screen. In a 3-up cell the mono body drops to 13px, which puts
   a 346px content box at 44 characters. */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-md);
  align-items: stretch;
}
@media (max-width: 1023px) { .proof-grid { grid-template-columns: 1fr; max-width: 568px; } }
.proof-grid .answer-window { max-width: none; grid-template-rows: auto 1fr; }
.proof-grid .aw-body { display: grid; grid-template-rows: auto 1fr auto; }
.proof-method { margin-top: var(--s-xl); font-size: 13px; line-height: 1.4; color: var(--fg-3); max-width: 470px; } /* 70 chars at 13px */
.proof-method a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ stat --
   Mono, tabular, oversized. A one-line label and a method link beneath.
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-xl); }
@media (max-width: 809px) { .stats { grid-template-columns: 1fr; gap: var(--s-lg); } }
.stat { display: grid; gap: 6px; padding-top: var(--s-md); border-top: 1px solid var(--line-strong); }
.stat .n {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
@media (max-width: 1199px) { .stat .n { font-size: 40px; } }
.stat .n small { font-size: 0.5em; color: var(--fg-2); }
.stat .l { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.stat .m { font-size: 13px; color: var(--fg-3); }
.stat .m a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- logo wall -- */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs) var(--s-md);
  border-block: 1px solid var(--line);
  padding-block: var(--s-md);
}
.logo-wall span, .logo-wall a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  padding: 10px var(--s-xs);
  display: inline-block;
}
.logo-wall a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) { .logo-wall span, .logo-wall a { padding: var(--s-xs) var(--s-sm); font-size: 12px; } }
.sectors-note { text-align: center; font-size: 13px; color: var(--fg-3); padding-top: var(--s-sm); }
.sectors-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- hairline grid --
   Cells share 1px dividers (the container shows through the gap), a cyan bar
   grows from the top on hover. .cards is the legacy name and stays an alias.
   -------------------------------------------------------------------------- */
.grid-hairline, .cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cards, .grid-hairline.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-hairline.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1023px) { .grid-hairline, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-hairline, .cards { grid-template-columns: 1fr; } }
/* Cells carry no hover state at all: the system's one rule is that buttons
   change background, links underline and cards do nothing. */
.grid-hairline > *, .card {
  position: relative;
  background: var(--bg);
  padding: var(--s-xl);
  display: grid;
  gap: var(--s-xs);
  align-content: start;
}
.band-paper .grid-hairline > *, .band-paper .card { background: var(--bg-2); }
.grid-hairline .cell-no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-3); }
/* 14px in a cell under 340px: at 255px of content that is 35 characters. */
.grid-hairline p, .card p { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
/* A 2-up cell is 607px wide, so its body needs a measure of its own. */
.grid-hairline.cols-2 p, .grid-hairline.cols-2 li { font-size: 16px; line-height: 1.55; max-width: 540px; } /* 66 chars */
.grid-hairline.cols-2 .cell-no { max-width: none; }
.card-cream, .card-elevated { background: var(--bg-2); }
.icon-tile {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--accent-text);
  margin-bottom: var(--s-xs);
}
.icon-tile svg { width: 20px; height: 20px; }
.closing-line { margin-top: var(--s-xl); font-size: 16px; color: var(--fg-2); max-width: 540px; } /* 66 chars */

/* ---------------------------------------------------------------- ladder --
   Four rungs. Each: meta line (mono), title, body, price or terms line
   (mono). Cyan hairline on the featured rung, never a fill. .tiers stays as
   the legacy alias.
   -------------------------------------------------------------------------- */
.ladder, .tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-xl);
  align-items: stretch;
  counter-reset: rung;
}
@media (max-width: 1100px) { .ladder, .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ladder, .tiers { grid-template-columns: 1fr; } }
.rung, .tier {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-xl);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s-sm);
  align-content: start;
}
.rung--featured, .tier--featured { border-color: var(--accent-text); }
.rung .meta, .tier .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.rung .meta::before, .tier .step-no { content: counter(rung, decimal-leading-zero) "  "; counter-increment: rung; color: var(--accent-text); }
.tier .step-no { font-family: var(--font-mono); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent-text); margin-bottom: var(--s-xs); }
.rung p, .tier p { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.rung .price {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  padding-top: var(--s-sm);
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.rung .price strong { font-weight: 400; color: var(--accent-text); }

/* For / not for strip */
.fornot {
  margin-top: var(--s-xxxl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-xl);
}
@media (max-width: 809px) { .fornot { grid-template-columns: 1fr; } }
.fornot .fn-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s-xs); }
.fornot p { font-size: 16px; line-height: 1.55; color: var(--fg-2); max-width: 540px; }
.fornot a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------- timeline strip -- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-xl);
  margin-top: var(--s-xxxl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--line);
  padding-left: 0;
  list-style: none;
}
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; gap: var(--s-md); } }
.timeline li { position: relative; display: grid; gap: 6px; padding-top: var(--s-md); }
.timeline li::before { content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 2px; background: var(--accent); }
.t-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg); font-variant-numeric: tabular-nums; }
.t-what { font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* -------------------------------------------------------------- humility --
   Plain block: what we do not claim to measure. No colour, no icon.
   -------------------------------------------------------------------------- */
.humility {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--s-xl);
  max-width: 588px; /* 540 content + 2 x 24 padding, 66 chars at 16px */
  display: grid;
  gap: var(--s-sm);
}
.humility h2, .humility h3 { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.humility p, .humility li { font-size: 16px; line-height: 1.55; color: var(--fg-2); }
.humility ul { display: grid; gap: 6px; }
.humility li { position: relative; padding-left: 18px; }
.humility li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--fg-3); }

/* ------------------------------------------------------------------ prose --
   Measured columns for long text. Only ever inside .band-paper.
   -------------------------------------------------------------------------- */
.prose { max-width: 620px; } /* 67 chars at 18px */
/* Centred, for a page whose body is one column in a 1280px container. A
   620px column pinned left leaves a 660px rail; centred it reads as a
   decision, which is what Linear and ClickHouse do with editorial body. */
.prose--centred { margin-inline: auto; }
.prose > * + * { margin-top: var(--s-lg); }
.prose p, .prose li { font-size: 18px; line-height: 1.6; color: var(--fg-2); }
.prose h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); margin-top: var(--sec-sm); }
.prose h2 + p, .prose h2 + ul, .prose h2 + ol, .prose h2 + dl { margin-top: var(--s-md); }
.prose h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; color: var(--fg); margin-top: var(--s-xl); }
.prose h3 + p { margin-top: var(--s-sm); }
.prose ul, .prose ol { display: grid; gap: var(--s-sm); padding-left: 0; }
.prose ol { list-style: none; counter-reset: item; }
.prose li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 10px; height: 2px; background: var(--accent-text); }
.prose ol li::before { content: counter(item, decimal-leading-zero); counter-increment: item; position: absolute; left: 0; top: 2px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose dl { display: grid; gap: var(--s-md); }
.prose dt { font-weight: 600; color: var(--fg); font-size: 16px; }
.prose dd { font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.prose .answer-window, .prose .humility { margin-top: var(--s-xl); }
.prose-wide { max-width: 760px; }

/* The citable answer box. One fill rule on a band, and it is no fill: this
   block and .humility used to sit side by side on the same band with
   different grounds, which is the mismatched-panel effect. Both now sit on
   the band's own ground and are marked by their edge, not by a fill. */
.answer-box {
  border-left: 2px solid var(--accent-text);
  background: transparent;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-xs) var(--s-xl);
}
.answer-box p { font-size: 18px; line-height: 1.6; color: var(--fg); }
.answer-box p + p { margin-top: var(--s-sm); }

/* Definition table for the method page. */
.spec { border-top: 1px solid var(--line-strong); }
.spec > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-md); padding: var(--s-md) 0; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .spec > div { grid-template-columns: 1fr; gap: 4px; } }
.spec dt { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--fg-3); padding-top: 3px; }
.spec dd { font-size: 16px; line-height: 1.55; color: var(--fg-2); }
.spec dd strong { color: var(--fg); }

/* --------------------------------------------------------------- forms ---- */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }
.form-panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-xxl);
  display: grid;
  gap: var(--s-md);
}
.form-panel label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--fg); }
.form-panel input[type="text"],
.form-panel input[type="email"],
.form-panel input[type="url"],
.form-panel textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--s-sm) var(--s-md);
  width: 100%;
  min-height: 44px;
  letter-spacing: normal;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.band-paper .form-panel input[type="text"],
.band-paper .form-panel input[type="email"],
.band-paper .form-panel input[type="url"],
.band-paper .form-panel textarea { background: var(--bg-2); }
.form-panel textarea { min-height: 104px; resize: vertical; padding: var(--s-md); }
/* Mouse focus stays quiet; keyboard focus keeps a real ring. */
.form-panel input:focus:not(:focus-visible),
.form-panel textarea:focus:not(:focus-visible) { outline: none; border-color: var(--accent-text); }
.form-panel input:focus-visible,
.form-panel textarea:focus-visible { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--selection); }
.form-status { font-size: 14px; color: var(--accent-text); min-height: 1.3em; }
.form-note { font-size: 13px; color: var(--fg-3); margin-bottom: calc(var(--s-xs) * -1); }
.contact-facts { display: grid; gap: var(--s-sm); margin-top: var(--s-lg); }
.contact-facts div { font-size: 15px; color: var(--fg-2); }
.contact-facts strong { color: var(--fg); font-weight: 600; }
.form-defn { display: grid; gap: var(--s-xs); margin-top: var(--s-lg); }
.form-defn li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.form-defn li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 2px; background: var(--accent-text); }

/* ------------------------------------------------------------ accent band --
   Full-bleed cyan, ink text, one dark button. The second of two cyan fills.
   -------------------------------------------------------------------------- */
.band-accent {
  background: #38C6D9;
  color: #06121A;
  padding-block: var(--sec);
}
.band-accent .ba-inner { display: grid; gap: var(--s-lg); justify-items: start; max-width: 820px; }
.band-accent .eyebrow { color: #06121A; opacity: 0.8; }
.band-accent h2 { color: #06121A; }
.band-accent p { font-size: 18px; line-height: 1.5; color: #06121A; max-width: 600px; } /* 65 chars */
.band-accent .btn-dark { background: #0E1420; color: #F4F6F8; }
.band-accent .btn-dark:hover { background: #1C2837; }
.band-accent .btn-secondary { color: #06121A; border-color: rgba(6, 18, 26, 0.5); }
.band-accent .btn-secondary:hover { border-color: #06121A; }
.band-accent .btn-secondary::before { background: #06121A; }
.band-accent .btn-secondary:hover { color: #F4F6F8; }
.band-accent :focus-visible { outline-color: #06121A; }
.band-accent ::selection { background: rgba(6, 18, 26, 0.2); }

/* Legacy CTA banner (other pages). Paper card, no fill. */
.cta-banner {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(36px, 6vw, var(--sec));
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--s-lg);
}

/* ---------------------------------------------------------------- calendly -- */
.calendly-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
}
.calendly-inline-widget { width: 100%; }
.calendly-fallback { padding: var(--s-lg); font-size: 15px; color: var(--fg-2); text-align: center; max-width: 520px; margin-inline: auto; } /* 67 chars */
.calendly-fallback a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.calendly-wrap.is-loaded .calendly-fallback { display: none; }

/* Confirmation after Calendly sends the visitor back to /book?booked=1. The
   accent edge marks it as the one thing on the page that has changed. */
.booked-panel {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--bg-2);
  padding: var(--s-xxl);
  max-width: 620px; /* 67 chars at 18px */
  display: grid;
  gap: var(--s-md);
}
.booked-panel h2 { margin: 0; }
.booked-panel p { margin: 0; color: var(--fg-2); }
.booked-panel .eyebrow { margin: 0; }

/* --------------------------------------------------- THE SIGNATURE STRIPE -- */
.stripe { height: 12px; background: var(--stripe); }

/* ----------------------------------------------------------------- footer -- */
.footer { background: #0E1420; color: #F4F6F8; padding-block: var(--sec); border-top: 1px solid rgba(244, 246, 248, 0.10); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-xxl); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-h {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7C8794;
  margin-bottom: var(--s-md);
}
.footer-links { display: grid; gap: var(--s-xs); }
.footer-links a { font-size: 14px; color: #B4BCC6; padding-block: var(--s-xs); }
.footer-links a:hover { color: #F4F6F8; text-decoration: underline; text-underline-offset: 3px; }
.footer-links a[aria-current="page"] { color: #F4F6F8; }
.footer-brand .word { font-size: 16px; font-weight: 620; letter-spacing: 0.02em; }
.footer-brand .word em { font-style: normal; color: #38C6D9; }
.footer-brand p { font-size: 14px; color: #B4BCC6; margin-top: var(--s-sm); max-width: 260px; line-height: 1.5; } /* 36 chars */
.footer-base {
  margin-top: var(--sec-sm);
  padding-top: var(--s-lg);
  border-top: 1px solid rgba(244, 246, 248, 0.10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-xxl);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #7C8794;
}

/* ---------------------------------------------------------------- reveals --
   12px of travel. Failsafe in JS force-shows after 2.5s.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].in { opacity: 1; transform: none; }
/* Above the fold paints immediately: the hero is the LCP element and must never wait for JS. */
.hero [data-reveal], .page-hero [data-reveal], .page-head [data-reveal], .article-hero [data-reveal] { opacity: 1; transform: none; transition: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* =========================================================== INTERACTIONS ==
   One affordance per interactive type and no more: buttons change
   background, links underline, cards do nothing. The arrow-slide, the
   wipe-in fill on outlined buttons, the cyan bar on grid cells, the scroll
   progress bar, the marquee and the word-by-word reveal are all gone.
   ========================================================================== */

/* A static arrow on a CTA. It labels the action; it does not perform. */
.btn .arr {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 1em;
  line-height: 1;
}
.btn .arr::before {
  content: "\2192";
  display: grid;
  place-items: center;
  height: 100%;
}

/* FAQ accordion. 560px is the answer measure (68 characters at 16px), so the
   question run, the answer run and the rule above them are all the same
   width as the reading column it sits in: the accordion used to be 840px
   wide holding an answer capped at 540, which left a 300px dead rail beside
   every answer and put the question run on a different axis from the prose
   above it. */
.faq { max-width: 620px; border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { margin: 0; font-size: inherit; }
.faq-q button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-lg) 0;
  min-height: 56px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--fg);
  transition: color 0.18s ease;
}
.faq-q button:hover { color: var(--accent-text); }
/* The question fills the accordion, which is itself the measure. */
.faq-q button > span:first-child { max-width: none; }
.faq-ico { position: relative; width: 14px; height: 14px; flex: none; }
.faq-ico::before, .faq-ico::after {
  content: "";
  position: absolute;
  background: var(--accent-text);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
.faq-ico::before { left: 0; top: 6px; width: 14px; height: 2px; }
.faq-ico::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq-q button[aria-expanded="true"] .faq-ico::after { transform: scaleY(0); opacity: 0; }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-panel.open { grid-template-rows: 1fr; }
.faq-inner { overflow: hidden; }
.faq-inner p { font-size: 16px; line-height: 1.6; color: var(--fg-2); padding-bottom: var(--s-xl); max-width: 540px; } /* 66 chars */
.no-js .faq-panel { grid-template-rows: 1fr; }

/* ========================================================= INSIGHTS =========
   Legacy article classes, kept so the pages not yet restyled render on the
   semantic tokens. They read acceptably on either scope.
   ========================================================================== */
.article { max-width: 620px; margin-inline: auto; } /* 67 chars at 18px */
.article-head { display: grid; gap: var(--s-md); margin-bottom: var(--s-xxxl); }
.article-back { display: inline-block; padding-block: 7px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.article-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.article-meta { font-size: 14px; color: var(--fg-3); }
.article-prose > * + * { margin-top: var(--s-lg); }
.article-prose p { font-size: 18px; line-height: 1.65; color: var(--fg-2); }
.article-prose h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.024em; color: var(--fg); margin-top: var(--sec-sm); }
.article-prose h2 + p { margin-top: var(--s-md); }
.article-prose h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; color: var(--fg); margin-top: var(--s-xl); }
.article-prose h3 + p { margin-top: var(--s-sm); }
.article-prose h2 + h3 { margin-top: var(--s-lg); }
.article-prose a:hover { color: var(--fg); }
.article-prose ul { display: grid; gap: var(--s-sm); }
.article-prose li { position: relative; padding-left: 24px; font-size: 18px; line-height: 1.6; color: var(--fg-2); }
.article-prose li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; background: var(--accent-text); }
.article-faq { margin-top: var(--sec); border-top: 1px solid var(--line); padding-top: var(--s-xxxl); }
.article-faq h2 { font-size: 28px; letter-spacing: -0.024em; }
.article-faq dl { display: grid; gap: var(--s-md); margin-top: var(--s-xl); }
.article-faq dt { font-weight: 600; font-size: 17px; color: var(--fg); }
.article-faq dd { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg-2); max-width: 540px; } /* 66 chars */
/* A long answer is split into two paragraphs rather than shortened. */
.article-faq dd p + p { margin-top: var(--s-sm); }
.article-faq .qa { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-xl); background: var(--bg-2); }
/* Data tables and the hand-rolled chart. Article scope, both themes: every
   colour comes from a token, so the same rules are correct on dark and on
   paper. Wide tables scroll inside .table-wrap, never the page body. */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); }
.data-table { width: 100%; min-width: 520px; border-collapse: collapse; text-align: left; }
.data-table caption { caption-side: bottom; padding: var(--s-md) var(--s-lg) var(--s-lg); font-size: 14px; line-height: 1.5; color: var(--fg-3); text-align: left; max-width: 490px; } /* 68 chars at 14px */
.data-table th, .data-table td { padding: 12px var(--s-lg); border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.45; vertical-align: top; }
.data-table thead th { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.data-table tbody th { font-weight: 400; color: var(--fg-2); }
.data-table tbody td { font-family: var(--font-mono); font-size: 14px; color: var(--fg); white-space: nowrap; }
/* A cell carrying a sentence rather than a figure: sans, and it wraps. */
.data-table td.t-note { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--fg-2); white-space: normal; min-width: 260px; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tr.total th, .data-table tr.total td { color: var(--fg); font-weight: 600; border-top: 1px solid var(--line-strong); }

.chart-fig { display: grid; gap: var(--s-md); }
.chart-svg { display: block; width: 100%; height: auto; color: var(--fg-2); }
.chart-svg text { font-family: var(--font-mono); font-size: 13px; fill: currentColor; }
.chart-svg .val text { fill: var(--fg); }
.chart-svg .bar rect { fill: var(--accent-text); }
.chart-svg .axis { stroke: currentColor; stroke-opacity: 0.35; }
.chart-fig figcaption { font-size: 14px; line-height: 1.5; color: var(--fg-3); max-width: 490px; } /* 68 chars */

.related { margin-top: var(--sec); }
.related h2 { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.related ul { display: grid; gap: var(--s-sm); margin-top: var(--s-md); }
.related a { display: inline-block; padding-block: 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.related a:hover { color: var(--accent-text); }
.related a .arr { color: var(--accent-text); }
.article-cta {
  margin-top: var(--sec);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-xxl);
  display: grid;
  gap: var(--s-md);
  justify-items: start;
}
.article-cta h2 { font-size: 26px; letter-spacing: -0.024em; }
.article-cta .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.insight-list { max-width: 820px; border-top: 1px solid var(--line-strong); }
.insight-item { border-bottom: 1px solid var(--line); }
.insight-item a { display: grid; gap: 8px; padding: var(--s-xl) 0; transition: opacity 0.18s ease; }
.insight-item a:hover { opacity: 0.7; }
.insight-item h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.024em; color: var(--fg); }
.insight-item p { font-size: 16px; line-height: 1.55; color: var(--fg-2); max-width: 540px; } /* 66 chars */
.insight-item .when { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }

/* ------------------------------------------------------------------- misc -- */
.center-page { min-height: 62vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: var(--s-lg); padding: var(--sec) var(--gutter); }
.breadcrumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--fg-3); display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb a { color: var(--fg-2); padding-block: 6px; display: inline-block; }
.breadcrumb a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
/* No reserved rail. A 820px column inside a 1280px container left a 460px
   hole beside the heading, which reads as an image that failed to load. */
.page-head { display: grid; gap: var(--s-sm); max-width: none; padding-block: clamp(48px, 7vw, 88px) var(--sec-sm); }
.page-head .display, .page-head .h1-editorial { margin-top: 0; }
.page-head .hero-ctas { margin-top: var(--s-sm); }
/* .two-col is gone. Two hand-written columns of unequal length left voids of
   554px and 697px on the pages that used it; both are now one column in
   reading order, which is what .prose--centred and .reading-col are for. */
/* A band that holds only reading matter (an FAQ and its heading, a related
   line) is a centred column at the answer measure, so the heading, the rule
   and the text share one axis instead of hanging off the container's left
   edge with 720px of empty canvas beside them. */
.reading-col { max-width: 620px; margin-inline: auto; }
.reading-col .section-head { max-width: none; }
.reading-col .faq { max-width: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------- ANSWER WINDOW TYPE ISOLATION --
   Last in the file on purpose. The window is the one picture-like object on
   the site, so its type must be immune to whatever scope it lands in. It
   used to render 14px on the homepage and 18px inside .prose on
   /ai-visibility-audit, because `.prose p` targets the element directly and
   beat the size inherited from .answer-window; .aw-method declared 12px and
   rendered 18px the same way. These rules come after every scope that could
   reach inside a window, and they are the only place its sizes are set.
   -------------------------------------------------------------------------- */
.answer-window,
.prose .answer-window,
.article-prose .answer-window { font-size: 14px; line-height: 1.55; letter-spacing: normal; }
.answer-window p,
.answer-window li,
.prose .answer-window p,
.article-prose .answer-window p { font-size: 14px; line-height: 1.55; }
.answer-window .aw-verdict,
.prose .answer-window .aw-verdict,
.article-prose .answer-window .aw-verdict { font-size: 14px; line-height: 1.5; }
.answer-window .aw-bar,
.prose .answer-window .aw-bar { font-size: 12px; }
.answer-window .aw-verdict .aw-flag,
.prose .answer-window .aw-verdict .aw-flag { font-size: 12px; }
.answer-window .aw-method,
.prose .answer-window .aw-method,
.article-prose .answer-window .aw-method { font-size: 12px; line-height: 1.5; }
/* 13px only while the proof band is genuinely three across. */
@media (min-width: 1024px) {
  .proof-grid .answer-window,
  .proof-grid .answer-window p { font-size: 13px; }
}