/* ============================================================================
   intercis.io — shared design system
   Written 2026-09-12 for the site rebuild. Pair it with fonts.css:

     <link rel="stylesheet" href="/fonts.css">
     <link rel="stylesheet" href="/site.css">

   Rules for other page builders are in DESIGN.md. The short version: this file
   is frozen. Page-specific CSS goes in the page's own <style> block, and any
   change you wanted here goes in your report instead of into this file.

   No third-party CSS, no Tailwind, no output.css. The CSP is self only.
   ========================================================================== */

/* ------------------------------------------------------------- 0. web fonts */
/* Declared here, not in fonts.css, so a page needs ONE render-blocking
   stylesheet. Measured 2026-09-12: the second stylesheet cost a full round trip
   on Lighthouse's mobile profile (FCP 2.1-2.4 s against 0.9-1.8 s before), and
   font swap without fallback metrics shifted /blog by CLS 0.22. Only the faces
   the system uses are declared; /fonts holds one Inter file (weight 300), so the
   Inter range maps to it and heavier weights are synthesised, as before.
   Pages link /site.css only and preload the two latin files (see DESIGN.md). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/inter-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/inter-300-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(/fonts/bricolagegrotesque-400-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(/fonts/bricolagegrotesque-400-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/jetbrainsmono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/jetbrainsmono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Metric-matched fallbacks so the swap from the system face does not move the
   page. The Inter numbers are the published Arial overrides; the Bricolage and
   JetBrains ones are approximations that keep line boxes the same height. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 107.12%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'JetBrains Mono Fallback'; src: local('Menlo'), local('Consolas'), local('Courier New'); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

/* ---------------------------------------------------------------- 1. tokens */

:root {
  /* Light is the primary theme. Dark is a supported override, further down. */
  color-scheme: light;

  /* type families — all three are self-hosted in /fonts, declared by fonts.css */
  --font-display: 'Bricolage Grotesque', 'Bricolage Fallback', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace;

  /* type scale — 17px base, roughly a 1.22 ratio, display sizes fluid */
  --text-fine: 0.75rem;      /* 12px — footnote refs, table units      */
  --text-xs: 0.8125rem;      /* 13px — captions, meta                  */
  --text-sm: 0.9375rem;      /* 15px — dense body, form help           */
  --text-base: 1.0625rem;    /* 17px — body                            */
  --text-lead: 1.1875rem;    /* 19px — opening paragraph               */
  --text-h4: 1.0625rem;
  --text-h3: 1.375rem;       /* 22px                                   */
  --text-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.25rem);
  --text-h1: clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem);
  --text-figure: clamp(2.5rem, 1.7rem + 3.4vw, 3.75rem);

  --lh-tight: 1.04;
  --lh-snug: 1.22;
  --lh-body: 1.62;
  --lh-loose: 1.72;

  --track-tight: -0.022em;
  --track-normal: -0.008em;
  --track-wide: 0.02em;

  /* space — 4px base */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;

  /* rhythm and measure */
  --section-y: clamp(3.25rem, 1.75rem + 6vw, 6rem);
  --shell: 68.75rem;   /* 1100px content shell */
  --shell-narrow: 46rem;
  --measure: 68ch;
  --gutter: clamp(1.25rem, 0.75rem + 2.2vw, 2.5rem);

  /* shape — rectangles, not pills. 3px is the only radius on controls. */
  --radius: 3px;
  --radius-lg: 4px;
  --hairline: 1px;

  /* colour — light */
  --c-bg: #f2f3f0;
  --c-surface: #ffffff;
  --c-sunken: #e8eae4;
  --c-ink: #14171a;
  --c-ink-2: #3a4046;
  --c-ink-3: #5c646c;
  --c-rule: #d6d9d2;
  --c-rule-strong: #b2b8ae;
  --c-accent: #0b5f57;
  --c-accent-hover: #084941;
  --c-accent-wash: #e1ece9;
  --c-on-accent: #ffffff;
  --c-deny: #9e1b23;
  --c-deny-wash: #f7e6e6;
  --c-allow: #1d6b44;
  --c-allow-wash: #e4efe8;
  --c-observe: #855709;
  --c-observe-wash: #f5ece0;
  /* the code slab is dark in both themes, so these four do not change below */
  --c-code-bg: #14181d;
  --c-code-ink: #dfe5ec;
  --c-code-rule: #2a313b;
  --c-code-dim: #97a3b1;
  --c-code-deny: #ff9b9b;
  --c-code-allow: #7fd7a4;
  --c-code-key: #8fd2ff;

  --focus-ring: 2px solid var(--c-accent);
  --focus-offset: 2px;

  --dur-fast: 110ms;
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --c-bg: #0c0f13;
    --c-surface: #121720;
    --c-sunken: #171d27;
    --c-ink: #e6eaf0;
    --c-ink-2: #b4bdc8;
    --c-ink-3: #8792a0;
    --c-rule: #242b36;
    --c-rule-strong: #38414f;
    --c-accent: #45d6c0;
    --c-accent-hover: #7ce6d6;
    --c-accent-wash: #102721;
    --c-on-accent: #05130f;
    --c-deny: #f39494;
    --c-deny-wash: #2a1416;
    --c-allow: #64cd93;
    --c-allow-wash: #0f2318;
    --c-observe: #e3b463;
    --c-observe-wash: #251a0c;
    --c-code-bg: #0a0d11;
    --c-code-ink: #dfe5ec;
    --c-code-rule: #212832;
  }
}

