/* ══════════════════════════════════════════════════════════════════
   SimpleAI · Grotesk Blue · V1 core

   ONE RULE ABOVE ALL OTHERS — read before changing a colour.

   Accent contrast REVERSES between the two themes. #1F3BFF is 5.99:1
   on paper and 2.93:1 on the dark ground; #FFB000 is 10:1 on dark and
   1.65:1 on paper. Neither can be used for text in both themes. So
   every accent has three tokens and they are not interchangeable:

     --sig / --human            fills and large graphic areas
     --sig-t / --human-t        TEXT. always. no exceptions.
     --sig-mark / --human-mark   small marks: dots, rules, ticks

   The theme blocks re-point the -t and -mark tokens. If you write
   colour:var(--sig) on a run of text you will ship a contrast failure
   in one theme and not notice in the other.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── dark: the native register ────────────────────────────────── */
  --ink:#0B0B0B;   --ink:oklch(0.150 0 0);
  --ink-1:#0E0E0E; --ink-2:#131313; --ink-3:#191919; --ink-4:#212121;
  --line:#242424;  --line-2:#2E2E2E;

  --fg:#FFFFFF;
  --fg-2:#D8D4CC;  --fg-2:oklch(0.865 0.010 85);
  --fg-3:#ABA79F;  --fg-3:oklch(0.715 0.010 85);
  --fg-4:#8A8781;  --fg-4:oklch(0.600 0.008 85);
  --num:#666666;   --num:oklch(0.512 0 0);

  --sig:#1F3BFF;      --sig:oklch(0.498 0.286 266);
  --sig-t:#7C92FF;    --sig-t:oklch(0.735 0.140 271);
  --sig-mark:#5B7BFF;
  --sig-wash:#0E122D;
  --on-sig:#FFFFFF;

  --human:#FFB000;    --human:oklch(0.797 0.157 73);
  --human-t:#FFB000;
  --human-mark:#FFB000;
  --human-wash:#241B08;
  --on-human:#0B0B0B;

  /* canvas reads these as raw r,g,b so the field follows the theme */
  --f-node:91,123,255;
  --f-human:255,176,0;
  --f-lit:140,170,255;
  --f-ground:11,11,11;
  --f-fgline:216,212,204;
  --f-alpha:1;

  --display:'Archivo',Impact,sans-serif;
  --body:'Chivo',system-ui,sans-serif;
  --meta:'JetBrains Mono',ui-monospace,monospace;

  --s-1:8px; --s-0:12px; --s-1x:16px; --s-2x:24px; --s-3x:36px;
  --s-4x:56px; --s-5x:84px; --s-6x:120px;
  --gut:clamp(20px,4.4vw,80px);
  --out:cubic-bezier(.16,1,.3,1);
  --shadow:none;
}

[data-theme="light"]{
  /* ── light: warm paper, never white ───────────────────────────── */
  /* Hex only in this block. The oklch duplicates that were here were
     eyeballed conversions that resolved LIGHTER than their own hex
     fallbacks — and since the oklch came second it won, silently
     costing ~0.5:1 across every small label on a raised panel. These
     values are computed against --ink-1 and --ink-2, not just --ink,
     because most small text sits on a panel rather than the page. */
  --ink:#F4F2ED;
  --ink-1:#EFECE5; --ink-2:#E9E5DC; --ink-3:#E1DCD1; --ink-4:#D7D1C4;
  --line:#DCD7CC;  --line-2:#C4BEB0;

  --fg:#0E0E0C;
  --fg-2:#33312C;
  --fg-3:#4E4B44;
  --fg-4:#5F5B51;   /* 5.81:1 on --ink-1, 5.46:1 on --ink-2 */
  --num:#8F887B;    /* 3.14:1 on paper — large numerals only */

  --sig:#1F3BFF;
  --sig-t:#1F3BFF;      /* 5.99:1 on paper — the dark blue reads here */
  --sig-mark:#1F3BFF;
  --sig-wash:#E4E6F8;
  --on-sig:#FFFFFF;

  --human:#E09000;
  --human-t:#8A5E00;    /* #FFB000 is 1.65:1 on paper. it cannot be text. */
  --human-mark:#D18A00;
  --human-wash:#F6EBD4;
  --on-human:#FFFFFF;

  --f-node:31,59,255;
  --f-human:190,124,0;
  --f-lit:20,40,180;
  --f-ground:244,242,237;
  --f-fgline:51,49,44;
  /* the same alphas read far heavier on paper than on the dark
     ground — dial the whole field back rather than re-tuning
     every stop by hand */
  --f-alpha:.5;

  --shadow:0 1px 0 rgba(20,18,14,.04);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--ink);color:var(--fg);font-family:var(--body);
  font-size:17px;line-height:1.64;font-weight:300;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .45s var(--out),color .45s var(--out)}
