/* GemmX pilot design system: the ONE stylesheet for every /app/ page. Every token and component is shown on styleguide.html.
   Rules: system fonts only, no external assets; colours only through the tokens below; phone first (375 px), 16 px gutters,
   no horizontal page scroll. Light is the default; dark follows the OS unless the header toggle picked one
   (<html data-theme="light|dark">, set by app.js for this tab only). The two dark blocks must stay identical
   (tests/test_web.py checks it, and checks every text colour against every background for WCAG AA). */

/* ---------- 1. tokens ---------- */
:root {
  /* colour: surfaces */
  --bg:#f6f5f1; --surface:#ffffff; --surface-2:#efeee9; --line:#e0ded6; --line-strong:#c9c7bd;
  /* colour: text */
  --fg:#1a1a18; --muted:#5d5c56; --accent:#1c5a87; --accent-fg:#ffffff; --accent-soft:#e3edf5;
  /* colour: status (text colour, and a soft fill it sits on) */
  --ok:#1a6e37; --ok-soft:#e5f2e8; --bad:#b0251d; --bad-soft:#fae9e7; --warn:#835500; --warn-soft:#faf0db;
  --design:#6a3c9f; --design-soft:#f0e9f8; --info:#1c5a87; --info-soft:#e3edf5;
  /* the site banners ("Private test site. No real money", "Demo data"): their OWN tokens, locked. A future user theme may
     change the colours above but never these, so a banner can't be made faint or harmless-looking (USER_THEMES.md) */
  --banner-warn:#835500; --banner-warn-soft:#faf0db; --banner-demo:#6a3c9f; --banner-demo-soft:#f0e9f8;
  /* other theme values */
  /* the landing page's own canvas: a cool neutral, not the warm --bg (UIUX_PLAN §2.3 "generated look"); slip = the receipt's shadow */
  --canvas:#f3f4f6; --slip-shadow:rgba(16,24,40,.10);
  --shadow:0 1px 2px rgba(20,20,15,.06), 0 1px 1px rgba(20,20,15,.04); --focus:#1c5a87; color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg:#121211; --surface:#1b1b19; --surface-2:#252522; --line:#30302c; --line-strong:#4a4944;
  --fg:#ecebe6; --muted:#a8a79f; --accent:#86bce3; --accent-fg:#0d1a24; --accent-soft:#1a2b39;
  --ok:#73c991; --ok-soft:#15281c; --bad:#f2908a; --bad-soft:#341a1a; --warn:#e5b85e; --warn-soft:#2e2412;
  --design:#bd9bea; --design-soft:#271f35; --info:#86bce3; --info-soft:#1a2b39;
  --banner-warn:#e5b85e; --banner-warn-soft:#2e2412; --banner-demo:#bd9bea; --banner-demo-soft:#271f35;
  --canvas:#111214; --slip-shadow:rgba(0,0,0,.45);
  --shadow:none; --focus:#86bce3; color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#121211; --surface:#1b1b19; --surface-2:#252522; --line:#30302c; --line-strong:#4a4944;
  --fg:#ecebe6; --muted:#a8a79f; --accent:#86bce3; --accent-fg:#0d1a24; --accent-soft:#1a2b39;
  --ok:#73c991; --ok-soft:#15281c; --bad:#f2908a; --bad-soft:#341a1a; --warn:#e5b85e; --warn-soft:#2e2412;
  --design:#bd9bea; --design-soft:#271f35; --info:#86bce3; --info-soft:#1a2b39;
  --banner-warn:#e5b85e; --banner-warn-soft:#2e2412; --banner-demo:#bd9bea; --banner-demo-soft:#271f35;
  --canvas:#111214; --slip-shadow:rgba(0,0,0,.45);
  --shadow:none; --focus:#86bce3; color-scheme:dark;
}
:root {
  /* type: system fonts; a 1.2-ish scale */
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:26px; --fs-3xl:32px;
  --fs-2xs:11px; --fs-code:13px; --fs-key:15px; --fs-lede-lg:19px;          /* tiny marks, code, the API key, the big lede */
  --fs-display-1:34px; --fs-display-2:40px; --fs-display-3:50px;            /* the landing and hero headlines */
  --lh-tight:1.25; --lh:1.5;
  /* space: a 4 px grid, with half steps and a hair step for fine detail. EVERY padding, margin and gap below uses these
     (tests/test_web.py fails on a px literal), so a density change is one swap of this block */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --s-0:2px; --s-1h:6px; --s-2h:10px; --s-3h:14px; --s-hair:3px;
  /* room for a list marker (a number or tick circle) before the text, smallest to largest */
  --indent-1:22px; --indent-2:26px; --indent-3:28px; --indent-4:32px; --indent-5:40px; --indent-6:44px;
  /* component paddings that sit off the grid on purpose (a tight button, a header link, a badge) */
  --pad-btn-sm:5px var(--s-2h); --pad-nav:var(--s-1h) 9px; --pad-tag:var(--s-hair) var(--s-2);
  /* radius */
  --r-xs:2px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  /* layout */
  --page:960px; --gutter:16px; --tap:44px;
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:var(--fs-md)/var(--lh) var(--font); overflow-wrap:break-word; }
main { max-width:var(--page); margin:0 auto; padding:var(--gutter); }
h1, h2, h3, h4 { line-height:var(--lh-tight); margin:var(--s-5) 0 var(--s-3); letter-spacing:-0.01em; }
h1 { font-size:var(--fs-2xl); margin-top:var(--s-4); letter-spacing:-0.02em; }
h2 { font-size:var(--fs-xl); } h3 { font-size:var(--fs-lg); } h4 { font-size:var(--fs-md); margin:var(--s-4) 0 var(--s-2); }
/* a card's title is an <h2 class="h-card">, its sub-title an <h3 class="h-sub"> (headings in order for screen readers,
   tests/a11y_cdp.js), drawn as the old h3 and h4 */
