/* ══════════════════════════════════════════════════════════════════
   PLUTO/OS — one console, five routes.

   SURFACE CONTRACT (the rule that used to be applied by hand)
   ───────────────────────────────────────────────────────────
   Two surfaces exist: the dark green DESK, and the cream PANEL that
   sits on it. Ink is never chosen per component. :root declares the
   desk's --fg / --fg-dim / --fg-accent / --fg-rule / --fg-ring, and
   .on-face redeclares the same five names for cream. Every type rule
   reads var(--fg). Move a component between surfaces and it re-inks
   itself — there is no override left to forget.

   Every value below is measured. Desk contrast is verified against
   #2A453C, the LIGHTEST point of the ground gradient; panel contrast
   against #D6D0BB, the DARKEST end of the panel gradient. Worst case
   both ways, so no scroll position or panel position can drop a pair
   under AA.

   TYPE  · 6-step scale, floor 13px, every step has a declared leading
   SPACE · 4px base, 8px rhythm, no ad-hoc values
   FORM  · 2px double bevels, hard shadows, zero radius (CRT glass excepted)
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── SURFACE ──────────────────────────────────────────────────── */
  --desk:#2E4A42;        /* lightest ground point — the AA reference */
  --desk-2:#26403A;      /* the 45-degree hairline weave */
  --desk-deep:#1E3129;

  --face-hi:#E4DECC;     /* panel, top-lit */
  --face:#DDD8C6;
  --face-lo:#D6D0BB;     /* panel, bottom — the AA reference */
  --face-2:#CFC9B4;
  --face-3:#C4BEA8;      /* meter track */
  --well:#EFECDF;        /* inset field */

  --bevel-lt:#FFFDF2; --bevel-lt2:#EDE9DA;
  --bevel-dk:#6E6A58; --bevel-dk2:#9C9782;
  --edge:#12201B;

  --chrome:#4A7A63; --chrome-2:#3E6B57; --chrome-3:#2C5142;
  --chrome-ink:#F2EFE2;
  --chrome-off:#4A564F; --chrome-off-ink:#E8E8E1;

  /* ── INK (fixed values, referenced by the context blocks below) ── */
  --ink:#1A1F1C;         /* 10.8:1 on face-lo   AAA */
  --dim:#4E574F;         /*  5.2:1 on face-lo   AA  */
  --amber-ink:#7E460F;   /*  4.9:1 on face-lo   AA  — amber TEXT on cream */
  --amber-bar:#B87333;   /*  amber FILL only; dark ink sits on it */
  --amber-lit:#E3A96B;   /*  5.0:1 on desk      AA  — amber TEXT on desk */
  --amber-hot:#2A1602;   /*  4.6:1 on amber-bar AA  — ink for amber fills */
  --red:#9B2C1F;         /*  5.3:1 on face-lo   AA  */
  --green:#175039;       /*  6.1:1 on face-lo   AA  */
  --cream:#EFE9D8;       /*  8.6:1 on desk      AAA */
  --cream-dim:#CBD5CB;   /*  6.9:1 on desk      AA  */
  --cream-soft:#A8B6A9;  /*  4.9:1 on desk      AA  */
  --line:#8F8A76;
  --rule:#CDC7B1;

  /* ── CONTEXT: the DESK. Redeclared by .on-face below. ─────────── */
  --fg:var(--cream);
  --fg-dim:var(--cream-dim);
  --fg-soft:var(--cream-soft);
  --fg-accent:var(--amber-lit);
  --fg-rule:rgba(203,213,203,.22);
  --fg-ring:#F2D9AE;

  /* paper (print view) */
  --paper:#F4F1E4; --paper-bar:#E2EBE0; --paper-ink:#15201A; --paper-dim:#4A554D;

  /* ── TYPE SCALE — size / leading pairs ────────────────────────── */
  /* 12px is the label tier: uppercase, tracked, short strings only — window
     chrome, kickers, section tags, plate labels. 11px was under this file's
     own stated floor and it showed on the green. */
  --fs-chrome:12px;   --lh-chrome:1.45;
  --fs-micro:13px;    --lh-micro:1.5;     /* FLOOR for anything sentence-shaped */
  --fs-cap:13.5px;    --lh-cap:1.55;      /* mono metadata, evidence */
  --fs-sm:14.5px;     --lh-sm:1.55;       /* secondary copy */
  --fs-base:15.5px;   --lh-base:1.6;      /* body */
  --fs-md:17px;       --lh-md:1.45;       /* card titles */
  --fs-lg:21px;       --lh-lg:1.3;        /* window lead */
  --fs-num:30px;      --fs-grade:56px;
  --tr-chrome:.06em;  --tr-label:.1em;

  --measure:62ch; --measure-mono:70ch;

  /* ── SPACE — 4px base ─────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;

  /* ── ELEVATION — one hard shadow, three depths ────────────────── */
  --lift-1:2px 2px 0 rgba(10,20,16,.34);
  --lift-2:4px 4px 0 rgba(10,20,16,.40);
  --lift-3:6px 6px 0 rgba(10,20,16,.48);

  /* ── BEVEL — the 1990s double edge, as one reusable pair ──────── */
  --bevel-out:
    inset 1px 1px 0 var(--bevel-lt), inset -1px -1px 0 var(--bevel-dk),
    inset 2px 2px 0 var(--bevel-lt2), inset -2px -2px 0 var(--bevel-dk2);
  --bevel-in:
    inset 1px 1px 0 var(--bevel-dk), inset -1px -1px 0 var(--bevel-lt),
    inset 2px 2px 0 var(--bevel-dk2), inset -2px -2px 0 var(--bevel-lt2);

  --px:"Silkscreen",ui-monospace,monospace;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-mech:cubic-bezier(.2,.9,.3,1);
}

/* ── CONTEXT: CREAM. Everything inside re-inks itself. ────────────
   Bound to the STRUCTURAL selectors, not to a class JS has to add: the
   ink contract has to hold with JavaScript switched off. */
.win-body,.bigcard,.plan,.sheet,.on-face{
  --fg:var(--ink);
  --fg-dim:var(--dim);
  --fg-soft:var(--dim);
  --fg-accent:var(--amber-ink);
  --fg-rule:var(--rule);
  --fg-ring:#1A1F1C;
  color:var(--fg);
}

/* ══ RESET ═════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{
  margin:0;min-height:100%;
  font-family:var(--sans);font-size:var(--fs-base);line-height:var(--lh-base);
  color:var(--fg);
  background-color:var(--desk);
  /* One flat desktop colour with a 45-degree hairline weave over it — what the
     era actually did. The radial it replaces was the largest single gradient
     area on the page and the main thing reading as a generated surface. */
  background-image:
    repeating-linear-gradient(45deg,var(--desk-2) 0 1px,transparent 1px 2px);
  background-attachment:fixed;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:#0B4C6B;color:#F2EFE2}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0}