a{color:inherit;text-decoration:none}
canvas,svg{display:block;max-width:100%}
::selection{background:var(--sig);color:var(--on-sig)}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
nav,main,footer{position:relative;z-index:1}
.plate{max-width:1440px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
/* the nav is sticky and 66px tall, so an anchor jump would otherwise put
   the target heading underneath it — true for #outbound in the privacy
   notice and for every footer deep-link into a section. */
section[id],[id]:target{scroll-margin-top:86px}

/* ── type ────────────────────────────────────────────────────────── */
.meta{font-family:var(--meta);font-size:10.5px;font-weight:400;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-4)}
h1,h2{font-family:var(--display);font-weight:800;font-stretch:100%;
  letter-spacing:-.036em;line-height:.94}
h1{font-size:clamp(38px,7vw,110px);line-height:.92}
h2{font-size:clamp(29px,4.4vw,64px);margin-bottom:var(--s-2x)}
h3{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.6vw,24px);
  line-height:1.14;letter-spacing:-.018em}
h4{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.16;
  letter-spacing:-.018em}
.lede{font-weight:300;font-size:clamp(18px,1.55vw,23px);line-height:1.56;
  color:var(--fg-2);max-width:68ch}
p{color:var(--fg-3);max-width:72ch}
strong,b{color:var(--fg);font-weight:600}

/* ── logotype ────────────────────────────────────────────────────── */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo .mk{display:block;width:20px;height:22px;flex:none}
.logo .wm{font-family:var(--display);font-weight:700;font-size:20px;
  letter-spacing:-.032em;color:var(--fg)}
/* nav only — the footer logotype has the width for its wordmark, and
   without it the mark sits there unnamed. */
@media(max-width:440px){nav .logo .wm{display:none}}

/* ── nav ─────────────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:200;
  background:color-mix(in oklab,var(--ink) 84%,transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1440px;margin:0 auto;padding:0 var(--gut);min-height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-1x)}
.nav-l{display:flex;gap:clamp(10px,1.5vw,22px);flex-wrap:wrap}
.nav-l a{font-family:var(--meta);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-4);padding:6px 0;position:relative;transition:color .3s var(--out);white-space:nowrap}
.nav-l a::after{content:'';position:absolute;left:0;bottom:2px;width:0;height:1px;
  background:var(--sig-mark);transition:width .45s var(--out)}
.nav-l a:hover,.nav-l a[aria-current="page"]{color:var(--fg)}
.nav-l a[aria-current="page"]::after,.nav-l a:hover::after{width:100%}
@media(max-width:1240px){.nav-l{display:none}}
.nav-r{display:flex;align-items:center;gap:var(--s-0)}

/* theme toggle — subtle, top right, remembers the choice */
.tt{width:34px;height:34px;border:1px solid var(--line-2);background:transparent;
  cursor:pointer;display:grid;place-items:center;color:var(--fg-3);flex:none;
  transition:color .3s var(--out),border-color .3s var(--out)}
.tt:hover{color:var(--fg);border-color:var(--fg-4)}
.tt svg{width:15px;height:15px;display:block}
.tt .sun{display:none}
[data-theme="light"] .tt .sun{display:block}
[data-theme="light"] .tt .moon{display:none}