h2.h-card { font-size:var(--fs-lg); } h3.h-sub { font-size:var(--fs-md); margin:var(--s-4) 0 var(--s-2); }
.card > h3:first-child, .card > h4:first-child, .card > .row:first-child h3,
.card > .h-card:first-child, .card > .h-sub:first-child, .card > .row:first-child .h-card { margin-top:0; }
p { margin:var(--s-3) 0; }
.lede { font-size:var(--fs-lg); color:var(--muted); max-width:62ch; }
a, a:visited { color:var(--accent); text-underline-offset:2px; } a:hover, a:focus { color:var(--fg); }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
[tabindex="-1"]:focus { outline:none; }   /* a heading focused by script after a step (screen readers), not a control */
/* words break where words break; a long hash or URL still wraps anywhere rather than push the page wide */
code, .mono { font-family:var(--font-mono); font-size:0.85em; overflow-wrap:anywhere; }
pre { font-family:var(--font-mono); font-size:var(--fs-code); line-height:1.5; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s-3); margin:var(--s-3) 0; max-width:100%; overflow-x:auto; white-space:pre-wrap;
  word-break:break-all; }
hr { border:0; border-top:1px solid var(--line); margin:var(--s-5) 0; }
.muted { color:var(--muted); } .err { color:var(--bad); }
.note, .hint { font-size:var(--fs-sm); color:var(--muted); }
[hidden] { display:none !important; }

/* ---------- 3. header / nav ---------- */
header.top { position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--line); }
header.top .bar-in { max-width:var(--page); margin:0 auto; padding:var(--s-2) var(--gutter); display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--s-1) var(--s-2); }
.brand { font-weight:700; font-size:var(--fs-lg); letter-spacing:-0.02em; margin-right:auto; display:flex; align-items:center; gap:var(--s-2); }
/* the brand's colours and its mark: written from gateway/brand/brand.json by brand/apply.py (edit there, not here) */
/* brand:vars */
:root { --brand-a:#1c5a87; --brand-b:#1a1a18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-a:#86bce3; --brand-b:#ecebe6; } }
:root[data-theme="dark"] { --brand-a:#86bce3; --brand-b:#ecebe6; }
/* /brand:vars */
.brand-mark { width:20px; height:20px; flex:none; display:block; }
a.brand, a.brand:visited { color:var(--fg); text-decoration:none; }
/* phone (under 720 px): brand, "Signed in" and a Menu button on one row; Menu opens the pages as a list (buyer/provider
   first, then the public pages) and the theme button under it. Nothing scrolls sideways. Wide screens: one row, no Menu. */
header.top nav { display:none; order:3; width:100%; flex-direction:column; gap:var(--s-0); padding:var(--s-1) 0 var(--s-2); }
header.top.open nav { display:flex; }
header.top nav .grp { display:flex; flex-direction:column; gap:var(--s-0); }
header.top nav .sep { height:1px; background:var(--line); margin:var(--s-1) 0; }
header.top nav a { white-space:nowrap; }
header.top .theme-toggle { display:none; order:4; }
header.top.open .theme-toggle { display:inline-flex; align-items:center; }
header.top .who { order:1; }
.menu-toggle { order:2; font:inherit; font-size:var(--fs-sm); font-weight:600; min-height:var(--tap); padding:var(--s-1h) var(--s-3h); background:transparent;
  color:var(--fg); border:1px solid var(--line-strong); border-radius:var(--r-pill); }
.menu-toggle:hover { filter:none; border-color:var(--accent); background:var(--accent-soft); }
header.top .who, header.top .who:visited { font-size:var(--fs-xs); color:var(--ok); background:var(--ok-soft); border-radius:var(--r-pill);
  padding:var(--s-1) var(--s-2h); text-decoration:none; white-space:nowrap; font-weight:600; }
header.top .who .mono { font-size:inherit; word-break:normal; }

header.top nav a, header.top nav a:visited { color:var(--muted); text-decoration:none; font-size:var(--fs-sm); font-weight:500;
  padding:var(--pad-nav); border-radius:var(--r-pill); }
header.top nav a:hover { color:var(--fg); background:var(--surface-2); }
header.top nav a.on { color:var(--fg); background:var(--surface-2); font-weight:600; }
.theme-toggle { font:inherit; font-size:var(--fs-sm); background:transparent; color:var(--muted); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:var(--s-1) var(--s-2h); min-height:32px; cursor:pointer; }
.theme-toggle:hover { color:var(--fg); border-color:var(--line-strong); }
footer.foot { max-width:var(--page); margin:var(--s-6) auto 0; padding:var(--s-4) var(--gutter) var(--s-6); border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--muted); display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); }
@media (max-width: 719.98px) {   /* the open menu: each page a full-width row, a 44 px tap target */
  header.top nav a, header.top nav a:visited { display:flex; align-items:center; min-height:var(--tap); padding:var(--s-1h) var(--s-3);
    font-size:var(--fs-md); border-radius:var(--r-md); }
}
@media (min-width: 720px) {
  header.top nav { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; order:0; width:auto; padding:0; }
  header.top nav .grp { flex-direction:row; flex:none; }
  header.top nav .sep { flex:none; width:1px; height:18px; background:var(--line-strong); margin:0 var(--s-1h); }
  header.top .who, header.top .theme-toggle { order:0; }
  header.top .theme-toggle { display:inline-block; }
  .menu-toggle { display:none; }
  .brand { margin-right:var(--s-4); }
  header.top nav { margin-right:auto; }
}

