/* =============================================================================
   SERPCompass design system — static/css/compass.css
   Build contract: .claude/skills/serpcompass-design-system/SKILL.md
   Layers (file order = cascade order): reset, tokens, base, layout, components,
   patterns, pages, utilities, legacy. `legacy` holds the former base.html CSS
   and is deleted page by page as templates migrate to the c-/l-/p- classes.
   Element selectors live only in `base` (and, scoped, in `legacy`).
   ============================================================================= */
@layer reset, tokens, base, layout, components, patterns, pages, utilities, legacy;

/* ----------------------------------------------------------------------------
   reset
   ---------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; }
  fieldset { padding: 0; border: 0; min-width: 0; }
  legend { padding: 0; }
  img, svg, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  summary { cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  :focus:not(:focus-visible) { outline: none; }
}

/* ----------------------------------------------------------------------------
   tokens (pasted verbatim from the contract §2)
   ---------------------------------------------------------------------------- */
@layer tokens {
:root {
  /* colour: base + neutral ramp (derived from ink #16242d) */
  --n-0:#ffffff; --n-50:#f7f8f9; --n-100:#eef1f3; --n-200:#e1e6ea; --n-300:#c9d1d7; --n-400:#7d8b96;
  --n-500:#5f6e7a; --n-600:#586773; --n-700:#3b4954; --n-800:#16242d; --n-900:#0e171d;
  /* colour: brass accent (owner-mandated family) */
  --brass-50:#fff2d9; --brass-100:#fbe8c4; --brass-300:#edc574; --brass-500:#bb7c1d; --brass-700:#8d5d16; --brass-800:#6e4711;
  /* colour: semantic status (status only, never decoration) */
  --ok-50:#e6f4ea; --ok-500:#2f8a52; --ok-700:#1e6b3f;
  --warn-50:var(--brass-50); --warn-500:var(--brass-500); --warn-700:var(--brass-700);
  --bad-50:#fbeae7; --bad-500:#c8442d; --bad-700:#a9321f;
  --note-50:var(--n-100); --note-500:var(--n-400); --note-700:var(--n-700);
  /* colour: roles */
  --bg:var(--n-0); --surface:var(--n-0); --surface-sunken:var(--n-50);
  --ink:var(--n-800); --text:var(--ink); --text-muted:var(--n-600); --text-2:var(--n-500); --on-ink:#ffffff; --on-brass:#ffffff;
  --line:var(--n-200); --line-strong:var(--n-300); --line-input:var(--n-400);
  --link:var(--brass-700); --link-hover:var(--brass-800);
  --accent:var(--brass-500); --accent-text:var(--brass-700); --accent-surface:var(--brass-50); --focus:var(--brass-700);
  /* type */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --fs-1:0.75rem;--lh-1:1.4;  --fs-2:0.8125rem;--lh-2:1.5; --fs-3:0.9375rem;--lh-3:1.55; --fs-4:1.125rem;--lh-4:1.45;
  --fs-5:1.375rem;--lh-5:1.3; --fs-6:1.625rem;--lh-6:1.2;  --fs-7:2rem;--lh-7:1.15;      --fs-8:2.5rem;--lh-8:1.05; --fs-9:3rem;--lh-9:1.02;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700; --tracking-display:-0.015em;--tracking-body:0;--tracking-mono:0;
  /* spacing (8px base) */
  --sp-1:0.25rem;--sp-2:0.5rem;--sp-3:0.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:4rem;--sp-9:6rem;
  /* layout */
  --sidebar-w:14.5rem; --topbar-h:3.5rem; --content-max:75rem; --prose-max:68ch; --drawer-w:30rem; --target-min:1.5rem;
  /* radii tied to hierarchy; borders; shadows (floating layers only); focus; motion */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-pill:999px; --bw-hair:1px; --bw-rule:3px;
  --shadow-float:0 8px 24px -8px rgba(22,36,45,.18),0 1px 2px rgba(22,36,45,.06); --shadow-drawer:-12px 0 32px -16px rgba(22,36,45,.22);
  --focus-ring:2px solid var(--focus); --focus-offset:2px;
  --dur-1:120ms;--dur-2:200ms;--dur-3:320ms; --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce) { :root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms}
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important} }
@media (prefers-contrast: more) { :root{--text-muted:var(--n-700);--text-2:var(--n-700);--line:var(--n-300);--line-input:var(--n-500)} }
}

/* ----------------------------------------------------------------------------
   base — element defaults only
   ---------------------------------------------------------------------------- */
@layer base {
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg); color: var(--text);
    font-family: var(--font-body); font-size: var(--fs-3); line-height: var(--lh-3);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    min-height: 100vh;
  }
  h1, h2, h3, h4 { color: var(--text); text-wrap: balance; }
  h1 { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); }
  h2 { font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); }
  h3 { font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-semibold); }
  h4 { font-size: var(--fs-3); line-height: var(--lh-3); font-weight: var(--fw-semibold); }
  p { max-width: var(--prose-max); }
  a { color: var(--link); text-decoration: none; text-underline-offset: .16em; text-decoration-thickness: 1px; }
  a:not([class]) { text-decoration: underline; }
  a:hover { color: var(--link-hover); }
  code, kbd, samp, pre { font-family: var(--font-mono); font-size: .93em; letter-spacing: var(--tracking-mono); }
  pre { overflow: auto; }
  small { font-size: var(--fs-2); }
  strong, b { font-weight: var(--fw-semibold); }
  hr { border: 0; border-top: var(--bw-hair) solid var(--line); margin: var(--sp-5) 0; }
  table { border-collapse: collapse; }
  ::placeholder { color: var(--text-2); opacity: 1; }
  input, select, textarea { color: var(--text); }
  [hidden] { display: none; }
  dialog { color: var(--text); }
  ::selection { background: var(--brass-100); color: var(--ink); }
}

/* ----------------------------------------------------------------------------
   layout — the app shell
   ---------------------------------------------------------------------------- */