.mbtn{display:none;background:none;border:1px solid var(--line-2);width:38px;height:34px;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.mbtn i{width:16px;height:1px;background:var(--fg);display:block}
@media(max-width:1240px){.mbtn{display:flex}}
#mnav{position:fixed;inset:66px 0 0;background:var(--ink);z-index:190;display:none;
  flex-direction:column;padding:var(--s-3x) var(--gut);overflow-y:auto}
#mnav.open{display:flex}
#mnav a{font-family:var(--display);font-weight:700;font-size:clamp(21px,5vw,34px);
  letter-spacing:-.03em;padding:var(--s-0) 0;border-bottom:1px solid var(--line)}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--meta);font-size:10.5px;
  font-weight:500;letter-spacing:.15em;text-transform:uppercase;padding:14px 24px;
  background:var(--sig);color:var(--on-sig);border:1px solid var(--sig);
  position:relative;overflow:hidden;transition:color .4s var(--out)}
.btn::before{content:'';position:absolute;inset:0;background:var(--fg);
  transform:translateY(101%);transition:transform .5s var(--out);z-index:0}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--ink)}
.btn>*{position:relative;z-index:2}
.btn-o{background:var(--ink-2);color:var(--fg);border-color:var(--line-2)}
.btn-o:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--human-mark);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--sig);color:var(--on-sig);
  padding:12px 18px;z-index:300}
.skip:focus{left:0}

/* ── reveals ─────────────────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--out),transform .9s var(--out)}
.js .rv.in{opacity:1;transform:none}
.js .wd{display:inline-block;opacity:0;transform:translateY(.32em);
  transition:opacity .8s var(--out),transform .8s var(--out)}
.js .lit .wd{opacity:1;transform:none}

/* ── hero ────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(36px,5vw,76px) clamp(44px,6vw,92px)}
.slug{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin-bottom:clamp(28px,4vw,56px);
  display:flex;flex-wrap:wrap;gap:6px 0;align-items:center}
.slug span{font-family:var(--meta);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-4);white-space:nowrap}
.slug span+span::before{content:'·';color:var(--line-2);padding:0 13px}
.slug .hot{color:var(--human-t)}
@media(max-width:760px){   /* sector strips carry long phrases; nowrap
                                pushed them past a 375px viewport, and
                                once they wrap the '·' separator lands
                                at the START of a line and reads as a
                                rendering fault. One item per line. */
  .slug{flex-direction:column;align-items:flex-start;gap:5px}
  .slug span{font-size:9px;letter-spacing:.12em;white-space:normal}
  .slug span+span::before{content:none}}
.hero h1 .l2{display:block;font-family:var(--body);font-weight:300;
  font-size:clamp(19px,3vw,44px);line-height:1.1;letter-spacing:-.028em;
  color:var(--fg-2);margin-top:.22em}
.hero h1 .l2 b{font-weight:600;color:var(--fg)}
/* .22em of a 44px sub-line is 10px; of a 19px one it is 4px — far too
   tight under a 38px headline set at .92 line-height. */
@media(max-width:760px){.hero h1 .l2{margin-top:14px}}

/* inline links sit in a 14–19px line box, which is a small target for a
   thumb. Padding an INLINE element vertically grows its hit area without
   touching the line box, so nothing moves. */
@media(max-width:760px){main p a,.meta a{padding-block:8px}}
.hero-intro{margin-top:var(--s-3x);max-width:80ch;font-size:clamp(16px,1.22vw,18.5px);
  line-height:1.68;color:var(--fg-2);font-weight:300}
.hero-intro b{color:var(--fg);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-0);margin-top:var(--s-2x)}

/* ── sections ────────────────────────────────────────────────────── */
section{padding-block:clamp(56px,8vw,132px);border-top:1px solid var(--line)}
.hd{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:var(--s-2x);
  align-items:start;margin-bottom:var(--s-4x)}
