:root {
  color-scheme: light dark;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
  --measure: 100%;
  --paper: #fcfcfd;
  --raise: #ffffff;
  --ground: #f5f3f7;
  --ink: #191721;
  --ink-2: #3d3849;
  --ink-3: #6b6577;
  --rule-soft: #dfdce6;
  --rule: #d7d4de;
  --edge: #8b8597;
  --accent: #95268d;
  --accent-ink: #ffffff;
  --accent-quiet: #f7eff7;
  --confirmed: #0e6b58;
  --band-strong: #3d0f39;
  --band-established: #681964;
  --band-developing: #872881;
  --band-early: #9f4a98;
  --band-not-assessed: #8b8597;
  --band-not-assessed-text: #6b6577;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #100f14;
    --raise: #191721;
    --ground: #0a090d;
    --ink: #f2f0f6;
    --ink-2: #b7b2c2;
    --ink-3: #a09aac;
    --rule-soft: #322e3c;
    --rule: #3b3646;
    --edge: #8d8799;
    --accent: #d98fd1;
    --accent-ink: #191721;
    --accent-quiet: #241528;
    --confirmed: #4fb99f;
    --band-strong: #eddeef;
    --band-established: #d5b2db;
    --band-developing: #bd91c9;
    --band-early: #9873a7;
    --band-not-assessed: #6d6778;
    --band-not-assessed-text: #b7b2c2;
  }
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
.lab {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}
.apparatus { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0; color: var(--ink-3); }

.btn {
  display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; border-radius: 3px;
  padding: 12px 22px; min-height: 44px; border: 1px solid var(--rule); color: var(--ink);
  background: var(--raise);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-go:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.08); }
.btn-sm { font-size: 14px; padding: 9px 16px; min-height: 40px; }
.btn-off { background: transparent; border-style: dashed; color: var(--ink-3); cursor: default; }