/* tabs inside a page: a segmented control that fits 5 tabs at 375 px, and wraps if it ever has to */
nav.tabs { display:flex; flex-wrap:wrap; gap:var(--s-0); margin:var(--s-4) 0; padding:var(--s-hair); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-md); }
nav.tabs a, nav.tabs a:visited { flex:1 1 auto; text-align:center; white-space:nowrap; padding:var(--s-2) var(--s-1h); border-radius:calc(var(--r-md) - var(--s-hair));
  color:var(--muted); text-decoration:none; font-size:var(--fs-sm); font-weight:500; }
nav.tabs a:hover { color:var(--fg); }
nav.tabs a.on { background:var(--surface); color:var(--fg); font-weight:600; box-shadow:var(--shadow); outline:1px solid var(--line); }

/* ---------- 4. alerts (.banner is the page-top alert) ---------- */
.alert, .banner { display:block; border:1px solid; border-left-width:4px; border-radius:var(--r-md); padding:var(--s-2) var(--s-3);
  margin:var(--s-3) 0; font-size:var(--fs-sm); line-height:1.45; }
.alert, .alert.warn { background:var(--warn-soft); color:var(--warn); border-color:var(--warn); }
.banner { background:var(--banner-warn-soft); color:var(--banner-warn); border-color:var(--banner-warn); }   /* locked tokens */
.alert.info { background:var(--info-soft); color:var(--info); border-color:var(--info); }
.alert.ok { background:var(--ok-soft); color:var(--ok); border-color:var(--ok); }
.alert.bad { background:var(--bad-soft); color:var(--bad); border-color:var(--bad); }
.alert.design { background:var(--design-soft); color:var(--design); border-color:var(--design); }
.banner.demo { background:var(--banner-demo-soft); color:var(--banner-demo); border-color:var(--banner-demo); }
.alert b, .banner b { font-weight:700; }
/* the prototype banners are <details>: one line (the summary) on a phone, opened by app.js on a wide screen */
details.banner > summary { color:inherit; font-weight:400; margin:0; cursor:pointer; }
details.banner[open] > summary { display:inline; list-style:none; cursor:default; }
details.banner[open] > summary::-webkit-details-marker { display:none; }
.design { border:1px dashed var(--design); border-radius:var(--r-md); padding:var(--s-3); }
.demo { color:var(--design); border-color:var(--design); }

/* ---------- 5. badges (.tag) ---------- */
.tag { display:inline-flex; align-items:center; gap:var(--s-1); font-size:var(--fs-xs); font-weight:600; line-height:1.2; padding:var(--pad-tag);
  border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--surface-2); color:var(--fg);
  white-space:nowrap; vertical-align:middle; letter-spacing:0.01em; }
.tag.ok { color:var(--ok); background:var(--ok-soft); border-color:transparent; }
.tag.bad { color:var(--bad); background:var(--bad-soft); border-color:transparent; }
.tag.sim, .tag.warn { color:var(--warn); background:var(--warn-soft); border-color:transparent; }
.tag.design { color:var(--design); background:var(--design-soft); border-color:transparent; }
.tag.info { color:var(--info); background:var(--info-soft); border-color:transparent; }
.tag.ok::before, .tag.bad::before, .tag.sim::before, .tag.warn::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ---------- 6. cards, stats, grids ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-4); margin:var(--s-3) 0;
  box-shadow:var(--shadow); min-width:0; }