.hd>*{min-width:0}
@media(max-width:820px){.hd{grid-template-columns:1fr;gap:var(--s-1)}}
.hd .n{font-family:var(--display);font-weight:800;font-size:clamp(44px,5.4vw,84px);
  line-height:.8;color:var(--num);letter-spacing:-.05em}
.hd .meta{display:block;margin-top:10px}

/* ── chapter rows ────────────────────────────────────────────────── */
.blk{border-top:1px solid var(--line-2)}
.blk>div{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1.2fr) minmax(0,.9fr);
  gap:clamp(18px,2.6vw,44px);padding:var(--s-3x) 0;border-bottom:1px solid var(--line);
  transition:background .55s var(--out)}
.blk>div>*{min-width:0}
.blk>div:hover{background:var(--ink-1)}
.blk .ix{font-family:var(--meta);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sig-t)}
.blk p{font-size:15.5px;margin-top:9px}
.blk ul{list-style:none;display:flex;flex-direction:column;gap:8px;padding-top:4px}
.blk li{font-family:var(--meta);font-size:10.5px;letter-spacing:.03em;color:var(--fg-3);
  display:flex;gap:10px;align-items:baseline}
.blk li::before{content:'';width:5px;height:5px;flex:none;background:var(--sig-mark);
  transform:translateY(-1px)}
@media(max-width:880px){.blk>div{grid-template-columns:1fr;gap:var(--s-0)}}

/* ── cell grids ──────────────────────────────────────────────────── */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:var(--s-2x)}
.g3.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1000px){.g3,.g3.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g3,.g3.g4,.g3.g2{grid-template-columns:1fr}}
.g3>div{background:var(--ink);padding:var(--s-2x);min-width:0;transition:background .5s var(--out)}
.g3>div:hover{background:var(--ink-1)}
.g3 b{display:block;font-family:var(--meta);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sig-t);margin-bottom:11px}
.g3 h4{margin-bottom:10px}
.g3 p{font-size:14.5px;line-height:1.6}
.g3 .st{display:block;font-family:var(--meta);font-size:9.5px;letter-spacing:.09em;
  color:var(--sig-t);margin-top:var(--s-1x)}

/* ── layered plates ──────────────────────────────────────────────── */
.plates{margin-top:var(--s-3x);border:1px solid var(--line-2)}
.plates>div{padding:var(--s-1x) var(--s-2x);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--s-1x);align-items:baseline}
.plates>div>*{min-width:0}
.plates>div:last-child{border-bottom:none;background:var(--human-wash)}
.plates .n{font-family:var(--meta);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sig-t)}
.plates>div:last-child .n{color:var(--human-t)}
.plates .t{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.018em}
.plates p{grid-column:2;font-size:14px;margin-top:5px}
@media(max-width:720px){.plates>div{grid-template-columns:1fr}.plates p{grid-column:1}}

/* ── outcome figures ─────────────────────────────────────────────── */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:1px}
@media(max-width:820px){.figs{grid-template-columns:1fr}}
.figs>div{background:var(--ink);padding:var(--s-2x);min-width:0}
.figs .v{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,42px);
  line-height:1;letter-spacing:-.04em;margin-bottom:var(--s-0);color:var(--fg)}
.figs p{font-size:14px}
.figs .src{display:block;font-family:var(--meta);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--human-t);margin-top:var(--s-0)}
blockquote{margin-top:var(--s-3x);padding:var(--s-3x) var(--s-2x);border:1px solid var(--line)}
blockquote q{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.3vw,32px);
  line-height:1.14;letter-spacing:-.024em;display:block;max-width:30ch;quotes:'\201C' '\201D'}
blockquote cite{display:block;font-family:var(--meta);font-size:10px;font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4);margin-top:var(--s-1x)}

/* ── EU AI Act timeline ──────────────────────────────────────────── */
.tl{margin-top:var(--s-3x);border:1px solid var(--line-2)}
.tl-h{padding:12px var(--s-2x);border-bottom:1px solid var(--line-2);
  display:flex;justify-content:space-between;gap:var(--s-1x);flex-wrap:wrap;align-items:center}
