/* Auspex SEO — system styles
   Perf notes: one webfont family, two styles, self-hosted from /assets/fonts/
   with the same unicode-range subsets Google serves, so an English page still
   loads one 15 KB file — but from this origin, with no cross-origin stylesheet
   on the critical path. Everything else is a system stack, including the
   monospace. No JS required for any content. LCP is a text node, deliberately.

   Register: an instrument, not a brochure. Serif for display, system sans for
   reading, system mono for labels, captions, terms and data — never body copy.
   A cool ground so the bronze is the only warm thing on the page.

   Deploy note: this file is the editable source. The pages reference a
   byte-identical copy named style.<md5>.css, committed beside it, so a new
   version is a new URL and a too-early request during deploy propagation
   404s instead of caching stale content immutable under the new name (which
   a ?v= query string once let happen, 2026-09-08). After any edit here, run
   _notes/stamp-css.sh: it rewrites the copy and every page's link. The
   staging copy for deploy excludes this unhashed file. */

/* Instrument Serif, SIL Open Font License — licence text in /assets/fonts/OFL.txt.
   Subset files and unicode-range copied verbatim from Google Fonts' CSS at v5. */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic-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: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic-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: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-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: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-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;
}

:root {
  --ink:         #10161d;
  --ink-2:       #2f3a47;
  --muted:       #5c6a7b;
  --rule:        #c9d2dc;   /* hairline: 1.39:1 on --bg, on purpose */
  --rule-strong: #aab6c3;   /* structural edge: 1.87:1, the one you see */
  --bg:          #f2f4f7;
  --surface:     #ffffff;
  --accent:      #8a5a2b;
  --accent-ink:  #6d4620;
  --accent-bg:   #f3ede4;
  --max:         68rem;
  --measure:     38rem;
  --radius:      4px;
  --serif: "Instrument Serif", Iowan Old Style, Georgia, Cambria, "Times New Roman", serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Spacing scale. Derived from the values already in use, so adopting it moved
     nothing. Structural spacing comes from here; component internals (card and
     field padding) still carry their own values and can migrate incrementally. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3.5rem;
  --s-9: 5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:         #edf1f5;
    --ink-2:       #c2ccd6;
    --muted:       #8b98a8;
    --rule:        #27313d;
    --rule-strong: #3a4653;
    --bg:          #0c1015;
    --surface:     #131920;
    --accent:      #d9a441;
    --accent-ink:  #e8bd6d;
    --accent-bg:   #1f1a13;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-top: 2.5rem; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 2rem; }

p, li { color: var(--ink-2); }
p { margin: 0 0 1.15rem; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

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

/* The instrument voice. Directives, status codes, user agents, file names. */
code, kbd, samp {
  font-family: var(--mono); font-size: 0.875em;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 0.05em 0.35em; color: var(--ink);
}

/* ---- layout ---- */

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.prose { max-width: var(--measure); }
.prose-wide { max-width: 52rem; }

/* Kills the top margin on a heading that opens its own section, where the
   section padding already supplies the gap. Deliberately a utility rather than
   a `:first-child` rule: as a rule it would also strip 2.5rem from fourteen
   other headings that currently want it. */
.flush { margin-top: 0; }

section { padding: var(--s-8) 0; }
section + section { border-top: 1px solid var(--rule); }
.is-tight-top { padding-top: var(--s-4); }

/* Two section weights instead of one hairline. A band sits on the surface
   with strong edges; the section after it needs no hairline of its own. */
section.is-band { background: var(--surface); border-block: 1px solid var(--rule-strong); }
section.is-band + section { border-top: none; }
section.is-tight { padding: var(--s-5) 0; }

/* Nudges for content that follows a non-prose block and needs its own gap. */
.push { margin-top: var(--s-5); }
.push-lg { margin-top: var(--s-6); }

/* ---- masthead ---- */

.masthead {
  border-bottom: 1px solid var(--rule-strong);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.5rem; color: var(--ink); text-decoration: none;
  letter-spacing: 0.01em;
}
.wordmark span { color: var(--accent); }
/* Seven links, three kinds of page: reference, commercial, company. The
   hairlines say which is which; Contact carries the only emphasis. */
.nav { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-size: 0.9375rem; }
.nav .group { display: flex; gap: var(--s-4); }
.nav .group + .group { padding-left: var(--s-4); border-left: 1px solid var(--rule-strong); }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a.is-cta { color: var(--accent-ink); font-weight: 600; }
.nav a.is-cta[aria-current="page"] { color: var(--ink); }

/* ---- hero ---- */

.hero { padding: var(--s-9) 0 4rem; }
/* Interior pages open on h1 + .answer, which carries its own bottom margin, so
   the hero closes tighter than the homepage's. */
.hero.is-compact { padding-bottom: var(--s-5); }
.hero p.lead {
  font-size: 1.25rem; line-height: 1.55; color: var(--ink-2);
  max-width: 42rem; margin-bottom: 2rem;
}
.eyebrow {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 600;
  margin: 0 0 var(--s-4);
}
.eyebrow .sep { color: var(--rule-strong); margin: 0 0.5em; font-weight: 400; }

/* The published terms, in the place a competitor puts "trusted by 5,000+". */
.terms {
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.7;
  color: var(--muted); margin: var(--s-5) 0 0; max-width: 46rem;
}
.terms b { color: var(--ink); font-weight: 600; }
.terms .sep { color: var(--rule-strong); margin: 0 0.45em; }

/* ---- answer block: the self-contained lead for each section ---- */

.answer {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  padding: 1.15rem 1.35rem;
  margin: 0 0 1.75rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.answer p { margin: 0; color: var(--ink); font-size: 1.0625rem; }

/* ---- buttons ---- */

.btn {
  display: inline-block; padding: 0.8rem 1.5rem; border-radius: var(--radius);
  background: var(--ink); color: var(--bg); text-decoration: none;
  font-weight: 600; font-size: 0.9375rem; border: 1px solid var(--ink);
  transition: opacity .15s ease;
}
.btn:hover { opacity: 0.88; color: var(--bg); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-quiet:hover { color: var(--ink); border-color: var(--muted); }
.btn-row { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---- cards ---- */

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 42rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: 1.5rem;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* ---- tables ---- */

.table-scroll { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; min-width: 34rem; }
th, td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--ink); font-weight: 600; }
thead th {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
td { color: var(--ink-2); }
tbody tr:last-child td { border-bottom: none; }

/* Explanatory tables — where a row is one self-contained idea — stack into
   labelled blocks on a phone; comparative tables keep the sideways scroll.
   WCAG 1.4.10 exempts data tables from reflow, so this is a comprehension call,
   not a compliance one. Row labels on this site are `th[scope=row]`, so they
   take the first-cell treatment rather than `td:first-child`. */
@media (max-width: 46rem) {
  .table-stack table, .table-stack tbody, .table-stack tr,
  .table-stack td, .table-stack tbody th { display: block; width: 100%; min-width: 0; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-stack tr { border-bottom: 1px solid var(--rule); padding: var(--s-2) 0; }
  .table-stack tr:last-child { border-bottom: none; }
  .table-stack td, .table-stack tbody th { border: none; padding: 0.1rem 0; }
  .table-stack td::before {
    content: attr(data-th); display: block; margin-top: var(--s-1);
    font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--muted); font-weight: 600;
  }
  .table-stack td:first-child, .table-stack tbody th { font-weight: 600; color: var(--ink); }
  .table-stack td:first-child::before { content: none; }
}

/* ---- tier list ---- */

.tier { border-top: 1px solid var(--rule); padding: 2rem 0; }
.tier:first-of-type { border-top: none; }
.tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tier-head h3 { margin: 0; }
.price { color: var(--accent-ink); font-size: 1.0625rem; white-space: nowrap; font-weight: 600; }

/* ---- service list: four h3-led blocks in one section ---- */
.service-list h3 { margin-top: var(--s-7); }

/* A heading that opens a section container takes the section's padding as its
   gap; its own top margin would stack on top and open every section at 6rem.
   Deferred from the spacing-scale pass until the bands gave sections visible
   edges, so the tighter top reads as structure rather than as a missing gap. */
.wrap > h2:first-child, .prose > h2:first-child, .prose-wide > h2:first-child,
.service-list > h3:first-child { margin-top: 0; }

/* ---- faq ---- */

.faq { border-top: 1px solid var(--rule); padding: 1.5rem 0; max-width: 46rem; }
.faq h3 { margin: 0 0 0.6rem; font-size: 1.1875rem; }
.faq p:last-child { margin-bottom: 0; }

/* ---- footnotes / citations ---- */

.cite { font-size: 0.9375rem; color: var(--muted); }
.sources { font-size: 0.875rem; color: var(--muted); max-width: 46rem; }
.sources li { margin-bottom: 0.4rem; color: var(--muted); }

/* ---- glossary ---- */

/* Global, not glossary-only: any anchor jump should land clear of the sticky
   masthead rather than under it. The masthead is ~4.5rem tall on desktop
   (1rem padding each side plus the 1.5rem wordmark's line box), so 1.5rem
   would land a heading 3rem underneath it. Track this if the masthead changes. */
[id] { scroll-margin-top: var(--s-9); }

/* Fourteen terms is past the point where scrolling to find one is reasonable. */
.term-index {
  columns: 2; column-gap: var(--s-6);
  margin: var(--s-4) 0 var(--s-6); padding: var(--s-4) 0;
  border-block: 1px solid var(--rule);
  font-size: 0.9375rem;
}
@media (min-width: 60rem) { .term-index { columns: 3; } }
.term-index ul { list-style: none; margin: 0; padding: 0; }
.term-index li { break-inside: avoid; }
.term-index a { display: block; padding: 0.2rem 0; color: var(--ink-2); text-decoration: none; }
.term-index a:hover { color: var(--accent-ink); text-decoration: underline; }

/* Permalink, revealed on hover or keyboard focus. Trails the heading rather
   than hanging in the left margin: the measure column sits flush with the
   wrap below ~72rem, so a hanging glyph is clipped on most laptops. The glyph
   is CSS-generated so a parser reading the h2 gets the term, not "term#". */
.glossary h2 .anchor {
  margin-left: 0.4em; opacity: 0;
  color: var(--accent); text-decoration: none; font-weight: 400;
}
.glossary h2 .anchor::before { content: "#"; }
.glossary h2:hover .anchor, .glossary h2 .anchor:focus-visible { opacity: 1; }

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--rule-strong); background: var(--surface);
  padding: var(--s-7) 0 var(--s-8); margin-top: var(--s-6);
}
footer .wrap { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-6); }
footer h4 {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  margin: 0 0 var(--s-2);
}
footer p, footer a, footer li { font-size: 0.9375rem; color: var(--muted); }
footer p { margin: 0 0 var(--s-2); max-width: 34rem; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 0.3rem; }
footer a:hover { color: var(--ink); }
.footer-brand { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
@media (max-width: 46rem) { footer .wrap { grid-template-columns: 1fr; gap: var(--s-5); } }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; background: var(--surface); color: var(--ink);
  padding: 0.75rem 1rem; border-radius: var(--radius); z-index: 100;
  border: 1px solid var(--rule);
}

/* ---- figure: a numbered, framed, captioned drawing ----
   Fig. 1 is the five gates. Real text in an ordered list, so it is retrievable
   on the site's own terms and a screen reader gets five items, not a picture. */
section.figure-band { border-top: none; padding-top: 0; }
.fig { margin: 0; border: 1px solid var(--rule-strong); background: var(--surface); padding: var(--s-4) var(--s-5); }
.fig-head {
  display: flex; gap: var(--s-4); align-items: baseline; flex-wrap: wrap;
  padding-bottom: var(--s-3); margin-bottom: var(--s-6); border-bottom: 1px solid var(--rule);
}
.fig-n {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600; white-space: nowrap;
}
.fig-title { font-size: 0.9375rem; color: var(--ink-2); }
.fig figcaption {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted);
}
.fig figcaption a { color: var(--accent-ink); text-decoration: none; }
.fig figcaption a:hover { text-decoration: underline; }