@layer layout {
  .l-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; background: var(--bg); }
  .l-sidebar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--sp-2);
    background: var(--surface); border-right: var(--bw-hair) solid var(--line);
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
  }
  .l-sidebar__close { display: none; }
  .l-menuwrap { display: none; }
  .l-main { display: flex; flex-direction: column; min-width: 0; }
  .l-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--sp-4);
    min-height: var(--topbar-h); padding: 0 var(--sp-6);
    background: var(--surface); border-bottom: var(--bw-hair) solid var(--line);
  }
  .l-topbar__crumbs { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; font-size: var(--fs-2); color: var(--text-muted); }
  .l-topbar__crumbs > span[aria-hidden] { color: var(--n-300); padding: 0 var(--sp-1); }
  .l-topbar__title {
    font-family: var(--font-body); font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-semibold); letter-spacing: 0;
    margin: 0 0 0 var(--sp-2); padding-left: var(--sp-4); border-left: var(--bw-hair) solid var(--line);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .l-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: none; }
  .l-page { width: 100%; max-width: calc(var(--content-max) + 2 * var(--sp-6)); padding: var(--sp-5) var(--sp-6) var(--sp-8); }
  .l-page > * + * { margin-top: var(--sp-5); }
  .l-page-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
  .l-page-head p { color: var(--text-muted); font-size: var(--fs-2); }
  .l-grid { display: grid; gap: var(--sp-4); }
  .l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l-grid--side { grid-template-columns: minmax(0, 1.6fr) minmax(17rem, .9fr); align-items: start; }
  .l-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
  .l-stack--tight { gap: var(--sp-2); }
  .l-cluster { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .l-section { margin-top: var(--sp-6); }
  .l-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); }
  .l-section__head h2 { font-size: var(--fs-4); }
  .l-section__head p { color: var(--text-muted); font-size: var(--fs-2); }

  /* the marketing (anonymous) shell keeps its legacy classes until step 8 */
  body.is-site .l-shell { display: block; }

  @media (max-width: 1199px) { .l-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 899px) {
    .l-shell { grid-template-columns: minmax(0, 1fr); }
    .l-sidebar { display: none; }
    .l-sidebar:target { display: flex; position: fixed; inset: 0 auto 0 0; width: min(20rem, 88vw); z-index: 40; box-shadow: var(--shadow-drawer); }
    .l-sidebar:target .l-sidebar__close { display: block; }
    .l-menuwrap { display: contents; }
    .l-topbar { padding: 0 var(--sp-4); gap: var(--sp-3); }
    .l-topbar__crumbs { display: none; }
    .l-topbar__title { border-left: 0; padding-left: 0; margin-left: 0; }
    .l-page { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
    .l-grid--2, .l-grid--3, .l-grid--side { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 599px) {
    .l-page { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
    .l-page-head { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  }
  /* off-canvas nav: the same .c-nav moved into this dialog by compass.js */
  .l-navdialog { border: 0; padding: 0; margin: 0; inset: 0 auto 0 0; height: 100vh; max-height: 100vh; width: min(20rem, 88vw); background: var(--surface); box-shadow: var(--shadow-drawer); }
  .l-navdialog::backdrop { background: rgba(22, 36, 45, .32); }
  .l-navdialog[open] { display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3) var(--sp-3); overflow-y: auto; }
}

/* ----------------------------------------------------------------------------
   components
   ---------------------------------------------------------------------------- */
@layer components {
  /* icons: 16px stroke, currentColor, one <symbol> per glyph in base.html */
  .c-icon { width: 1rem; height: 1rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .c-icon--sm { width: .875rem; height: .875rem; }
  .c-icon--brass { color: var(--brass-500); }

  /* ---- navigation ---- */
  .c-brand { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-3); color: var(--text); font-weight: var(--fw-bold); font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none; }
  .c-brand:hover { color: var(--text); }
  .c-brand .c-icon { width: 1.5rem; height: 1.5rem; color: var(--brass-500); }
  .c-nav { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; }
  .c-nav__group > summary { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-1) var(--sp-2); min-height: var(--target-min); font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--n-600); border-radius: var(--r-1); list-style: none; }
  .c-nav__group > summary:hover { background: var(--n-50); color: var(--text); }
  .c-nav__group > summary .c-icon { width: .75rem; height: .75rem; transition: transform var(--dur-1) var(--ease-out); }
  .c-nav__group[open] > summary .c-icon { transform: rotate(90deg); }
  .c-nav__list { list-style: none; margin: var(--sp-1) 0 0; padding: 0; }
  .c-nav__item { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: 2.125rem; padding: 0 var(--sp-2) 0 var(--sp-3); border-radius: var(--r-1); color: var(--n-700); font-size: var(--fs-3); font-weight: var(--fw-medium); text-decoration: none; }
  .c-nav__item:hover { background: var(--n-50); color: var(--text); }
  .c-nav__item[aria-current="page"] { background: var(--n-100); color: var(--text); }
  .c-nav__item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: .375rem; bottom: .375rem; width: var(--bw-rule); border-radius: 2px; background: var(--brass-500); }
  .c-nav__item .c-icon { color: var(--n-500); }
  .c-nav__item[aria-current="page"] .c-icon, .c-nav__item:hover .c-icon { color: var(--text); }
  .c-nav__foot { margin-top: auto; padding-top: var(--sp-3); border-top: var(--bw-hair) solid var(--line); display: flex; flex-direction: column; gap: var(--sp-2); }
  .c-nav__user { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); min-width: 0; }
  .c-nav__avatar { width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--n-100); color: var(--text); font-size: var(--fs-2); font-weight: var(--fw-bold); }
  .c-nav__who { min-width: 0; font-size: var(--fs-2); line-height: var(--lh-2); }
  .c-nav__who strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-semibold); }
  .c-nav__who span { display: block; color: var(--text-muted); }
  .c-nav__quota { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-2); font-size: var(--fs-2); color: var(--text-muted); }
  .c-nav__staff { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); padding: 0 var(--sp-2); font-size: var(--fs-1); }
  .c-nav__staff a { color: var(--text-muted); }

  /* ---- menus (native <details>) ---- */
  .c-menu { position: relative; }
  .c-menu > summary { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--target-min); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-1); color: var(--text); font-weight: var(--fw-medium); font-size: var(--fs-2); list-style: none; max-width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .c-menu > summary:hover { background: var(--n-50); }
  .c-menu > summary .c-icon { width: .75rem; height: .75rem; color: var(--n-500); }
  .c-menu__panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 14rem; padding: var(--sp-2); background: var(--surface); border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-float); }
  .c-menu__panel a, .c-menu__panel button { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 2.25rem; padding: 0 var(--sp-2); border-radius: var(--r-1); color: var(--text); font-size: var(--fs-3); text-decoration: none; text-align: left; }
  .c-menu__panel a:hover, .c-menu__panel button:hover { background: var(--n-50); color: var(--text); }
  .c-menu__panel a[aria-current="true"] { background: var(--n-100); }
  .c-menu__label { display: block; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-1); color: var(--text-muted); }
  .c-menu__panel hr { margin: var(--sp-1) 0; }

  /* ---- buttons ---- */
  .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 2.5rem; padding: 0 var(--sp-4); border: var(--bw-hair) solid transparent; border-radius: var(--r-1); font-size: var(--fs-3); font-weight: var(--fw-semibold); line-height: 1.2; text-decoration: none; white-space: nowrap; color: var(--text); cursor: pointer; }
  .c-btn--primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  .c-btn--primary:hover { background: var(--n-900); border-color: var(--n-900); color: var(--on-ink); }
  .c-btn--primary:focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 2px var(--on-ink) inset; }
  .c-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--line-input); }
  .c-btn--secondary:hover { background: var(--n-50); color: var(--text); }
  .c-btn--quiet { padding: 0 var(--sp-2); color: var(--brass-700); background: transparent; }
  .c-btn--quiet:hover { color: var(--brass-800); text-decoration: underline; text-underline-offset: .16em; }
  .c-btn--danger { background: var(--bad-700); color: var(--on-ink); border-color: var(--bad-700); }
  .c-btn--danger:hover { background: var(--bad-500); border-color: var(--bad-500); color: var(--on-ink); }
  .c-btn--brass { background: var(--brass-700); color: var(--on-brass); border-color: var(--brass-700); }
  .c-btn--brass:hover { background: var(--brass-800); border-color: var(--brass-800); color: var(--on-brass); }
  .c-btn--sm { min-height: 2rem; padding: 0 var(--sp-3); font-size: var(--fs-2); }
  .c-btn--lg { min-height: 3rem; padding: 0 var(--sp-5); font-size: var(--fs-4); }
  .c-btn--block { width: 100%; }
  .c-btn[disabled], .c-btn[aria-disabled="true"] { background: var(--n-100); color: var(--n-400); border-color: var(--n-100); cursor: not-allowed; }
  .c-btn .c-icon { width: .875rem; height: .875rem; }

  /* ---- chips ---- */
  .c-chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 1.75rem; padding: 0 var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-1); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; background: var(--n-100); color: var(--n-700); border: var(--bw-hair) solid transparent; }
  .c-chip--ok { background: var(--ok-50); color: var(--ok-700); }
  .c-chip--warn { background: var(--brass-50); color: var(--brass-800); }
  .c-chip--bad { background: var(--bad-50); color: var(--bad-700); }
  .c-chip--brass { background: var(--brass-100); color: var(--brass-800); }
  .c-chip--outline { background: transparent; border-color: var(--line-strong); }
  .c-chip--directional { font-style: italic; }
  button.c-chip { cursor: pointer; }
  button.c-chip:hover { border-color: var(--line-strong); }
  button.c-chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

  /* ---- 5-step bars (effort / impact) ---- */
  .c-bar { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); color: var(--text-muted); }
  .c-bar__track { display: inline-grid; grid-template-columns: repeat(5, .625rem); gap: 2px; }
  .c-bar__track i { display: block; height: .5rem; border-radius: 2px; background: var(--n-200); }
  .c-bar__track i.is-on { background: var(--brass-500); }
  .c-bar--muted .c-bar__track i.is-on { background: var(--n-400); }

  /* ---- Decision card (the hero unit) ---- */
  .c-decision { position: relative; background: var(--surface); border: var(--bw-hair) solid var(--line); border-left: var(--bw-rule) solid var(--brass-500); border-radius: var(--r-2); padding: var(--sp-5) var(--sp-5) var(--sp-4) 4.25rem; }
  .c-decision__rank { position: absolute; left: 1.375rem; top: 1.5rem; font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-5); line-height: 1; font-weight: var(--fw-medium); color: var(--brass-700); }
  .c-decision__meta { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; font-size: var(--fs-2); color: var(--text-muted); max-width: none; }
  .c-decision__headline { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-7); line-height: var(--lh-7); font-weight: var(--fw-medium); letter-spacing: var(--tracking-display); margin-top: var(--sp-3); max-width: 28ch; }
  .c-decision__why { margin-top: var(--sp-4); }
  .c-decision__why h3, .c-decision__fix h3, .c-decision__how summary { font-size: var(--fs-2); font-weight: var(--fw-semibold); color: var(--text-muted); margin-bottom: var(--sp-1); }
  .c-decision__why p { font-size: var(--fs-3); overflow-wrap: anywhere; }
  .c-decision__fix { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--brass-50); border-radius: var(--r-2); }
  .c-decision__fix p { font-size: var(--fs-3); font-weight: var(--fw-medium); }
  .c-decision__scales { display: flex; align-items: center; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-3); font-size: var(--fs-2); color: var(--text-muted); }
  .c-decision__actions { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
  .c-decision__how { margin-top: var(--sp-3); font-size: var(--fs-2); }
  .c-decision__how summary { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--brass-700); margin: 0; min-height: var(--target-min); }
  .c-decision__how summary:hover { text-decoration: underline; }
  .c-decision__how p { margin-top: var(--sp-1); color: var(--text-muted); }
  .c-decision__foot { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--bw-hair) solid var(--line); font-size: var(--fs-2); color: var(--text-muted); }
  .c-decision__foot form { display: inline-flex; align-items: center; gap: var(--sp-1); }
  .c-decision__foot .c-btn--sm { min-height: var(--target-min); }
  .c-decision.is-blocked { border-left-color: var(--n-400); }
  .c-decision.is-done { border-left-color: var(--ok-500); }
  .c-decision.is-done .c-decision__rank { color: var(--ok-700); }
  .c-decision.is-blocked .c-decision__rank { color: var(--n-500); }
  .c-decision.is-thin .c-decision__fix { background: var(--n-50); }
  .c-decision.is-locked .c-decision__fix { background: var(--brass-50); border: var(--bw-hair) solid var(--brass-300); }
  .c-decision--compact { padding: var(--sp-4) var(--sp-4) var(--sp-4) 3.5rem; }
  .c-decision--compact .c-decision__rank { left: 1.125rem; top: 1.125rem; font-size: var(--fs-4); }
  .c-decision--compact .c-decision__headline { font-family: var(--font-body); font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-semibold); letter-spacing: 0; margin-top: 0; max-width: none; }
  .c-decision--compact .c-decision__fix { margin-top: var(--sp-2); padding: 0; background: transparent; font-size: var(--fs-2); color: var(--text-muted); }
  .c-decision--compact .c-decision__fix p { font-size: var(--fs-2); font-weight: var(--fw-regular); }
  .c-decision--compact .c-decision__scales { margin-top: var(--sp-2); }
  .c-decision--compact .c-decision__actions { margin-top: var(--sp-3); }

  /* ---- action list ---- */
  .c-action-list { list-style: none; margin: 0; padding: 0; border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); background: var(--surface); }
  .c-action-list__row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto auto auto 1rem; align-items: center; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-top: var(--bw-hair) solid var(--line); color: var(--text); text-decoration: none; }
  .c-action-list > li:first-child > .c-action-list__row { border-top: 0; }
  .c-action-list__row:hover { background: var(--n-50); color: var(--text); }
  .c-action-list__rank { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-4); color: var(--brass-700); }
  .c-action-list__title { font-size: var(--fs-4); font-weight: var(--fw-semibold); line-height: var(--lh-4); }
  .c-action-list__why { display: block; margin-top: 2px; font-size: var(--fs-2); color: var(--text-muted); max-width: 70ch; }
  .c-action-list__chev { color: var(--n-400); }
  .c-action-list__empty { padding: var(--sp-5); }
  .c-filters { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }

  /* ---- the numbers (dl strip) ---- */
  .c-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; margin: 0; border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); background: var(--surface); overflow: hidden; }
  .c-metric { display: grid; grid-template-rows: auto auto auto 1fr; gap: 2px; padding: var(--sp-4); border-top: var(--bw-hair) solid var(--line); border-left: var(--bw-hair) solid var(--line); margin: -1px 0 0 -1px; }
  .c-metric__label { font-size: var(--fs-2); color: var(--text-muted); }
  .c-metric__value { font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; }
  .c-metric__value small { font-size: var(--fs-2); font-weight: var(--fw-regular); color: var(--text-muted); }
  .c-metric__compare { font-size: var(--fs-2); color: var(--text-muted); }
  .c-metric__so { font-size: var(--fs-2); color: var(--text); margin-top: var(--sp-1); }
  .c-metric__trend { color: var(--ok-700); }
  .c-metric__trend--down { color: var(--bad-700); }

  /* ---- states + notes ---- */
  .c-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: start; padding: var(--sp-5); border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); background: var(--surface); }
  .c-state .c-icon { width: 1.125rem; height: 1.125rem; margin-top: .2rem; color: var(--n-500); }
  .c-state__title { font-size: var(--fs-4); font-weight: var(--fw-semibold); }
  .c-state__body { grid-column: 2; font-size: var(--fs-3); color: var(--text-muted); }
  .c-state__actions { grid-column: 2; display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
  .c-state__actions .c-btn--quiet { padding-left: 0; }
  .c-state__details { grid-column: 2; font-size: var(--fs-2); }
  .c-state__details summary { color: var(--text-muted); min-height: var(--target-min); display: inline-flex; align-items: center; }
  .c-state__details pre { margin-top: var(--sp-2); padding: var(--sp-3); background: var(--n-50); border-radius: var(--r-1); font-size: var(--fs-1); }
  .c-state--error .c-icon { color: var(--bad-500); }
  .c-state--blocked .c-icon { color: var(--n-700); }
  .c-state--loading .c-icon { color: var(--brass-500); }
  .c-progress { grid-column: 2; margin-top: var(--sp-1); }
  .c-progress__track { height: .375rem; border-radius: var(--r-pill); background: var(--n-100); overflow: hidden; }
  .c-progress__fill { height: 100%; width: var(--w, 0%); background: var(--brass-500); border-radius: inherit; transition: width var(--dur-3) var(--ease-out); }
  .c-progress__text { margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--text-muted); }
  .c-note { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border: var(--bw-hair) solid var(--line); border-radius: var(--r-1); background: var(--n-50); font-size: var(--fs-2); color: var(--text-muted); max-width: none; }
  .c-note .c-icon { width: .875rem; height: .875rem; margin-top: .15rem; color: var(--n-500); }
  .c-note strong { color: var(--text); }

  /* ---- fields ---- */
  .c-field { display: block; }
  .c-field + .c-field { margin-top: var(--sp-4); }
  .c-field__label { display: block; font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--text); margin-bottom: var(--sp-1); }
  .c-field__label small { color: var(--text-muted); font-weight: var(--fw-regular); }
  .c-field__input { display: block; width: 100%; min-height: 2.5rem; padding: 0 var(--sp-3); border: var(--bw-hair) solid var(--line-input); border-radius: var(--r-1); background: var(--surface); font-size: var(--fs-3); }
  .c-field__input:hover { border-color: var(--n-500); }
  textarea.c-field__input { min-height: 6rem; padding: var(--sp-2) var(--sp-3); line-height: var(--lh-3); resize: vertical; }
  select.c-field__input { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4954' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right .75rem center; background-size: .875rem; }
  .c-field__help { display: block; margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--text-muted); }
  .c-field__error { display: flex; gap: var(--sp-1); align-items: flex-start; margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--bad-700); }
  .c-field__error .c-icon { width: .875rem; height: .875rem; margin-top: .15rem; }
  .c-field.is-invalid .c-field__input { border-color: var(--bad-500); }
  .c-field--check { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: var(--target-min); font-size: var(--fs-3); }
  .c-field--check input { width: 1.125rem; height: 1.125rem; margin: .2rem 0 0; accent-color: var(--ink); }
  .c-field__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .c-field__row .c-field__label { margin: 0; }
  .c-field__row a { font-size: var(--fs-2); }

  /* ---- tabs ---- */
  .c-tabs { display: flex; gap: var(--sp-4); border-bottom: var(--bw-hair) solid var(--line); overflow-x: auto; }
  .c-tabs a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 2px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: var(--fs-3); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; }
  .c-tabs a:hover { color: var(--text); }
  .c-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--ink); }
  .c-tabs--sm a { min-height: 2rem; font-size: var(--fs-2); }

  /* ---- tables ---- */
  .c-table-wrap { overflow: auto; border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); background: var(--surface); }
  .c-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
  .c-table caption { text-align: left; }
  .c-table thead th { position: sticky; top: 0; z-index: 1; background: var(--n-50); text-align: left; font-size: var(--fs-2); font-weight: var(--fw-semibold); color: var(--n-700); padding: var(--sp-2) var(--sp-3); border-bottom: var(--bw-hair) solid var(--line); white-space: nowrap; }
  .c-table th[aria-sort] { padding: 0; }
  .c-table th[aria-sort] > button { display: inline-flex; align-items: center; gap: var(--sp-1); width: 100%; min-height: 2.25rem; padding: var(--sp-2) var(--sp-3); font: inherit; color: inherit; text-align: inherit; border-radius: 0; }
  .c-table th[aria-sort] > button:hover { color: var(--text); background: var(--n-100); }
  .c-table th[aria-sort] > button::after { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .35; transform: rotate(45deg); margin-left: 2px; margin-top: -.2rem; }
  .c-table th[aria-sort="ascending"] > button::after { transform: rotate(-135deg); margin-top: .2rem; opacity: 1; }
  .c-table th[aria-sort="descending"] > button::after { opacity: 1; }
  .c-table th.is-num, .c-table td.is-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .c-table th.is-num > button { justify-content: flex-end; }
  .c-table td { padding: var(--sp-2) var(--sp-3); border-bottom: var(--bw-hair) solid var(--line); vertical-align: top; }
  .c-table tbody tr:last-child td { border-bottom: 0; }
  .c-table tbody tr:hover { background: var(--n-50); }
  .c-table tbody tr[aria-selected="true"] { background: var(--brass-50); }
  .c-table .is-url { font-family: var(--font-mono); font-size: var(--fs-2); max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c-table .is-meta { font-size: var(--fs-1); color: var(--text-muted); }
  .c-table td small { display: block; font-size: var(--fs-2); color: var(--text-muted); }
  .c-table td:first-child { min-width: 11rem; }
  .c-table__actions { display: flex; gap: var(--sp-1); opacity: 0; }
  .c-table tbody tr:hover .c-table__actions, .c-table tbody tr:focus-within .c-table__actions { opacity: 1; }
  .c-table--dense { font-size: var(--fs-2); }
  .c-table--dense td { padding: var(--sp-1) var(--sp-3); }
  .c-table-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
  .c-table-tools .c-field { max-width: 16rem; }
  .c-table-tools .c-field__input { min-height: 2rem; }
  @media (max-width: 599px) {
    .c-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .c-table--cards tr { display: grid; gap: 2px; padding: var(--sp-3); border-bottom: var(--bw-hair) solid var(--line); }
    .c-table--cards td { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--sp-2); padding: 0; border: 0; text-align: left; }
    .c-table--cards td::before { content: attr(data-label); font-size: var(--fs-2); color: var(--text-muted); }
    .c-table--cards td.is-num { font-family: var(--font-body); }
  }

  /* ---- dialog (confirms, playbooks) ---- */
  .c-dialog { border: 0; padding: 0; border-radius: var(--r-3); box-shadow: var(--shadow-float); background: var(--surface); width: min(32rem, calc(100vw - 2rem)); }
  .c-dialog::backdrop { background: rgba(22, 36, 45, .32); }
  .c-dialog__body { padding: var(--sp-5); }
  .c-dialog__body h2 { font-size: var(--fs-5); }
  .c-dialog__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: var(--bw-hair) solid var(--line); }

  /* ---- toast (Django messages) ---- */
  .c-toasts { position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 50; display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(26rem, calc(100vw - 2rem)); }
  .c-toast { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); background: var(--surface); border: var(--bw-hair) solid var(--line); border-left: 4px solid var(--n-500); border-radius: var(--r-3); box-shadow: var(--shadow-float); font-size: var(--fs-2); color: var(--text); }
  .c-toast--success { border-left-color: var(--ok-500); }
  .c-toast--error { border-left-color: var(--bad-500); }
  .c-toast--warning { border-left-color: var(--brass-500); }
  .c-toast__close { margin-left: auto; min-width: var(--target-min); min-height: var(--target-min); display: grid; place-items: center; border-radius: var(--r-1); color: var(--text-muted); flex: none; }
  .c-toast__close:hover { background: var(--n-100); color: var(--text); }

  /* ---- Compass Intelligence narrative hooks (.ci-*) ----
     intelligence/_narrative.html renders: .ci-card > .ci-head(.ci-label .ci-badge) .ci-headline .ci-why .ci-fix(.ci-fix-label) .ci-how(.ci-how-label .ci-steps) .ci-evidence(.ci-chip)
     Standalone (module pages): a quiet reading. Inside .c-decision: the card's why / first fix / how / evidence. */
  .ci-card { display: grid; gap: var(--sp-3); font-size: var(--fs-3); }
  .ci-head { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; font-size: var(--fs-1); color: var(--text-muted); }
  .ci-label { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-medium); }
  .ci-label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brass-500); }
  .ci-badge { display: inline-flex; align-items: center; gap: var(--sp-1); width: max-content; min-height: 1.5rem; padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--n-100); color: var(--n-700); font-size: var(--fs-1); font-weight: var(--fw-medium); }
  .ci-badge-pending { background: var(--brass-50); color: var(--brass-800); }
  .c-decision__foot > .ci-badge { background: transparent; padding: 0; color: var(--text-muted); }
  .c-decision__foot > .ci-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brass-500); }
  .ci-headline { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-medium); letter-spacing: var(--tracking-display); max-width: 32ch; text-wrap: balance; }
  .ci-why { color: var(--text); overflow-wrap: anywhere; }
  .ci-fix { padding: var(--sp-3) var(--sp-4); background: var(--brass-50); border-radius: var(--r-2); font-weight: var(--fw-medium); max-width: none; }
  .ci-fix-label, .ci-how-label { display: block; font-size: var(--fs-2); font-weight: var(--fw-semibold); color: var(--text-muted); margin-bottom: var(--sp-1); }
  .ci-how { font-size: var(--fs-2); color: var(--text-muted); }
  .ci-how p { max-width: var(--prose-max); }
  .ci-steps { padding-left: 1.25rem; margin: 0; }
  .ci-steps li { margin: var(--sp-1) 0; overflow-wrap: anywhere; }
  .ci-evidence { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); list-style: none; margin: 0; padding: 0; font-size: var(--fs-1); }
  .ci-chip { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--sp-2); border: var(--bw-hair) solid var(--line-strong); border-radius: var(--r-pill); color: var(--n-700); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .ci-chip a { color: inherit; text-decoration: none; }
  .ci-chip a:hover { color: var(--brass-700); }
  /* inside the Decision card: the narrative IS the body; the engine's scales + actions slot in right after the first fix */
  .c-decision__body { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
  .c-decision__body > * { font-size: var(--fs-3); line-height: var(--lh-3); }
  .c-decision__body .ci-card { display: contents; }
  .c-decision__body .ci-head { order: 1; }
  .c-decision__body .ci-headline { order: 2; font-family: var(--font-body); font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-semibold); letter-spacing: 0; max-width: 60ch; }
  .c-decision__body .ci-why { order: 3; }
  .c-decision__body .ci-fix { order: 4; padding: var(--sp-4) var(--sp-4) var(--sp-2); border-radius: var(--r-2) var(--r-2) 0 0; margin-top: var(--sp-1); }
  .c-decision__body .c-decision__do { order: 5; padding: 0 var(--sp-4) var(--sp-4); background: var(--brass-50); border-radius: 0 0 var(--r-2) var(--r-2); margin-top: calc(-1 * var(--sp-3)); }
  .c-decision__body .c-decision__do .c-decision__scales { margin-top: var(--sp-2); }
  .c-decision__body .ci-how { order: 6; }
  .c-decision__body .ci-evidence { order: 7; }
  .c-decision--ci-same .c-decision__body .ci-headline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---- steps (How) ---- */
  .c-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
  .c-steps li { counter-increment: step; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--sp-3); row-gap: 2px; padding: var(--sp-3) 0; border-top: var(--bw-hair) solid var(--line); }
  .c-steps li:first-child { border-top: 0; padding-top: 0; }
  .c-steps li > * { grid-column: 2; }
  .c-steps li::before { content: counter(step); grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--n-100); color: var(--text); font-size: var(--fs-2); font-weight: var(--fw-semibold); }
  .c-steps__title { font-weight: var(--fw-semibold); }
  .c-steps__body { display: block; font-size: var(--fs-2); color: var(--text-muted); }
  .c-steps__meta { display: block; font-size: var(--fs-1); color: var(--text-muted); }
  .c-checks { list-style: none; margin: 0; padding: 0; }
  .c-checks li { position: relative; padding: var(--sp-1) 0 var(--sp-1) 1.5rem; font-size: var(--fs-2); }
  .c-checks li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .875rem; height: .875rem; border: var(--bw-hair) solid var(--line-input); border-radius: 3px; background: var(--surface); }

  /* ---- card (quiet container for secondary sections) ---- */
  .c-card { background: var(--surface); border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); padding: var(--sp-4) var(--sp-5); }
  .c-card > h2, .c-card > h3 { font-size: var(--fs-4); margin-bottom: var(--sp-3); }
  .c-card--sunken { background: var(--n-50); }
  .c-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); font-size: var(--fs-2); margin: 0; }
  .c-kv dt { color: var(--text-muted); }
  .c-kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
  .c-kv dd.is-url { font-family: var(--font-mono); }
  .c-rows { display: grid; }
  .c-rows__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-top: var(--bw-hair) solid var(--line); text-decoration: none; color: var(--text); }
  .c-rows__row:first-child { border-top: 0; }
  .c-rows__row a { color: var(--text); text-decoration: none; }
  .c-rows__row a:hover { color: var(--brass-700); }
  .c-rows__row small { display: block; font-size: var(--fs-2); color: var(--text-muted); }

  /* ---- action list: module additions (pages count, severity chip, notes, filter chips as links) ---- */
  .c-action-list__count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-2); color: var(--text); min-width: 2.5rem; text-align: right; }
  .c-action-list__count small { display: block; font-family: var(--font-body); font-size: var(--fs-1); color: var(--text-muted); }
  .c-action-list__title .c-chip { margin-left: var(--sp-2); vertical-align: middle; }
  .c-action-list__row:focus-visible { outline-offset: -2px; border-radius: var(--r-1); }
  .c-action-list__row .c-note { margin-top: var(--sp-2); }
  .c-action-list--open-bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .c-filters__search { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); color: var(--text-muted); }
  .c-filters__search .c-field__input { min-height: 2rem; width: 14rem; }
  a.c-chip { text-decoration: none; }
  a.c-chip:hover { border-color: var(--line-strong); color: var(--text); }
  a.c-chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
  .c-chip__n { font-weight: var(--fw-regular); opacity: .75; }

  /* ---- evidence drawer (research §4.3.4): fixed right panel, content stays visible; opens
     server-side from ?evidence=key, compass.js fetches the fragment and manages focus ---- */
  .c-drawer { display: none; }
  .c-drawer[open], .c-drawer.is-open {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--drawer-w), 100vw); z-index: 45;
    background: var(--surface); border-left: var(--bw-hair) solid var(--line); box-shadow: var(--shadow-drawer);
    animation: drawer-in var(--dur-2) var(--ease-out);
  }
  @keyframes drawer-in { from { transform: translateX(1rem); opacity: 0; } to { transform: none; opacity: 1; } }
  .c-drawer__head { position: relative; padding: var(--sp-5) 3.25rem var(--sp-4) var(--sp-5); border-bottom: var(--bw-hair) solid var(--line); }
  .c-drawer__meta { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; font-size: var(--fs-2); color: var(--text-muted); max-width: none; }
  .c-drawer__title { font-size: var(--fs-4); line-height: var(--lh-4); margin-top: var(--sp-2); }
  .c-drawer__title:focus-visible { outline-offset: 4px; border-radius: 2px; }
  .c-drawer__count { margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--text-muted); }
  .c-drawer__close { position: absolute; top: var(--sp-4); right: var(--sp-4); min-width: var(--target-min); min-height: var(--target-min); display: grid; place-items: center; border-radius: var(--r-1); color: var(--text-muted); }
  .c-drawer__close:hover { background: var(--n-100); color: var(--text); }
  .c-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
  .c-drawer__section h3 { font-size: var(--fs-2); font-weight: var(--fw-semibold); color: var(--text-muted); margin-bottom: var(--sp-1); }
  .c-drawer__section p { font-size: var(--fs-3); }
  .c-drawer__sample { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--fs-2); }
  .c-drawer__sample li { padding: var(--sp-1) 0; border-top: var(--bw-hair) solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c-drawer__sample li:first-child { border-top: 0; }
  .c-drawer__sample a { color: var(--text); text-decoration: none; }
  .c-drawer__sample a:hover { color: var(--brass-700); text-decoration: underline; }
  .c-drawer__notes { display: grid; gap: var(--sp-2); }
  .c-drawer__foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3) var(--sp-5); border-top: var(--bw-hair) solid var(--line); }
  .c-drawer__foot form { display: contents; }
  .c-drawer__foot > .c-btn--quiet:last-child { margin-left: auto; }
  /* ---- paywall unit (blur-and-count, research §4.3.12): the visible rows above it are real,
     the rows inside are server-rendered placeholders (never real text), counts are exact,
     the price shows the credit as arithmetic, one brass button ---- */
  .c-paywall { padding: var(--sp-5); background: var(--brass-50); border: var(--bw-hair) solid var(--brass-300); border-radius: var(--r-2); }
  .c-paywall__title { font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-semibold); max-width: none; }
  .c-paywall__rows { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
  .c-paywall__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: 2.5rem; padding: 0 var(--sp-3); background: var(--surface); border: var(--bw-hair) solid var(--brass-100); border-radius: var(--r-1); }
  .c-paywall__row i { display: block; height: .75rem; width: var(--w, 70%); max-width: 100%; border-radius: var(--r-1); background: var(--n-300); filter: blur(4px); }
  .c-paywall__counts { margin-top: var(--sp-3); font-size: var(--fs-3); max-width: none; }
  .c-paywall__actions { display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4); }
  .c-paywall__credit { font-size: var(--fs-2); color: var(--text-muted); }
  /* in-app variants: attached under a ranked list, inline inside the drawer */
  .c-paywall--attached { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }
  .c-paywall--inline { padding: var(--sp-3) var(--sp-4); }
  .c-paywall--inline .c-paywall__title { font-size: var(--fs-3); }
  .c-paywall--inline .c-paywall__row { min-height: 2rem; }
  .c-paywall--inline .c-paywall__counts { font-size: var(--fs-2); }

  /* ---- report cover (research §4.3.14): brass-50 band on top, white below; the PDF's first page ---- */
  .c-report-cover { background: var(--surface); border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); overflow: hidden; }
  .c-report-cover__band { padding: var(--sp-6) var(--sp-6) var(--sp-5); background: var(--brass-50); border-bottom: var(--bw-hair) solid var(--brass-100); }
  .c-report-cover__kind { font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--brass-800); }
  .c-report-cover__domain { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-8); line-height: var(--lh-8); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); margin-top: var(--sp-2); overflow-wrap: anywhere; }
  .c-report-cover__title { margin-top: var(--sp-2); font-size: var(--fs-4); line-height: var(--lh-4); color: var(--text); max-width: none; }
  .c-report-cover__body { padding: var(--sp-5) var(--sp-6) var(--sp-5); }
  .c-report-cover__headline { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-medium); letter-spacing: var(--tracking-display); max-width: 32ch; text-wrap: balance; }
  .c-report-cover__method { margin-top: var(--sp-3); font-size: var(--fs-2); color: var(--text-muted); max-width: var(--prose-max); }
  .c-report-cover__mark { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: var(--bw-hair) solid var(--line); font-size: var(--fs-2); color: var(--text-muted); }
  .c-report-cover__mark .c-icon { color: var(--brass-500); }

  @media (max-width: 899px) {
    .c-action-list__row { grid-template-columns: 2rem minmax(0, 1fr) 1rem; }
    .c-action-list__row > .c-bar, .c-action-list__row > .c-chip, .c-action-list__row > .c-action-list__count { grid-column: 2; justify-self: start; text-align: left; }
  }
  @media (max-width: 599px) {
    .c-drawer__head { padding-left: var(--sp-4); padding-right: 3rem; }
    .c-drawer__body, .c-drawer__foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .c-decision { padding: var(--sp-4) var(--sp-4) var(--sp-4) 3.25rem; }
    .c-decision__rank { left: 1rem; top: 1.125rem; }
    .c-decision__headline { font-size: var(--fs-6); line-height: var(--lh-6); }
    .c-decision__actions .c-btn { width: 100%; }
    .c-metrics { grid-template-columns: 1fr 1fr; }
  }
}