/* ------------------------------------------------------------- 2. elements */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  letter-spacing: var(--track-normal);
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--c-ink);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--text-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--text-h3); line-height: 1.3; }
h4 {
  font-family: var(--font-text);
  font-size: var(--text-h4);
  font-weight: 600;
  letter-spacing: var(--track-normal);
  line-height: 1.4;
  margin-bottom: var(--s2);
}

p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}

small, .fine { font-size: var(--text-xs); line-height: 1.55; color: var(--c-ink-3); }

strong, b { font-weight: 600; color: var(--c-ink); }

a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--c-accent-hover); text-decoration-thickness: 2px; }

hr {
  border: 0;
  border-top: var(--hairline) solid var(--c-rule);
  margin: var(--s7) 0;
}

ul, ol { margin: 0 0 var(--s4); padding-left: 1.15rem; max-width: var(--measure); }
li { margin-bottom: var(--s2); }
li:last-child { margin-bottom: 0; }
li::marker { color: var(--c-ink-3); }

/* a list where the marker would be noise */
.list-plain { list-style: none; padding-left: 0; }

img, svg, video { max-width: 100%; height: auto; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

::selection { background: var(--c-accent-wash); color: var(--c-ink); }

/* browser surfaces we did not draw but still own */
input, textarea, select { caret-color: var(--c-accent); }
.table-wrap, pre {
  scrollbar-width: thin;
  scrollbar-color: var(--c-rule-strong) transparent;
}
pre { scrollbar-color: var(--c-code-rule) transparent; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -4rem;
  z-index: 100;
  background: var(--c-surface);
  color: var(--c-ink);
  border: var(--hairline) solid var(--c-ink);
  padding: var(--s2) var(--s4);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s4); }

/* --------------------------------------------------------------- 3. layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-narrow { max-width: var(--shell-narrow); }

.section { padding-block: var(--section-y); }
/* consecutive plain sections share one gap; a ruled section keeps its own air
   above the hairline, so it is excluded here rather than out-specified below. */
.section + .section:not(.section-ruled) { padding-top: 0; }
.section-ruled { border-top: var(--hairline) solid var(--c-rule); }
.section-sunken { background: var(--c-sunken); }

/* the section heading with an optional short standfirst under it */
.section-head { margin-bottom: var(--s6); }
.subhead { margin-top: var(--s8); }
.section-head p { color: var(--c-ink-2); }

/* the documentary two-column row: heading left, content right.
   Used for reference-style sections, not for every block. */
.spec {
  display: grid;
  gap: var(--s4);
  padding-block: var(--s5);
  border-top: var(--hairline) solid var(--c-rule);
}
.spec:last-child { border-bottom: var(--hairline) solid var(--c-rule); }
.spec > h3 { margin: 0; font-size: var(--text-h4); font-family: var(--font-text); font-weight: 600; }
.spec > div > :last-child { margin-bottom: 0; }

@media (min-width: 56rem) {
  .spec { grid-template-columns: 16rem 1fr; gap: var(--s6); }
}