/* the five gates: 1–2 grey, 3–5 bronze, 4–5 on the tinted surface */
.gates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 var(--s-4); }
.gate {
  display: flex; flex-direction: column; gap: var(--s-1);
  border-top: 2px solid var(--rule-strong); padding: var(--s-3) 0 var(--s-4);
}
.gate.is-geo { border-top-color: var(--accent); }
.gate.is-core { background: var(--accent-bg); padding-inline: var(--s-3); margin-inline: calc(-1 * var(--s-3)); }
.gate-n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gate.is-geo .gate-n { color: var(--accent-ink); font-weight: 600; }
.gate-name { font-family: var(--serif); font-size: 1.6rem; line-height: 1.05; color: var(--ink); margin: 0.1rem 0 0.25rem; }
.gate-q { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.gate-f { font-family: var(--mono); font-size: 0.72rem; line-height: 1.55; color: var(--muted); margin-top: var(--s-2); }
.gate-f::before { content: "fails: "; color: var(--rule-strong); }
.gate.is-geo .gate-f::before { color: var(--accent); }

/* brackets under the gates, spanning the grid the way a drawing would */
.fig-brackets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 var(--s-4); margin-top: var(--s-2); }
.bracket {
  position: relative; padding-top: var(--s-2); border-top: 1px solid var(--rule-strong);
  font-size: 0.8125rem; color: var(--muted); line-height: 1.45;
}
.bracket::before, .bracket::after { content: ""; position: absolute; top: -1px; width: 1px; height: 7px; background: var(--rule-strong); }
.bracket::before { left: 0; } .bracket::after { right: 0; }
.bracket b {
  display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-bottom: 0.1rem;
}
.bracket.classic { grid-column: 1 / 3; }
.bracket.geo { grid-column: 3 / 6; border-top-color: var(--accent); }
.bracket.geo::before, .bracket.geo::after { background: var(--accent); }
.bracket.geo b { color: var(--accent-ink); }

