/* ETA-CODE — eta-code.com
   ----------------------------------------------------------------------
   TWO THEMES, BOTH DESIGNED. Not one inverted.

   The product's own dashboard is dark and so is the film, so dark is where
   the brand lives. But a website is opened at two in the afternoon on a work
   laptop at least as often as at night, and a page that forces a dark slab
   onto someone reading in daylight reads as a hobby project. Light is
   therefore a real design with its own paper, its own ink and its own
   shadows, not the dark one with the colours flipped.

   The system preference decides, and a switch in the header overrules it.

   TYPEFACE. Inter, the same family the film is set in, self-hosted and
   subset to the characters this site uses — 24KB a weight instead of 600KB.
   Self-hosted matters for more than speed: the privacy page claims nothing
   is loaded from another company's servers, and a Google Fonts link would
   quietly make that claim false.                                          */

/* ------------------------------------------------------------- typeface */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/inter-900.woff2) format('woff2')}

/* --------------------------------------------------------------- tokens */
:root{
  --f: Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* type scale, fluid */
  --t-hero: clamp(2.3rem, 1.3rem + 3.6vw, 4.1rem);
  --t-h1:   clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  --t-h2:   clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  --t-h3:   1.08rem;
  --t-lead: clamp(1.05rem, .98rem + .45vw, 1.27rem);
  --t-body: 1.02rem;
  --t-sm:   .9rem;
  --t-xs:   .8rem;

  --sp: clamp(56px, 7vw, 104px);      /* section rhythm */
  --wrap: 1160px;
  --measure: 68ch;
  --r: 16px;
  --r-sm: 10px;

  /* brand constants, identical in both themes */
  --gold:  #b08d3f;
  --gold-2:#d8b870;
  --up:    #1f8a56;
  --down:  #bf4b3c;
}

/* light — the default, and a real design */
:root, :root[data-theme="light"]{
  --bg:      #fbfaf8;
  --bg-2:    #f3f1ec;
  --panel:   #ffffff;
  --ink:     #16181b;
  --ink-2:   #4b5058;
  /* 2026-10-19. #6c727c measured 4.29:1 on --bg-2, which is where the
     footer, every .note and twenty-two h3s sit. Under 4.5 is under 4.5.
     #636972 is 4.90 there and 5.53 on white. */
  --mute:    #636972;
  --line:    #e2ded6;
  --line-2:  #cfcabf;
  --shadow:  0 1px 2px rgba(22,24,27,.05), 0 8px 24px -12px rgba(22,24,27,.16);
  --shadow-l:0 2px 6px rgba(22,24,27,.06), 0 24px 56px -24px rgba(22,24,27,.24);
  /* 4.33:1 on --bg-2 before; 4.96 now. The eyebrow and the mail link
     are the two places it carries real text. */
  --accent:  #7f6424;
  --accent-bg:#fdf6e6;
  --screen:  #0e1013;       /* product screenshots keep their own dark */
  --up-ink:  #146b41;
  --down-ink:#a53a2c;
  --track-edge:#8e8a80;   /* 3.44:1 on --panel, 3.30 on --bg */
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:      #0e0f12;
    --bg-2:    #14161a;
    --panel:   #181b20;
    --ink:     #eceef1;
    --ink-2:   #b3b9c2;
    --mute:    #878d97;
    --line:    #262a31;
    --line-2:  #353a43;
    --shadow:  0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
    --shadow-l:0 2px 8px rgba(0,0,0,.5), 0 30px 64px -28px rgba(0,0,0,.85);
    --accent:  #d8b870;
    --accent-bg:#1d1a12;
    --screen:  #0b0d10;
    --up-ink:  #5fd39b;
    --down-ink:#e49287;
    --track-edge:#666e7c;  /* 3.36:1 on --panel, 3.73 on --bg */
    --gold:    #c9a85f;
    --up:      #5fd39b;
    --down:    #e49287;
  }
}
:root[data-theme="dark"]{
  --bg:#0e0f12; --bg-2:#14161a; --panel:#181b20;
  --ink:#eceef1; --ink-2:#b3b9c2; --mute:#878d97;
  --line:#262a31; --line-2:#353a43;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-l:0 2px 8px rgba(0,0,0,.5), 0 30px 64px -28px rgba(0,0,0,.85);
  --accent:#d8b870; --accent-bg:#1d1a12; --screen:#0b0d10;
  --up-ink:#5fd39b; --down-ink:#e49287; --track-edge:#666e7c;
  --gold:#c9a85f; --up:#5fd39b; --down:#e49287;
}

/* ----------------------------------------------------------------- base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 var(--t-body)/1.62 var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
img{max-width:100%;height:auto;display:block}
/* An inline icon carries its own size. Without this a viewBox-only <svg>
   has no intrinsic dimensions and expands to fill its container - which is
   how a 16px arrow became a 700px chevron across the middle of the page. */
svg.icon{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em}
.more svg.icon{width:15px;height:15px;margin-left:.15em}
.btn svg.icon{width:16px;height:16px}
a{color:inherit}
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.022em;margin:0 0 .5em;font-weight:700}
h1{font-size:var(--t-h1);font-weight:800}
h2{font-size:var(--t-h2);font-weight:700}
h3{font-size:var(--t-h3);font-weight:650}
p{margin:0 0 1.05em;max-width:var(--measure)}
strong,b{font-weight:650;color:var(--ink)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mute{color:var(--mute)}
.up{color:var(--up-ink)}
.down{color:var(--down-ink)}
.gold{color:var(--accent)}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}