.tl-r{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr) minmax(0,150px);
  gap:var(--s-1x);padding:var(--s-1x) var(--s-2x);border-bottom:1px solid var(--line);align-items:baseline}
.tl-r>*{min-width:0}
.tl-r:last-child{border-bottom:none}
.tl-r .dt{font-family:var(--meta);font-size:10.5px;font-weight:500;color:var(--fg)}
.tl-r .ev{font-size:14.5px;color:var(--fg-2)}
.tl-r .ev em{font-style:normal;display:block;font-size:13px;color:var(--fg-3);margin-top:4px}
.tl-r .pen{font-family:var(--meta);font-size:9.5px;color:var(--fg-4);text-align:right}
.tl-r.live-now{background:var(--human-wash)}
.tl-r.live-now .dt,.tl-r.live-now .pen{color:var(--human-t)}
@media(max-width:820px){.tl-r{grid-template-columns:1fr}.tl-r .pen{text-align:left}}
.callout{margin-top:var(--s-2x);padding:var(--s-3x) var(--s-2x);border:1px solid var(--line);
  background:var(--ink-1)}
.callout p{font-size:15.5px;color:var(--fg-2);max-width:80ch}
.callout p+p{margin-top:var(--s-1x)}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.q{border-bottom:1px solid var(--line)}
.q:first-of-type{border-top:1px solid var(--line-2)}
.q summary{list-style:none;cursor:pointer;padding:var(--s-2x) 0;display:grid;
  grid-template-columns:1fr auto;gap:var(--s-1x);align-items:center}
.q summary::-webkit-details-marker{display:none}
.q summary h3{font-size:clamp(17px,1.6vw,23px)}
.q .pm{font-family:var(--meta);font-size:17px;color:var(--sig-t);transition:transform .45s var(--out)}
.q[open] .pm{transform:rotate(45deg);color:var(--human-t)}
.q .a{padding-bottom:var(--s-2x)}
.q .a p{font-size:15.5px}

/* ── close ───────────────────────────────────────────────────────── */
.close h2{max-width:16ch}
.close .lede{margin-top:var(--s-1x)}

/* ── footer ──────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line-2);padding-block:var(--s-5x) var(--s-2x)}
.fg{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));
  gap:var(--s-3x) var(--s-2x)}
.fg>*{min-width:0}
.fg h5{font-family:var(--meta);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sig-t);margin-bottom:var(--s-0)}
.fg a{display:block;font-size:13.5px;color:var(--fg-3);padding:3.5px 0;
  transition:color .3s var(--out)}
.fg a:hover{color:var(--fg)}
.fbot{margin-top:var(--s-4x);padding-top:var(--s-1x);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s-1x);flex-wrap:wrap;
  font-family:var(--meta);font-size:9.5px;letter-spacing:.11em;color:var(--fg-4)}
/* auto-fit sizes its track count from what is left AFTER the identity
   column has been offered its minimum — which is 0. So the moment the
   140px minimums could no longer all fit, the identity block and one
   link group were squeezed to 7px wide and their contents spilled out
   under overflow:visible. Below the desktop width, place the tracks
   explicitly instead and let the identity block span the full row. */
@media(max-width:1000px){
  .fg{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2x)}
  .fg>:first-child{grid-column:1/-1}
  .fg a{padding:6px 0}    /* 29px rows are below a comfortable thumb */
}
@media(max-width:640px){
  .fbot{flex-direction:column;gap:7px;margin-top:var(--s-3x)}
}

@media print{nav,.bg,.tt,.mbtn{display:none}
  body{background:#fff;color:#000}
  section{break-inside:avoid;padding-block:22px}}

/* ══ operations console ═══════════════════════════════════════════ */
.cons{border:1px solid var(--line-2);background:var(--ink-1);margin-top:var(--s-2x)}
.cons-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s-1x);
  padding:12px var(--s-2x);border-bottom:1px solid var(--line);flex-wrap:wrap}