@media (min-width: 46.01rem) and (max-width: 64rem) {
  .gates { gap: 0 var(--s-3); }
  .gate-name { font-size: 1.35rem; }
  .gate-f { font-size: 0.68rem; }
}
@media (max-width: 46rem) {
  .fig { padding: var(--s-4); }
  .gates { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--rule-strong); }
  .gate { border-top: none; border-left: 2px solid var(--rule-strong); margin-left: -2px; padding: var(--s-3) 0 var(--s-3) var(--s-4); }
  .gate.is-geo { border-left-color: var(--accent); }
  .gate.is-core { margin-inline: -2px 0; padding-inline: var(--s-4); }
  .fig-brackets { grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-4); }
  .bracket.classic, .bracket.geo { grid-column: auto; }
}

/* ---- figure drawings: inline SVG in the Fig. system ----
   Hand-authored, no libraries, no images. Everything takes its colour from the
   nearest `color` via currentColor, so one drawing works in both themes; the
   bronze is reserved for the hop under discussion. Text inside is real DOM
   text. On a phone the drawing keeps its scale and scrolls sideways — the
   figcaption carries the claim in prose, so nothing is lost. */
/* A figure set between prose blocks rather than opening a band needs its own
   vertical gap. A class, not an inline style: the CSP forbids style attributes. */