/* ----------------------------------------------------------------------------
   patterns — page archetypes
   ---------------------------------------------------------------------------- */
@layer patterns {
  /* Annual term sits under the monthly price: a real option, not a badge. */
  .p-pricing__annual { margin: calc(var(--sp-1) * -1) 0 var(--sp-3); font-size: var(--fs-2); line-height: var(--lh-2); color: var(--text-muted); }
  .p-pricing__annual strong { color: var(--ink); }

  .p-overview__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .p-overview__progress summary { display: flex; align-items: baseline; gap: var(--sp-3); min-height: var(--target-min); font-size: var(--fs-4); font-weight: var(--fw-semibold); list-style: none; }
  .p-overview__progress summary span { font-size: var(--fs-2); font-weight: var(--fw-regular); color: var(--text-muted); }
  .p-overview__progress summary .c-icon { width: .75rem; height: .75rem; align-self: center; transition: transform var(--dur-1) var(--ease-out); }
  .p-overview__progress[open] summary .c-icon { transform: rotate(90deg); }
  .p-overview__sources { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; font-size: var(--fs-2); color: var(--text-muted); }
  .p-overview__depth { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); color: var(--text-muted); }
  .p-overview__depth .c-tabs { border-bottom: 0; overflow: visible; gap: var(--sp-3); }
  .p-overview__projects { display: grid; gap: 0; }

  .p-plan__back { font-size: var(--fs-2); }
  .p-plan__pair { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); gap: var(--sp-4); align-items: start; }
  .p-plan__status { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-2); color: var(--text-muted); }
  .p-plan__status .is-here { color: var(--text); font-weight: var(--fw-semibold); }
  .p-plan__status .c-icon { width: .625rem; height: .625rem; color: var(--n-300); }
  .p-plan__sample { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--fs-2); }
  .p-plan__sample li { padding: var(--sp-1) 0; border-top: var(--bw-hair) solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .p-plan__sample li:first-child { border-top: 0; }
  .p-plan__ai summary { min-height: var(--target-min); display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-semibold); }

  .p-auth { max-width: 25rem; margin: 12vh auto 0; padding: 0; }
  .p-auth__brand { margin-bottom: var(--sp-5); }
  .p-auth h1 { margin-bottom: var(--sp-2); }
  .p-auth__lede { color: var(--text-muted); margin-bottom: var(--sp-5); }
  .p-auth__or { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; font-size: var(--fs-2); color: var(--text-muted); }
  .p-auth__or::before, .p-auth__or::after { content: ""; flex: 1; border-top: var(--bw-hair) solid var(--line); }
  .p-auth__submit { margin-top: var(--sp-5); }
  .p-auth__foot { margin-top: var(--sp-5); font-size: var(--fs-2); color: var(--text-muted); }
  .p-auth__errors { margin-bottom: var(--sp-4); }
  @media (max-width: 599px) { .p-auth { margin-top: var(--sp-6); padding: var(--sp-4); border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); } }

  .p-dev__section { margin-top: var(--sp-7); }
  .p-dev__section > h2 { margin-bottom: var(--sp-1); }
  .p-dev__section > p { color: var(--text-muted); font-size: var(--fs-2); margin-bottom: var(--sp-4); }
  .p-dev__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--sp-2); }
  .p-dev__swatch { border: var(--bw-hair) solid var(--line); border-radius: var(--r-1); overflow: hidden; font-size: var(--fs-1); }
  .p-dev__swatch i { display: block; height: 2.5rem; background: var(--swatch); }
  .p-dev__swatch span { display: block; padding: var(--sp-1) var(--sp-2); font-family: var(--font-mono); }
  .p-dev__type > * + * { margin-top: var(--sp-3); }
  .p-dev__demo { padding: var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--r-2); }
  .p-dev__demo + .p-dev__demo { margin-top: var(--sp-4); }

  /* ---- module pages (site audit + the other seven; research §4.4.3) ----
     header sentence → Decision card → ranked list / tables → numbers strip → <details> ---- */
  .p-module__lede { font-size: var(--fs-3); color: var(--text-muted); max-width: none; overflow-wrap: anywhere; }
  .p-module__lede strong { color: var(--text); font-weight: var(--fw-medium); }
  .p-module__lede a { white-space: nowrap; }
  .p-module__notes { display: grid; gap: var(--sp-2); }
  .p-module__details { border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); padding: 0 var(--sp-4); background: var(--surface); }
  .p-module__details + .p-module__details { margin-top: var(--sp-2); }
  .p-module__details > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; font-size: var(--fs-3); font-weight: var(--fw-semibold); list-style: none; }
  .p-module__details > summary span { font-weight: var(--fw-regular); font-size: var(--fs-2); color: var(--text-muted); }
  .p-module__details > summary .c-icon { width: .75rem; height: .75rem; transition: transform var(--dur-1) var(--ease-out); }
  .p-module__details[open] > summary .c-icon { transform: rotate(90deg); }
  .p-module__details > :not(summary) { margin-bottom: var(--sp-4); }
  .p-module__details > .c-table-wrap { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4)); }
  .p-module__pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr); gap: var(--sp-4); align-items: start; }
  .p-module__pair--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-module__chips { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
  .p-module__chips .c-chip { max-width: 100%; }
  .p-module__chips .c-chip small { font-size: var(--fs-1); color: inherit; opacity: .75; }
  .p-module__list { margin: 0; padding-left: 1.25rem; font-size: var(--fs-3); }
  .p-module__list li { margin: var(--sp-1) 0; overflow-wrap: anywhere; }
  .p-module__linklist { list-style: none; margin: 0; padding: 0; }
  .p-module__linkrow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 0; }
  .p-module__bar { display: inline-block; width: 5rem; height: .375rem; vertical-align: middle; border-radius: var(--r-pill); background: var(--n-100); overflow: hidden; }
  .p-module__bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--brass-500); }
  .p-module__spark { width: 100%; height: 9rem; display: block; }
  .p-module__spark polygon { fill: var(--brass-50); }
  .p-module__spark polyline { fill: none; stroke: var(--brass-500); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .p-module__spark circle { fill: var(--brass-500); }
  .p-module__form .c-field + .c-field { margin-top: var(--sp-3); }
  .p-module__form .c-field__row { align-items: end; }
  .p-module__form .c-field__row > .c-field { flex: 1 1 12rem; }
  .p-module__form .c-field__row > .c-field + .c-field { margin-top: 0; }
  .p-module__form .c-field__row > .c-field--narrow { flex: 0 1 11rem; }
  .p-module__quota { margin-top: var(--sp-3); font-size: var(--fs-2); color: var(--text-muted); }
  .p-module__actions { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
  .p-module__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: var(--bw-hair) solid var(--line); font-size: var(--fs-3); }
  .p-module__stage:first-child { border-top: 0; }
  .p-module__stage small { display: block; font-size: var(--fs-2); color: var(--text-muted); }
  .p-module__stage > span:last-child { text-align: right; font-size: var(--fs-2); color: var(--text-muted); white-space: nowrap; }
  @media (max-width: 899px) { .p-overview__pair, .p-plan__pair, .p-module__pair { grid-template-columns: minmax(0, 1fr); } .p-module__stage { grid-template-columns: minmax(0, 1fr); } .p-module__stage > span:last-child { text-align: left; } }

  /* ---- marketing (the anonymous shell): white sections split by hairline rules; the only
     colour on the page is the product itself (a real Decision card). base.html's anonymous
     header keeps its .site-top / .brand / .site-nav hooks, styled here on the tokens. ---- */
  body.is-site .page { width: 100%; max-width: calc(var(--content-max) + 2 * var(--sp-6)); margin: 0 auto; padding: 0 var(--sp-6) var(--sp-6); }
  body.is-site .site-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); width: 100%; max-width: calc(var(--content-max) + 2 * var(--sp-6)); margin: 0 auto; padding: var(--sp-3) var(--sp-6); border-bottom: var(--bw-hair) solid var(--line); }
  body.is-site .brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--target-min); color: var(--text); font-size: 1.0625rem; font-weight: var(--fw-bold); letter-spacing: -.01em; text-decoration: none; }
  body.is-site .brand .c-icon { width: 1.5rem; height: 1.5rem; }
  body.is-site .site-nav { display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; justify-content: flex-end; font-size: var(--fs-3); }
  body.is-site .site-nav a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--n-700); font-weight: var(--fw-medium); text-decoration: none; }
  body.is-site .site-nav a:hover, body.is-site .site-nav a.on { color: var(--text); }
  body.is-site .site-nav a.on { text-decoration: underline; text-underline-offset: .35em; text-decoration-color: var(--brass-500); text-decoration-thickness: 2px; }
  body.is-site .site-nav .nav-login { padding-left: var(--sp-4); border-left: var(--bw-hair) solid var(--line); }
  body.is-site .site-nav .cta { min-height: 2.25rem; padding: 0 var(--sp-3); border-radius: var(--r-1); background: var(--ink); color: var(--on-ink); font-weight: var(--fw-semibold); }
  body.is-site .site-nav .cta:hover { background: var(--n-900); color: var(--on-ink); }
  .p-marketing .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .p-marketing__section { padding: var(--sp-8) 0; border-top: var(--bw-hair) solid var(--line); }
  .p-marketing__section:first-child, .p-marketing__section--flush { border-top: 0; }
  .p-marketing__section > h2, .p-marketing__section > .p-marketing__intro h2 { font-size: var(--fs-5); }
  .p-marketing__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3) var(--sp-7); align-items: end; margin-bottom: var(--sp-5); }
  .p-marketing__intro p { color: var(--text-muted); max-width: 52ch; }
  .p-marketing__head { padding: var(--sp-7) 0 var(--sp-6); border-bottom: var(--bw-hair) solid var(--line); }
  .p-marketing__head h1, .p-marketing__hero h1 { font-size: var(--fs-7); line-height: var(--lh-7); max-width: 24ch; }
  .p-marketing__lede { margin-top: var(--sp-3); font-size: var(--fs-4); line-height: var(--lh-4); color: var(--text-muted); max-width: 46ch; }
  .p-marketing__hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-7); align-items: center; padding: var(--sp-8) 0 var(--sp-7); }
  .p-marketing__hero h1 { font-size: var(--fs-8); line-height: var(--lh-8); max-width: 18ch; }
  .p-marketing__sample { margin: 0; }
  .p-marketing__sample figcaption { margin-top: var(--sp-2); font-size: var(--fs-2); color: var(--text-muted); }
  .p-marketing__sample .c-decision__foot form, .p-marketing__sample [data-feedback] { display: none; }
  .p-scanform { display: flex; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }
  .p-scanform .c-field { flex: 1 1 16rem; margin: 0; }
  .p-scanform .c-btn { min-height: 2.5rem; }
  .p-scanform__note { flex-basis: 100%; margin: 0; font-size: var(--fs-2); color: var(--text-muted); }
  .p-marketing__proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border-top: var(--bw-hair) solid var(--line); border-bottom: var(--bw-hair) solid var(--line); }
  .p-marketing__proof li { padding: var(--sp-4) var(--sp-5); border-left: var(--bw-hair) solid var(--line); font-size: var(--fs-2); color: var(--text-muted); }
  .p-marketing__proof li:first-child { padding-left: 0; border-left: 0; }
  .p-marketing__proof strong { display: block; font-size: var(--fs-3); color: var(--text); }
  .p-marketing__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
  .p-marketing__cols h3 { font-size: var(--fs-4); }
  .p-marketing__cols p { margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--text-muted); }
  .p-marketing__fragment { margin-top: var(--sp-3); padding: var(--sp-4); border: var(--bw-hair) solid var(--line); border-left: var(--bw-rule) solid var(--brass-500); border-radius: var(--r-2); background: var(--surface); }
  .p-marketing__fragment .c-decision__headline { font-size: var(--fs-5); line-height: var(--lh-5); margin: 0; max-width: none; }
  .p-marketing__fragment .c-decision__why, .p-marketing__fragment .c-decision__fix { margin-top: 0; }
  .p-marketing__fragment .c-decision__why p, .p-marketing__fragment .c-decision__fix p { color: var(--text); }
  .p-marketing__honest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  .p-marketing__honest p { color: var(--text-muted); margin-top: var(--sp-2); max-width: 48ch; }
  .p-marketing__honest .c-note { font-size: var(--fs-3); color: var(--text); }
  .p-marketing__compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .p-marketing__compare h3 { font-size: var(--fs-4); }
  .p-marketing__compare ul { margin: var(--sp-2) 0 0; padding-left: 1.1rem; color: var(--text-muted); font-size: var(--fs-3); }
  .p-marketing__compare li + li { margin-top: var(--sp-1); }
  .p-marketing__cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; padding: var(--sp-8) 0; border-top: var(--bw-hair) solid var(--line); }
  .p-marketing__cta h2 { font-size: var(--fs-5); }
  .p-marketing__cta p { margin-top: var(--sp-2); color: var(--text-muted); }
  .p-marketing__cta .p-scanform { margin-top: 0; }
  .p-marketing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bw-hair); background: var(--line); border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); overflow: hidden; margin: 0; padding: 0; list-style: none; }
  .p-marketing__grid > * { background: var(--surface); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-3); }
  .p-marketing__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-marketing__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-marketing__grid strong { display: block; margin-bottom: var(--sp-1); }
  .p-marketing__grid p, .p-marketing__grid span { font-size: var(--fs-2); color: var(--text-muted); }
  .p-marketing__list { margin: 0; padding: 0; list-style: none; border-top: var(--bw-hair) solid var(--line); }
  .p-marketing__list > li { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--sp-2) var(--sp-6); padding: var(--sp-5) 0; border-bottom: var(--bw-hair) solid var(--line); }
  .p-marketing__list h3 { font-size: var(--fs-4); }
  .p-marketing__list p { margin-top: var(--sp-1); color: var(--text-muted); }
  .p-marketing__list .c-note { margin-top: var(--sp-3); }
  .p-marketing__qa { border-bottom: var(--bw-hair) solid var(--line); }
  .p-marketing__qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 3rem; padding: var(--sp-2) 0; font-weight: var(--fw-semibold); list-style: none; }
  .p-marketing__qa summary .c-icon { width: .875rem; height: .875rem; color: var(--n-500); transition: transform var(--dur-1) var(--ease-out); }
  .p-marketing__qa[open] summary .c-icon { transform: rotate(90deg); }
  .p-marketing__qa p { padding-bottom: var(--sp-4); color: var(--text-muted); }
  .p-marketing__qa p + p { margin-top: calc(-1 * var(--sp-2)); }
  .p-marketing__faqgroup + .p-marketing__faqgroup { margin-top: var(--sp-6); }
  .p-marketing__faqgroup h2 { font-size: var(--fs-4); padding-bottom: var(--sp-2); border-bottom: var(--bw-hair) solid var(--line-strong); }
  .p-marketing__pair { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .8fr); gap: var(--sp-6); align-items: start; }
  .p-marketing__side { display: grid; gap: var(--sp-3); }
  .p-marketing__side .c-card h2, .p-marketing__side .c-card h3 { font-size: var(--fs-3); }
  .p-marketing__side .c-card p, .p-marketing__side .c-card li { font-size: var(--fs-2); color: var(--text-muted); }
  .p-marketing__side .c-card ul { margin: 0; padding-left: 1.1rem; }
  .p-marketing__side .c-card li + li { margin-top: var(--sp-1); }
  .p-marketing__links { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
  .p-marketing__prose { max-width: var(--prose-max); }
  .p-marketing__prose h2 { font-size: var(--fs-4); margin: var(--sp-6) 0 var(--sp-2); }
  .p-marketing__prose h2:first-child { margin-top: 0; }
  .p-marketing__prose h3 { font-size: var(--fs-3); margin: var(--sp-4) 0 var(--sp-1); }
  .p-marketing__prose p, .p-marketing__prose li { color: var(--text); }
  .p-marketing__prose p + p, .p-marketing__prose ul + p, .p-marketing__prose p + ul { margin-top: var(--sp-3); }
  .p-marketing__prose ul { padding-left: 1.1rem; }
  .p-marketing__prose li + li { margin-top: var(--sp-1); }
  .p-marketing__prose .c-table-wrap { margin: var(--sp-3) 0 var(--sp-4); }
  .p-marketing__prose code { padding: 0 .3em; background: var(--n-100); border-radius: 3px; }
  .p-marketing__toc { margin: var(--sp-4) 0 var(--sp-6); padding: var(--sp-4) var(--sp-5); border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); font-size: var(--fs-2); }
  .p-marketing__toc strong { display: block; margin-bottom: var(--sp-2); }
  .p-marketing__toc ol { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: var(--sp-6); }
  .p-marketing__toc li { margin-bottom: var(--sp-1); break-inside: avoid; }
  .p-marketing__updated { font-size: var(--fs-2); color: var(--text-muted); }
  .p-marketing__sent { padding: var(--sp-6) var(--sp-5); text-align: center; }
  .p-marketing__sent .c-icon { width: 2rem; height: 2rem; margin: 0 auto var(--sp-3); color: var(--ok-500); }
  .p-marketing__sent p { margin: var(--sp-2) auto 0; color: var(--text-muted); max-width: 44ch; }
  .p-marketing__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .p-marketing__fields .c-field + .c-field { margin-top: 0; }
  .p-marketing__formfoot { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--bw-hair) solid var(--line); }
  .p-marketing__formfoot p { font-size: var(--fs-2); color: var(--text-muted); max-width: 40ch; }
  .p-marketing__footer { margin-top: var(--sp-8); padding: var(--sp-7) 0 var(--sp-4); border-top: var(--bw-hair) solid var(--line); }
  .p-marketing__footgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
  .p-marketing__footbrand p { margin-top: var(--sp-3); font-size: var(--fs-2); color: var(--text-muted); max-width: 36ch; }
  .p-marketing__footcol h2 { font-size: var(--fs-2); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
  .p-marketing__footcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
  .p-marketing__footcol a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--n-700); font-size: var(--fs-2); text-decoration: none; }
  .p-marketing__footcol a:hover { color: var(--text); text-decoration: underline; }
  .p-marketing__footbottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: var(--bw-hair) solid var(--line); font-size: var(--fs-2); color: var(--text-muted); }
  .p-marketing__footbottom nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
  .p-marketing__footbottom a { color: var(--n-700); text-decoration: none; }
  .p-marketing__footbottom a:hover { text-decoration: underline; }

  /* the revenue ladder as one rail: Scan → Gap Report → Action Plan → Fix Sprint → Care; prices as arithmetic */
  .p-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--surface); counter-reset: rung; }
  .p-ladder--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-ladder__rung { display: grid; align-content: start; gap: var(--sp-1); padding: var(--sp-4) var(--sp-4) var(--sp-5); border-left: var(--bw-hair) solid var(--line); counter-increment: rung; }
  .p-ladder__rung:first-child { border-left: 0; }
  .p-ladder__rung.is-owned { background: var(--n-50); }
  .p-ladder__step { font-size: var(--fs-2); color: var(--text-muted); }
  .p-ladder__step::before { content: "Step " counter(rung) ": "; }
  .p-ladder__name { font-size: var(--fs-3); font-weight: var(--fw-semibold); }
  .p-ladder__price { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--brass-500); margin-top: var(--sp-1); }
  .p-ladder__price small { font-family: var(--font-body); font-size: var(--fs-2); font-weight: var(--fw-regular); color: var(--text-muted); letter-spacing: 0; }
  .p-ladder__math, .p-ladder__pitch { font-size: var(--fs-2); color: var(--text-muted); max-width: none; }
  .p-ladder__math { color: var(--text); }
  .p-ladder__rung form { margin-top: var(--sp-2); }
  .p-ladder__rung .c-btn { margin-top: var(--sp-2); justify-self: start; }
  .p-ladder__rung form .c-btn { margin-top: 0; }

  /* pricing: four self-serve tiers (limits come from accounts/plans.py), then the ladder */
  .p-pricing__tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); align-items: stretch; }
  .p-pricing__tier { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5); border: var(--bw-hair) solid var(--line); border-radius: var(--r-2); background: var(--surface); }
  .p-pricing__tier.is-featured { border-color: var(--brass-500); box-shadow: inset 0 0 0 1px var(--brass-500); }
  .p-pricing__tier .c-chip { position: absolute; top: calc(-1 * .875rem); left: var(--sp-4); }
  .p-pricing__tier h3 { font-size: var(--fs-4); }
  .p-pricing__blurb { font-size: var(--fs-2); color: var(--text-muted); min-height: 2.6em; }
  .p-pricing__price { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--bw-hair) solid var(--line); }
  .p-pricing__amount { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--fs-7); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--brass-500); }
  .p-pricing__per { font-size: var(--fs-2); color: var(--text-muted); }
  .p-pricing__limits { list-style: none; margin: var(--sp-3) 0 var(--sp-4); padding: var(--sp-3) 0 0; border-top: var(--bw-hair) solid var(--line); display: grid; gap: var(--sp-2); font-size: var(--fs-2); color: var(--text-muted); }
  .p-pricing__limits strong { color: var(--text); font-variant-numeric: tabular-nums; }
  .p-pricing__tier .c-btn { margin-top: auto; }
  .p-pricing__foot { margin-top: var(--sp-4); font-size: var(--fs-2); color: var(--text-muted); }

  /* free scan: the form is the hero; the result page is a Decision page with a paywall */
  .p-scan__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-7); align-items: start; padding: var(--sp-8) 0 var(--sp-7); }
  .p-scan__form .c-field + .c-field { margin-top: var(--sp-4); }
  .p-scan__form .c-btn { margin-top: var(--sp-5); }
  .p-scan__steps { padding-top: var(--sp-2); }
  .p-scan__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; padding: var(--sp-6) 0 var(--sp-4); }
  .p-scan__head h1 { font-size: var(--fs-7); line-height: var(--lh-7); overflow-wrap: anywhere; }
  .p-scan__head p { font-size: var(--fs-2); color: var(--text-muted); }
  .p-scan__stack > * + * { margin-top: var(--sp-4); }
  .p-scan__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .p-scan__section { margin-top: var(--sp-7); }
  .p-scan__section > h2 { font-size: var(--fs-4); margin-bottom: var(--sp-3); }

  /* report (native HTML + the same markup for the PDF) */
  .p-report { display: grid; gap: var(--sp-6); }
  .p-report__decision + .p-report__how { margin-top: var(--sp-3); }
  .p-report__how { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-4); }
  .p-report__how .c-card h3 { font-size: var(--fs-3); margin-bottom: var(--sp-2); }
  .p-report__prompts { margin: var(--sp-2) 0 0; padding-left: 1.1rem; font-size: var(--fs-2); color: var(--text-muted); }
  .p-report__rate { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: var(--sp-2); min-width: 10rem; }
  .p-report__rate .c-progress__track { height: .5rem; }
  .p-report__rate span { font-family: var(--font-mono); font-size: var(--fs-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .p-report__evidence + .p-report__evidence { margin-top: var(--sp-5); }
  .p-report__evidence h3 { font-size: var(--fs-4); margin-bottom: var(--sp-1); }
  .p-report__evidence > p { font-size: var(--fs-2); color: var(--text-muted); margin-bottom: var(--sp-3); }
  .p-report__evidence .c-table-wrap + .c-table-wrap { margin-top: var(--sp-3); }
  .p-report__limits { margin: 0; padding-left: 1.1rem; }
  .p-report__limits li + li { margin-top: var(--sp-1); }
  .p-report__source { font-size: var(--fs-2); color: var(--text-muted); }
  .is-print body { padding: 0; }
  .is-print .p-report { max-width: none; }

  @media (max-width: 1199px) {
    .p-pricing__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .p-ladder__rung:nth-child(3n + 1) { border-left: 0; }
    .p-ladder__rung:nth-child(n + 4) { border-top: var(--bw-hair) solid var(--line); }
    .p-marketing__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 899px) {
    body.is-site .page { padding: 0 var(--sp-4) var(--sp-6); }
    body.is-site .site-top { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); flex-wrap: wrap; }
    body.is-site .site-nav { justify-content: flex-start; gap: var(--sp-2) var(--sp-3); }
    body.is-site .site-nav .nav-login { padding-left: 0; border-left: 0; }
    .p-marketing__hero, .p-marketing__intro, .p-marketing__honest, .p-marketing__compare, .p-marketing__cta, .p-marketing__pair, .p-scan__hero, .p-scan__pair, .p-report__how { grid-template-columns: minmax(0, 1fr); }
    .p-marketing__hero { padding: var(--sp-6) 0; gap: var(--sp-6); }
    .p-marketing__hero h1 { font-size: var(--fs-7); line-height: var(--lh-7); }
    .p-marketing__section, .p-marketing__cta { padding: var(--sp-6) 0; }
    .p-marketing__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-marketing__proof li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .p-marketing__proof li:nth-child(n + 3) { border-top: var(--bw-hair) solid var(--line); }
    .p-marketing__cols, .p-marketing__grid, .p-marketing__grid--4 { grid-template-columns: minmax(0, 1fr); }
    .p-marketing__list > li { grid-template-columns: minmax(0, 1fr); }
    .p-marketing__footgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-marketing__footbrand { grid-column: 1 / -1; }
    .p-marketing__toc ol { columns: 1; }
    .p-ladder, .p-ladder--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-ladder__rung:nth-child(n) { border-left: var(--bw-hair) solid var(--line); border-top: 0; }
    .p-ladder__rung:nth-child(odd) { border-left: 0; }
    .p-ladder__rung:nth-child(n + 3) { border-top: var(--bw-hair) solid var(--line); }
  }
  @media (max-width: 599px) {
    .p-marketing__proof, .p-marketing__grid--2, .p-marketing__fields, .p-marketing__footgrid, .p-pricing__tiers, .p-ladder, .p-ladder--4 { grid-template-columns: minmax(0, 1fr); }
    .p-marketing__proof li { padding-left: 0; border-left: 0; }
    .p-marketing__proof li + li { border-top: var(--bw-hair) solid var(--line); }
    .p-ladder__rung:nth-child(n) { border-left: 0; }
    .p-ladder__rung + .p-ladder__rung { border-top: var(--bw-hair) solid var(--line); }
    .p-marketing__hero h1, .p-marketing__head h1, .p-scan__head h1 { font-size: var(--fs-6); line-height: var(--lh-6); }
    .p-scanform .c-btn { width: 100%; }
    .p-marketing__fields .c-field + .c-field { margin-top: var(--sp-4); }
  }
}