.cons-h .rt{display:flex;gap:var(--s-1x);align-items:center;flex-wrap:wrap}
.live{display:flex;align-items:center;gap:8px;font-family:var(--meta);font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--human-t)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--human-mark);flex:none}
@media(prefers-reduced-motion:no-preference){
  .live i{animation:gl 2.4s var(--out) infinite}
  @keyframes gl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.4)}}
}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  border-bottom:1px solid var(--line)}
.kpi{padding:var(--s-2x);border-right:1px solid var(--line);min-width:0}
.kpi:last-child{border-right:none}
/* the separators are borders, not gaps, so they have to follow the
   wrap: a right-hand rule on a stacked cell is a stray line down the
   panel edge, and the rows are left with nothing between them. */
@media(max-width:940px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .kpi:nth-child(2n){border-right:none}
}
@media(max-width:520px){
  .kpis{grid-template-columns:1fr}
  .kpi{border-right:none;border-bottom:1px solid var(--line)}
  .kpi:last-child{border-bottom:none}
}
.kpi .lb{display:block;font-family:var(--meta);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-4);margin-bottom:11px}
.kpi .dl{font-family:var(--meta);font-size:9.5px;color:var(--fg-4);margin-top:10px;display:block}
.kpi .spark{height:26px;margin-top:10px}
.kpi .spark canvas{width:100%;height:100%}
.flap{display:flex;gap:3px}
.cell{width:clamp(19px,2.3vw,30px);height:clamp(28px,3.4vw,44px);background:var(--ink-3);
  border-top:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--meta);font-weight:600;font-size:clamp(14px,1.7vw,22px);
  color:var(--fg);position:relative;overflow:hidden}
.cell::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:color-mix(in oklab,var(--fg) 18%,transparent)}
.cell.sep{background:none;border:none;width:auto;color:var(--fg-4);font-size:13px}
.cell.hum{color:var(--human-t)}
.kpi.hum .lb{color:var(--human-t)}
.r2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  border-bottom:1px solid var(--line)}
.r2>*{min-width:0}
@media(max-width:900px){.r2{grid-template-columns:1fr}}
.pane{padding:var(--s-2x);border-right:1px solid var(--line);min-width:0}
.pane:last-child{border-right:none}
.pane>.ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.pane .ph b{font-family:var(--meta);font-size:9px;font-weight:400;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-4)}
.pane .ph em{font-family:var(--meta);font-size:9px;font-style:normal;color:var(--fg-4)}
.trace{height:158px}.trace canvas{width:100%;height:100%}
.matrix{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.matrix i{aspect-ratio:1/1;display:block;background:var(--ink-3);transition:background .5s var(--out)}
.matrix i.on{background:var(--sig-mark);opacity:.5}
.matrix i.hot{background:var(--human-mark);opacity:1}
.mkey{display:flex;gap:var(--s-1x);flex-wrap:wrap;margin-top:11px}
.mkey span{display:flex;align-items:center;gap:6px;font-family:var(--meta);font-size:8.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4)}
.mkey i{width:9px;height:9px;display:block}
.regions{padding:var(--s-2x);border-bottom:1px solid var(--line)}
.regions .ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.regions .ph b{font-family:var(--meta);font-size:9px;font-weight:400;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-4)}
.regions .ph em{font-family:var(--meta);font-size:9px;font-style:normal;color:var(--fg-4)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--s-1x)}
.rg{min-width:0}
.rg .rn{display:flex;justify-content:space-between;gap:8px;font-family:var(--meta);font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--fg-4);margin-bottom:6px}
.rg .rn u{text-decoration:none;color:var(--fg-2);font-variant-numeric:tabular-nums}
.rg .rb{height:4px;background:var(--ink-3);overflow:hidden}
.rg .rb i{display:block;height:100%;background:var(--sig-mark);width:0;transition:width .9s var(--out)}
.rg.hum .rb i{background:var(--human-mark)}
.rg.hum .rn{color:var(--human-t)}
.r3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);border-bottom:1px solid var(--line)}
.r3>*{min-width:0}
@media(max-width:900px){.r3{grid-template-columns:1fr}}
@media(max-width:900px){   /* both console rows stack here */
  .pane{border-right:none;border-bottom:1px solid var(--line)}
  .pane:last-child{border-bottom:none}
}
.hist{height:126px}.hist canvas{width:100%;height:100%}
.queue{list-style:none;display:flex;flex-direction:column;gap:6px}
.queue li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  font-family:var(--meta);font-size:10px;color:var(--fg-2);padding:7px 9px;
  background:var(--ink-2);border-left:1px solid var(--human-mark)}