.fig.mid {
  margin: var(--s-6) 0;
  /* A mid-page drawing is below the fold on every viewport. Skipping its layout
     and paint until it is near the viewport keeps the SVG text out of the first
     paint's critical path on a throttled phone; measured 2026-09-08, before/after
     in _notes/perf-figures-2026-09-08.md. The placeholder height is the
     `auto` keyword's fallback only until the figure has rendered once. */
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}
.fig-scroll { overflow-x: auto; }
.fig-svg { display: block; width: 100%; height: auto; color: var(--rule-strong); }
.fig-svg .ink   { color: var(--ink); }
.fig-svg .ink2  { color: var(--ink-2); }
.fig-svg .muted { color: var(--muted); }
.fig-svg .geo   { color: var(--accent); }
.fig-svg .geo-ink { color: var(--accent-ink); }
.fig-svg .node { fill: var(--surface); stroke: currentColor; stroke-width: 1.25; }
.fig-svg .node.tint { fill: var(--accent-bg); }
.fig-svg .edge { fill: none; stroke: currentColor; stroke-width: 1.25; }
.fig-svg .edge.exit { stroke-dasharray: 3 3; }
.fig-svg .ah { fill: var(--rule-strong); }
.fig-svg .ah-geo { fill: var(--accent); }
.fig-svg text { fill: currentColor; }
.fig-svg .t { font-family: var(--serif); font-size: 15px; }
.fig-svg .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; }
.fig-svg .s { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 12px; }
@media (max-width: 46rem) { .fig-svg { min-width: 40rem; } }