img,svg{max-width:100%;height:auto}
a{color:inherit}

/* ── FOCUS — one ring, context-coloured, never removed ─────────── */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--fg-ring);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(10,20,16,.45);
}
.on-face :focus-visible,.win :focus-visible,.sysbar :focus-visible{
  outline:1px dotted var(--ink);outline-offset:2px;
  box-shadow:0 0 0 2px rgba(255,253,242,.85)}
.on-face .btn:focus-visible,.win .btn:focus-visible{outline-offset:-4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-60px;left:var(--s3);z-index:1200;
  padding:var(--s3) var(--s4);background:var(--amber-lit);color:var(--amber-hot);
  font-family:var(--mono);font-weight:600;font-size:var(--fs-micro);letter-spacing:.08em;
  text-decoration:none;box-shadow:var(--lift-2);transition:top .18s var(--ease)}
.skip-link:focus{top:var(--s3)}

/* ══ SCROLLBAR — the chunky beveled one, with arrow boxes ═══════ */
*{scrollbar-color:var(--face-2) var(--face-3)}
::-webkit-scrollbar{width:17px;height:17px}
::-webkit-scrollbar-track{
  background:repeating-conic-gradient(var(--face-3) 0 25%,var(--face) 0 50%) 0 0/2px 2px}
::-webkit-scrollbar-thumb{
  background:var(--face-2);
  box-shadow:var(--bevel-out);
  border:1px solid var(--edge)}
::-webkit-scrollbar-thumb:hover{background:var(--face-hi)}
::-webkit-scrollbar-button:single-button{
  height:17px;width:17px;background:var(--face-2);
  box-shadow:var(--bevel-out);border:1px solid var(--edge)}
::-webkit-scrollbar-corner{background:var(--face-3)}

/* ══ CRT LAYER — toggleable. Legibility never depends on it. ════ */
.veil{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.04) 0 1px,transparent 1px 3px)}
.vignette{position:fixed;inset:0;z-index:899;pointer-events:none;
  background:radial-gradient(125% 105% at 50% 40%,transparent 52%,rgba(6,14,11,.34) 100%)}
.glass{position:fixed;inset:0;z-index:901;pointer-events:none;opacity:0;
  transition:opacity .5s var(--ease)}
/* Curvature and bloom live ONLY at the screen edge. An earlier version tinted
   and filtered the whole desktop, which turned the cream panels muddy green
   and cost real text contrast — the effect was eating the interface. */
body.crt .veil{opacity:1}
body.crt .glass{
  opacity:1;border-radius:26px/34px;
  box-shadow:
    inset 0 0 0 1px rgba(210,235,220,.10),
    inset 0 0 70px rgba(6,14,11,.36),
    inset 0 0 190px rgba(6,14,11,.18);
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.022) 0 1px,transparent 1px 3px);
}
/* phosphor bloom on CHROME ONLY — never on content the user must read */
body.crt .win-bar,body.crt .sysbar .os,body.crt .tray,body.crt .topbar .brand{
  text-shadow:0 0 6px rgba(190,255,220,.30)}