.queue li u{text-decoration:none;color:var(--human-t);font-weight:600}
.queue li em{font-style:normal;color:var(--fg-4);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.log{padding:var(--s-2x);height:170px;overflow:hidden;position:relative}
.log-in{display:flex;flex-direction:column;gap:4px;font-family:var(--meta);font-size:10px;line-height:1.5}
.log-in div{color:var(--fg-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log-in div u{text-decoration:none;color:var(--fg-4)}
.log-in div b{color:var(--fg-3);font-weight:400}
.log-in div.esc{color:var(--human-t)}
.log-in div.esc b,.log-in div.esc u{color:var(--human-t)}
.log::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46px;
  background:linear-gradient(transparent,var(--ink-1));pointer-events:none}
.cons-f{padding:12px var(--s-2x);border-top:1px solid var(--line);
  font-family:var(--meta);font-size:9.5px;color:var(--fg-4);line-height:1.7}

/* ══ inner-page components ════════════════════════════════════════ */
.lede-lg{font-size:clamp(19px,1.7vw,25px);line-height:1.5;color:var(--fg-2);
  max-width:66ch;font-weight:300}
.pains{border-top:1px solid var(--line-2);margin-top:var(--s-2x)}
.pains>div{padding:var(--s-3x) 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,48px) minmax(0,1fr);gap:var(--s-1x)}
.pains>div>*{min-width:0}
.pains .ix{font-family:var(--meta);font-size:11px;letter-spacing:.1em;color:var(--sig-t);padding-top:5px}
.pains h3{margin-bottom:10px}
.pains p{font-size:15.5px}
.pains .cost{display:inline-block;margin-top:var(--s-0);font-family:var(--meta);font-size:10px;
  letter-spacing:.09em;color:var(--human-t);background:var(--human-wash);padding:6px 10px}
@media(max-width:680px){.pains>div{grid-template-columns:1fr}}
.pts{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:var(--s-1x);margin-top:var(--s-2x)}
.pts li{font-size:14.5px;color:var(--fg-3);padding-left:18px;position:relative;line-height:1.6}
.pts li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--sig-mark)}
.bounds{margin-top:var(--s-2x);border-top:1px solid var(--human-mark)}
.bounds>div{padding:var(--s-2x) 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,44px) minmax(0,1fr);gap:var(--s-1x)}
.bounds>div>*{min-width:0}
.bounds .x{font-family:var(--meta);font-size:12px;color:var(--human-t);line-height:1.6}
.bounds h4{margin-bottom:9px}
.bounds p{font-size:15px}
@media(max-width:680px){.bounds>div{grid-template-columns:1fr}}
.proof{margin-top:var(--s-3x);padding:var(--s-3x) var(--s-2x);border:1px solid var(--line-2);
  background:var(--ink-1)}
.proof .lb{display:block;font-family:var(--meta);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--human-t);margin-bottom:var(--s-0)}
.proof .stat{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,48px);
  line-height:1;letter-spacing:-.04em;margin-bottom:var(--s-0)}
.proof p{font-size:15px}
.related{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-2x)}
.related a{font-family:var(--meta);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);border:1px solid var(--line-2);padding:9px 14px;transition:all .3s var(--out)}
.related a:hover{color:var(--fg);border-color:var(--fg-4)}
.stages{margin-top:var(--s-2x);border-top:1px solid var(--line-2)}
.stages>div{padding:var(--s-3x) 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:clamp(16px,2.6vw,44px)}
.stages>div>*{min-width:0}
.stages .sn{font-family:var(--meta);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sig-t)}
.stages .sn u{display:block;text-decoration:none;font-family:var(--display);font-weight:800;
  font-size:34px;letter-spacing:-.04em;color:var(--num);line-height:1;margin-bottom:8px}