.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:200;background:var(--ink);color:var(--bg);
  padding:11px 18px;border-radius:var(--r-sm)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}
::selection{background:var(--accent);color:var(--bg)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,34px)}
.narrow{max-width:800px;margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------------- header */
.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:10px;min-height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.02rem;
  letter-spacing:-.03em;text-decoration:none;margin-right:auto}
.brand img{width:28px;height:28px;border-radius:7px}
.nav{display:flex;gap:2px;align-items:center}
.nav a{color:var(--ink-2);text-decoration:none;font-size:var(--t-sm);font-weight:500;
  padding:8px 11px;border-radius:9px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--bg-2)}
.nav a.on{color:var(--accent);font-weight:600}
.tools{display:flex;gap:8px;align-items:center;margin-left:8px}
.iconbtn{display:grid;place-items:center;width:38px;height:38px;flex:none;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.iconbtn:hover{border-color:var(--line-2)}
.iconbtn svg{width:17px;height:17px}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .moon,
:root:not([data-theme="light"]) .theme .moon{display:block}
:root[data-theme="dark"] .theme .sun,
:root:not([data-theme="light"]) .theme .sun{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme .moon{display:none}
  :root:not([data-theme="dark"]) .theme .sun{display:block}
}
.burger{display:none}
@media (max-width:940px){
  .burger{display:grid}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px clamp(18px,4vw,34px) 16px;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{padding:12px 10px;font-size:1rem}
}

/* ------------------------------------------------------------- sections */
/* The header is sticky, so anything scrolled to by an anchor or by the
   browser's own "find" lands underneath it. scroll-margin keeps the heading
   clear of it instead of hiding the first line of every section. */
section{position:relative;scroll-margin-top:84px}
h1,h2,h3{scroll-margin-top:84px}
.sec{padding:var(--sp) 0}
.sec-alt{background:var(--bg-2);border-block:1px solid var(--line)}
.eyebrow{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin:0 0 1em}
.lead{font-size:var(--t-lead);color:var(--ink-2);line-height:1.55}
.sec-head{max-width:var(--measure);margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{margin-bottom:.35em}
.sec-head p{margin-bottom:0}

/* ----------------------------------------------------------------- hero */
.hero{padding:clamp(48px,6vw,84px) 0 0;overflow:hidden;
  background:
    radial-gradient(1200px 520px at 78% -12%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 62%),
    radial-gradient(760px 420px at 4% 8%, color-mix(in srgb,var(--up) 7%,transparent), transparent 60%)}
/* min-width:0 ON THE CHILDREN, not just minmax(0,..) on the tracks.
   A grid item's default min-width is auto, which means min-CONTENT - so the
   dashboard's tab strip, which is wider than a phone, pushed its column
   50px past the page. .hero's overflow:hidden then quietly cut it off
   rather than showing a scrollbar, which is why it looked like a styling
   quirk instead of a layout bug. */
.hero-grid{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center}
.hero-grid>*{min-width:0}
.film>*{min-width:0}
.dash{min-width:0}
@media (max-width:1120px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:var(--t-hero);font-weight:800;letter-spacing:-.03em;max-width:15ch}
.hero .lead{max-width:52ch;margin-top:.9em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.9em}
.badges{display:flex;gap:7px 20px;flex-wrap:wrap;margin-top:1.9em;
  font-size:var(--t-sm);color:var(--mute)}
.badges span{display:inline-flex;align-items:center;gap:7px}
.badges svg{width:15px;height:15px;color:var(--up-ink);flex:none}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;
  font-weight:650;font-size:var(--t-sm);padding:13px 21px;border-radius:11px;
  border:1px solid transparent;transition:transform .12s ease, filter .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{filter:brightness(1.18)}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1407;
  box-shadow:var(--shadow)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--panel);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--mute)}
.btn-lg{padding:16px 26px;font-size:1rem}
.btn svg{width:16px;height:16px}