.top { border-bottom: 1px solid var(--rule-soft); padding: 18px 0 0; }
.crest { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.mark img { height: 38px; width: auto; display: block; }
.mark .names { display: flex; flex-direction: column; line-height: 1.15; }
.mark .prod { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -.012em; color: var(--ink); }
.mark .org { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.mark .surface { color: var(--ink-3); font-weight: 400; letter-spacing: inherit; }
.mark .surface::before { content: " | "; color: var(--rule); }
@media (min-width: 1000px) {
  .mark { position: relative; }
  .mark picture, .mark > img { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 14px; display: block; }
  .mark picture img { max-width: none; }
}
.crest-acts { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.switch, .quiet-link { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.switch:hover, .quiet-link:hover { color: var(--accent); }
.quiet-link[aria-disabled="true"] { color: var(--ink-3); text-decoration: line-through; cursor: default; }
.nav { margin: 0; padding: 14px 0 0; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a {
  font-family: var(--sans);
  display: inline-block; padding: 8px 0 10px; font-size: 15px; font-weight: 500;
  color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.paths { border-top: 1px solid var(--rule-soft); padding: 14px 0 2px; }
.paths .lab { margin-bottom: 10px; }
.paths ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0; }
.paths li { margin: 0; }
.paths a { display: block; padding: 12px 16px 14px; text-decoration: none; border-left: 3px solid var(--rule-soft); }
.paths a:hover { border-left-color: var(--accent); }
.paths a[aria-current="true"] { border-left-color: var(--accent); background: var(--raise); }
.paths .side { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); }
.paths a[aria-current="true"] .side { color: var(--ink); }
.paths a:hover .side { color: var(--accent); }
.paths .who { display: block; font-size: 14px; line-height: 1.45; color: var(--ink-3); margin-top: 3px; max-width: var(--measure); }

.foot { border-top: 1px solid var(--rule-soft); padding: 26px 0 0; margin-top: 46px; }
.foot p { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin: 0 0 8px; max-width: var(--measure); }
.foot .entity { font-family: var(--sans); font-size: 13px; color: var(--ink-2); max-width: var(--measure); }
.routes { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.routes li { margin: 0; }
.routes a { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 6px 0; display: inline-block; }
.routes a:hover { color: var(--accent); text-decoration: underline; }
.routes a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

@media (max-width: 620px) {
  .mark img { height: 32px; }
  .nav ul { gap: 0 16px; }
  .paths a { padding: 12px 14px; }
}
@media print {
  .switch, .nav, .paths, .crest-acts .btn, .quiet-link, .foot-nav { display: none; }
  .top, .foot { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
html { background: var(--paper); }
body {
  margin: 0; padding: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.page { max-width: 960px; margin: 0 auto; padding: 0 20px 96px; }
main { display: block; }
main:focus { outline: none; }
.skip {
  position: absolute; left: 12px; top: -64px; z-index: 50; padding: 12px 18px; min-height: 44px;
  background: var(--accent); color: var(--accent-ink); font-family: var(--sans); font-size: 15px; font-weight: 600;
  text-decoration: none; border-radius: 0 0 3px 3px;
}
.skip:focus { top: 0; }
section { border-bottom: 1px solid var(--rule-soft); padding: 46px 0; }
section:last-of-type { border-bottom: 0; }
h2 { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 31px); line-height: 1.2; font-weight: 500; letter-spacing: -.012em; margin: 0 0 18px; max-width: var(--measure); }
p { margin: 0 0 15px; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* the navigation tree: Home, with the three doors UNDER it ------------------------------------- */
/* A real hierarchy at every width (founder, 2026-10-04: the three profiles are children of Home, not beside it).
   Home is one item; its children stand stacked beneath it, indented, behind a rule, suppliers first. The
   other pages are Home's siblings and sit level with it. Always open: no hover, no state, no script. */
.nav .tree { align-items: flex-start; }
.nav li.home { display: block; }
.nav .kids, .foot .kids { list-style: none; margin: 6px 0 0 3px; padding: 0 0 0 14px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0; border-left: 1px solid var(--rule); }
.nav .kids li, .foot .kids li { display: flex; align-items: center; }
.nav .kids li + li::before, .foot .kids li + li::before { content: "|"; content: "|" / ""; color: var(--ink-3); padding: 0 12px; }
.nav .kids a { font-size: 14px; display: inline-block; padding: 4px 0; }
.foot .tree { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 22px; }
.foot .tree > li { margin: 0; }
.foot .home { display: block; }
.foot .kids a { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 4px 0; display: inline-block; }
.foot .kids a[aria-current] { color: var(--ink); text-decoration: underline; }
.nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--rule); }
@media (max-width: 620px) {
  .nav li.home, .foot .home { flex-basis: 100%; }
  .nav .kids, .foot .kids { margin: 2px 0 6px 4px; }
  .nav .kids a { padding: 10px 0; min-height: 44px; }
  .foot .kids a { padding: 10px 0; min-height: 44px; }
}

/* the stage this site is at, on every page -------------------------------------------------- */
/* A statement and not a control: one line under the masthead, in the muted ink with a rule in the
   accent, so it reads as the state of the site rather than as an advertisement for it. */
.prelaunch { margin: 0; padding: 12px 0 12px 14px; border-left: 3px solid var(--accent); font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: none; }
.prelaunch b { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-right: 10px; }

/* the one primary action, wherever it appears --------------------------------------------- */
.acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; margin: 26px 0 0; }

/* 1. the question ------------------------------------------------------------------------ */
.ask { padding-top: 44px; }
.ask .lab { margin-bottom: 14px; }
/* The question as a STATEMENT. It was a textarea until 2026-09-14, when the home page's form was
   removed: an input that submits nothing is worse than no input, and the sentence was never the
   part that was working. Set at the same size and against the same rule, so the page opens the way
   it did. */
.q-said {
  font-family: var(--serif); font-size: clamp(27px, 4.6vw, 42px); line-height: 1.22;
  font-weight: 500; letter-spacing: -.018em; color: var(--ink); max-width: none;
  border-bottom: 2px solid var(--rule);
  padding: 4px 0 14px; margin: 0 0 12px;
}
.truth { font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--ink-2); margin: 0 0 16px; max-width: var(--measure); border-left: 2px solid var(--accent); padding-left: 14px; }
.hint { font-size: 14px; color: var(--ink-3); margin: 0 0 26px; max-width: var(--measure); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0 0; max-width: none; }
.chips li { margin: 0; }
/* Every chip is a link now: each is a reader recognising themselves, and each leads to the page
   that answers that reader. The arrow says so before it is clicked. */
.chip {
  display: inline-block; font-family: var(--sans); font-size: 14px; line-height: 1.35;
  color: var(--ink); background: var(--raise); border: 1px solid var(--accent);
  border-radius: 999px; padding: 9px 15px; min-height: 44px; text-align: left;
  text-decoration: none;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip::after { content: " \2192"; color: var(--accent); }

/* 2. the answer -------------------------------------------------------------------------- */
.answer { padding-top: 40px; }
.answer h1 {
  font-family: var(--serif); font-size: clamp(32px, 5.4vw, 50px); line-height: 1.1;
  font-weight: 500; letter-spacing: -.022em; margin: 0 0 16px; max-width: 20ch; text-wrap: balance;
}
.answer .sub { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.aside { margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--accent); font-family: var(--serif); font-size: 18px; color: var(--ink-2); }

/* 4. coverage ---------------------------------------------------------------------------- */
.cov { width: 100%; border-collapse: collapse; margin: 26px 0 12px; font-size: 15px; }
.cov caption { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 10px; }
.cov th, .cov td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
.cov thead th { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--rule); }
.cov tbody th { font-weight: 600; white-space: nowrap; }
.cov .n { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cov .n b { font-weight: 600; color: var(--confirmed); }
.cov .n .of { color: var(--ink-3); padding: 0 .35em; }
.cov .who { color: var(--ink-3); font-size: 14px; }
.cov tfoot td, .cov tfoot th { border-bottom: 0; padding-top: 14px; font-weight: 600; }
.scroll { overflow-x: auto; }
.iso { margin-top: 30px; padding: 20px 22px; background: var(--raise); border: 1px solid var(--rule-soft); }
.iso h3 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.iso ul { margin: 0 0 12px; padding-left: 18px; }
.iso li { font-family: var(--mono); font-size: 14px; margin-bottom: 4px; }
.iso p { font-size: 15px; color: var(--ink-2); }

/* 5. steps and 6. pricing ---------------------------------------------------------------- */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; margin-top: 24px; }
.cols > * { padding: 22px 22px 24px 0; border-top: 1px solid var(--rule); }
.ord { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-3); display: block; margin-bottom: 8px; }
.cols h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 0 0 4px; letter-spacing: -.01em; }
.cols .promise { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.cols .detail { font-size: 15px; color: var(--ink-2); margin: 0; }
.cols .wire { font-size: 14px; color: var(--ink-2); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.cols .wire b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.note { margin-top: 26px; font-size: 14px; color: var(--ink-3); max-width: var(--measure); }

/* 7. contact ----------------------------------------------------------------------------- */
/* The doorways, above the form. A list of links, one of them marked as the one you are at — the
   same shape the masthead uses for the route you are on, for the same reason: a reader should be
   able to see where they are without reading the address bar. */
.doors { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; max-width: none; }
.doors li { border-top: 1px solid var(--rule); }
.doors a { display: block; padding: 17px 0; text-decoration: none; }
.doors .door { font-family: var(--serif); font-size: 21px; font-weight: 500; display: block; margin-bottom: 2px; }
.doors .who { font-size: 15px; color: var(--ink-3); display: block; max-width: var(--measure); }
.doors a:hover .door { color: var(--accent); text-decoration: underline; }
.doors a[aria-current="page"] { border-left: 3px solid var(--accent); padding-left: 16px; }
.doors a[aria-current="page"] .door { color: var(--ink); }
.doors .at { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 4px; }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 26px; margin-top: 24px; max-width: 760px; }
.field { display: flex; flex-direction: column; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: .04em; margin-bottom: 6px; }
/* Optional is marked; required is not. On fifteen fields an asterisk on eleven of them is noise,
   and the four a reader may skip are the useful thing to point at. */
.field label .opt { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-left: 8px; }
.field .fh { font-size: 13px; color: var(--ink-3); margin: 0 0 6px; }
/* The three blocks the form is built from: your information, the company's, and the inquiry. They
   are labels rather than headings in weight, because the page already has a heading and a reader
   filling in a form is orienting rather than reading. */
.block { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.fields + .block { margin-top: 30px; }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink);
  background: var(--raise); border: 1px solid var(--edge); border-radius: 3px;
  padding: 11px 12px; min-height: 44px; width: 100%;
  /* The control sits at the BOTTOM of its grid cell, so two fields side by side line up even when
     one of them carries a sentence of explanation and the other does not. Without this the work
     email's hint pushes its box half a line below the one beside it, which reads as a fault. */
  margin-top: auto;
}
/* The native select keeps its own arrow. Replacing it would mean a background image, and the only
   way to carry one here is a data: URL — which would widen img-src past 'self' for a triangle. */
.field select { padding-right: 8px; }
.field textarea { min-height: 110px; resize: vertical; }
.loc { grid-column: 1 / -1; margin: 4px 0 -6px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* consent. Wider than a field, because it is a sentence a person has to read before they tick it. */
.consent { grid-column: 1 / -1; display: grid; grid-template-columns: 22px 1fr; gap: 4px 12px; align-items: start; padding: 18px 20px; background: var(--raise); border: 1px solid var(--edge); border-left: 3px solid var(--accent); }
.consent input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); }
.consent label { font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; letter-spacing: 0; cursor: pointer; }
.consent .fh { grid-column: 2; font-size: 13px; color: var(--ink-3); margin: 0; }
/* the one question the waitlist asks that is a choice rather than a sentence: a group of radios, each
   a whole row so the target is the row and not the dot, with the same ring the other controls take. */
.choice { border: 0; margin: 0; padding: 0; min-width: 0; grid-column: 1 / -1; }
.choice legend { font-size: 13px; font-weight: 600; letter-spacing: .04em; margin: 0 0 6px; padding: 0; }
.choice .fh { margin: 0 0 10px; }
.choice .opt-row { display: grid; grid-template-columns: 22px 1fr; gap: 2px 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--edge); background: var(--raise); margin: 0 0 8px; max-width: 760px; }
.choice .opt-row input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); }
.choice .opt-row label { font-size: 16px; font-weight: 600; cursor: pointer; margin: 0; letter-spacing: 0; }
.choice .opt-row .fh { grid-column: 2; margin: 0; }
.send {
  margin-top: 26px; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent);
  border-radius: 3px; padding: 13px 30px; min-height: 48px; cursor: pointer;
}
.send:hover { filter: brightness(1.08); }
.banner {
  margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--accent);
  border-left-width: 3px; background: var(--raise); max-width: var(--measure);
}
.banner b { display: block; font-size: 15px; margin-bottom: 3px; }
.banner p { font-size: 15px; color: var(--ink-2); margin: 0; }