/* ---- margin note: a mono aside beside the paragraph it qualifies ---- */
.note-row { display: grid; grid-template-columns: minmax(0, 52rem) 1fr; gap: var(--s-6); align-items: start; }
.margin-note {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.6; color: var(--muted);
  border-left: 1px solid var(--rule-strong); padding-left: var(--s-3); margin-top: 0.45rem; max-width: 16rem;
}
.margin-note b {
  display: block; color: var(--accent-ink); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 0.15rem;
}
@media (max-width: 46rem) {
  .note-row { grid-template-columns: 1fr; gap: var(--s-4); }
  .margin-note { max-width: none; border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: var(--s-3); }
}

/* ---- refusal list ---- */
.refuse li { margin-bottom: 0.6rem; }
.refuse strong { display: block; }

/* ---- price row ---- */
.price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--rule);
  padding: var(--s-5) 0 var(--s-2);
  margin-top: var(--s-7);
}
.price-row:first-of-type { margin-top: 0; }
.price-row h3 { margin: 0; }
.price-big {
  font-family: var(--serif);
  font-size: 2rem; color: var(--ink); white-space: nowrap;
}
.price-term { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.02em; }

/* ---- mobile: unstick the masthead ----
   With seven nav items the header wraps to two rows and occupies ~21% of a
   375x812 viewport. Sticky is a reasonable desktop affordance and a bad trade on
   a phone, so below 46rem it scrolls away like anything else. */