.stages h3{margin-bottom:10px}
.stages p{font-size:15.5px}
.stages .fee{display:inline-block;margin-top:var(--s-0);font-family:var(--meta);font-size:11px;
  letter-spacing:.1em;color:var(--on-sig);background:var(--sig);padding:8px 13px}
@media(max-width:680px){.stages>div{grid-template-columns:1fr;gap:var(--s-0)}}
.deliv{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--s-2x)}
.deliv li{background:var(--ink);padding:var(--s-1x) var(--s-2x);font-size:14.5px;color:var(--fg-3);
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.deliv li b{font-family:var(--meta);font-size:10px;color:var(--sig-t);font-weight:500}
.xnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:var(--s-3x)}
.xnav a{background:var(--ink);padding:var(--s-2x);display:block;transition:background .4s var(--out)}
.xnav a:hover{background:var(--ink-1)}
.xnav b{display:block;font-family:var(--meta);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sig-t);margin-bottom:8px}
.xnav span{display:block;font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:-.02em;color:var(--fg)}

/* ══ legal pages ═══════════════════════════════════════════════════ */
/* A privacy notice is read, not scanned: hold the measure near 65ch and
   let the heading hierarchy do the work. No decorative flourishes. */
.legal{max-width:65ch}
.legal p{font-size:16px;line-height:1.72;margin-top:var(--s-1x);max-width:65ch}
.legal>p:first-child{margin-top:0}
.legal h3{margin-top:var(--s-2x);margin-bottom:var(--s-1)}
.legal ul{list-style:none;margin-top:var(--s-1x);display:flex;flex-direction:column;gap:9px}
.legal li{font-size:16px;line-height:1.62;color:var(--fg-3);padding-left:18px;position:relative;
  max-width:65ch}
.legal li::before{content:'';position:absolute;left:0;top:.66em;width:9px;height:1px;
  background:var(--sig-mark)}
.legal a{color:var(--sig-t);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in oklab,var(--sig-t) 45%,transparent);
  transition:text-decoration-color .3s var(--out)}
.legal a:hover{text-decoration-color:var(--sig-t)}
.legal .upd{font-family:var(--meta);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-4)}

/* cookie table — the one place this page needs columns */
.ctab{width:100%;border-collapse:collapse;margin-top:var(--s-1x);
  border:1px solid var(--line);font-size:14.5px}
.ctab th,.ctab td{text-align:left;padding:11px var(--s-1);border-bottom:1px solid var(--line);
  vertical-align:top}
.ctab th{font-family:var(--meta);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sig-t);font-weight:400}
.ctab tr:last-child td{border-bottom:none}
.ctab td:first-child{font-family:var(--meta);font-size:12.5px;color:var(--fg-2);white-space:nowrap}
.ctab td{color:var(--fg-3)}
.ctab-wrap{overflow-x:auto}   /* never let a table widen the page */

/* The block a reader arrives at already annoyed. Amber is this brand's
   "a human is in the loop" signal, which is precisely what this is. */
.stop{margin-top:var(--s-2x);border:1px solid var(--human-mark);border-left-width:3px;
  background:var(--human-wash);padding:var(--s-2x)}
.stop .lb{display:block;font-family:var(--meta);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--human-t);margin-bottom:var(--s-0)}
.stop p{color:var(--fg-2);max-width:60ch}
.stop p.big{font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,25px);
  line-height:1.2;letter-spacing:-.022em;color:var(--fg);margin-top:0}
.stop a{color:var(--human-t);text-decoration-color:color-mix(in oklab,var(--human-t) 45%,transparent)}
.stop a:hover{text-decoration-color:var(--human-t)}