a.card, a.card:visited { display:block; color:var(--fg); text-decoration:none; transition:border-color .15s; }
a.card:hover { border-color:var(--accent); } a.card b { color:var(--accent); font-size:var(--fs-md); }
a.card b::after { content:" →"; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:var(--s-3); margin:var(--s-3) 0; }
.grid > .card { margin:0; }
.stat { padding:var(--s-3) var(--s-4); }
.stat b { display:block; font-size:var(--fs-xl); font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.3; }
.stat > span { color:var(--muted); font-size:var(--fs-sm); line-height:1.35; display:block; }
.stat b .tag { font-size:var(--fs-sm); }
.section-title { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:600;
  margin:var(--s-6) 0 var(--s-2); }
.hero { padding:var(--s-4) 0 var(--s-2); }
.hero h1 { font-size:var(--fs-3xl); margin:var(--s-2) 0 var(--s-3); max-width:20ch; }
.eyebrow { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); font-weight:700; }
.page-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-2); }
.page-head h1 { margin-bottom:var(--s-1); }

/* ---------- 7. buttons ---------- */
button, .btn { font:inherit; font-size:var(--fs-md); font-weight:600; line-height:1.2; display:inline-flex; align-items:center;
  justify-content:center; gap:var(--s-2); min-height:var(--tap); padding:var(--s-2h) var(--s-4); border-radius:var(--r-md);
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-fg); cursor:pointer; text-decoration:none; }
button:hover, .btn:hover { filter:brightness(1.08); }
a.btn, a.btn:visited, a.btn:hover { color:var(--accent-fg); text-decoration:none; }
button.ghost, .btn.ghost { background:transparent; color:var(--accent); border-color:var(--line-strong); }
a.btn.ghost, a.btn.ghost:visited { color:var(--accent); }
button.ghost:hover, .btn.ghost:hover { border-color:var(--accent); filter:none; background:var(--accent-soft); }
button.danger { background:transparent; color:var(--bad); border-color:var(--line-strong); }
button.danger:hover { border-color:var(--bad); background:var(--bad-soft); filter:none; }
button.sm, td button { min-height:32px; padding:var(--pad-btn-sm); font-size:var(--fs-sm); border-radius:var(--r-sm); }
button:disabled, button:disabled:hover { opacity:.45; cursor:not-allowed; filter:none; }
.row { display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center; }
.row > input { flex:1 1 200px; min-width:0; }
.actions { display:flex; flex-wrap:wrap; gap:var(--s-2); margin:var(--s-4) 0 0; }

/* ---------- 8. forms ---------- */
input, textarea, select { font:inherit; font-size:var(--fs-md); color:var(--fg); background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-md); min-height:var(--tap); padding:var(--s-2h) var(--s-3); width:100%; max-width:100%; }
textarea { min-height:auto; } select { width:auto; padding-right:var(--indent-3); }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.8; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--focus); outline-offset:0; border-color:transparent; }
.stack label { display:block; margin:var(--s-4) 0 var(--s-1); font-weight:600; font-size:var(--fs-sm); }
.stack label:first-child { margin-top:0; }
.stack .hint { margin:var(--s-1) 0 0; }
.checkboxes label { display:flex; gap:var(--s-2); align-items:center; font-weight:400; font-size:var(--fs-md); margin:var(--s-2) 0; }
.checkboxes input { width:20px; height:20px; min-height:0; margin:0; accent-color:var(--accent); flex:none; }
fieldset.plain { border:0; padding:0; margin:var(--s-4) 0 0; min-width:0; }
fieldset.plain legend { padding:0; font-weight:600; font-size:var(--fs-sm); }
.stack p.err { margin:var(--s-1) 0 0; font-size:var(--fs-sm); } .stack p.err:empty { display:none; }
input[aria-invalid="true"] { border-color:var(--bad); }
/* numbered steps of a flow, the current one marked (provider sign-up: apply -> wait for approval -> serve) */
ol.flow-steps { list-style:none; padding:0; margin:var(--s-4) 0; display:grid; gap:var(--s-2); counter-reset:fs; }
ol.flow-steps li { position:relative; padding:var(--s-2) var(--s-3) var(--s-2) var(--indent-6); border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); font-size:var(--fs-sm); min-width:0; }
ol.flow-steps li::before { counter-increment:fs; content:counter(fs); position:absolute; left:var(--s-3); top:var(--s-2); width:22px; height:22px;
  border-radius:50%; display:grid; place-items:center; font-size:var(--fs-xs); font-weight:700; color:var(--muted); border:1.5px solid var(--line-strong); }