/* ----------------------------------------------------------------------------
   pages — one-offs (target: empty when migration ends)
   ---------------------------------------------------------------------------- */
@layer pages {}

/* ----------------------------------------------------------------------------
   utilities — closed set
   ---------------------------------------------------------------------------- */
@layer utilities {
  .u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-mono); }
  .u-num { font-variant-numeric: tabular-nums; }
  .u-muted { color: var(--text-muted); }
  .u-small { font-size: var(--fs-2); }
  .u-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
  .u-skip { position: absolute; left: var(--sp-4); top: -100%; z-index: 100; padding: var(--sp-2) var(--sp-3); background: var(--ink); color: var(--on-ink); border-radius: var(--r-1); text-decoration: none; }
  .u-skip:focus { top: var(--sp-2); }
  .u-stack-2 > * + * { margin-top: var(--sp-2); }
  .u-stack-3 > * + * { margin-top: var(--sp-3); }
  .u-stack-4 > * + * { margin-top: var(--sp-4); }
  .u-stack-5 > * + * { margin-top: var(--sp-5); }
  .u-stack-6 > * + * { margin-top: var(--sp-6); }
  .u-prose { max-width: var(--prose-max); }
  .u-right { text-align: right; }
  .u-nowrap { white-space: nowrap; }
  .u-break { overflow-wrap: anywhere; }
  .u-w { width: var(--w); }
  @media (max-width: 899px) { .u-hide-md { display: none; } }
  @media (max-width: 599px) { .u-hide-sm { display: none; } }
  @media (min-width: 900px) { .u-only-md { display: none; } }
}