/* 8. what to do next, and the foot -------------------------------------------------------- */
.next ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 0; }
.next li { border-top: 1px solid var(--rule); }
.next li a { display: block; padding: 20px 0; text-decoration: none; }
.next li a:hover .go { text-decoration: underline; color: var(--accent); }
.next .go { font-family: var(--serif); font-size: 21px; font-weight: 500; display: block; margin-bottom: 3px; }
.next .why { font-size: 15px; color: var(--ink-3); }

/* the pages that are not the home page ---------------------------------------------------- */
.lede h1 { font-family: var(--serif); font-size: clamp(30px, 5vw, 46px); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; margin: 0 0 14px; max-width: 22ch; text-wrap: balance; }
.lede { padding-top: 44px; }
.lede .sub { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.facts { margin: 26px 0 0; padding: 0; }
.facts div { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 6px 22px; padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.facts dt { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.facts dd { margin: 0; max-width: var(--measure); }
@media (max-width: 620px) { .facts div { grid-template-columns: 1fr; } }
.figure { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; color: var(--ink); margin-right: 6px; }
/* a price is part of the product it prices: set in the card, large, next to the promise */
.cols .price { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.cols .price .figure { font-size: 26px; }
.cols .price span { color: var(--ink-2); font-weight: 500; }
.cols .detail + .price { margin: 12px 0 0; font-size: 15px; }
.pricenote { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule-soft); max-width: var(--measure); }
.pricenote p { font-size: 14px; color: var(--ink-3); margin: 0 0 6px; }
.pricenote p.lab { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.managed { margin-top: 18px; }
/* the one sentence on /buyers a procurement lead is meant to copy out. It is set as the document it
   is about to become — serif, large, against the accent rule — rather than as a pull quote, because
   it is not emphasis: it is the clause. No colour of its own; the accent marks it the way the accent
   marks every other piece of direction on this site. */
.clause {
  margin: 24px 0 0; padding: 20px 24px; background: var(--raise);
  border: 1px solid var(--rule-soft); border-left: 3px solid var(--accent);
  font-family: var(--serif); font-size: clamp(22px, 3.4vw, 30px); line-height: 1.25;
  letter-spacing: -.012em; color: var(--ink); max-width: var(--measure);
}
.clause + p { margin-top: 18px; }
.listed { margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.listed li { padding: 11px 0 11px 20px; border-top: 1px solid var(--rule-soft); position: relative; font-size: 16px; color: var(--ink-2); }
.listed li::before { content: "\2014"; position: absolute; left: 0; color: var(--ink-3); }

/* the trace gate, and the same control living on /privacy ---------------------------------- */
/* It is a bar at the foot of the window rather than a dialog over the page: a reader can finish the
   sentence they were reading and decide after, which is the difference between asking and
   cornering. The main element gains room underneath while it is up, so nothing is hidden by it. */
.gate { position: fixed; inset: auto 0 0 0; z-index: 40; background: var(--raise); border-top: 1px solid var(--edge); }
.gate-in { max-width: 960px; margin: 0 auto; padding: 10px 20px; max-height: 62vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.gate-line { flex: 1 1 420px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: none; }
.gate-line b { color: var(--ink); }
.gate-more { flex: 0 0 auto; order: 1; }
.gate-more[open] { flex: 1 1 100%; order: 3; }
.gate .gate-in > .gate-acts { order: 2; }
.gate-more summary { font-size: 13px; color: var(--ink-3); cursor: pointer; }
.has-gate .page { padding-bottom: 140px; }
.tg { list-style: none; margin: 14px 0 0; padding: 0; max-width: none; }
.tg li { border-top: 1px solid var(--rule-soft); padding: 13px 0; display: grid; grid-template-columns: 22px 1fr; gap: 2px 12px; align-items: start; }
.tg input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); }
.tg label { font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: 0; }
.tg .fh { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 4px 0 0; max-width: var(--measure); }
.tg dl { grid-column: 2; margin: 10px 0 0; display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 3px 16px; }
.tg dt { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tg dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
/* The three buttons are one control repeated. Refusing costs exactly one click, in the same size,
   in the same shape, before the accept: a gate where "reject" is harder than "accept" is a Law 25
   finding rather than a design choice, so none of these may ever become .btn-go. */
.gate-acts { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 18px 0 0; }
.gate-acts .btn { flex: 1 1 200px; text-align: center; cursor: pointer; font-family: var(--sans); }
/* Inside the gate the three stay in view however much a reader scrolls through the detail. A
   refusal that costs one click only once you have found the button does not cost one click. */
.gate .gate-acts { margin: 0; flex: 0 0 auto; flex-wrap: nowrap; gap: 10px; }
.gate .gate-acts .btn { flex: 0 0 auto; padding: 8px 18px; font-size: 14px; min-height: 0; }
.gate-more .gate-acts { margin-top: 12px; }
@media (max-width: 560px) { .gate .gate-acts { flex: 1 1 100%; } .gate .gate-acts .btn { flex: 1 1 0; } }
.read { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; max-width: var(--measure); }
/* the regional part of a consent request: which region it is made for, the others one link away */
.regime { margin: 10px 0 14px; max-width: var(--measure); }
.regime-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 10px; font-size: 14px; }
.regime-tabs a[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration: underline; }
.state { margin: 18px 0 0; padding: 0; list-style: none; max-width: var(--measure); }
.state + .lab { margin-top: 24px; }
.lab + .state { margin-top: 6px; }
.state li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 15px; }
.state li span { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.essential { margin-top: 26px; padding: 20px 22px; background: var(--raise); border: 1px solid var(--rule-soft); }
.essential h3 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.essential p { font-size: 15px; color: var(--ink-2); margin: 0; }

/* the receipt page ------------------------------------------------------------------------ */
.receipt main { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; }
.got h1 { font-family: var(--serif); font-size: clamp(34px, 6vw, 56px); font-weight: 500; letter-spacing: -.022em; margin: 0 0 14px; }
.got p { font-size: 19px; color: var(--ink-2); }
.got .acts { margin-top: 30px; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .page { padding: 0 16px 64px; }
  section { padding: 34px 0; }
  .cols > * { padding-right: 0; }
  .acts .btn { width: 100%; text-align: center; }
}