ol.flow-steps li b { display:block; font-size:var(--fs-md); }
ol.flow-steps li span { display:block; color:var(--muted); }
ol.flow-steps li.now { border-color:var(--accent); }
ol.flow-steps li.now::before { color:var(--accent-fg); background:var(--accent); border-color:var(--accent); }
ol.flow-steps li.done::before { content:"✓"; color:var(--ok); background:var(--ok-soft); border-color:transparent; }
@media (min-width: 720px) { ol.flow-steps { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
details > summary { cursor:pointer; color:var(--accent); font-weight:500; margin:var(--s-3) 0; }

/* ---------- 9. tables (phones: every row becomes a labelled card; app.js copies each header into data-label) ---------- */
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:var(--s-2h) var(--s-2h); border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.05em; }
tbody tr:hover td { background:var(--surface-2); }
tbody tr:last-child td { border-bottom:none; }
@media (max-width: 560px) {
  table thead { display:none; }
  table tr { display:block; border:1px solid var(--line); border-radius:var(--r-md); margin:var(--s-2) 0; padding:var(--s-1) var(--s-3);
    background:var(--surface); }
  tbody tr:hover td { background:transparent; }
  table td { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1) var(--s-3); justify-content:space-between; border:none; padding:var(--s-1h) 0;
    border-bottom:1px solid var(--line); }
  table td:last-child { border-bottom:none; }
  table td .mono { flex:1 1 auto; text-align:right; }
  table td::before { content:attr(data-label); color:var(--muted); flex:0 0 38%; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.05em; }
  table td[data-label=""]::before { content:none; }
  table td:empty { display:none; }
  table td > div { flex-basis:100%; }
  table td > .meter { flex:1 1 100%; }
  .card > .scroll, .card .scroll { margin:0 calc(-1 * var(--s-1)); }
}
.bar { height:8px; background:var(--accent); border-radius:var(--r-pill); min-width:2px; }
/* a meter: the whole track is shown, so 2% and 50% read differently and an empty one still shows the goal (meter() in app.js) */
.meter { display:block; width:100%; height:8px; background:var(--line); border-radius:var(--r-pill); overflow:hidden; }
.meter > span { display:block; height:100%; background:var(--accent); border-radius:var(--r-pill); min-width:2px; }
.meter.zero > span { min-width:0; }

/* ---------- 10. lists: checks, steps, key-value ---------- */
ul.checks { list-style:none; padding:0; margin:var(--s-2) 0; }
ul.checks li { position:relative; padding:var(--s-1h) 0 var(--s-1h) var(--indent-3); margin:0; border-bottom:1px solid var(--line); }
ul.checks li:last-child { border-bottom:none; }
ul.checks li::before { content:"✓"; position:absolute; left:0; top:7px; width:20px; height:20px; border-radius:50%; font-size:var(--fs-xs); font-weight:700;
  display:grid; place-items:center; color:var(--ok); background:var(--ok-soft); }
ul.checks li.no::before { content:"✗"; color:var(--bad); background:var(--bad-soft); }
ul.checks li .mono { display:block; color:var(--muted); font-size:var(--fs-xs); }
ul.checks li .why { display:block; color:var(--muted); font-size:var(--fs-sm); line-height:1.4; margin-top:var(--s-0); }
ul.steps { list-style:none; padding:0; margin:var(--s-2) 0; counter-reset:step; }
ul.steps li { position:relative; padding:var(--s-1h) 0 var(--s-1h) var(--indent-4); }
ul.steps li::before { counter-increment:step; content:counter(step); position:absolute; left:0; top:5px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:var(--fs-xs); font-weight:700; color:var(--muted); border:1.5px solid var(--line-strong); }
ul.steps li.done::before { content:"✓"; color:var(--ok); background:var(--ok-soft); border-color:transparent; }
dl.kv { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:var(--s-1h) var(--s-4); margin:var(--s-2) 0; font-size:var(--fs-sm); }
dl.kv dt { color:var(--muted); } dl.kv dd { margin:0; min-width:0; overflow-wrap:anywhere; }
ol.numbered { padding-left:1.3em; } ol.numbered li { margin:var(--s-1) 0; }

/* ---------- 11. key box, verdict ---------- */
.keybox { border:1px solid var(--accent); background:var(--accent-soft); border-radius:var(--r-md); padding:var(--s-3) var(--s-4); margin:var(--s-3) 0; }
.keybox > b { font-size:var(--fs-sm); color:var(--accent); }
.keybox code { display:block; font-size:var(--fs-key); margin:var(--s-2) 0 var(--s-3); padding:var(--s-2) var(--s-3); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm); user-select:all; }
.keybox .note { margin-bottom:0; }
.result { display:flex; gap:var(--s-3); align-items:flex-start; border-radius:var(--r-lg); padding:var(--s-4); margin:var(--s-4) 0; border:1px solid;
  font-size:var(--fs-lg); font-weight:700; line-height:1.3; }
.result::before { flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:var(--fs-lg); }
.result.pass { border-color:var(--ok); color:var(--ok); background:var(--ok-soft); } .result.pass::before { content:"✓"; background:var(--ok); color:var(--surface); }
.result.fail { border-color:var(--bad); color:var(--bad); background:var(--bad-soft); } .result.fail::before { content:"✗"; background:var(--bad); color:var(--surface); }
.result small { display:block; font-weight:400; font-size:var(--fs-sm); color:var(--fg); margin-top:var(--s-1); }