@media (max-width: 46rem) {
  .masthead { position: static; }
  .masthead .wrap { padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .nav { gap: 0.85rem 1.1rem; }
  .hero { padding: 2.5rem 0 2rem; }
  h1 { font-size: clamp(2rem, 8.5vw, 2.75rem); }
}

/* ---- enquiry form ---- */
.form-card {
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: 1.75rem; max-width: 40rem;
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-size: 0.9375rem; font-weight: 600;
  color: var(--ink); margin-bottom: 0.35rem;
}
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  font: inherit;
  font-size: 1rem;            /* >=16px: stops iOS zooming the viewport on focus */
  line-height: 1.45;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.form-actions .btn { border: 1px solid var(--ink); cursor: pointer; font: inherit; font-weight: 600; }
.form-note {
  margin-top: 1.25rem; font-size: 0.875rem; color: var(--muted);
  border-top: 1px solid var(--rule); padding-top: 1rem;
}
.form-status {
  margin-top: 1rem; padding: 0.8rem 1rem; border-radius: var(--radius);
  background: var(--accent-bg); border-left: 3px solid var(--accent);
  font-size: 0.9375rem; color: var(--ink);
}
.form-status[hidden] { display: none; }
@media (max-width: 46rem) {
  .form-card { padding: 1.25rem; }
  .form-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ---- welcome / orientation cards ---- */
.route-grid { display: grid; gap: 1rem; margin: 2rem 0 0; }
@media (min-width: 46rem) { .route-grid { grid-template-columns: repeat(3, 1fr); } }
.route {
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: 1.35rem;
  transition: border-color .15s ease;
}
.route:hover { border-color: var(--accent); }
.route h3 { margin: 0 0 0.4rem; font-size: 1.25rem; font-family: var(--serif); color: var(--ink); }
.route p { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.route-more {
  display: block; margin-top: 0.7rem; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--accent-ink);
}

.gate-strip {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0;
  font-size: 0.9375rem;
}
.gate-chip {
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.8125rem;
  padding: 0.35rem 0.9rem; color: var(--muted);
}
.gate-chip.on { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---- radio group: service interest ---- */
.choices { border: 0; padding: 0; margin: 0 0 1.15rem; }
.choices legend {
  font-size: 0.9375rem; font-weight: 600; color: var(--ink);
  padding: 0; margin-bottom: 0.35rem;
}
.choices .hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; margin-bottom: 0.6rem; }
.choice {
  display: flex; align-items: flex-start; gap: 0.7rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 0.7rem 0.85rem; margin-bottom: 0.5rem;
  background: var(--bg); cursor: pointer;
}
.choice:hover { border-color: var(--muted); }
.choice input { width: auto; margin: 0.2rem 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-text { font-size: 0.9375rem; color: var(--ink); line-height: 1.4; }
.choice-text small { display: block; color: var(--muted); font-size: 0.875rem; margin-top: 0.1rem; }

/* ---- send-to panel: what the copy does not include ---- */
.sendto {
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--bg); padding: 0.9rem 1rem; margin-top: 1.25rem;
  font-size: 0.9375rem;
}
.sendto dt {
  font-family: var(--mono); color: var(--muted); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 600; margin-bottom: 0.15rem;
}
.sendto dd { margin: 0 0 0.7rem; color: var(--ink); word-break: break-word; }
.sendto dd:last-child { margin-bottom: 0; }
.sendto code { background: none; border: none; padding: 0; font-size: inherit; color: var(--ink); }

/* ---- readouts: the measurement design as six readings ----
   Fig. 2 on /methodology/. The parameters were already on the page, inside two
   table cells and a paragraph; nothing here is new copy. Set as readings —
   value first, mono label under it — because no competitor publishes a
   repetitions-per-prompt count or an interval at all, and a number buried in a
   "Why" column does not read as the differentiator it is.
   Same shape as .gates: a rule on top, a column per parameter. */
.readouts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-4);
}
/* the <dl> is a value/label/explanation grouping, not a definition list layout */
.readouts dt, .readouts dd { margin: 0; }

/* One parameter. Bronze rule, as on gates 3–5: this is the measurement half. */
.readout {
  display: flex; flex-direction: column; gap: var(--s-1);
  border-top: 2px solid var(--accent); padding: var(--s-3) 0 var(--s-4);
}
/* the reading itself: 120, ×5, ±, per engine */
.readout-v {
  font-family: var(--serif); font-size: 2.4rem; line-height: 1;
  color: var(--ink); margin: 0;
}
/* what it is a reading of */
.readout-k {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin: 0;
}
/* why the design is that way, in the page's own words */
.readout-x { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.45; margin: 0.35rem 0 0; }

/* Two up on a laptop, stacked on a phone — Fig. 1's breakpoints, so the two
   figures reflow at the same widths. */
@media (max-width: 64rem) { .readouts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 46rem) { .readouts { grid-template-columns: 1fr; } }

/* ---- reduced motion ----
   Everything animated on this site is an affordance, not content: the smooth
   scroll, the button opacity fade, the route card lift. All of it is safe to
   drop outright for anyone who has asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- print ----
   A buyer prints these pages to PDF. Chrome forces content-visibility content
   to render for print, but say so explicitly; keep every figure whole; drop
   the chrome; put the destination after each external link, as a document
   would. */
@media print {
  .masthead .nav, .skip, .btn-row, footer ul { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .fig, .figure-band, .answer, table, .readout { break-inside: avoid; }
  .fig.mid { content-visibility: visible; }
  section.is-band { background: none; border-color: #999; }
  a { color: inherit; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--mono); font-size: 0.8em; color: #444; }
  .margin-note { border-color: #999; }
}