/* ══ BOOT CURTAIN ══════════════════════════════════════════════ */
.boot{
  position:fixed;inset:0;z-index:1000;background:#0B1512;color:#7FE3B0;
  font-family:var(--mono);font-size:var(--fs-cap);line-height:1.75;
  padding:clamp(var(--s5),6vw,var(--s8));overflow:hidden;cursor:pointer;
}
.boot[hidden]{display:none!important}
.boot pre{margin:0;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.boot .ok{color:#F0D9A8}
.boot .off{color:#C98A6A}
.boot .banner{color:#BFF3D6}
.boot .cur{display:inline-block;width:9px;height:15px;background:#7FE3B0;
  vertical-align:-2px;animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
.boot .skip{
  position:absolute;right:var(--s5);bottom:var(--s5);
  color:#6FA98C;font-size:var(--fs-micro);letter-spacing:var(--tr-label);
}
.power{position:fixed;inset:0;z-index:940;pointer-events:none;background:#DFF7E8;opacity:0}
@keyframes powerOn{0%{opacity:.9;transform:scaleY(.004)}55%{opacity:.9;transform:scaleY(.004)}
  75%{opacity:.55;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
.power.go{animation:powerOn .5s var(--ease-mech) forwards}

/* ══ TOP BAR — real navigation wearing the menubar's chrome ════ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:stretch;
  background:var(--chrome-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 2px 0 rgba(8,18,14,.34),0 6px 16px rgba(6,14,11,.30);
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--chrome-ink);
}
.topbar a,.topbar .brand{
  display:flex;align-items:center;padding:0 12px;min-height:32px;
  color:var(--chrome-ink);text-decoration:none;white-space:nowrap;
  border-right:1px solid rgba(0,0,0,.22);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.07);
  transition:background .12s linear;
}
.topbar .brand{font-weight:700;letter-spacing:.08em;background:rgba(0,0,0,.22)}
.topbar a:hover{background:rgba(255,255,255,.16)}
.topbar a:active{background:rgba(0,0,0,.20)}
.topbar a:focus-visible{outline-offset:-3px;z-index:1}
.topbar a[aria-current="page"]{
  background:linear-gradient(180deg,var(--face-hi),var(--face-lo));
  color:var(--ink);font-weight:600;
  box-shadow:inset 1px 1px 0 var(--bevel-lt),inset -1px 0 0 var(--bevel-dk2)}
.topbar a[aria-current="page"]:hover{background:linear-gradient(180deg,#EDE8D8,var(--face))}
.topbar .sp{flex:1;border:0;box-shadow:none}
.topbar .ext::after{content:"↗";margin-left:5px;opacity:.65;font-size:.9em}
/* the WhatsApp rail is the only human route in the chrome — mark it */
.topbar a.hot{background:#5C4A20;box-shadow:inset 0 0 0 1px rgba(227,169,107,.40)}
.topbar a.hot:hover{background:rgba(227,169,107,.42);color:#1A1206}

/* ══ SYSTEM BAR — the taskbar, bottom, quiet chrome ════════════ */
.sysbar{
  position:fixed;left:0;right:0;bottom:0;z-index:800;
  display:flex;align-items:center;gap:var(--s2);
  min-height:34px;padding:3px var(--s2);
  background:var(--face);
  box-shadow:inset 0 2px 0 var(--bevel-lt),inset 0 -1px 0 var(--bevel-dk2),
             0 -2px 0 rgba(8,18,14,.30),0 -8px 20px rgba(6,14,11,.26);
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink);
  overflow-x:auto;scrollbar-width:none;
}
.sysbar::-webkit-scrollbar{display:none}
.sysbar .os{
  display:flex;align-items:center;gap:6px;flex:none;
  padding:5px var(--s3);background:var(--face-2);box-shadow:var(--bevel-in);
  font-family:var(--px);font-size:var(--fs-chrome);letter-spacing:var(--tr-chrome)}
.sysbar .os b{color:var(--chrome-3)}
.sysbar .os .dot{width:9px;height:9px;flex:none;background:var(--chrome-2);
  box-shadow:inset 0 0 0 2px var(--well)}
.mi{
  flex:none;padding:6px var(--s3);min-height:26px;cursor:pointer;
  background:var(--face-2);
  box-shadow:var(--bevel-out);
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink);
  white-space:nowrap;transition:background .12s linear;
}
.mi:hover{background:var(--face-hi)}
.mi:active,.mi[aria-pressed="true"]{
  background:var(--face-2);box-shadow:var(--bevel-in)}
.mi[aria-pressed="true"]{color:var(--chrome-3);font-weight:600}
.mi[aria-pressed="true"]::before{content:"▪ ";color:var(--green)}
.mi[aria-pressed="false"]::before{content:"▫ ";color:var(--dim)}
.tray{
  margin-left:auto;flex:none;display:flex;align-items:center;gap:var(--s2);
  padding:5px var(--s3);background:var(--face-2);box-shadow:var(--bevel-in);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tray .led{width:8px;height:8px;flex:none;background:var(--green);
  box-shadow:0 0 5px rgba(20,80,57,.7)}
.tray .clock{color:var(--ink)}

/* ══ PAGE ══════════════════════════════════════════════════════ */
.page{
  max-width:1180px;margin:0 auto;
  padding:calc(32px + var(--s6)) var(--s4) calc(34px + var(--s8));
}

/* ══ HERO ══════════════════════════════════════════════════════
   The hero sits directly on the desk, so it inherits :root's light
   context automatically. No hand-applied colours here any more. */
.hero-win{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--s5);align-items:start;margin-bottom:var(--s6);padding:var(--s2) 0 0}
.h-kick{
  font-family:var(--mono);font-size:var(--fs-chrome);letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-accent);margin-bottom:var(--s3);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.h-kick::before{content:"";width:22px;height:2px;background:var(--fg-accent);flex:none}
/* The headline is machine type: IBM Plex Mono at 700. Same family the console
   chrome already uses, so it costs no extra font load, and a monospaced display
   line reads as terminal output rather than as marketing. */
.h-title{
  font-family:var(--mono);font-weight:700;font-size:clamp(26px,3.9vw,46px);
  line-height:1.12;letter-spacing:-.035em;color:var(--fg);margin:0 0 var(--s4);
  text-wrap:balance;max-width:26ch;
  text-shadow:0 2px 0 rgba(8,18,14,.30)}
.h-title br{display:block}
.h-title em{
  font-style:normal;font-weight:700;color:var(--fg-accent);
  text-transform:uppercase;letter-spacing:-.01em}
.h-sub{font-size:var(--fs-md);line-height:1.58;color:var(--fg-dim);max-width:58ch;margin:0}
.h-sub b{color:var(--fg);font-weight:600}

/* the right-hand plate: real machine facts, and it kills the dead corner */
.hero-plate{
  align-self:start;
  padding:var(--s4);background:rgba(12,26,21,.42);
  box-shadow:inset 0 0 0 1px rgba(203,213,203,.16),var(--lift-1);
  font-family:var(--mono);font-size:var(--fs-micro);line-height:1.5;color:var(--fg-soft)}
.hero-plate dt{
  font-family:var(--mono);font-size:var(--fs-chrome);letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-accent);margin-bottom:2px}
.hero-plate dd{margin:0 0 var(--s3);color:var(--fg-dim)}
.hero-plate dd:last-of-type{margin-bottom:0}
.hero-plate dd b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
@media(min-width:1040px){
  .hero-win{grid-template-columns:minmax(0,1fr) 260px;gap:var(--s7)}
}

/* ══ WINDOW ════════════════════════════════════════════════════ */
.win{
  position:relative;margin-bottom:var(--s5);
  background:var(--face);
  box-shadow:var(--bevel-out),var(--lift-2);
  outline:1px solid var(--edge);outline-offset:0;
}
.win.focused{box-shadow:var(--bevel-out),var(--lift-3)}
.win.dragging{box-shadow:var(--bevel-out),var(--lift-3);cursor:grabbing;z-index:20}
.win-bar{
  display:flex;align-items:stretch;gap:2px;min-height:32px;
  padding:0 3px 0 var(--s3);
  background:linear-gradient(90deg,var(--chrome-3) 0%,var(--chrome-2) 62%,#447059 100%);
  color:var(--chrome-ink);
  font-family:var(--px);font-size:var(--fs-chrome);letter-spacing:var(--tr-chrome);
  -webkit-user-select:none;user-select:none;
}
.win[data-draggable] .win-bar{cursor:grab;touch-action:none}
.win[data-draggable] .win-bar:active{cursor:grabbing}
.win:not(.focused) .win-bar{
  background:linear-gradient(90deg,#4A564F,#5C6862);color:var(--chrome-off-ink)}
.win-bar .t{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:2px}
.win-bar .t::before{
  content:"";width:13px;height:13px;flex:none;align-self:center;
  background:var(--face-2);opacity:.75;
  box-shadow:inset 1px 1px 0 var(--bevel-lt),inset -1px -1px 0 var(--bevel-dk),
             0 0 0 1px rgba(0,0,0,.45)}
.win.focused .win-bar .t::before{
  background:var(--amber-bar);opacity:1}
.wbtn{
  align-self:center;width:24px;height:24px;flex:none;display:grid;place-items:center;
  cursor:pointer;padding:0;
  background:var(--face-2);
  box-shadow:var(--bevel-out);outline:1px solid var(--edge);
  font-family:var(--mono);font-weight:700;font-size:11px;line-height:1;color:var(--ink);
}
/* the minimise glyph sat centred; on a real title bar it sits on the floor */
.wbtn[data-fold]{align-items:flex-end;padding-bottom:4px}
.wbtn::after{content:"";position:absolute;inset:-8px} /* 40px touch target */
.wbtn{position:relative}
.wbtn:hover{background:var(--face-hi)}
.wbtn:active{background:var(--face-2);box-shadow:var(--bevel-in)}
.wbtn:disabled{color:#6E7469;cursor:not-allowed;box-shadow:var(--bevel-out);opacity:.55}
.wbtn:focus-visible{outline:2px solid var(--fg-ring);outline-offset:1px}
.win-body{padding:var(--s5);overflow-wrap:break-word}
@media(min-width:940px){.win-body{padding:var(--s6) var(--s7)}}
.win.collapsed .win-body{display:none}
.win.collapsed{margin-bottom:var(--s3)}

/* ══ TYPE ROLES ════════════════════════════════════════════════ */
.note{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--fg-dim);max-width:var(--measure)}
.note+.note{margin-top:var(--s3)}
.note-tight{margin-bottom:var(--s4)}
.terms{
  margin-top:var(--s3);font-family:var(--mono);font-size:var(--fs-micro);
  line-height:var(--lh-micro);color:var(--fg-dim);max-width:var(--measure-mono)}
.terms b{color:var(--fg);font-weight:600}

/* ══ SECTIONS ══════════════════════════════════════════════════ */
.sec{margin:var(--s8) 0 0}
.sec-tag{
  font-family:var(--mono);font-size:var(--fs-chrome);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-accent);
  display:flex;gap:10px;align-items:center}
.sec-tag::before{content:"";width:26px;height:2px;background:var(--fg-accent);flex:none}
.sec h2{
  font-family:var(--sans);font-weight:600;font-size:clamp(22px,2.5vw,30px);
  line-height:1.17;letter-spacing:-.014em;margin:var(--s3) 0 var(--s3);
  color:var(--fg);max-width:25ch;text-wrap:balance;
  text-shadow:0 1px 0 rgba(8,18,14,.24)}
.sec-lead{font-size:var(--fs-base);line-height:1.6;color:var(--fg-dim);max-width:60ch;margin:0 0 var(--s5)}

/* ══ CONTROLS ══════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:var(--s3) var(--s5);cursor:pointer;
  background:var(--face-2);
  box-shadow:var(--bevel-out),var(--lift-1);
  outline:1px solid var(--edge);outline-offset:0;
  /* .btn is used on <button> AND <a>. An <a> does not inherit colour, so
     without this the UA link blue lands inside a cream 1990s button —
     which is exactly what shipped in v1 on /audit/ and /systems/. */
  color:var(--ink);text-decoration:none;
  font-family:var(--mono);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.09em;text-transform:uppercase;
  transition:background .12s linear,transform .08s linear;
}
.btn:hover{background:var(--face-hi)}
.btn:active{background:var(--face-2);box-shadow:var(--bevel-in);transform:translate(1px,1px)}
.btn:focus-visible{outline:2px solid var(--fg-ring);outline-offset:2px}
.btn[disabled],.btn:disabled{
  color:#8B9188;cursor:not-allowed;transform:none;
  background:var(--face-2);box-shadow:var(--bevel-out);opacity:.75}
.btn .arw{transition:transform .16s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}

.btn.primary{
  background:var(--chrome-2);color:var(--chrome-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.28),var(--lift-1)}
.btn.primary:hover{background:#447059}
.btn.primary:active{background:var(--chrome-3);
  box-shadow:inset 0 2px 0 rgba(0,0,0,.34),inset 0 -1px 0 rgba(255,255,255,.12)}
.btn.primary:disabled{background:#6D7C75;color:#DCDCD4;box-shadow:var(--lift-1)}

.btn.cta{
  background:#C98244;color:var(--amber-hot);
  box-shadow:inset 0 1px 0 rgba(255,240,215,.45),inset 0 -2px 0 rgba(74,40,8,.34),var(--lift-1)}
.btn.cta:hover{background:#DDA268}
.btn.cta:active{background:#C98244;
  box-shadow:inset 0 2px 0 rgba(74,40,8,.40),inset 0 -1px 0 rgba(255,240,215,.20)}
/* Exactly one amber CTA per view may carry the halo; a page of pulsing
   borders reads as a banner ad, not an instrument. JS marks the lead one. */
.btn.cta.lead{position:relative}
.btn.cta.lead::after{
  content:"";position:absolute;inset:-4px;pointer-events:none;
  box-shadow:0 0 0 2px var(--amber-lit);opacity:0;animation:breathe 3.2s var(--ease) infinite}
@keyframes breathe{0%,100%{opacity:0}50%{opacity:.5}}
.btn.ghost{
  background:transparent;color:var(--fg);box-shadow:none;
  outline:1px solid var(--fg-rule)}
.btn.ghost:hover{background:rgba(255,255,255,.08);outline-color:var(--fg-accent)}
.btn.sm{min-height:34px;padding:var(--s2) var(--s3);font-size:11px}

/* ── the input. Styled by structure, so it can never be missed again. ── */
.scan-row input,.tin{
  min-width:0;width:100%;
  padding:var(--s3) var(--s4);
  background:var(--well);border:0;
  box-shadow:var(--bevel-in);outline:1px solid var(--edge);
  font-family:var(--mono);font-size:var(--fs-md);color:var(--ink);
}
.scan-row input::placeholder,.tin::placeholder{color:#5F6759;opacity:1}
.scan-row input:hover,.tin:hover{background:#F7F5EC}
.scan-row input:focus-visible,.tin:focus-visible{
  background:#FBFAF3;outline:2px solid var(--chrome-2);outline-offset:0;
  box-shadow:var(--bevel-in),0 0 0 4px rgba(58,101,82,.26)}
.scan-row input:disabled,.tin:disabled{background:var(--face-2);color:#7C8479;cursor:not-allowed}
.scan-row input:user-invalid{outline-color:var(--red);box-shadow:var(--bevel-in),0 0 0 4px rgba(147,40,27,.20)}

.field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);margin:var(--s5) 0 0}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* ══ SCANNER ═══════════════════════════════════════════════════ */
.scanner .win-body{padding-bottom:var(--s4)}
.stamp{
  display:inline-flex;align-items:center;gap:8px;
  margin:var(--s4) 0 var(--s3);padding:6px var(--s3);
  background:var(--face-2);box-shadow:var(--bevel-in);
  font-family:var(--mono);font-size:var(--fs-micro);line-height:var(--lh-micro);
  letter-spacing:.06em;color:var(--dim);text-transform:uppercase;
  max-width:100%;overflow-wrap:anywhere}
.stamp::before{
  content:"";width:9px;height:9px;flex:none;background:var(--dim);
  box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.stamp[data-state="ready"]::before{background:var(--chrome-2)}
.stamp[data-state="running"]{color:var(--amber-ink)}
.stamp[data-state="running"]::before{background:var(--amber-bar);animation:pulse 1s steps(2) infinite}
.stamp[data-state="done"]{color:var(--green)}
.stamp[data-state="done"]::before{background:var(--green);box-shadow:0 0 6px rgba(20,80,57,.6)}
.stamp[data-state="error"]{color:var(--red)}
.stamp[data-state="error"]::before{background:var(--red)}
@keyframes pulse{50%{opacity:.25}}

/* ── the six categories ── */
.metric{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,270px) 48px;
  gap:var(--s4);align-items:center;padding:var(--s3) 0}
.metric+.metric{border-top:1px solid var(--fg-rule)}
.metric .lbl{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--fg);overflow-wrap:break-word}
.metric .lbl small{color:var(--fg-dim);font-size:var(--fs-micro);
  font-family:var(--mono);letter-spacing:.02em;white-space:nowrap}
.seg{
  height:16px;padding:2px;background:var(--face-3);
  box-shadow:var(--bevel-in);overflow:hidden}
/* width:0 must be the CSS default — otherwise an unfilled meter renders
   full-width and reads as a perfect score before the data arrives. */
.seg i{
  display:block;width:0;height:100%;
  background:repeating-linear-gradient(90deg,var(--chrome-2) 0 5px,transparent 5px 7px);
  transition:width .9s var(--ease-mech)}
.seg.warn i{background:repeating-linear-gradient(90deg,var(--amber-ink) 0 5px,transparent 5px 7px)}
.seg.bad  i{background:repeating-linear-gradient(90deg,var(--red) 0 5px,transparent 5px 7px)}
/* EMPTY is a state, not a low score. A flat track reads as a filled bar at
   a glance, so no-data gets its own hatch and its own label. */
.metric.is-empty .seg{
  background-image:repeating-conic-gradient(
    rgba(120,114,94,.34) 0 25%,transparent 0 50%);
  background-size:4px 4px}
.metric.is-empty .val{color:var(--fg-dim)}
.metric .val{
  text-align:right;font-family:var(--mono);font-size:var(--fs-md);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--fg)}
@keyframes segScan{from{background-position:0 0}to{background-position:28px 0}}
.metric.is-loading .seg{
  background-image:repeating-linear-gradient(135deg,
    rgba(184,115,51,.34) 0 6px,transparent 6px 14px);
  animation:segScan .9s linear infinite}

/* ── progress readout while the server crawls ── */
.pane{margin-top:var(--s4);padding:var(--s4);background:var(--face-2);box-shadow:var(--bevel-in)}
.pane[hidden]{display:none}
.pane-head{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--fg-dim)}
.pane-head b{color:var(--fg)}
.bar{height:18px;padding:3px;margin:var(--s3) 0 0;background:var(--face-3);box-shadow:var(--bevel-in)}
.bar i{display:block;height:100%;width:30%;
  background:repeating-linear-gradient(90deg,var(--chrome-2) 0 8px,transparent 8px 11px);
  animation:crawl 1.4s linear infinite}
@keyframes crawl{0%{transform:translateX(-40%)}100%{transform:translateX(240%)}}

/* ── result + failure ── */
.result{margin-top:var(--s4);font-size:var(--fs-sm);line-height:var(--lh-sm);
  color:var(--fg-dim);max-width:var(--measure);overflow-wrap:anywhere}
.result[hidden]{display:none}
.result b{color:var(--fg);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.result a{color:var(--green);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.result a:hover{color:var(--ink);text-decoration-thickness:2px}
.err{
  display:block;margin-bottom:var(--s2);padding:var(--s3);
  background:#F6E7E2;color:var(--red);font-weight:600;
  box-shadow:inset 3px 0 0 var(--red),var(--bevel-in);
  overflow-wrap:anywhere}

/* ══ CARDS — subgrid, so every card aligns row for row ═════════
   Flexbox aligns WITHIN a card and never ACROSS cards, which is why v1
   put four titles, four prices and four buttons at four different
   heights. Subgrid makes the six rows shared tracks. */
/* auto-fit columns and a fixed grid-row are incompatible: the cards all
   demand row 1, so a narrow viewport spills them into IMPLICIT columns the
   template never sized, and the page scrolls sideways. Two states instead —
   one aligned row when there is width for it, stacked when there is not. */
.bigcards{
  display:grid;grid-template-columns:1fr;gap:var(--s4);margin:var(--s5) 0}
.bigcard{
  display:flex;flex-direction:column;row-gap:var(--s2);
  padding:var(--s5) var(--s4) var(--s4);
  background:var(--face);
  box-shadow:var(--bevel-out),var(--lift-1);
  outline:1px solid var(--bevel-dk);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.bigcard:hover{box-shadow:var(--bevel-out),var(--lift-2);transform:translateY(-2px)}
.bigcard:focus-within{box-shadow:var(--bevel-out),var(--lift-2)}
.bigcard .bc-no{font-family:var(--mono);font-size:var(--fs-chrome);
  letter-spacing:.2em;color:var(--fg-dim);text-transform:uppercase}
.bigcard .bc-flag{justify-self:start;align-self:center}
.bigcard h3{font-size:var(--fs-lg);line-height:1.2;font-weight:600;
  color:var(--fg);letter-spacing:-.012em;text-wrap:balance}
.bigcard .bc-price{align-self:start;
  font-family:var(--mono);font-size:var(--fs-num);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;color:var(--fg-accent)}
.bigcard .bc-price s{display:block;text-decoration:none;font-size:var(--fs-sm);
  font-weight:400;color:var(--fg-dim);letter-spacing:.04em;margin-bottom:2px;
  text-transform:uppercase}
/* The fine print is its OWN row. Left inside .bc-price it changes that
   block's height per card, and four price figures land on four baselines —
   which is the one comparison a pricing row exists to make easy. */
.bigcard .bc-fine{font-family:var(--mono);font-size:var(--fs-micro);
  line-height:var(--lh-micro);color:var(--fg-dim);align-self:start;
  max-width:34ch}
.bigcard .bc-body{flex:1;align-self:start;
  font-size:var(--fs-sm);line-height:1.55;color:var(--fg-dim)}
.bigcard .bc-body p+p,.bigcard .bc-body ul{margin-top:var(--s3)}
.bigcard .bc-go{margin-top:auto;align-self:stretch;padding-top:var(--s2)}
.bigcard .bc-go .btn{width:100%}
/* the recommended rung has to READ recommended, not merely be tinted */
.bigcard.is-lead{
  background:var(--well);
  outline:2px solid var(--chrome-2);outline-offset:-1px;
  box-shadow:var(--bevel-out),var(--lift-2)}
.bigcard.is-lead:hover{box-shadow:var(--bevel-out),var(--lift-3);transform:translateY(-2px)}
@media(min-width:940px){
  .bigcards{
    grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    grid-template-columns:none;
    grid-template-rows:auto auto auto auto auto 1fr auto}
  .bigcard{grid-row:1 / span 7;display:grid;grid-template-rows:subgrid}
  .bigcard .bc-no{grid-row:1}  .bigcard .bc-flag{grid-row:2}
  .bigcard h3{grid-row:3}      .bigcard .bc-price{grid-row:4;align-self:end}
  .bigcard .bc-fine{grid-row:5}
  .bigcard .bc-body{grid-row:6;flex:none} .bigcard .bc-go{grid-row:7;margin-top:0}
}

/* No subgrid support (older Safari/Samsung) — stay in the stacked flex
   layout at every width rather than render a broken grid. */
@supports not (grid-template-rows:subgrid){
  @media(min-width:940px){
    .bigcards{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
      grid-template-rows:none}
    .bigcard{grid-row:auto;display:flex}
    .bigcard .bc-body{flex:1} .bigcard .bc-go{margin-top:auto}
  }
}
.bc-flag{
  display:inline-block;padding:4px 9px;
  background:var(--amber-bar);color:var(--amber-hot);
  box-shadow:inset 0 1px 0 rgba(255,240,215,.40),var(--lift-1);
  font-family:var(--mono);font-size:var(--fs-chrome);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}

/* ══ LISTS ═════════════════════════════════════════════════════ */
.tier-list{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--fg-dim);
  max-width:var(--measure)}
.bigcard .tier-list{max-width:none}
/* A 62ch measure inside a 1180px window leaves the right half empty. Two
   columns fill the window while each column keeps its own readable measure —
   the list stays capped, the panel stops looking hollow. Unordered terms only:
   .steps is a sequence and must read straight down one column. */
@media(min-width:1100px){
  .win-body>.tier-list{max-width:none;columns:2;column-gap:var(--s8);
    column-rule:1px solid var(--fg-rule)}
  .win-body>.tier-list li{break-inside:avoid;max-width:46ch}
  .win-body>.tier-list li:first-child{border-top:0}
}
/* Hanging indent, NOT grid. A grid <li> promotes the bare text node after
   <b>Label</b> to a third anonymous item, which wraps into the 14px gutter
   column and renders one character per line. */
.tier-list li{position:relative;padding:var(--s2) 0 var(--s2) 22px;overflow-wrap:break-word}
.tier-list li+li{border-top:1px solid var(--fg-rule)}
.tier-list li::before{content:"—";position:absolute;left:0;top:var(--s2);
  color:var(--fg-accent);font-weight:600}
.tier-list li b{color:var(--fg);font-weight:600}
.bigcard .tier-list li{padding:5px 0 5px 20px}
.bigcard .tier-list li+li{border-top:0}

.steps{font-family:var(--mono);font-size:var(--fs-cap);line-height:1.62;color:var(--fg-dim);
  max-width:var(--measure-mono)}
.steps li{position:relative;padding:var(--s3) 0 var(--s3) 38px;overflow-wrap:break-word}
.steps li+li{border-top:1px solid var(--fg-rule)}
.steps li b:first-child{position:absolute;left:0;top:var(--s3);
  font-weight:400;color:var(--fg-accent);font-variant-numeric:tabular-nums}
.steps li b{color:var(--fg);font-weight:600}
.steps li.on{color:var(--fg)} .steps li.ok{color:var(--green)}

/* ══ FINDINGS ══════════════════════════════════════════════════ */
.find{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0}
.find+.find{border-top:1px solid var(--fg-rule)}
.find b{color:var(--fg);font-weight:600}
.sev{
  height:fit-content;padding:5px var(--s1);text-align:center;
  outline:1px solid currentColor;outline-offset:-1px;
  font-family:var(--mono);font-size:var(--fs-chrome);font-weight:600;
  line-height:1.45;letter-spacing:.06em;color:var(--green)}
.sev.high{color:var(--red)} .sev.med{color:var(--amber-ink)} .sev.low{color:var(--fg-dim)}
.ev{
  margin-top:var(--s3);padding:var(--s3);background:var(--well);
  box-shadow:inset 3px 0 0 var(--amber-bar),var(--bevel-in);
  font-family:var(--mono);font-size:var(--fs-cap);line-height:var(--lh-cap);
  overflow-wrap:anywhere;max-width:var(--measure-mono)}

/* ══ CLIENT MARK — the only named client on the site, so show the mark ══ */
.client{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}
.client img{height:34px;width:auto;flex:none;
  padding:6px var(--s2);background:var(--well);box-shadow:var(--bevel-in)}
.client a{color:var(--green);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.client a:hover{color:var(--ink);text-decoration-thickness:2px}
.client .who{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.client .who b{color:var(--fg);font-weight:600}

/* ══ FOOTER ════════════════════════════════════════════════════ */
.foot{
  max-width:1180px;margin:var(--s7) auto 0;
  padding:var(--s5) var(--s4) 0;border-top:1px solid var(--fg-rule);
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--fg-soft);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.foot a{display:inline-flex;align-items:center;min-height:32px;
  color:var(--fg-dim);text-decoration:none;
  border-bottom:1px solid transparent}
.foot a:hover{color:var(--fg-accent);border-bottom-color:var(--fg-accent)}
.foot a:focus-visible{outline-offset:3px}

/* ══ DOT-MATRIX PRINT VIEW ═════════════════════════════════════ */
.print{
  position:fixed;inset:0;z-index:950;background:rgba(8,16,13,.88);
  overflow:auto;padding:var(--s5) var(--s3);display:none}
.print.open{display:block}
.print-tools{max-width:860px;margin:0 auto var(--s3);display:flex;gap:var(--s2);
  justify-content:flex-end;flex-wrap:wrap}
.sheet-wrap{position:relative;max-width:860px;margin:0 auto}
/* Hole strips are drawn ONCE, by .sheet-wrap. An earlier .sheet::before/after
   pair had no left/right and no positioned ancestor, so it floated over the
   headline. Removed rather than patched. */
.sheet-wrap::before,.sheet-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:22px;z-index:2;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,#FCFBF5 0 4.5px,rgba(21,32,26,.22) 5px,transparent 5.6px);
  background-size:22px 27px}
.sheet-wrap::before{left:12px} .sheet-wrap::after{right:12px}
.sheet{
  --fg:var(--paper-ink);--fg-dim:var(--paper-dim);--fg-accent:var(--paper-ink);
  background:var(--paper);color:var(--paper-ink);
  /* tractor-feed strips left + right, perforation dashes inboard */
  background-image:
    repeating-linear-gradient(180deg,transparent 0 12px,rgba(21,32,26,.55) 12px 20px),
    repeating-linear-gradient(180deg,transparent 0 12px,rgba(21,32,26,.55) 12px 20px),
    repeating-linear-gradient(180deg,var(--paper-bar) 0 27px,transparent 27px 54px);
  background-size:1px 100%,1px 100%,100% 100%;
  background-position:34px 0,calc(100% - 34px) 0,0 0;
  background-repeat:repeat-y,repeat-y,repeat;
  padding:var(--s7) 56px;
  box-shadow:0 0 0 1px #B9C2B6,var(--lift-3);
  font-family:var(--mono);font-size:var(--fs-cap);line-height:1.7}
.sheet h1{font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;
  letter-spacing:.1em;line-height:1.25;margin-bottom:var(--s1)}
.sheet .sub{font-size:var(--fs-micro);letter-spacing:.06em;color:var(--paper-dim);margin-bottom:var(--s3)}
.sheet .rule{border-top:2px solid var(--paper-ink);margin:var(--s3) 0}
.sheet .dot{border-top:1px dashed #7E8B82;margin:var(--s4) 0}
.sheet pre{font:inherit;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.sheet .lbl{color:var(--paper-dim)}
.sheet .big{font-size:var(--fs-num);font-weight:700;letter-spacing:.02em}

/* ══ RESPONSIVE ════════════════════════════════════════════════ */
@media(max-width:1000px){
  .metric{grid-template-columns:minmax(0,1fr) minmax(96px,190px) 44px;gap:var(--s3)}
}
@media(max-width:860px){
  .topbar{position:sticky;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .topbar::-webkit-scrollbar{display:none}
  .topbar a,.topbar .brand{min-height:38px;flex:none}
  /* the two that matter stay put while the middle scrolls under them */
  .topbar .brand{position:sticky;left:0;z-index:2;
    background:linear-gradient(180deg,#3F6E59,#2C5142);
    box-shadow:2px 0 6px rgba(6,14,11,.45)}
  .topbar a.hot{position:sticky;right:0;z-index:2;
    background:linear-gradient(180deg,#8A5522,#6D4318);color:#FBEBD6;
    box-shadow:-2px 0 6px rgba(6,14,11,.45)}
  .topbar .sp{display:none}
  .page{padding-top:var(--s6)}
}
@media(max-width:700px){
  body{background-attachment:scroll}
  .vignette,.glass{display:none}
  .topbar{overflow:hidden}
  .topbar .brand,.topbar a.hot{position:static;box-shadow:none}
  .topbar a:not(.brand):not(.hot):not([aria-current="page"]):not([href*="/academy/"]){display:none}
  .topbar a,.topbar .brand{min-height:44px;padding-left:10px;padding-right:10px}
  .topbar a.hot{margin-left:auto}
  .page{padding-left:var(--s3);padding-right:var(--s3);padding-bottom:var(--s6)}
  .foot{padding-left:var(--s3);padding-right:var(--s3);
    padding-bottom:calc(38px + var(--s5));margin-top:var(--s6)}
  .h-kick::before{display:none}
  .h-kick{font-size:var(--fs-micro);letter-spacing:.12em}
  .h-sub{font-size:var(--fs-base)}
  /* label and value on one line: 12 stacked lines become 4 */
  .hero-plate{display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:var(--s2) var(--s3);align-items:baseline;padding:var(--s3)}
  .hero-plate dt{margin:0;white-space:nowrap}
  .hero-plate dd{margin:0}
  .sysbar .tray span:not(.clock):not(.led){display:none}
  .win-body{padding:var(--s4)}
  .sec{margin-top:var(--s7)}
  .sec h2{max-width:100%}
  /* stack the field: a 44px+ full-width button inside thumb reach */
  .field{grid-template-columns:1fr}
  .field .btn{width:100%;min-height:48px}
  .scan-row input,.tin{min-height:48px;font-size:16px}
  /* label above, bar and number on one line — the 3-col grid collapses
     to a 3-line label beside a 90px bar otherwise */
  .metric{grid-template-columns:minmax(0,1fr) 52px;gap:var(--s1) var(--s3);padding:var(--s3) 0}
  .metric .lbl{grid-column:1 / -1}
  .metric .lbl small{display:block;white-space:normal;margin-top:2px}
  .metric .seg{grid-column:1;height:18px}
  .metric .val{grid-column:2}
  .find{grid-template-columns:1fr;gap:var(--s3)}
  .sev{justify-self:start;padding:5px var(--s3)}
  .sheet{padding:var(--s5) 40px;font-size:var(--fs-micro)}
  .foot{flex-direction:column;gap:var(--s3)}
  /* thumb reach: 23px tall footer links are not tappable */
  .foot nav{gap:0;flex-direction:column;align-items:flex-start;width:100%}
  .foot nav a{min-height:44px;width:100%;
    border-bottom:1px solid var(--fg-rule);border-top:0}
  .foot nav a:hover{border-bottom-color:var(--fg-accent)}
}
/* A narrow visual viewport inside a desktop layout viewport (for example the
   Codex side panel) must reflow instead of exposing a horizontal slice. */
html.visual-narrow body{background-attachment:scroll}
html.visual-narrow .vignette,html.visual-narrow .glass{display:none}
html.visual-narrow .topbar,html.visual-narrow .sysbar{right:auto;width:var(--visual-width)}
html.visual-narrow .topbar{overflow:hidden}
html.visual-narrow .topbar .brand,html.visual-narrow .topbar a.hot{position:static;box-shadow:none}
html.visual-narrow .topbar a:not(.brand):not(.hot):not([aria-current="page"]):not([href*="/academy/"]){display:none}
html.visual-narrow .topbar a.hot{margin-left:auto}
html.visual-narrow .page,html.visual-narrow .foot{
  width:var(--visual-width);max-width:none;margin-left:0;margin-right:0;
  padding-left:var(--s3);padding-right:var(--s3)}
html.visual-narrow .hero-win{grid-template-columns:1fr;gap:var(--s5)}
html.visual-narrow .h-title{font-size:36px;max-width:none}
html.visual-narrow .h-sub{font-size:var(--fs-base)}
html.visual-narrow .hero-plate{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s2) var(--s3);align-items:baseline;padding:var(--s3)}
html.visual-narrow .hero-plate dt{margin:0;white-space:nowrap}
html.visual-narrow .hero-plate dd{margin:0}
html.visual-narrow .metric{
  grid-template-columns:minmax(0,1fr) 52px;gap:var(--s1) var(--s3);padding:var(--s3) 0}
html.visual-narrow .metric .lbl{grid-column:1 / -1}
html.visual-narrow .metric .lbl small{display:block;white-space:normal;margin-top:2px}
html.visual-narrow .metric .seg{grid-column:1;height:18px}
html.visual-narrow .metric .val{grid-column:2}
html.visual-narrow .bigcards{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
html.visual-narrow .bigcard{grid-row:auto;display:flex;min-width:0}
html.visual-narrow .bigcard .bc-body{flex:1}
html.visual-narrow .bigcard .bc-go{margin-top:auto}
html.visual-narrow .bc-flag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
html.visual-narrow .bigcard .bc-go .btn{
  white-space:normal;text-align:center;justify-content:center;overflow-wrap:anywhere}

@media(max-width:400px){
  .page,.foot{padding-left:var(--s2);padding-right:var(--s2)}
  .win-body{padding:var(--s3)}
  .bigcard{padding:var(--s4) var(--s3) var(--s3)}
  .btn{padding:var(--s3) var(--s4);letter-spacing:.05em}
  .sysbar .mi{padding:6px var(--s2)}
}
@media(min-width:1400px){
  .page,.foot{max-width:1240px}
}

/* ══ MOTION / PRINT / FORCED COLOURS ═══════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
  .bigcard:hover{transform:none}
  .btn:active{transform:none}
  .btn.cta.lead::after{animation:none;opacity:.4}
  .bar i{width:100%;animation:none}
}

/* ══ SCOREBOARD ═══════════════════════════════════════════════════
   The panel ships filled with a worked example. A row of dashes tells a
   first-time visitor nothing about what they are about to receive, and the
   scanner's whole job is to make the answer look reachable before anyone
   types. Honesty is carried by two things, not by emptiness: the caption
   says it is an example, and retro.js drops demo mode permanently the
   instant a real scan starts. Ink here is --ink / --dim on the cream well,
   so it re-inks with the surface contract like everything else. */
.board{
  display:flex;align-items:stretch;gap:var(--s4);
  margin:var(--s4) 0 var(--s3);padding:var(--s3);
  background:var(--well);box-shadow:var(--bevel-in)}
.board-grade{
  display:flex;align-items:center;justify-content:center;
  min-width:88px;padding:0 var(--s3);
  background:var(--face-2);box-shadow:var(--bevel-out)}
.board-grade b{
  font-family:var(--mono);font-weight:700;font-size:var(--fs-grade);
  line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.board-read{display:flex;flex-direction:column;justify-content:center;gap:var(--s1);min-width:0}
.board-score{margin:0;display:flex;align-items:baseline;gap:var(--s2)}
.board-score b{
  font-family:var(--mono);font-weight:700;font-size:var(--fs-num);
  line-height:1.1;color:var(--fg);font-variant-numeric:tabular-nums}
.board-score span{font-family:var(--mono);font-size:var(--fs-sm);color:var(--fg-dim)}
.board-meta{
  margin:0;font-family:var(--mono);font-size:var(--fs-micro);line-height:var(--lh-micro);
  color:var(--fg-dim);overflow-wrap:break-word}
/* the blinking invitation — present only while the example is showing */
.board .cur{display:none}
.board.is-demo .cur{
  display:inline-block;width:7px;height:12px;margin-right:6px;
  vertical-align:-1px;background:var(--amber-ink);animation:bl 1.1s steps(2) infinite}
.board.is-demo{box-shadow:var(--bevel-in),inset 4px 0 0 var(--amber-bar)}
@media (prefers-reduced-motion:reduce){
  .board.is-demo .cur{animation:none}
}
@media (max-width:520px){
  .board{gap:var(--s3);padding:var(--s2)}
  .board-grade{min-width:64px}
  .board-grade b{font-size:38px}
}

/* ══ BRANCH LIST — the audit is a fork, not a fourth rung ═════════ */
.branch{list-style:none;margin:0;padding:0}
.branch li{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--fg-rule)}
.branch li:first-child{border-top:0;padding-top:0}
.branch li b{font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:600;color:var(--fg)}
.branch .br-arw{font-family:var(--mono);color:var(--fg-accent)}
.branch .br-go{
  font-family:var(--mono);font-size:var(--fs-cap);line-height:var(--lh-cap);
  color:var(--fg-dim);text-align:right}
/* WCAG 2.2 target-size minimum is 24px; a 13px mono line gives an 18px hit
   box, which is a miss on a phone held one-handed. Padding, not font size —
   the type scale is not the place to solve a touch problem. */
.branch .br-go a{
  display:inline-block;padding:4px 2px;color:var(--fg-accent)}
.branch .br-null .br-go{color:var(--green)}
@media (max-width:640px){
  .branch li{grid-template-columns:1fr;gap:var(--s1)}
  .branch .br-arw{display:none}
  .branch .br-go{text-align:left}
}

/* ══ CARD ADDENDA ════════════════════════════════════════════════ */
.bc-per{font-family:var(--mono);font-size:var(--fs-sm);font-weight:400;color:var(--fg-dim);margin-left:6px}
.bc-note{
  margin:0 0 var(--s3);padding:var(--s2) var(--s3);
  background:var(--face-2);box-shadow:var(--bevel-in);
  font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--fg-dim)}

/* ══ PLAN — the priced tier card ═════════════════════════════════
   One component for every service page. The complaint it answers: a price
   buried in body copy makes a reader work out what they are buying, and a
   reader doing arithmetic is not a reader forming intent. Price, unit and
   commitment sit in a fixed block at the top; what stacks from the tier
   below is stated as a band rather than left implied by ordering. */
.plans{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr);align-items:start}}
.plan{
  display:flex;flex-direction:column;
  background:var(--face);background-image:linear-gradient(var(--face-hi),var(--face-lo));
  box-shadow:var(--bevel-out),var(--lift-2)}
.plan.is-lead{box-shadow:var(--bevel-out),var(--lift-3)}
.plan-head{padding:var(--s5);border-bottom:1px solid var(--fg-rule)}
.plan-kick{
  margin:0 0 var(--s2);font-family:var(--px);font-size:var(--fs-chrome);
  line-height:var(--lh-chrome);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--fg-accent)}
.plan h3{margin:0 0 var(--s3);font-size:var(--fs-md);line-height:var(--lh-md)}
.plan-price{
  margin:0;display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  font-family:var(--mono);font-weight:700;font-size:var(--fs-num);line-height:1.15;
  color:var(--fg);font-variant-numeric:tabular-nums}
.plan-price small{font-size:var(--fs-sm);font-weight:400;color:var(--fg-dim)}
.plan-term{
  margin:var(--s2) 0 0;font-family:var(--mono);font-size:var(--fs-micro);
  line-height:var(--lh-micro);color:var(--fg-dim)}
.plan-for{
  margin:var(--s3) 0 0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--fg)}
.plan-band{
  padding:var(--s2) var(--s5);background:var(--face-2);
  border-bottom:1px solid var(--fg-rule);
  font-family:var(--mono);font-size:var(--fs-micro);line-height:var(--lh-micro);
  color:var(--fg-dim)}
.plan-band b{color:var(--fg);font-weight:600}
.plan-body{padding:var(--s5);flex:1}
.plan-list{list-style:none;margin:0;padding:0}
.plan-list li{
  position:relative;padding:0 0 0 22px;margin:0 0 var(--s3);
  font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--fg)}
.plan-list li:last-child{margin-bottom:0}
.plan-list li::before{
  content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;
  background:var(--chrome-2);box-shadow:var(--bevel-out)}
.plan-list li.is-off{color:var(--fg-dim)}
.plan-list li.is-off::before{background:transparent;box-shadow:var(--bevel-in)}
.plan-foot{padding:0 var(--s5) var(--s5)}
.plan-foot .terms{margin-top:var(--s3)}

@media print{
  .topbar,.sysbar,.veil,.vignette,.glass,.power,.boot,.print-tools,.skip-link{display:none!important}
  body{background:#fff;color:#000}
  .print{position:static;background:#fff;padding:0;display:block}
  .sheet{box-shadow:none;background-image:none}
  .win,.bigcard{box-shadow:none;outline:1px solid #999;break-inside:avoid}
}
@media (forced-colors:active){
  .btn,.win,.bigcard,.seg,.mi{border:1px solid ButtonBorder}
  .seg i{background:Highlight;forced-color-adjust:none}
  .veil,.vignette,.glass{display:none}
}