/* ---------- 12. the proof explainer: how a receipt proves the paid work ---------- */
.proof { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-4); margin:var(--s-3) 0; box-shadow:var(--shadow); }
.proof > summary { list-style:none; margin:0; color:var(--fg); font-weight:700; font-size:var(--fs-lg); display:flex; justify-content:space-between; gap:var(--s-2); }
.proof > summary::-webkit-details-marker { display:none; }
.proof > summary::after { content:"Hide"; font-size:var(--fs-sm); font-weight:500; color:var(--accent); }
.proof:not([open]) > summary::after { content:"Show"; }
.proof > summary > span { min-width:0; }
.proof:not([open]) { padding:var(--s-3) var(--s-4); } .proof:not([open]) > summary { font-size:var(--fs-md); }
.proof-sum { display:block; font-size:var(--fs-sm); font-weight:400; color:var(--muted); margin-top:var(--s-0); }
.proof[open] .proof-sum { display:none; }
.proof ol { list-style:none; padding:0; margin:var(--s-3) 0 0; display:grid; gap:var(--s-3); counter-reset:p; }
.proof ol li { position:relative; padding-left:var(--indent-5); font-size:var(--fs-sm); line-height:1.5; }
.proof ol li::before { counter-increment:p; content:counter(p); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:var(--fs-sm); background:var(--accent-soft); color:var(--accent); }
.proof ol li b { display:block; font-size:var(--fs-md); color:var(--fg); margin-bottom:var(--s-0); }
.proof .limits { margin:var(--s-4) 0 0; padding:var(--s-3); border-radius:var(--r-md); background:var(--surface-2); font-size:var(--fs-sm); }
.proof .limits b { display:block; margin-bottom:var(--s-1); }
.proof .limits ul { margin:0; padding-left:1.2em; } .proof .limits li { margin:var(--s-0) 0; }
@media (min-width: 720px) { .proof ol { grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-5); } }

/* ---------- 12b. proof, summary first: verdict -> facts -> technical details (closed) ---------- */
.result.sm { font-size:var(--fs-md); padding:var(--s-3); margin:var(--s-3) 0; }
.result.sm::before { width:24px; height:24px; font-size:var(--fs-sm); }
dl.facts { font-size:var(--fs-md); }
details.tech { border-top:1px solid var(--line); margin-top:var(--s-4); padding-top:var(--s-1); }
details.tech > summary { font-weight:600; }
details.tech code.raw { font-size:var(--fs-2xs); color:var(--muted); word-break:normal; }
.hash { display:inline-flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
.hash code { word-break:normal; }
.hash button.copy { min-height:28px; padding:var(--s-0) var(--s-2); font-size:var(--fs-xs); }

/* the buyer's receipt list: one compact row each (model + charge, then when · hour · short id), Open on the right */
ul.rlist { list-style:none; padding:0; margin:var(--s-2) 0; }
ul.rlist li { display:flex; align-items:center; gap:var(--s-3); padding:var(--s-2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
ul.rlist li:last-child { border-bottom:none; }
ul.rlist .rl-main { flex:1 1 auto; min-width:0; }
ul.rlist .rl-main b { font-weight:600; }
ul.rlist .rl-main > span { font-variant-numeric:tabular-nums; float:right; }
ul.rlist small { display:block; font-size:var(--fs-xs); }
ul.rlist small .mono { word-break:normal; }
ul.rlist li.empty { display:block; color:var(--muted); }
ul.rlist .skel { width:100%; }

/* ---------- 12c. code tabs (first call), loading, empty, dialog ---------- */
.code-tabs [role=tablist] { gap:var(--s-1); margin:var(--s-2) 0; }
.code-tabs [role=tab][aria-selected="true"] { background:var(--accent-soft); border-color:var(--accent); }
.code { margin:var(--s-2) 0; min-width:0; }
.code-head { display:flex; align-items:center; gap:var(--s-2); font-size:var(--fs-xs); color:var(--muted); }
.code-head > span:first-child { margin-right:auto; }
.code-head button.copy { min-height:28px; padding:var(--s-0) var(--s-2h); font-size:var(--fs-xs); }
.code pre { margin-top:var(--s-1); white-space:pre; overflow-x:auto; word-break:normal; }
.steps-inline { display:grid; gap:var(--s-3); }
.loading { display:inline-flex; align-items:center; gap:var(--s-2); color:inherit; }
.loading::before { content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent;
  animation:spin .8s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.skel { display:inline-block; width:80%; height:12px; border-radius:var(--r-sm); background:var(--surface-2);
  animation:pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity:.5; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .loading::before, .skel { animation:none; } }
/* reduced motion, everywhere: nothing spins, fades, slides or scrolls smoothly (the words "Loading…" stay) */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important;
  scroll-behavior:auto !important; } }
/* "Skip to content": the first Tab stop on every page, hidden until it has focus (WCAG 2.4.1) */
a.skip { position:absolute; left:var(--s-3); top:-100px; z-index:100; padding:var(--s-2) var(--s-3); background:var(--surface);
  color:var(--fg); border:2px solid var(--focus); border-radius:var(--r-md); font-weight:600; }
a.skip:focus { top:var(--s-2); }
tr.empty td { color:var(--muted); }
dialog.ask { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); color:var(--fg); padding:var(--s-4);
  max-width:min(420px, calc(100vw - 32px)); box-shadow:var(--shadow); }
dialog.ask::backdrop { background:rgba(0,0,0,.35); }

/* ---------- 13. style guide page only ---------- */
.swatches { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--s-2); }
.swatch { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface); font-size:var(--fs-xs); }
.swatch i { display:block; height:44px; border-bottom:1px solid var(--line); }
.swatch span { display:block; padding:var(--s-1h) var(--s-2); } .swatch code { color:var(--muted); }
.scale-row { display:flex; align-items:center; gap:var(--s-3); margin:var(--s-1) 0; font-size:var(--fs-sm); }
.scale-row code { width:84px; flex:none; color:var(--muted); }
.scale-row .sp { background:var(--accent); height:12px; border-radius:var(--r-xs); }
.scale-row .rd { width:44px; height:44px; background:var(--accent-soft); border:1px solid var(--accent); }