.cols-2, .cols-3 { display: grid; gap: var(--s5); }
@media (min-width: 44rem) { .cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* A grid or flex child is min-width:auto, which means its intrinsic width wins:
   a `pre` or a wide table inside one pushes its own track past the viewport and
   the whole page scrolls sideways, whatever overflow-x the `pre` carries. The
   r1 /pilot measured 469px against a 390px viewport for exactly this reason.
   Every container this file defines resets it, and any grid you write in a page
   `<style>` block has to do the same for children that can hold a pre or a table. */
:where(.cols-2, .cols-3, .spec, .deflist > div, .site-footer__grid,
       .panel, .price-card, .section-head, .btn-row, .stack, .stack-tight) > * {
  min-width: 0;
}

.stack > * + * { margin-top: var(--s4); }
.stack-tight > * + * { margin-top: var(--s2); }

/* --------------------------------------------------- 4. header and the nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
  border-bottom: var(--hairline) solid var(--c-rule);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding-block: var(--s3);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--c-ink);
  text-decoration: none;
  flex: 0 0 auto;
}
/* the svg carries its own width attribute; height comes from the viewBox ratio */
.wordmark svg { display: block; }
.wordmark:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }

.site-nav {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  padding-top: var(--s2);
  border-top: var(--hairline) solid var(--c-rule);
}
/* 44px tall so a thumb can hit it; the rule under it is the hover state, not
   the box. Measured r1: these were 34px on a phone. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-ink-2);
  text-decoration: none;
  font-size: var(--text-sm);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--c-ink); border-bottom-color: var(--c-rule-strong); }
.site-nav a[aria-current='page'] { color: var(--c-ink); border-bottom-color: var(--c-accent); }

.site-header .btn { margin-left: auto; order: 2; }

@media (min-width: 54rem) {
  .site-nav {
    order: 2;
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: var(--s6);
  }
  .site-header .btn { order: 3; }
}

/* -------------------------------------------------------------- 5. buttons */

/* `.action` is the same box as `.btn` under a different name, for the one case
   `.btn` cannot serve: a mailto. site-check.js requires every anchor classed
   btn/button/cta to point at /pilot, which is the rule that keeps the funnel
   single, so an email action would fail the build wearing `.btn`. Use
   `.action action-secondary` there and nowhere else. */
.btn,
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.btn-primary, .action-primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.btn-primary:hover, .action-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: var(--c-on-accent); }

.btn-secondary, .action-secondary { background: transparent; color: var(--c-ink); border-color: var(--c-rule-strong); }
.btn-secondary:hover, .action-secondary:hover { border-color: var(--c-ink); color: var(--c-ink); background: var(--c-surface); }

/* On the dark ground --c-rule-strong against --c-surface is a border you have to
   look for, and r3 measured the Enterprise card's secondary action reading as
   centred text rather than a control. The ink-3 line is visible on every ground
   the dark theme defines. */
@media (prefers-color-scheme: dark) {
  .btn-secondary, .action-secondary { border-color: var(--c-ink-3); }
}

.btn-lg, .action-lg { min-height: 50px; font-size: var(--text-base); padding: 0.75rem 1.5rem; }
.btn-block, .action-block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* a quiet text action that is not a button */
.link-quiet { color: var(--c-ink-2); text-decoration-color: var(--c-rule-strong); }
.link-quiet:hover { color: var(--c-ink); }

/* A standalone link that is a real action rather than a word inside a sentence:
   44px tall so a thumb can hit it. r2 measured the page-local secondary actions
   at 20px while the nav and footer were already compliant. Put it on a link that
   sits alone in its paragraph or list item, never on one mid-sentence — an
   inline-flex box breaks the line it lives in. */
.tap { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------------- 6. panels and tables */

.panel {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-rule);
  padding: var(--s5);
}
.panel > :last-child { margin-bottom: 0; }
.panel-sunken { background: var(--c-sunken); border-color: var(--c-rule); }

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--hairline) solid var(--c-rule);
}
.panel-head h3 { margin: 0; }

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
caption {
  text-align: left;
  color: var(--c-ink-3);
  font-size: var(--text-xs);
  padding-bottom: var(--s3);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: var(--hairline) solid var(--c-rule);
}
th { font-weight: 600; color: var(--c-ink); }
thead th { border-bottom-color: var(--c-rule-strong); }
tbody tr:last-child td { border-bottom: 0; }
/* and its row header, which is a th: clearing only the td cells drew a hairline
   under the first cell of the last row and read as a broken border (measured on
   /pilot's lever table, r8). Additive, and it can only remove a stray rule. */
tbody tr:last-child th { border-bottom: 0; }
td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; }

/* definition rows — the table shape for two-value facts on a phone */
.deflist { display: grid; gap: 0; margin: 0; }
.deflist > div {
  display: grid;
  gap: var(--s1) var(--s4);
  padding-block: var(--s3);
  border-bottom: var(--hairline) solid var(--c-rule);
}
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { color: var(--c-ink-3); font-size: var(--text-sm); margin: 0; }
.deflist dd { margin: 0; }
@media (min-width: 40rem) {
  .deflist > div { grid-template-columns: 14rem 1fr; align-items: baseline; }
}