/* ------------------------------------------------------------ proof strip */
.proof{border-block:1px solid var(--line);background:var(--panel)}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.proof-in>div{background:var(--panel);padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,22px)}
.proof .n{display:block;font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.1}
.proof .l{display:block;font-size:var(--t-xs);color:var(--mute);margin-top:.5em;line-height:1.45}
@media (max-width:760px){.proof-in{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------ the screen */
.screen{position:relative;border-radius:var(--r);overflow:hidden;background:var(--screen);
  border:1px solid var(--line-2);box-shadow:var(--shadow-l)}
.screen img{width:100%}
.screen-cap{font-size:var(--t-xs);color:var(--mute);margin:.9em 0 0;max-width:46ch}
/* A rotated box is visually wider than its layout box, so the tilted
   panel's near corner was being shaved by the hero's overflow:hidden. A
   few pixels of inline padding gives the rotation somewhere to go. */
.tilt{transform:perspective(1600px) rotateY(-7deg) rotateX(2deg) scale(.978);
  padding-inline:6px}
@media (max-width:1120px){.tilt{transform:none}}

/* ----------------------------------------------------------- dashboard UI */
.dash{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:var(--screen);box-shadow:var(--shadow-l);color:#e8eaed}
/* THE TITLE BAR MUST NOT BREAK A WORD.
   flex defaults to nowrap, so the ROW never wrapped - but with no room the
   items shrank and the text inside them broke instead, turning the product's
   own name into "ETA-" over "CODE". Each item keeps its words whole; the
   symbol is the one allowed to truncate, because it is the least important
   thing in the bar and the only part that can afford to. */
.dash-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:#15181d;border-bottom:1px solid #262a31;font-size:var(--t-xs);
  flex-wrap:nowrap;min-height:40px}
.dash-bar>*{white-space:nowrap;flex:none}
.dash-bar .sym{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.dash-bar .dot{width:9px;height:9px;border-radius:50%;background:#2f343c}
.dash-bar .nm{font-weight:700;letter-spacing:-.02em;color:#fff}
.dash-bar .sym{color:#8b919b;font-family:var(--mono)}
.dash-bar .tag{margin-left:auto;font-size:11px;letter-spacing:.1em;color:#8b919b;
  border:1px solid #2f343c;padding:3px 8px;border-radius:999px}
/* The tabs scroll rather than wrap, with a fade on the right so it is
   visible that there is more than the viewport is showing. A tab strip that
   silently cuts off at RISK loses TRADES and CONTROL without telling
   anybody they exist. */
.dash-tabs{display:flex;overflow-x:auto;border-bottom:1px solid #262a31;background:#101317;
  scrollbar-width:none;position:relative;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
@supports not (mask-image:linear-gradient(90deg,#000,transparent)){
  .dash-tabs{-webkit-mask-image:none;mask-image:none}
}
.dash-tabs::-webkit-scrollbar{display:none}
.dash-tabs button{flex:1 0 auto;background:none;border:0;border-bottom:2px solid transparent;
  color:#8b919b;font:600 var(--t-xs)/1 var(--f);letter-spacing:.08em;padding:13px 16px;
  cursor:pointer;white-space:nowrap}
.dash-tabs button[aria-selected="true"]{color:var(--gold-2);border-bottom-color:var(--gold-2);
  background:#15181d}
.dash-body{padding:clamp(16px,2.4vw,24px);min-height:260px}
.dash-pane{display:none}
.dash-pane[data-on]{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.dash-why{font-size:var(--t-sm);color:#9aa1ab;margin:0 0 14px;max-width:62ch}
.dash-rows{display:grid;gap:1px;background:#23272e;border:1px solid #23272e;border-radius:9px;
  overflow:hidden}
.dash-rows div{display:flex;justify-content:space-between;gap:14px;background:#111419;
  padding:11px 14px;font-size:var(--t-sm);align-items:baseline}
.dash-rows span:first-child{color:#8b919b;min-width:0}
.dash-rows span:last-child{font-variant-numeric:tabular-nums;font-weight:600;color:#e8eaed;
  white-space:nowrap;flex:none}
.dash-rows .g{color:#5fd39b !important}
.dash-rows .r{color:#e49287 !important}
/*  this sits on the screenshot dark in BOTH themes, so it is a fixed
    colour rather than a themed one. #6e747e measured 4.05:1 there. */
.dash-note{font-size:var(--t-xs);color:#848a94;margin:14px 0 0}

/* ------------------------------------------------------------- the steps */
.steps{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;counter-increment:s;position:relative;box-shadow:var(--shadow)}
.step:before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;background:var(--accent-bg);color:var(--accent);font-weight:800;
  font-size:.86rem;margin-bottom:14px}
.step b{display:block;margin-bottom:.35em}
.step p{font-size:var(--t-sm);color:var(--mute);margin:0}
.verdict{margin-top:clamp(24px,3vw,36px);padding:24px 26px;border-radius:var(--r);
  background:var(--accent-bg);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.verdict p{margin:0;max-width:none}
.verdict p+p{margin-top:.7em}
.verdict strong{color:var(--accent)}

/* --------------------------------------------------------------- cards */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.45em}
.card p{font-size:var(--t-sm);color:var(--mute);margin:0}
.card .k{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:.9em}

/* -------------------------------------------------------------- charts */
.chart{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.6vw,28px);box-shadow:var(--shadow)}
.chart h3{margin-bottom:.2em}
.chart .sub{font-size:var(--t-sm);color:var(--mute);margin:0 0 20px}
/* No <svg> text anywhere. See the note above bar_chart() in make_site.py:
   text in an svg scales with the viewBox and rendered at 5.1px on a phone. */
.chart .cmp{margin:0}
.chart .cmp li:first-child{border-top:0;padding-top:0}

/* --------------------------------------------------------------- table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:640px}
caption{text-align:left;color:var(--mute);font-size:var(--t-sm);padding:18px 20px 0}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
thead th{font-size:var(--t-xs);letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);font-weight:600;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody th{font-weight:700}
tbody th .who{display:block;font-weight:400;color:var(--mute);font-size:var(--t-xs);
  margin-top:2px}
tr.hi{background:var(--accent-bg)}
tr.hi th{box-shadow:inset 3px 0 0 var(--accent)}

/* ----------------------------------------------------------------- note */
.note{font-size:var(--t-sm);color:var(--mute);background:var(--bg-2);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:16px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:1.5em 0;
  max-width:var(--measure)}
.note b{color:var(--ink)}
.note a{color:var(--accent)}

/* ------------------------------------------------------------------ faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-weight:650;font-size:1.03rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary:after{transform:rotate(-135deg)}
.faq .a{padding:0 0 22px;color:var(--ink-2);font-size:var(--t-sm)}
.faq .a p{font-size:var(--t-sm)}
.faq .a p:last-child{margin-bottom:0}

/* ----------------------------------------------------------------- misc */
.ticks{list-style:none;padding:0;margin:1.2em 0;max-width:var(--measure)}
.ticks li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:var(--t-sm)}
.ticks li:first-child{border-top:0}
.ticks li:before{content:"";position:absolute;left:5px;top:19px;width:8px;height:8px;
  border-radius:50%;background:var(--accent)}
.more{margin-top:1.2em}
.more a{color:var(--accent);text-decoration:none;font-weight:650;font-size:var(--t-sm)}
.more a:hover{text-decoration:underline}
.cta-band{background:
  radial-gradient(900px 340px at 50% 0, color-mix(in srgb,var(--accent) 14%,transparent), transparent 70%),
  var(--bg-2)}
.cta-band .btn-gold{box-shadow:var(--shadow-l)}
.price{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em}

/* bars */
.bars{list-style:none;padding:0;margin:0}
.bars li{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr) auto;
  gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
.bars li:first-child{border-top:0}
/*  THE EMPTY TRACK IS THE DEPOSIT, SO IT HAS TO BE VISIBLE. 2026-10-19.
    Victor, of the live site: "this can hardly be seen." The track was
    --bg-2 inside a --line hairline, which measured 1.05:1 against the
    panel in dark and 1.13 in light - invisible in both. Four of the six
    agents have NO fill at all (they never went below the deposit), so on
    those rows the empty track is the entire picture.

    The obvious fix is wrong. Darkening the track itself to clear 3:1
    against the panel takes it to about #949086, and the red fill inside
    it then measures 1.54:1 - you would see the track and lose the bar.
    The two cannot both be mid-tone against each other.

    So the BOUNDARY does the work and the interior stays light: the track
    keeps --bg-2, which holds the fill at 4.34:1 (red) and 3.85:1 (green),
    and the border moves to --track-edge, which is >=3:1 against both
    surfaces a meter is ever drawn on. An outlined capsule reads as a bar
    at a glance; a filled grey one reads as a bar with nothing in it. */
.meter{height:16px;border-radius:6px;background:var(--bg-2);border:1px solid var(--track-edge);
  overflow:hidden}
.meter span{display:block;height:100%;border-radius:5px}
.meter .f-up{background:var(--up)}
.meter .f-down{background:var(--down)}
.bval{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;font-size:var(--t-sm)}
@media (max-width:620px){
  .bars li{grid-template-columns:1fr auto}
  .meter{grid-column:1/-1}
}

/* ---------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(40px,5vw,64px) 0 32px}
.footgrid{display:grid;gap:30px;grid-template-columns:1.6fr 1fr 1fr;padding-bottom:28px;
  border-bottom:1px solid var(--line);margin-bottom:22px}
@media (max-width:760px){.footgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footgrid{grid-template-columns:1fr}}
.footgrid h3{font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;
  color:var(--mute);font-weight:700;margin-bottom:1em}
.footgrid a{display:block;color:var(--ink-2);text-decoration:none;font-size:var(--t-sm);
  padding:5px 0;word-break:break-word}
.footgrid a:hover{color:var(--ink)}
.footgrid p{font-size:var(--t-sm);color:var(--mute);margin:0}
.legal{font-size:var(--t-sm);color:var(--ink-2);margin:0 0 .5em;max-width:none}
.legal.sm{color:var(--mute);font-size:var(--t-xs)}
.legal a{color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .tilt{transform:none}
}


/* ------------------------------------------- components the inner pages use
   The landing page is the shop window; these are the rooms behind it. Same
   tokens, same shadows, same type - so a visitor who clicks through from the
   home page does not feel they have left the site.                        */
.sec-warn{background:linear-gradient(180deg,
  color-mix(in srgb,var(--down) 7%,transparent),transparent 70%);
  border-block:1px solid var(--line)}
.hi-card{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:linear-gradient(180deg,var(--accent-bg),var(--panel))}
.card h3 .who{display:block;color:var(--accent);font-weight:500;font-size:var(--t-sm);
  margin-top:3px}
.card dl{margin:1.1em 0 0;display:grid;gap:0}
.card dl div{display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);padding:9px 0;font-size:var(--t-sm)}
.card dt{color:var(--mute)}
.card dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* the instrument comparison, as a list rather than an svg */
.cmp{list-style:none;padding:0;margin:1.5em 0}
.cmp li{display:grid;grid-template-columns:minmax(150px,1.1fr) 2fr minmax(118px,auto);
  gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.cmp li:first-child{border-top:0}
.clab b{display:block}
.clab span{color:var(--mute);font-size:var(--t-xs)}
.cbar{background:var(--bg-2);border:1px solid var(--line);border-radius:6px;
  height:16px;overflow:hidden}
.cbar span{display:block;height:100%;background:var(--line-2)}
.cmp li.eta .cbar span{background:var(--up)}
.cmp li.eta .clab b,.cmp li.eta .cval b{color:var(--up-ink)}
.cval{text-align:right}
.cval b{display:block;font-variant-numeric:tabular-nums}
.cval span{color:var(--mute);font-size:var(--t-xs)}
@media (max-width:620px){
  .cmp li{grid-template-columns:1fr auto;gap:8px}
  .cbar{grid-column:1/-1}
}

/* the risk bars on their own page */
.blab{font-weight:650}
.bnote{grid-column:2/-1;color:var(--mute);font-size:var(--t-xs);margin-top:-7px}
@media (max-width:620px){.bnote{grid-column:1/-1;margin-top:0}}

/* updates */
/*  THE LEARN ENTRIES ARE <details>, 2026-10-19.
    Collapsed, a reader sees an index they can scan; open, the piece reads
    exactly as it did before. Everything below styles the summary so it
    looks like the head of an article rather than like a form control -
    the default triangle is removed and replaced with a chevron that turns,
    because a browser's own marker sits on the first line and this summary
    is four lines tall.  */
.post{border-top:1px solid var(--line);padding:28px 0}
.post:first-of-type{border-top:0}
.post h2{margin-top:.25em;font-size:var(--t-h3);font-size:1.3rem}
details.post > summary{list-style:none;cursor:pointer;display:block;
  position:relative;padding-right:42px;border-radius:var(--r-sm);
  outline-offset:4px}
details.post > summary::-webkit-details-marker{display:none}
details.post > summary::after{content:"";position:absolute;right:10px;top:26px;
  width:11px;height:11px;border-right:2.5px solid var(--accent);
  border-bottom:2.5px solid var(--accent);transform:rotate(45deg);
  transition:transform .18s ease}
details.post[open] > summary::after{transform:rotate(-135deg)}
details.post > summary:hover h2{color:var(--accent)}
details.post > summary h2{transition:color .15s ease}
.post .teaser{color:var(--mute);font-size:var(--t-sm);margin:.45em 0 0;
  max-width:var(--measure)}
.post .more-link{display:inline-block;margin-top:.7em;font-size:var(--t-sm);
  font-weight:600;color:var(--accent)}
details.post[open] .teaser,details.post[open] .more-link{display:none}
.post-body{padding-top:4px}
/*  a closed <details> is still printed open, because paper has no
    affordance for expanding anything  */
@media print{ details.post{display:block} details.post > summary{display:none}
  .post-body{display:block !important} }
.meta{display:flex;gap:12px;align-items:center;color:var(--mute);
  font-size:var(--t-xs);margin:0}
.chip{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--mute)}
.chip.release{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.chip.care{color:var(--down-ink);border-color:color-mix(in srgb,var(--down) 45%,transparent)}

/* contact */
.mail{display:inline-block;font-weight:700;text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--accent);padding-bottom:1px;word-break:break-word;
  margin-top:.4em}
.mail:hover{color:var(--accent)}

/* the embedded film, when there is one */
.video{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);background:#000;margin:1.4em 0;box-shadow:var(--shadow-l)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* the agents table keeps its highlight row */
table.tbl tbody tr.hi{background:var(--accent-bg)}


/* ------------------------------------------------------------------ film
   The poster is a button, not a thumbnail with a link over it: it is the
   control, so it should be one for a keyboard and a screen reader too.   */
.film{display:grid;gap:16px;grid-template-columns:minmax(0,1.9fr) minmax(220px,1fr);
  align-items:start}
@media (max-width:900px){.film{grid-template-columns:1fr}}
.film-play{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line-2);
  border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--screen);
  box-shadow:var(--shadow-l)}
.film-play img{width:100%;display:block;transition:transform .5s ease,filter .3s ease}
.film-play:hover img{transform:scale(1.02);filter:brightness(1.07)}
.film-play .play{position:absolute;inset:0;margin:auto;width:76px;height:76px;
  display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--gold-2) 94%,transparent);color:#1a1407;
  box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .2s ease}
.film-play:hover .play{transform:scale(1.07)}
.film-play .play svg{width:34px;height:34px;margin-left:3px}
.film-play .run{position:absolute;right:12px;bottom:12px;background:rgba(10,11,13,.82);
  color:#eceef1;font-size:var(--t-xs);font-weight:650;padding:4px 9px;border-radius:7px}
.film-frame{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);background:#000;box-shadow:var(--shadow-l)}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.chaps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;max-height:420px;overflow-y:auto}
.chaps .chap{display:flex;gap:12px;align-items:baseline;width:100%;text-align:left;
  background:var(--panel);border:0;cursor:pointer;padding:11px 14px;
  font:500 var(--t-sm)/1.35 var(--f);color:var(--ink-2)}
.chaps .chap:hover{background:var(--bg-2);color:var(--ink)}
.chaps .chap.on{background:var(--accent-bg);color:var(--ink)}
.chaps .chap .t{color:var(--accent);font-weight:700;font-size:var(--t-xs);
  min-width:3.1em;flex:none}

/* ------------------------------------------------- the mail picker
   An address is never handed to the operating system. The trigger is a
   real link to the contact page; the panel is what a visitor gets once
   the script has upgraded it.                                        */
.mailbox{position:relative;display:inline-block}
.mailbox>.pick{display:none}
.mailbox[data-open]>.pick{display:grid}
.pick{position:absolute;z-index:40;top:calc(100% + 8px);left:0;min-width:252px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--shadow-l);padding:6px;gap:1px;text-align:left}
.pick-head{font-size:var(--t-xs);color:var(--mute);padding:9px 12px 7px;
  font-weight:600}
.pick a,.pick button{display:flex;align-items:center;gap:9px;width:100%;
  text-align:left;background:none;border:0;cursor:pointer;border-radius:8px;
  padding:10px 12px;color:var(--ink);text-decoration:none;
  font:600 var(--t-sm)/1.2 var(--f)}
.pick a:hover,.pick button:hover,.pick a:focus-visible,.pick button:focus-visible{
  background:var(--bg-2);color:var(--accent);outline:none}
.pick button[data-ok]{color:var(--up)}
.pick svg.icon{width:15px;height:15px;flex:none}
@media (max-width:560px){.pick{left:auto;right:0}}

/* an address inside a sentence keeps looking like one */
.mailink{color:var(--accent);text-decoration:none;font-weight:650;cursor:pointer;
  border-bottom:1px dotted color-mix(in srgb,var(--accent) 55%,transparent)}
.mailink:hover{text-decoration:none;border-bottom-style:solid}
.mailbox>.mail{display:inline-block}

/* ------------------------------------------------- the two-chart switch
   Two halves of one question, one click apart, instead of two sections
   one above the other.                                                */
.switch{display:inline-flex;gap:3px;padding:3px;margin-bottom:16px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:11px}
.switch button{border:0;cursor:pointer;border-radius:8px;padding:9px 16px;
  background:none;color:var(--mute);font:650 var(--t-sm)/1 var(--f);
  white-space:nowrap}
.switch button:hover{color:var(--ink)}
.switch button[aria-selected="true"]{background:var(--panel);color:var(--ink);
  box-shadow:var(--shadow)}
/* a pane is hidden until its own tab is chosen - and it is the CLASS
   that hides it, never the id, so a chart that happens to need an id
   for a link to point at cannot be made invisible by accident.      */
.chart.pane{display:none}
.chart.pane[data-on]{display:block}

/* ------------------------------------------------- the recap, at the ask */
.recap{list-style:none;margin:26px auto 28px;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;text-align:left;max-width:640px}
.recap li{background:var(--panel);padding:15px 18px;display:grid;gap:3px}
.recap b{font-size:1.15rem;letter-spacing:-.01em}
.recap span{font-size:var(--t-sm);color:var(--mute)}

/* ------------------------------------------------- who each agent is for */
.who-list summary{display:flex;gap:10px;align-items:baseline}
.who-list summary .who{color:var(--mute);font-weight:500;font-size:var(--t-sm)}
.who-list details.hi-card summary b{color:var(--accent)}
.who-list details>p{padding:0 0 20px;color:var(--ink-2);font-size:var(--t-sm);
  margin:0}
.who-list details{border-bottom:1px solid var(--line)}
.who-list summary{list-style:none;cursor:pointer;padding:16px 40px 16px 0;
  position:relative;font-weight:700}
.who-list summary::-webkit-details-marker{display:none}
.who-list summary:after{content:"";position:absolute;right:8px;top:22px;width:9px;
  height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:rotate(45deg);transition:transform .18s ease}
.who-list details[open] summary:after{transform:rotate(-135deg)}

/* a card whose last thing is an address puts it on the floor, not adrift
   in the middle because the card beside it had a longer paragraph */
.card{display:flex;flex-direction:column}
.card>.mailbox{margin-top:auto;padding-top:14px;align-self:flex-start}

/* five of a kind: one row on a desktop, not four and a straggler */
.cards.five{grid-template-columns:repeat(auto-fit,minmax(186px,1fr))}
@media (max-width:1100px){.cards.five{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}

/* the expectation anchor's closing line — the one sentence on the site a
   competitor will not copy, so it is allowed to look like a sentence */
.pull{margin:1.4em 0 0;padding:18px 22px;border-left:3px solid var(--accent);
  background:var(--accent-bg);border-radius:0 var(--r) var(--r) 0;
  font-size:1.05rem;font-weight:650;color:var(--ink);line-height:1.45}

/* the same block, folded into the evidence section instead of costing a
   section's worth of padding for itself */
.expect{max-width:800px;margin:34px 0 0;padding-top:30px;
  border-top:1px solid var(--line)}
.expect .sec-head{margin-bottom:18px}
.expect h2{font-size:clamp(1.3rem,2.4vw,1.75rem)}

/* ------------------------------------------------------- stills from the film
   Full width of their container, which is the point: the old pictures were
   too small to carry an idea and the text had to do it instead. */
.shot{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);
  background:var(--screen);box-shadow:var(--shadow-l)}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{font-size:var(--t-xs);color:var(--mute);padding:10px 14px;
  background:var(--panel);border-top:1px solid var(--line)}
.shot figcaption span{display:block;max-width:var(--measure);
  text-wrap:pretty}
.shots{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:22px}
.shot-wide{margin-top:26px}
@media (max-width:700px){.shots{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- figures
   TABLES INSIDE A LEARN ENTRY.

   Added 2026-10-13. The position-sizing series argues from arithmetic the
   reader is invited to check, so the numbers have to be readable as a grid
   rather than buried in a sentence. Scrolls horizontally on a phone instead
   of forcing the page wider - a table is the one element that will break a
   layout at 360px if it is left to its own devices. */
.tablewrap{overflow-x:auto;margin:1.4rem 0;-webkit-overflow-scrolling:touch}
table.fig{border-collapse:collapse;width:100%;min-width:21rem;
  font-size:.95rem;font-variant-numeric:tabular-nums}
table.fig caption{caption-side:top;text-align:left;color:var(--mute);
  font-size:.85rem;padding-bottom:.5rem}
table.fig th,table.fig td{padding:.5rem .7rem;text-align:right;
  border-bottom:1px solid var(--line)}
table.fig th:first-child,table.fig td:first-child{text-align:left}
table.fig thead th{color:var(--mute);font-weight:600;font-size:.8rem;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
table.fig tbody tr:last-child td{border-bottom:none}
table.fig td b{color:var(--ink)}

/* --------------------------------------------------- emphasis in an entry
   A long argument needs landmarks. .key lifts a clause into the accent ink;
   .hl is a highlighter stroke behind the one sentence a skimmer must not
   miss. Both are defined per theme rather than flipped, so the dark page is
   chosen rather than inverted. */
.post .key{color:var(--accent);font-weight:600}
.post .hl{background:var(--accent-bg);box-shadow:0 0 0 .22em var(--accent-bg);
  border-radius:2px}
.post em,.post i{color:var(--ink-2,var(--mute))}

/* -------------------------------------------------------------- hero stat
   One number, set large, for the finding a reader should carry away even if
   they read nothing else. Not a chart: a chart of a single value is a lie
   about complexity. */
.statfig{margin:1.6rem 0;padding:1.2rem 1.3rem;border-left:3px solid var(--accent);
  background:var(--accent-bg);border-radius:0 6px 6px 0}
.statfig .v{display:block;font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.05;
  font-weight:800;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.statfig .l{display:block;margin-top:.5rem;color:var(--mute);font-size:.95rem;
  max-width:34rem}

/* ------------------------------------------------------------------ chart
   Inline SVG, so it is sharp at any zoom and needs no second asset for dark
   mode - the line colour is a token, chosen per theme and validated against
   each surface rather than flipped. Colour carries NO meaning here: the sign
   is read from the labelled zero line, because a green/red pair fails
   colour-blind separation (deutan dE 4.8). */
:root{--figline:#1f8a56}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--figline:#2fa773}}
:root[data-theme="dark"]{--figline:#2fa773}
.fig-svg{width:100%;height:auto;margin:1.5rem 0;display:block;overflow:visible}
.fig-svg .line{fill:none;stroke:var(--figline);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.fig-svg .dot{fill:var(--figline);stroke:var(--bg);stroke-width:2}
.fig-svg .grid{stroke:var(--line);stroke-width:1}
.fig-svg .zero{stroke:var(--mute);stroke-width:1.5;stroke-dasharray:4 4}
.fig-svg .ax{fill:var(--mute);font-size:12px;font-weight:500;
  letter-spacing:.03em;font-family:inherit}
.fig-svg .axn{fill:var(--mute);font-size:12px;font-style:italic;font-family:inherit}
.fig-svg .lab{fill:var(--ink);font-size:13px;font-weight:700;font-family:inherit;
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- diagram figures
   A provenance chain is not a chart - no scale, no magnitude. Set as a
   timeline: one spine, a node per claim, and the gap in the record marked
   in accent so the eye finds it without reading. */
.fig-svg.diagram{margin:1.6rem 0}
.fig-svg .spine{stroke:var(--line);stroke-width:2}
.fig-svg .split{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
.fig-svg .node{fill:var(--bg);stroke:var(--mute);stroke-width:2}
.fig-svg .node.hot{fill:var(--accent);stroke:var(--accent)}
.fig-svg .dnum{fill:var(--mute);font-size:13px;font-weight:700;
  font-family:inherit;font-variant-numeric:tabular-nums}
.fig-svg .dwho{fill:var(--ink);font-size:15px;font-weight:700;font-family:inherit}
.fig-svg .dquo{fill:var(--ink-2,var(--mute));font-size:14px;font-family:inherit}
.fig-svg .dnote{fill:var(--mute);font-size:13px;font-family:inherit}
.fig-svg .dnote.hot{fill:var(--accent);font-weight:700;letter-spacing:.02em}

/* De-emphasis grey for the series that is CONTEXT, not the subject. Using a
   second hue here would need its own CVD check and would imply the two lines
   are equal partners. They are not: one of them is the reader. */
.fig-svg .ghost{fill:none;stroke:var(--mute);stroke-width:2;stroke-dasharray:5 4}
.fig-svg .gdot{fill:var(--mute);stroke:var(--bg);stroke-width:2}
.fig-svg .glab{fill:var(--mute);font-size:13px;font-weight:600;font-family:inherit;
  font-variant-numeric:tabular-nums}

/* Comparison bars. The misquoted figure is de-emphasis grey; the figure that
   actually answers the reader's question is the accent. Colour is doing
   emphasis here, not identity - the captions under each bar carry the
   meaning, so the chart still reads with no colour at all. */
.fig-svg .barghost{fill:var(--line);stroke:var(--mute);stroke-width:1.5}
.fig-svg .barkey{fill:var(--accent-bg);stroke:var(--accent);stroke-width:2}

/*  LAUNCH PRICE. The struck-through figure must read as secondary and
    must never be mistaken for the price being charged, so it is smaller,
    dimmer and carries the line through it rather than relying on colour
    alone - colour is not available to every reader.  */
.price .wasprice{font-size:.62em;opacity:.55;font-weight:400;
  margin-right:.35em;text-decoration:line-through;
  text-decoration-thickness:.09em}
.offerends{margin:.15rem 0 0;font-size:.82rem;opacity:.72;
  letter-spacing:.01em}

/* ---------------------------------------------------------------------
   CHARTS, 2026-10-19. The measured figures from the presentation.

   They are rendered on white, with black type, because that is how they
   are drawn for print and for the deck. Dropping a white png onto a dark
   page glares, so the plate is DELIBERATE: a figure sits on its own white
   card in both themes, the way a printed plate does in a book. The border
   and caption still follow the theme, so it reads as part of the page
   rather than a screenshot somebody pasted in.
   --------------------------------------------------------------------- */
/*  figplate, NOT chart. `.chart` was already the panel the six-agent tab
    charts live in, and because this block sits later in the file it won:
    those panels went white in dark mode while their text kept the dark
    theme's pale greys, and the meter tracks kept its near-black. The
    result was a heading and six agent names that were all but invisible.
    A new component never reuses a class name that is already doing a
    job. (2026-10-19.)  */
.figplate{margin:26px 0 0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);background:#fff;box-shadow:var(--shadow-l)}
.figplate img{width:100%;height:auto;display:block;padding:10px 12px 4px;
  background:#fff;box-sizing:border-box}
/* 2026-10-20. The caption ran the full width of the plate, which on a
   wide figure is a 150-character line and a last word stranded on its own.
   The rule above it is still full width; only the words are measured.     */
.figplate figcaption{font-size:var(--t-xs);color:var(--mute);padding:10px 14px;
  background:var(--panel);border-top:1px solid var(--line)}
.figplate figcaption span{display:block;max-width:var(--measure);
  text-wrap:pretty}
:root[data-theme="dark"] .figplate{border-color:#2a2f36}
@media (max-width:640px){ .figplate img{padding:6px 6px 2px} }


/* ------------------------------------------------------------- pricing
   Two terms, side by side, so the choice is read in one glance rather
   than assembled from a paragraph. Stacks on a phone.                  */
.pricegrid{list-style:none;display:grid;gap:14px;margin:18px 0 10px;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:var(--measure)}
.pricegrid li{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:18px 20px;display:flex;
  flex-direction:column;gap:2px}
.pricegrid .pr-term{font-size:var(--t-sm);font-weight:600;color:var(--mute);
  text-transform:uppercase;letter-spacing:.08em}
.pricegrid .pr-amt{font-size:1.9rem;font-weight:700;line-height:1.15;
  color:var(--ink)}
.pricegrid .pr-per{font-size:var(--t-xs);color:var(--mute);min-height:1em}
@media (max-width:640px){ .pricegrid{grid-template-columns:1fr} }

/* ------------------------------------------------- the purchase request form
   2026-10-19. Deliberately plain: this is the page where somebody is trying
   to hand over money, and a form with personality on it reads as a trick.
   Every control is 44px tall or more so it is usable with a thumb.          */
.uform{margin:18px 0 0;max-width:var(--measure)}
.f-row{margin:0 0 16px}
.f-row label{display:block;font-size:var(--t-sm);font-weight:600;
  color:var(--ink);margin:0 0 6px}
.f-row .hint{display:block;font-weight:400;color:var(--mute);
  font-size:var(--t-xs);margin-top:2px}
.uform input,.uform textarea{width:100%;font:inherit;font-size:var(--t-body);
  color:var(--ink);background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:11px 13px;min-height:46px;
  transition:border-color .14s ease,box-shadow .14s ease}
.uform textarea{min-height:92px;resize:vertical;line-height:1.5}
.uform input:focus,.uform textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg)}
.uform input[aria-invalid]{border-color:var(--down);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--down) 18%,transparent)}
/*  the honeypot. Not display:none - some bots skip hidden fields and some
    browsers skip them on autofill. Off-screen is the version that works.  */
.f-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-err{color:var(--down-ink);font-size:var(--t-sm);font-weight:600;margin:0 0 12px}
.f-note{font-size:var(--t-sm);color:var(--mute);margin:10px 0 0;
  max-width:var(--measure)}
.f-note a{color:var(--accent)}
.f-send{margin:18px 0 0;padding:16px 18px;background:var(--bg-2);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0}
.f-send .f-note{margin:0 0 12px}
.f-send-row{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.f-send-row .btn{font-size:var(--t-sm);padding:10px 16px}
@media (max-width:480px){ .f-send-row .btn{flex:1 1 100%;text-align:center} }

/*  the confirmation. A tick in a filled disc rather than a bare glyph: at
    this size a stroked tick on its own reads as a stray mark, and the one
    thing this line has to do is be unmistakable at a glance.  */
.f-done h3{display:flex;align-items:center;gap:10px;font-size:1.12rem;
  color:var(--ink);margin:0 0 .3em}
.f-tick{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--up);color:#fff}
.f-tick .icon{width:15px;height:15px}