/* ---------- 14. wider screens ---------- */
@media (min-width: 720px) {
  :root { --gutter:24px; }
  h1 { font-size:var(--fs-3xl); }
  .hero h1 { font-size:var(--fs-display-2); }
  .card, .proof { padding:var(--s-5); }
  .stat { padding:var(--s-4) var(--s-5); }
}
@media (max-width: 560px) {
  dl.kv { grid-template-columns:minmax(0, 1fr); gap:0; } dl.kv dd { margin-bottom:var(--s-2); }
  dl.kv.facts { grid-template-columns:max-content minmax(0, 1fr); gap:var(--s-1) var(--s-3); font-size:var(--fs-sm); } dl.kv.facts dd { margin-bottom:0; }
  .row > input, .row > select { flex-basis:100%; }
  .row > button { flex:1 1 auto; }
  .row > h3 ~ button, .row > .h-card ~ button { flex:0 0 auto; }   /* a card's title row: the action keeps its own size */
}
@media (max-width: 560px) {   /* phone: brand, "Signed in" and the Menu button on one row */
  header.top .who .mono, header.top .who .dot { display:none; }
}

/* ---------- 15. landing page (index.html): hero + a live receipt, three steps, the proof line, proven / not yet,
   prices, two ways in. Sentence-case headings, no kicker labels, no arrows on links. ---------- */
body.landing { background:var(--canvas); }
.land { display:grid; gap:var(--s-6); padding:var(--s-4) 0 var(--s-2); }
.land h1 { font-size:var(--fs-display-1); line-height:1.08; letter-spacing:-0.03em; margin:var(--s-2) 0 var(--s-4); max-width:15ch; }
.land .lede { margin:0; }
.land .actions { margin-top:var(--s-5); }
.land-aside { font-size:var(--fs-sm); margin:var(--s-3) 0 0; }
.land-note { font-size:var(--fs-sm); color:var(--muted); max-width:56ch; margin:var(--s-5) 0 0; padding:var(--s-0) 0 var(--s-0) var(--s-3);
  border-left:3px solid var(--warn); }
.land-note b { color:var(--fg); }
.land-sec { margin-top:var(--s-7); }
.land-sec > h2 { font-size:var(--fs-2xl); letter-spacing:-0.02em; margin:0 0 var(--s-2); }
.land-sec > .sub { color:var(--muted); max-width:64ch; margin:0 0 var(--s-4); }

/* the receipt slip: the live check of this gateway's latest paid call, drawn as a paper receipt with a torn edge */
.slip-wrap { filter:drop-shadow(0 0 1px var(--line-strong)) drop-shadow(0 10px 18px var(--slip-shadow)); min-width:0; }
.slip { background:var(--surface); border-radius:var(--r-md) var(--r-md) 0 0; padding:var(--s-4) var(--s-4) calc(var(--s-4) + var(--s-2h));
  font-family:var(--font-mono); font-size:var(--fs-code); line-height:1.55;
  -webkit-mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
.slip-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-1) var(--s-3);
  font-family:var(--font); font-size:var(--fs-md); font-weight:700; }
.slip-head code { font-size:var(--fs-code); font-weight:400; color:var(--muted); word-break:normal; }
.slip-sub { font-family:var(--font); font-size:var(--fs-sm); color:var(--muted); margin:var(--s-0) 0 0; }
.slip hr { border:0; border-top:1px dashed var(--line-strong); margin:var(--s-3) 0; }
.slip .r { display:flex; justify-content:space-between; gap:var(--s-3); }
.slip .r > span:first-child { color:var(--muted); }
.slip .r > span:last-child { text-align:right; min-width:0; overflow-wrap:anywhere; }
.slip ul.checks { font-family:var(--font); font-size:var(--fs-sm); margin:0; }
.slip ul.checks li { padding:var(--s-hair) 0 var(--s-hair) var(--indent-2); border:none; }
.slip ul.checks li::before { top:4px; width:18px; height:18px; font-size:var(--fs-2xs); }
.slip-verdict { font-family:var(--font); font-weight:700; font-size:var(--fs-md); color:var(--ok); margin:0; }
.slip-verdict.fail { color:var(--bad); }
.slip-foot { font-family:var(--font); font-size:var(--fs-sm); color:var(--muted); margin:var(--s-2) 0 0; }
.slip .skel { width:100%; height:13px; }