/* ----------------------------------------------------- 7. code and verdicts */

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-variant-ligatures: none;
}

:not(pre) > code {
  background: var(--c-sunken);
  border: var(--hairline) solid var(--c-rule);
  border-radius: var(--radius);
  padding: 0.08em 0.34em;
  color: var(--c-ink);
}

pre {
  margin: 0 0 var(--s4);
  max-width: 100%;
  padding: var(--s4);
  background: var(--c-code-bg);
  border: var(--hairline) solid var(--c-code-rule);
  border-radius: var(--radius);
  overflow-x: auto;
  color: var(--c-code-ink);
  font-size: var(--text-xs);
  line-height: 1.7;
}
pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* A pre wide enough to scroll is an operable region, so every one carries
   tabindex="0", role="region" and an accessible name. Mouse users can drag it;
   nobody else can reach the right-hand side without this. site-check.js fails a
   pre on /pilot without the tabindex. */
pre:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Output that is key and value, not code, reflows instead of scrolling. r2
   measured the audit-row sample at 630px inside a 347px box on a phone, which
   put event_hash and prev_event_hash — the two lines it exists to show —
   off the right edge. */
pre.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* On a phone the mono comes down before anything is allowed off-screen. */
@media (max-width: 34rem) {
  pre { font-size: 0.71875rem; padding: var(--s3); }
}
pre .c-dim { color: var(--c-code-dim); }
pre .c-deny { color: var(--c-code-deny); }
pre .c-allow { color: var(--c-code-allow); }
pre .c-key { color: var(--c-code-key); }

/* verdict vocabulary: allow / deny / observe — nothing else */
.verdict {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  border: var(--hairline) solid currentColor;
  white-space: nowrap;
}
.verdict-allow { color: var(--c-allow); background: var(--c-allow-wash); }
.verdict-deny { color: var(--c-deny); background: var(--c-deny-wash); }
.verdict-observe { color: var(--c-observe); background: var(--c-observe-wash); }

/* ------------------------------------------------------------ 8. callouts */

.note {
  border-left: 2px solid var(--c-rule-strong);
  padding: var(--s1) 0 var(--s1) var(--s4);
  margin: 0 0 var(--s4);
  color: var(--c-ink-2);
  max-width: var(--measure);
}
.note > :last-child { margin-bottom: 0; }

.note-quiet { border-left-color: var(--c-rule); font-size: var(--text-sm); }

/* An honest cost. Not an alert box: a document entry, opened by a hairline rule, with the
   body set at exactly the size of every other claim on the page. Styling a caveat smaller or
   softer than the claim it qualifies is lying with CSS — and styling it redder is the same
   lie the other way. Nine red headings over one section read as nine warnings against four
   black paragraphs of what the product does, so the heading takes --c-ink and --c-deny is
   kept for the two places it means "a call was stopped": a struck block in a diagram and a
   deny verdict in an audit row. */
.cost {
  border-top: var(--hairline) solid var(--c-rule-strong);
  padding-top: var(--s4);
  margin: 0 0 var(--s6);
  max-width: var(--measure);
}
.cost:last-child { margin-bottom: 0; }
/* h3 is the correct level under a section h2; h4 stays supported for a cost that
   really is nested one deeper. Both get the same treatment.
   2026-09-12: the heading was --text-h4 in the text face, which is the body size
   in the body face, so a column of costs read as one undifferentiated block and
   six blind judges said so in the same words. It keeps its ink colour — a caveat
   set redder than the claim is the same lie as one set smaller — and takes the
   display face two steps up, which is hierarchy without height. */
.cost h3, .cost h4 {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: 1.35;
  color: var(--c-ink);
  margin-bottom: var(--s3);
}
.cost > :last-child { margin-bottom: 0; }

/* A disclosure. The question stays on the page and the answer folds away, which
   is the only way a nine-question list is scannable on a phone. The summary is
   the 44px target; put the heading inside it so the outline still reads. */
details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 44px;
  padding-block: var(--s2);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--c-ink-3);
}
details[open] > summary::after { content: '\2212'; }
details > summary h3, details > summary h4 { margin: 0; }
details > :last-child { margin-bottom: 0; }

/* a footnote-style source line under a number */
.source {
  display: block;
  font-size: var(--text-fine);
  line-height: 1.5;
  color: var(--c-ink-3);
  margin-top: var(--s3);
  max-width: var(--measure);
}

/* ---------------------------------------------------------- 9. form controls */