/* ----------------------------------------------------------------------------
   legacy — the former templates/base.html CSS, kept so unmigrated pages render.
   Edits versus the original (everything else is verbatim):
   - the old :root is replaced by aliases onto the new tokens (no dark values);
   - body / a / html / * rules removed: `base` and `reset` own them;
   - element selectors are scoped with :not(.c-table) / :not(.c-field__input) /
     :not([class]) so they never reach the new components;
   - var(--ink) (white in the old scheme) became var(--on-ink);
   - the old app-shell rules (.sidebar .ni .topbar .workspace-banner …) are gone;
     .shell/.page/.site-* stay for the marketing shell until step 8.
   Delete blocks from here page by page as templates migrate.
   ---------------------------------------------------------------------------- */
@layer legacy {
  :root{
    --sidebar:var(--n-50); --surface-2:var(--n-50); --paper:var(--n-0); --panel:var(--n-50);
    --muted:var(--text-muted); --faint:var(--n-500); --line-2:var(--n-300);
    --brass:var(--brass-500); --brass-deep:var(--brass-700); --brass-soft:var(--brass-300); --brass-glow:var(--brass-50);
    --teal:var(--brass-700); --mint:var(--ok-700); --sage:var(--ok-700); --danger:var(--bad-700);
    --shadow:0 1px 2px rgba(22,36,45,.05); --radius:12px;
  }
    h1:not([class]),h2:not([class]),h3:not([class]){font-weight:700;line-height:1.12;margin:0;letter-spacing:-.02em;color:var(--text)}
    .display{font-family:'Fraunces',Georgia,serif;font-weight:600}
    .mono{font-family:'JetBrains Mono',ui-monospace,monospace}
    .muted{color:var(--muted)}

    /* ---------- components ---------- */
    .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
    .btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:8px;
      padding:11px 18px;background:var(--text);color:var(--on-ink);font-weight:800;font-size:12.5px;
      cursor:pointer;font-family:inherit;transition:transform .14s ease,box-shadow .2s ease,filter .14s}
    .btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(20,33,44,.4);filter:brightness(1.1);color:var(--on-ink)}
    .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);box-shadow:none}
    .btn.ghost:hover{background:var(--surface-2)}
    input[type=text]:not(.c-field__input),input[type=password]:not(.c-field__input),input[type=email]:not(.c-field__input),input[type=number]:not(.c-field__input),select:not(.c-field__input),textarea:not(.c-field__input){
      width:100%;padding:11px 14px;border:1px solid var(--line-2);border-radius:9px;
      background:#fff;font-size:14.5px;font-family:inherit;color:var(--text)}
    input::placeholder{color:var(--faint)}
    input:not(.c-field__input):focus,select:not(.c-field__input):focus,textarea:not(.c-field__input):focus{border-color:var(--brass-deep)}
    label:not([class]){font-size:13px;color:var(--muted)}
    .badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
      letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:20px;font-family:'JetBrains Mono',monospace}
    .b-done{background:rgba(47,125,79,.12);color:var(--mint)}
    .b-running,.b-pending{background:var(--brass-glow);color:var(--brass)}
    .b-error{background:rgba(192,57,43,.1);color:var(--danger)}
    table:not(.c-table){width:100%;border-collapse:collapse;font-size:13.5px}
    table:not(.c-table) th,table:not(.c-table) td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
    table:not(.c-table) thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);
      font-family:'JetBrains Mono',monospace;font-weight:500}
    table:not(.c-table) tbody tr{transition:background .12s}
    table:not(.c-table) tbody tr:hover{background:var(--panel)}
    .flex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .grid{display:grid;gap:14px}
    .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
    .stat .n{font-family:'Fraunces',serif;font-size:30px;font-weight:700;letter-spacing:-.02em}
    .stat .l{font-size:12px;color:var(--muted);margin-top:3px}
    .h2row{display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 14px}
    .h2row h2{font-size:19px}
    .msgs{margin-bottom:18px}
    .msg{padding:11px 15px;border-radius:10px;font-size:13.5px;margin-bottom:8px;border:1px solid transparent}
    .msg.error{background:rgba(192,57,43,.07);color:var(--danger);border-color:rgba(192,57,43,.25)}
    .msg.success{background:rgba(47,125,79,.08);color:var(--mint);border-color:rgba(47,125,79,.22)}

    /* ---------- dashboard components (shared across module pages) ---------- */
    .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
    .metric{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 16px;box-shadow:var(--shadow)}
    .metric .v{font-family:'Fraunces',serif;font-size:29px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
    .metric .k{font-size:12px;color:var(--muted);margin-top:3px}
    .metric .delta{font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace;margin-top:5px}
    .delta.up{color:var(--mint)} .delta.down{color:var(--danger)} .delta.flat{color:var(--faint)}
    .panel{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:18px 20px;margin-bottom:20px;box-shadow:var(--shadow)}
    .panel .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
    .panel .ph h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
    .dtable{width:100%;border-collapse:collapse;font-size:13.5px}
    .dtable th{text-align:left;padding:9px 12px;border-bottom:2px solid var(--line);font-size:10.5px;text-transform:uppercase;
      letter-spacing:.05em;color:var(--faint);font-family:'JetBrains Mono',monospace;cursor:pointer;user-select:none;white-space:nowrap}
    .dtable th[data-sort]:hover{color:var(--brass)} .dtable th .ar{opacity:.45;font-size:9px;margin-left:3px}
    .dtable td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
    .dtable tbody tr:hover{background:var(--panel)}
    .dbar-bg{display:inline-block;width:88px;height:7px;border-radius:6px;background:var(--panel);vertical-align:middle;overflow:hidden}
    .dbar-bg > span{display:block;height:100%;background:var(--brass);border-radius:6px}
    .dfilter{padding:8px 12px;border:1px solid var(--line-2);border-radius:9px;font-size:13.5px;width:230px;max-width:100%;background:#fff}
    .chip{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:20px;font-family:'JetBrains Mono',monospace;white-space:nowrap}

    /* app shell / anonymous top bar / .page entrance animation: migrated to @layer patterns
       (body.is-site .page, .site-top, .brand, .site-nav) — step 8, 2026-09-22 */
    @media(max-width:860px){
      .g3,.g4{grid-template-columns:1fr 1fr}
    }

    /* ---------- readability patch (formerly the second <style> block) ---------- */
    .is-app label:not([class]){font-size:14px}
    .is-app table:not(.c-table),.is-app .dtable{font-size:14px}
    .is-app table:not(.c-table) thead th,.is-app .dtable th{font-size:11.5px}
    .is-app .badge,.is-app .chip,.is-app .planpill{font-size:11.5px}
    .is-app .l-page [style*="font-size:9px"],
    .is-app .l-page [style*="font-size:10px"],
    .is-app .l-page [style*="font-size:10.5px"],
    .is-app .l-page [style*="font-size:11px"],
    .is-app .l-page [style*="font-size:11.5px"]{font-size:12.5px !important;line-height:1.5}
}

/* ----------------------------------------------------------------------------
   print — outside layers so it wins
   ---------------------------------------------------------------------------- */
/* Page speed (reports/templates/reports/vitals.html) */
.p-vitals__clock { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-weight: 600; }
.p-vitals__clock span { font-family: var(--font-mono); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.p-vitals__parts { display: flex; gap: 2px; border-radius: 6px; overflow: hidden; font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 600; }
.p-vitals__parts span { min-width: max-content; padding: 4px 6px; white-space: nowrap; background: var(--ok-50); color: var(--ok-700); }
.p-vitals__parts .p-vitals__part--delay { background: var(--warn-50); color: var(--warn-700); }
.p-vitals__parts .p-vitals__part--load { background: var(--brass-50); color: var(--brass-800); }
.p-vitals__parts .p-vitals__part--render { background: var(--bad-50); color: var(--bad-700); }

@media print {
  /* the one colour literal outside the token layer: @page margin boxes cannot read custom properties in every renderer */
  @page { size: A4; margin: 18mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font-family: "Manrope", system-ui, sans-serif; font-size: 9pt; color: #586773; } }
  .l-sidebar, .l-topbar, .c-drawer, .c-toasts, .u-skip, .l-navdialog, .site-top, .p-marketing__footer, .p-report__actions { display: none; }
  .l-shell { display: block; }
  .l-page, body.is-site .page { max-width: none; padding: 0; }
  html { scroll-behavior: auto; }
  body { background: var(--n-0); color: var(--ink); }
  a { color: inherit; text-decoration: none; }
  .c-decision, .c-metrics, .c-card, .c-report-cover, .p-report__how, .c-table tr, .p-report__evidence h3 { break-inside: avoid; }
  .c-report-cover { border: 0; border-radius: 0; break-after: page; }
  .c-report-cover__band { padding-top: var(--sp-8); }
  .c-decision__foot form, [data-feedback], .c-decision__how summary .c-icon { display: none; }
  .c-decision__how { display: block; }
  .c-decision__how summary { list-style: none; }
  .c-table-wrap { overflow: visible; border-radius: 0; }
  .c-table thead th { position: static; }
  .c-table tbody tr:hover { background: transparent; }
  .p-report { gap: var(--sp-5); }
  .p-report__section, .l-section { break-before: auto; }
  .c-btn { border: var(--bw-hair) solid var(--line-strong); background: transparent; color: inherit; }
}