/* three steps, numbered */
ol.land-steps { list-style:none; padding:0; margin:0 0 var(--s-4); display:grid; gap:var(--s-4); counter-reset:ls; }
ol.land-steps li { position:relative; padding-left:var(--indent-6); min-width:0; }
ol.land-steps li::before { counter-increment:ls; content:counter(ls); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font:700 var(--fs-sm)/1 var(--font-mono); color:var(--accent); background:var(--accent-soft); }
ol.land-steps b { display:block; font-size:var(--fs-md); }
ol.land-steps span { display:block; color:var(--muted); font-size:var(--fs-sm); }

/* the proof line: four moments of one call, joined by a rule (down on a phone, across on a wide screen) */
ol.land-proof { list-style:none; padding:0; margin:0; display:grid; counter-reset:lp; }
ol.land-proof li { position:relative; padding:0 0 var(--s-5) var(--indent-6); min-width:0; }
ol.land-proof li::before { counter-increment:lp; content:counter(lp); position:absolute; left:0; top:0; z-index:1; width:30px; height:30px;
  border-radius:50%; display:grid; place-items:center; font:700 var(--fs-sm)/1 var(--font-mono); color:var(--accent);
  background:var(--canvas); border:2px solid var(--accent); }
ol.land-proof li::after { content:""; position:absolute; left:14px; top:30px; bottom:0; width:2px; background:var(--line-strong); }
ol.land-proof li:last-child { padding-bottom:0; } ol.land-proof li:last-child::after { display:none; }
ol.land-proof .when { display:block; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); margin-bottom:var(--s-0); }
ol.land-proof b { display:block; font-size:var(--fs-md); }
ol.land-proof p { margin:var(--s-1) 0 0; font-size:var(--fs-sm); color:var(--muted); }

/* two cards side by side on a wide screen (proven / not yet, buyers / providers) */
.land-two { display:grid; gap:var(--s-3); margin:var(--s-3) 0; }
.land-two > .card { margin:0; display:flex; flex-direction:column; }
.land-two > .card > .actions { margin-top:auto; padding-top:var(--s-4); }
ul.plain-list { list-style:none; padding:0; margin:var(--s-2) 0; }
ul.plain-list li { position:relative; padding:var(--s-1h) 0 var(--s-1h) var(--indent-1); border-bottom:1px solid var(--line); }
ul.plain-list li:last-child { border-bottom:none; }
ul.plain-list li::before { content:""; position:absolute; left:3px; top:17px; width:10px; height:2px; border-radius:var(--r-xs); background:var(--muted); }   /* r-xs on a 2 px bar draws as 1 px */
.land-two ul.checks li, .land-two ul.plain-list li { font-size:var(--fs-sm); }
.measured h3 { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.measured ul { margin:var(--s-2) 0; padding-left:1.2em; font-size:var(--fs-sm); } .measured li { margin:var(--s-0) 0; }

/* a table with sentence-case headers and right-aligned money (the price list) */
table.plain th, table.plain td::before { text-transform:none; letter-spacing:0; font-size:var(--fs-sm); }
table.plain td b { font-weight:600; }
@media (min-width: 561px) { table.plain .num { text-align:right; } }

@media (max-width: 560px) {
  .land .actions .btn { flex:1 1 100%; }
  table.plain td:first-child::before { content:none; }   /* the model name heads its own card */
  table.plain td:first-child { font-size:var(--fs-md); }
  table.plain td::before { flex:1 1 auto; }
}
@media (min-width: 720px) {
  ol.land-steps { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-5); }
  ol.land-proof { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s-4); }
  ol.land-proof li { padding:var(--indent-6) var(--s-2) 0 0; }
  ol.land-proof li::after { left:30px; right:calc(-1 * var(--s-4)); top:14px; bottom:auto; width:auto; height:2px; }
  .land-two { grid-template-columns:1fr 1fr; }
}
@media (min-width: 880px) {
  .land { grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr); gap:var(--s-7); align-items:start; padding-top:var(--s-6); }
  .land h1 { font-size:var(--fs-display-3); }
  .land .lede { font-size:var(--fs-lede-lg); }
  .slip-wrap { margin-top:var(--s-2); }
}
.progress { margin-bottom:var(--s-4); }
.progress p { margin-bottom:var(--s-2); }
.keybox code { word-break:break-all; }   /* a key or link is one unbroken string: fill each line, never break at its "-" */
@media (min-width: 561px) { td.meter-cell { width:30%; vertical-align:middle; } }
/* the home page's "GemmX in one minute": three plain points, then live counts from this gateway */
.land-sec#minute .actions { margin-top:var(--s-4); }
.land-sec .card.live { margin-top:var(--s-4); }
.land-sec .card.live h3 .muted { font-weight:400; font-size:var(--fs-sm); }
.grid.stats4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .grid.stats4 { grid-template-columns:repeat(4, minmax(0, 1fr)); } }