.field { margin-bottom: var(--s5); }
.field:last-of-type { margin-bottom: var(--s6); }

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--s2);
}
.field-help {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--c-ink-3);
  margin-top: calc(var(--s1) * -1);
  margin-bottom: var(--s2);
}

input[type='text'],
input[type='email'],
input[type='number'],
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-text);
  font-size: var(--text-base);
  color: var(--c-ink);
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-rule-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--c-ink-3); }
input:hover, select:hover, textarea:hover { border-color: var(--c-ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--c-accent);
}
input[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--c-deny); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

/* range: the agent slider */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--c-rule-strong);
  border-radius: 2px;
}
input[type='range']::-moz-range-track {
  height: 4px;
  background: var(--c-rule-strong);
  border-radius: 2px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 3px solid var(--c-bg);
}
input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 3px solid var(--c-bg);
}
input[type='range']:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.form-status {
  border: var(--hairline) solid var(--c-rule-strong);
  padding: var(--s4);
  margin-bottom: var(--s5);
  font-size: var(--text-sm);
}
.form-status[hidden] { display: none; }
.form-status-ok { border-color: var(--c-allow); background: var(--c-allow-wash); color: var(--c-ink); }
.form-status-error { border-color: var(--c-deny); background: var(--c-deny-wash); color: var(--c-ink); }
.form-status > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- 10. price cards */

.price-card {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-rule);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.price-card--lead { border-color: var(--c-ink); }
.price-card h3 { margin: 0; }
.price-figure {
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.price-unit { font-size: var(--text-sm); font-weight: 400; color: var(--c-ink-3); letter-spacing: 0; }
.price-card ul { margin: 0; }
.price-card > p { margin-bottom: 0; }
.price-card .btn, .price-card .action { margin-top: auto; }

/* ----------------------------------------------------------- 11. the footer */

.site-footer {
  border-top: var(--hairline) solid var(--c-rule);
  background: var(--c-surface);
  padding-block: var(--s8) var(--s6);
  margin-top: var(--section-y);
}
.site-footer__grid {
  display: grid;
  gap: var(--s6);
}
@media (min-width: 44rem) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s5); }
}
.site-footer h2 {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-ink-3);
  margin-bottom: var(--s3);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0; }
/* nine links in three columns, each a 44px target rather than a 19px one */
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer a { color: var(--c-ink-2); text-decoration: none; font-size: var(--text-sm); }
.site-footer a:hover { color: var(--c-accent); text-decoration: underline; }
.site-footer__tagline {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.25;
  letter-spacing: var(--track-tight);
  color: var(--c-ink);
  margin: var(--s4) 0 var(--s3);
  max-width: 18ch;
}
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: var(--hairline) solid var(--c-rule);
  color: var(--c-ink-3);
  font-size: var(--text-xs);
}

/* ------------------------------------------------------------ 12. diagrams */

.diagram {
  display: block;
  width: 100%;
  height: auto;
  color: var(--c-ink);
}
.diagram .d-rule { stroke: var(--c-rule-strong); }
.diagram .d-ink { fill: var(--c-ink); }
.diagram .d-muted { fill: var(--c-ink-3); }
.diagram .d-surface { fill: var(--c-surface); }
.diagram .d-accent { stroke: var(--c-accent); }
.diagram .d-accent-fill { fill: var(--c-accent); }
.diagram .d-deny { stroke: var(--c-deny); }
.diagram .d-deny-fill { fill: var(--c-deny); }
.diagram text { font-family: var(--font-mono); font-size: 11px; }
.diagram .d-label { font-family: var(--font-text); font-size: 12px; font-weight: 600; }

/* ------------------------------------------------------- 13. reduced motion */

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

/* ------------------------------------------------------------- 14. printing */

/* A printed page is how this site travels through a security review, so the footer
   stays: it carries the contact address. Only the sticky chrome and the buttons go. */
@media print {
  .site-header, .btn, .action { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  pre { background: #fff; color: #000; border-color: #999; }
  pre .c-dim, pre .c-deny, pre .c-allow, pre .c-key { color: #000; }
  .site-footer { background: #fff; }
  .section, .cost, .faq > div, details { break-inside: avoid; }
  /* A folded answer must not print as a missing answer. The first rule covers
     the slot-based engines, the second the ones that hide the content with
     content-visibility on the pseudo-element; an engine that knows neither
     ignores its own rule and keeps the other. */
  details > :not(summary) { display: block; }
  details::details-content { content-visibility: visible !important; }
  details > summary::after { content: ''; }
}