/* Self-hosted JetBrains Mono (subset files from Google Fonts). */
/* These subsets are VARIABLE fonts (wght axis 400-800), so one face per subset
   covers the whole range: 400 body, 500 tags, 700 headings are all real instances
   of the axis. Verified in Chrome as pixel-identical to font-synthesis:none. */
/* cyrillic-ext */
/* MintGuardian — /next/ staging redesign.
   One font (JetBrains Mono). Palette = live site.css tokens only.
   No images except the two store badges. No shadows, no gradients for colour,
   radius ≤2px (exceptions: the score ring and the chain dots, which are circles). */

:root{
  --hero-delay:.2s;
  --bg-0:#07090b;--bg-1:#0a0c0e;--bg-2:#0e1217;--card:#11161d;
  --line-soft:rgba(255,255,255,.05);--line:rgba(255,255,255,.09);--line-hi:rgba(255,255,255,.16);
  /* --t-3 was #6e7681, which measured 4.09:1 on the card background and failed
     WCAG AA. Lifted to the nearest same-hue value clearing 4.5:1. --t-4 is left
     as it is: raising it to AA lands it on top of --t-3 and collapses two tiers
     of the type scale into one, which is a design change, not a contrast fix. */
  --t-1:#e6edf3;--t-2:#a8b2bd;--t-3:#78818c;--t-4:#4a525c;--t-5:#2f353d;
  --accent:#00ff88;--accent-dim:#00cc6a;--safe:#00ff88;--risky:#ffb86c;--danger:#ff5d5d;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --col:80ch;--pad:20px;--gap:56px;--shield-w:60vw;
}
*{box-sizing:border-box}
main{display:block}
/* No CJK face is bundled — the JetBrains Mono subsets are latin, latin-ext, cyrillic,
   greek and vietnamese. zh/ja/ko therefore fall back, and the stack below names the
   monospace CJK faces that actually exist rather than letting the browser guess.
   Latin runs inside these pages still get JetBrains Mono: it stays first. */
:lang(zh),:lang(ja),:lang(ko){
  --mono:'JetBrains Mono',ui-monospace,
         'Noto Sans Mono CJK SC','Noto Sans Mono CJK JP','Noto Sans Mono CJK KR',
         'Noto Sans CJK SC','Noto Sans CJK JP','Noto Sans CJK KR',
         'Hiragino Sans','Yu Gothic','Malgun Gothic','Microsoft YaHei','PingFang SC',
         'Droid Sans Fallback',monospace;
}
html{scroll-behavior:smooth;scroll-padding-top:64px;overflow-x:hidden;overflow-y:auto}
body{margin:0;background:var(--bg-0);color:var(--t-1);font-family:var(--mono);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* CRT scanlines — ~2% and no more. Remove if it ever becomes visible. */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.02) 2px 3px)}
/* Character dot-grid texture (filled by site.js; pure text) */
.grid{position:fixed;inset:0;margin:0;z-index:0;pointer-events:none;user-select:none;overflow:hidden;color:var(--t-1);opacity:.03;font-size:14px;line-height:14px;white-space:pre}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
b,strong{font-weight:700;color:var(--t-1)}
h1,h2,h3{margin:0;font-weight:700;line-height:1.15;letter-spacing:-.01em}
h2{font-size:26px}
h3{font-size:16px}
p{margin:0}
.col{position:relative;z-index:1;max-width:var(--col);margin:0 auto;padding:0 var(--pad)}
.sec{padding-top:var(--gap)}
.pr{color:var(--accent)}
.dn{color:var(--danger)}

/* ── Glyph tags ─────────────────────────────────── */
.tag{display:inline-block;vertical-align:middle;font-size:10px;font-weight:500;letter-spacing:.14em;padding:1px 6px;border:1px solid;border-radius:2px;line-height:1.5}
.tag.live{color:var(--accent);border-color:var(--accent)}
.tag.beta{color:var(--risky);border-color:var(--risky)}
.tag.big{font-size:12px;padding:3px 9px}
.x{color:var(--danger)}
.ok{color:var(--accent)}

/* ── Prompt lines (section openers) ─────────────── */
.prompt{color:var(--t-3);font-size:15px;margin-bottom:22px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.prompt .host{color:var(--accent)}
.prompt .cmd{color:var(--t-2)}
.prompt .cur{color:var(--accent);animation:blink 1.1s steps(1) infinite;margin-left:1px}
.prompt.typing .cur{animation:none}
@keyframes blink{50%{opacity:0}}


/* ── Preloader ─────────────────────────────── */
/* Hidden here and revealed by the inline block in templates/index.html, which
   runs before the first paint. That order is the whole design: with JS off the
   splash never appears at all rather than covering the page for good, and the
   worst case if a paint slips through early is the page's own black, not content
   that then gets covered. Landing only — /research and /answers have no .pre. */
.pre{display:none;position:fixed;inset:0;z-index:20;background:var(--bg-0);flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .5s ease}
html.has-pre .pre{display:flex}
.pre.out{opacity:0;pointer-events:none}
/* Same draw as the hero shield, shorter, and with no --d of its own: where
   @property is missing the mask goes invalid and the image simply shows, which
   is the right failure. Setting --d:0% there would mask it away entirely. */
.pre-shield{--d:0%;position:relative;width:min(44vw,180px);aspect-ratio:1}
.pre-text{color:var(--t-3);font-size:13px}
.pre-text .host{color:var(--accent)}
.pre-text .cur{color:var(--accent);animation:blink 1.1s steps(1) infinite}
/* The hero's shield waits for the splash to clear before drawing itself. */
html.has-pre{--hero-delay:1.5s}
/* Belt and braces: the inline block already declines to show it under reduced
   motion. Matching specificity, or html.has-pre .pre would win. */
@media (prefers-reduced-motion:reduce){html.has-pre .pre{display:none}}

/* ── Nav ────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:5;background:var(--bg-0);border-bottom:1px solid var(--line-soft)}
.nav-in{max-width:1040px;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"brand links cta";align-items:center;gap:8px 20px;padding-top:12px;padding-bottom:12px}
.brand{grid-area:brand;color:var(--t-1);font-weight:700;font-size:16px}
.brand:hover{text-decoration:none}
.brand .pr{margin-right:2px}
.nav-links{grid-area:links;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 8px;font-size:12.5px}
.nav-links a{color:var(--t-2)}
.nav-links a:hover{color:var(--t-1);text-decoration:none}
.nav-links li+li::before{content:'·';color:var(--t-4);margin-right:8px}
.burger-cb,.burger{display:none}
.cta-group{grid-area:cta;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.cta{display:inline-block;background:var(--accent);color:var(--bg-0);font-weight:700;font-size:13px;padding:8px 14px;border-radius:2px;white-space:nowrap}
.cta:hover{background:var(--accent-dim);text-decoration:none}
.cta:active{background:var(--accent-dim)}

/* ── Hero ───────────────────────────────────────── */
.hero{position:relative;padding-top:56px;padding-bottom:0;overflow:clip}
.hero-copy{position:relative;z-index:1}
/* Shield: PNG on dark teal → radial mask + matching site-bg radial on top hide the square. */
.shield{--sy:0px;--so:1;position:absolute;right:-8%;top:-24px;z-index:0;width:var(--shield-w);aspect-ratio:1;pointer-events:none;user-select:none;opacity:.14;transform:translateY(var(--sy));transform-origin:center}
.shield-sweep{position:absolute;inset:-25%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 78%,rgba(0,255,136,.16) 90%,rgba(230,237,243,.22) 94%,transparent 100%);-webkit-mask-image:radial-gradient(closest-side,transparent 60%,#000 66%,#000 74%,transparent 80%);mask-image:radial-gradient(closest-side,transparent 60%,#000 66%,#000 74%,transparent 80%);opacity:0;will-change:transform;animation:shield-ring-in .8s ease-out calc(var(--hero-delay,.2s) + 2s) both,shield-ring 6s linear calc(var(--hero-delay,.2s) + 2s) infinite}
@property --d{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes shield-draw{from{--d:0%}to{--d:112%}}
@keyframes shield-ring-in{from{opacity:0}to{opacity:1}}
@keyframes shield-ring{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* Fallback where @property is unsupported (older Safari): show the image without the draw. */
@keyframes shield-in{from{opacity:0}to{opacity:1}}
.shield.off .shield-sweep{animation-play-state:paused}
.ver{color:var(--t-4);font-size:12px;letter-spacing:.08em}
h1{font-size:clamp(42px,9vw,68px);line-height:1;margin-top:10px;letter-spacing:-.03em}
.sub{margin-top:22px;max-width:56ch;color:var(--t-2);font-size:16px;line-height:1.7}
.log{position:relative;z-index:1;margin-top:44px}
.note{margin-top:18px;color:var(--t-3);font-size:14px}
.cta-row{position:relative;z-index:1;margin-top:36px;display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap}
.badges{display:flex;flex-wrap:wrap;gap:8px 12px}
.badge{display:block;width:220px;height:85px;flex:none}
.badge img{display:block;width:220px;height:85px}
.link-btn{color:var(--t-2);font-size:14px;padding:12px 0}
.link-btn:hover{color:var(--t-1);text-decoration:none}
@media (min-width:1024px){
  .hero{display:grid;grid-template-columns:1fr 40%;grid-template-areas:"copy shield" "log log" "cta cta";column-gap:40px;align-items:center;overflow:visible}
  .hero-copy{grid-area:copy}
  .shield{position:relative;grid-area:shield;right:auto;top:auto;width:100%;opacity:var(--so);justify-self:end}
  .log{grid-area:log}.cta-row{grid-area:cta}
}
/* ── Observation log (ledger) ───────────────────── */
.ledger{border-top:1px solid var(--line-hi);border-bottom:1px solid var(--line-hi)}
.lh{display:grid;grid-template-columns:20ch 8ch 10ch 1fr;grid-template-areas:"time tk vd addr";gap:0 14px;padding:10px 0;color:var(--t-4);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line-soft)}
.lh .addr-h{text-align:right}
.row{padding:18px 0;border-bottom:1px solid var(--line-soft);line-height:1.6}
.row:last-child{border-bottom:none}
.r1{display:grid;grid-template-columns:20ch 8ch 10ch 1fr;grid-template-areas:"time tk vd addr";gap:0 14px;align-items:baseline}
.r1 time{grid-area:time;color:var(--t-3);font-size:13px}
.r1 .tk{grid-area:tk;color:var(--t-1);font-weight:500}
.r1 .vd{grid-area:vd;font-weight:700;letter-spacing:.02em}
.r1 .vd b{font-weight:500;color:inherit;margin-left:6px}
.v-risky{color:var(--risky)}.v-danger{color:var(--danger)}.v-low{color:var(--safe)}
.r1 .addr{grid-area:addr;justify-self:end;text-align:right;background:none;border:0;padding:0;margin:0;font:inherit;font-size:13px;color:var(--t-2);cursor:pointer;word-break:break-all;min-height:44px;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.addr .full,.addr .copied{display:none}
.addr.open .short{display:none}.addr.open .full{display:inline}
.addr.did .copied{display:inline;color:var(--accent);font-size:11px;letter-spacing:.1em}
.addr:hover .short,.addr:hover .full{color:var(--t-1)}
.r2{margin-top:6px;display:grid;grid-template-columns:calc(28ch + 14px) 1fr;grid-template-areas:"sig out";gap:0 14px}
.r2 .sig{grid-area:sig;color:var(--t-2)}
.r2 .out{grid-area:out;color:var(--t-2)}
.r2 .oc{color:var(--t-3);margin-right:8px}
.r2 .oc.ok{color:var(--accent)}
/* An outcome that links to its case log: underlined so it reads as a link, in the
   row's own colour so it does not shout across the table. */
.r2 .out a{color:var(--t-1);text-decoration:underline;text-decoration-color:var(--t-4);text-underline-offset:3px}
.r2 .out a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.row.reveal{opacity:0;transition:opacity .6s ease}
.row.reveal.in{opacity:1}

/* ── Cards (verdict, gaps) — CSS-border frames ──── */
.card{border:1px solid var(--line-hi);background:var(--bg-2);padding:22px 24px}
.cprompt{color:var(--t-3);font-size:13px;margin-bottom:18px}
.cprompt .host{color:var(--accent)}
.mk{color:var(--t-4);font-size:10px;font-weight:500;letter-spacing:.06em;margin-left:8px;vertical-align:super;line-height:0}
.vtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pill{display:inline-block;border:1px solid var(--line-hi);border-radius:2px;padding:1px 8px;font-size:11px;letter-spacing:.14em;color:var(--t-2)}
.vaddr{color:var(--t-3);font-size:13px}
.vname{margin-top:10px;color:var(--t-2)}
.vlabel{margin-top:26px;color:var(--t-4);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.vline{margin-top:6px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vverdict{font-size:30px;font-weight:700;color:var(--risky);letter-spacing:-.01em;line-height:1.1}
.vtag{display:inline-block;border:1px solid var(--risky);color:var(--risky);border-radius:2px;padding:1px 8px;font-size:11px;letter-spacing:.14em}
.vtagline{margin-top:10px;color:var(--t-2)}
.ringwrap{margin:30px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px}
/* Score ring: conic-gradient arc on a hairline track; inner disc masks the centre. */
.ring{--p:0;position:relative;width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--risky) calc(var(--p)*1%),var(--line) 0);display:flex;align-items:center;justify-content:center}
.ring::before{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--bg-2)}
.ring .rn{position:relative;font-size:34px;font-weight:700;color:var(--t-1);line-height:1}
.ring .rn small{font-size:13px;font-weight:400;color:var(--t-3);margin-left:2px}
.rl{color:var(--t-4);font-size:11px;letter-spacing:.14em}
.vstats{margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line-soft);padding-top:18px}
.vstats div{margin:0}
.vstats dt{color:var(--t-4);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.vstats dd{margin:4px 0 0;color:var(--t-1);font-weight:500}
.vsum{margin-top:8px;color:var(--t-2);line-height:1.7}
.vsum .q{color:var(--t-4)}
.risk{margin-top:18px;border:1px solid var(--line);padding:14px 16px}
.rh{display:flex;align-items:flex-start;gap:10px;font-weight:500}
.rh .g,.rh .x{flex:none;white-space:nowrap}
.rh .sev{margin-left:auto;color:var(--danger);font-size:11px;letter-spacing:.14em}
.risk p{margin-top:8px;color:var(--t-2);font-size:14px;line-height:1.7}
.risk.cov{border-color:var(--line)}.risk.cov .rh{color:var(--t-2)}.risk.cov .g{color:var(--t-3)}.risk.cov p{color:var(--t-3)}.rh .sev.low{color:var(--t-3)}
.todo{color:var(--t-4)}

/* Verdict two-column at ≥1280 */
@media (min-width:1280px){
  :root{--col:1100px}
  .vgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:40px;align-items:start}
  .vgrid .annot{margin-top:0;position:sticky;top:80px;align-self:start;display:grid;grid-template-rows:auto auto auto auto;gap:22px}
  .vgrid .annot li{grid-column:1}
  /* Source order is now 01..04, so rows follow naturally; only the optical offsets remain. */
  .vgrid .annot li:nth-child(2){margin-top:20px}.vgrid .annot li:nth-child(3){margin-top:40px}.vgrid .annot li:nth-child(4){margin-top:0}
  /* Source order is card -> gap note -> principles -> annotations, so the note and
     the principles follow "Outside this scan" directly on narrow screens. Here the
     annotations are pinned back beside the card and those two drop below it. */
  .vgrid>.vcard{grid-column:1;grid-row:1}
  .vgrid>.annot{grid-column:2;grid-row:1}
  .vgrid>.note,.vgrid>.principles{grid-column:1}
}
/* Numbered callouts */
.annot{list-style:none;margin:28px 0 0;padding:0;counter-reset:a;display:flex;flex-direction:column;gap:14px}
.annot li{counter-increment:a;display:grid;grid-template-columns:3ch 1fr;gap:14px;color:var(--t-2);font-size:14px;line-height:1.7}
.annot li::before{content:counter(a,decimal-leading-zero);color:var(--t-4);font-size:12px;padding-top:3px;letter-spacing:.06em}
.annot li b{display:block;color:var(--t-1);font-weight:500;margin-bottom:2px}
.annot li>div{min-width:0}

/* Generic hairline lists (signals, features, chains) */
.sub-h{margin-top:40px;color:var(--t-4);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.hl{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line-hi)}
.hl>li{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.hl .h{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--t-1)}
.hl .h .x{flex:none}
.hl p{margin-top:6px;color:var(--t-2);font-size:14px;line-height:1.7}
.keys{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;color:var(--t-3);font-size:14px}
.keys .x{margin-right:8px}

/* Coverage principles — plain text under the verdict card */
.lead{color:var(--t-2);font-size:16px;line-height:1.7;max-width:60ch}
.principles{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--t-2);font-size:14px;line-height:1.7;max-width:60ch}
.principles li{display:grid;grid-template-columns:2ch 1fr;gap:10px}
.principles li::before{content:'—';color:var(--t-4)}

/* Language switcher — glyph row under the nav. Current language bracketed, the
   rest link to the sibling page. No redirect: the reader chooses. */
.langbar{border-bottom:1px solid var(--line-soft);background:var(--bg-0)}
.langs{list-style:none;margin:0;padding:7px 0;display:flex;flex-wrap:wrap;gap:0 2px;font-size:12px;letter-spacing:.06em}
.lg{display:inline-block;padding:3px 5px;color:var(--t-3);min-height:24px}
a.lg:hover{color:var(--t-1);text-decoration:none}
.lg.on{color:var(--accent)}

/* One dismissible line, EN only, shown by site.js when navigator.language names
   one of the other eight. Nothing is stored and nothing redirects. */
.langhint{border-bottom:1px solid var(--line-soft);background:var(--bg-1)}
.langhint .col{display:flex;align-items:center;gap:10px;padding-top:9px;padding-bottom:9px;color:var(--t-2);font-size:13px}
.lh-go{color:var(--accent)}
.lh-x{margin-left:auto;flex:none;background:none;border:0;padding:2px 6px;color:var(--t-3);font:inherit;font-size:16px;line-height:1;cursor:pointer}
.lh-x:hover{color:var(--t-1)}

/* The MEW card is a real app output shown as an artifact, so it stays English in
   every language. This caption says so. */
.card-cap{margin:12px 0 18px;color:var(--t-4);font-size:12px}

/* Chains */
.chains{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px;border-top:1px solid var(--line-hi)}
.chains li{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.cdot{width:8px;height:8px;border-radius:50%;flex:none}
.chains .st{margin-left:auto;color:var(--accent);font-size:10px;letter-spacing:.14em}
.h2gap{margin-top:12px}

/* Pricing */
.price{margin-top:22px;display:flex;flex-direction:column;gap:22px}
.price-note{color:var(--t-2);font-size:14px;line-height:1.7;max-width:60ch}

/* Footer */
.footer{margin-top:var(--gap);border-top:1px solid var(--line-soft);padding:44px 0 36px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.legal-note{margin-top:28px;color:var(--t-4);font-size:12px}
.footer .tag-line{margin-top:10px;color:var(--t-3);font-size:13px;max-width:28ch;line-height:1.6}
.footer h3{margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-4);font-weight:500}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer ul a{color:var(--t-2);font-size:13px}
.footer ul a:hover{color:var(--t-1);text-decoration:none}
.footer .fsoc{flex-direction:row;gap:16px;margin-top:16px}
.footer .fsoc a{display:inline-flex;line-height:0}
.footer .fsoc svg{display:block;width:20px;height:20px}
.fbot{margin-top:36px;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;color:var(--t-4);font-size:12px}

/* ── Legal pages ────────────────────────────────── */
.legal{padding-top:48px}
.legal h1{font-size:clamp(28px,6vw,40px);margin-top:14px;letter-spacing:-.02em;line-height:1.1}
.legal-meta{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;color:var(--t-3);font-size:13px}
.legal .lead{margin-top:18px}
.toc{margin-top:28px;border:1px solid var(--line);padding:18px 20px}
.toc .lbl{color:var(--t-4);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:13px}
.toc li{margin-bottom:6px}
.toc a{color:var(--t-2)}
.toc li::marker{color:var(--t-4)}
.ls{margin-top:40px}
.ls>h2{font-size:18px;display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.ls>h2 .n{color:var(--accent);font-size:13px;font-weight:500}
.ls h3{margin-top:22px;font-size:15px}
.ls p,.ls li{color:var(--t-2);font-size:14px;line-height:1.75}
.ls p{margin:12px 0}
.ls ul,.ls ol{margin:12px 0;padding-left:22px}
.ls li{margin:6px 0}
.ls ul li::marker{color:var(--accent-dim)}
.ls code,.kbd{font-size:12.5px;color:var(--accent);border:1px solid var(--line);border-radius:2px;padding:0 5px}
.callout{border:1px solid var(--risky);padding:14px 16px;margin:16px 0}
.callout.danger{border-color:var(--danger)}
.callout .ct{color:var(--risky);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.callout.danger .ct{color:var(--danger)}
.callout p{margin:0;color:var(--t-1)}
.def{width:100%;border-collapse:collapse;margin:14px 0}
.def td{border:1px solid var(--line);padding:10px 12px;font-size:13px;vertical-align:top;color:var(--t-3)}
.def td:first-child{color:var(--t-1);white-space:nowrap;width:1%}
/* delete-account */
.dev{color:var(--t-3);font-size:13px;margin-bottom:28px}
.lang-tag{display:inline-block;font-size:11px;letter-spacing:.14em;color:var(--t-3);border:1px solid var(--line);border-radius:2px;padding:1px 8px;margin-bottom:10px}
.steps{list-style:none;margin:12px 0;padding:0}
.steps li{padding:8px 0;border-bottom:1px solid var(--line-soft)}
.steps li:last-child{border-bottom:none}
.steps .n{color:var(--accent);margin-right:8px}
.panel{border:1px solid var(--line);padding:14px 18px;margin:14px 0}
.panel p{margin:0}
.panel .tight{margin-top:8px}
.del,.ls .del{color:var(--danger)}
.keep,.ls .keep{color:var(--risky)}
.muted,.ls .muted{color:var(--t-3)}
hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.dfoot{margin-top:48px;color:var(--t-4);font-size:12px}

/* ── Reduced motion: everything static ──────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .prompt .cur{animation:none}
  .row.reveal{opacity:1;transition:none}
  .shield{transform:none!important;opacity:.14}
  .shield-sweep{display:none}
  @media (min-width:1024px){.shield{opacity:1}}
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width:1023px){
  .shield{width:min(60vw,420px);right:-6%;top:-10px;opacity:.12}
  .hero-copy{max-width:60ch}
}
@media (max-width:860px){
  .nav-in{grid-template-columns:1fr auto;grid-template-areas:"brand cta" "links links";gap:8px 12px}
  .nav-links{justify-content:flex-start}
  .lh,.r1{grid-template-columns:18ch 8ch 9ch 1fr;gap:0 12px}
  .r2{grid-template-columns:1fr;grid-template-areas:"sig" "out";gap:4px}
}
@media (max-width:760px){
  .fgrid{grid-template-columns:1fr 1fr}
  .fgrid>div:first-child{grid-column:1/-1}
  .chains{grid-template-columns:1fr 1fr}
  .vstats{grid-template-columns:1fr 1fr 1fr;gap:12px}
}
@media (max-width:600px){
  :root{--pad:18px;--gap:48px}
  body{font-size:14.5px}
  h2{font-size:22px}
  /* Mobile menu: compact sticky bar, then a full-screen terminal list.
     Driven by the .burger-cb checkbox rather than a class site.js toggles, so it
     works on /research and /answers, which carry no script, and with JS off.
     The two :has() rules are the only part that needs it; without :has() the menu
     still opens and the page behind it simply keeps scrolling. */
  .nav-in{grid-template-columns:1fr auto;grid-template-areas:"brand burger" "links links" "cta cta";gap:0 12px;padding-top:10px;padding-bottom:10px}
  .burger-cb{display:block;position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%)}
  .burger{grid-area:burger;display:grid;align-content:center;gap:5px;width:44px;height:44px;margin:-8px -10px -8px 0;padding:0 10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .burger span{display:block;height:2px;width:22px;background:var(--t-1);transform-origin:center;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .25s,width .4s cubic-bezier(.4,0,.2,1)}
  .burger span:nth-child(2){width:14px;background:var(--accent)}
  .burger-cb:checked~.burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger-cb:checked~.burger span:nth-child(2){opacity:0;width:0}
  .burger-cb:checked~.burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* The checkbox is the focusable control and it is invisible, so the ring goes
     on the label it drives. */
  .burger-cb:focus-visible~.burger{outline:2px solid var(--accent);outline-offset:2px}
  .nav-links,.cta-group{display:grid;overflow:hidden;max-height:0;opacity:0;transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .3s,padding .5s cubic-bezier(.4,0,.2,1)}
  /* 480px is eight 48px rows plus the padding, with room for a label that wraps.
     max-height only caps the box, so the headroom costs nothing but a little
     dead time at the end of the transition. */
  .burger-cb:checked~.nav-links{max-height:480px;opacity:1;padding-top:22px}
  .burger-cb:checked~.cta-group{max-height:120px;opacity:1;padding:20px 0 14px}
  .nav-links{gap:0;font-size:18px}
  .nav-links li{border-top:1px solid var(--line-soft);transform:translateX(-14px);opacity:0;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s}
  .nav-links li+li::before{content:none}
  .burger-cb:checked~.nav-links li{transform:none;opacity:1}
  .burger-cb:checked~.nav-links li:nth-child(1){transition-delay:.08s}.burger-cb:checked~.nav-links li:nth-child(2){transition-delay:.13s}.burger-cb:checked~.nav-links li:nth-child(3){transition-delay:.18s}.burger-cb:checked~.nav-links li:nth-child(4){transition-delay:.23s}.burger-cb:checked~.nav-links li:nth-child(5){transition-delay:.28s}.burger-cb:checked~.nav-links li:nth-child(6){transition-delay:.33s}.burger-cb:checked~.nav-links li:nth-child(7){transition-delay:.38s}.burger-cb:checked~.nav-links li:nth-child(8){transition-delay:.43s}
  .nav-links a{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--t-1)}
  .nav-links a::before{content:'>';color:var(--accent);font-weight:700}
  .nav-links a::after{content:'';flex:1;text-align:right;color:var(--t-4);font-size:11px;letter-spacing:.06em}
  .nav-links li:last-child{border-bottom:1px solid var(--line-soft)}
  .nav-links li:last-child a::after{content:'▮';animation:blink 1s steps(1) infinite}
  .cta-group{grid-template-columns:1fr 1fr;gap:8px}
  .cta{text-align:center;padding:12px 10px;font-size:12px}
  .nav:has(.burger-cb:checked){min-height:100dvh}
  /* html, not body: html already owns the viewport's overflow here, so a rule on
     body would not lock the scroll behind the menu. */
  html:has(.burger-cb:checked){overflow:hidden}
  @media (prefers-reduced-motion:reduce){.nav-links,.cta-group,.nav-links li,.burger span{transition:none}}
  .hero{padding-top:40px}
  .shield{width:64vw;right:-4%;top:-16px}
  .sub{font-size:15px}
  .prompt{font-size:14px}
  .lh{display:none}
  .r1{grid-template-columns:1fr auto;grid-template-areas:"time addr" "tk vd";gap:2px 12px}
  .r1 time{font-size:12px}
  .r1 .addr{font-size:12px}
  .r1 .vd{justify-self:start}
  .r1 .addr{min-height:0;padding:0}
  .r2{grid-template-columns:1fr;grid-template-areas:"sig" "out";gap:4px}
  .card{padding:18px 16px}
  .vverdict{font-size:26px}
  .vstats{grid-template-columns:1fr 1fr;gap:14px 10px}
  .vstats dt{font-size:10px}
  .ring{width:112px;height:112px}.ring .rn{font-size:28px}
  .risk{padding:12px 12px}
  .rh{flex-wrap:wrap}.rh .sev{margin-left:0;flex-basis:100%;padding-left:calc(1ch + 10px)}
  .badges{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .badge,.badge img{width:100%;height:auto}
  .cta-row .link-btn{flex-basis:100%}
  h1{font-size:clamp(40px,12vw,52px)}
  .chains{grid-template-columns:1fr}
  .toc ol{columns:1}
  .def td:first-child{white-space:normal}
  .fbot{flex-direction:column}
}

/* ══ Landing sections ═══════════════════════════════════════════════════════
   The check groups, the coverage card, the watchlist grid and the pricing table.
   They arrived with the 2026-09 redesign, after the rest of this sheet, which is
   the only reason they sit together down here rather than beside what they
   resemble. */

/* ── The mark, inline ──────────────────────────────────────────────────────
   The hero and the splash draw the wordmark as inline SVG: no request, no decode,
   and it takes its colour from the page. The draw is a shield-draw mask, bottom-up
   (0deg) because the glyph reads from its baseline, where the raster it replaced
   read top-down. */
.mark{display:block;width:100%;height:100%;color:var(--t-1)}
.pre-shield .mark-wrap{display:block;width:100%;height:100%;-webkit-mask-image:linear-gradient(0deg,#000 calc(var(--d) - 12%),transparent var(--d));mask-image:linear-gradient(0deg,#000 calc(var(--d) - 12%),transparent var(--d));animation:shield-draw 1.2s cubic-bezier(.4,0,.2,1) both}
@supports not (background:paint(x)){.pre-shield .mark-wrap{-webkit-mask-image:none;mask-image:none;animation:shield-in .8s ease-out both}}
/* The glyph is solid where the raster was soft, so it carries far less opacity
   for the same presence behind the copy. No radial mask and no overflow clip:
   there is no photographic edge to hide. */
.shield .mark-wrap{display:block;width:64%;height:64%;margin:18% 22% 18% 14%;-webkit-mask-image:linear-gradient(0deg,#000 calc(var(--d) - 12%),transparent var(--d));mask-image:linear-gradient(0deg,#000 calc(var(--d) - 12%),transparent var(--d));animation:shield-draw 1.8s cubic-bezier(.4,0,.2,1) var(--hero-delay,.2s) both}
@supports not (background:paint(x)){.shield .mark-wrap{-webkit-mask-image:none;mask-image:none;animation:shield-in 1.2s ease-out both}}
@media (prefers-reduced-motion:reduce){
  .shield .mark-wrap{animation:none;-webkit-mask-image:none;mask-image:none}
}


/* ── Check groups ──────────────────────────────────────────────────────────
   A hairline grid: the 1px gap over a --line-soft background is the rule
   between cells, so no cell draws its own border and none doubles up. */
.cgrid{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.cgroup{background:var(--bg-0);padding:22px 24px}
.cgroup .n{color:var(--t-4);font-size:11px;letter-spacing:.14em}
.cgroup h3{margin-top:6px;font-size:16px}
.cgroup ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;color:var(--t-2);font-size:13.5px;line-height:1.6}
.cgroup li{display:grid;grid-template-columns:2ch 1fr;gap:8px}
.cgroup li::before{content:'—';color:var(--t-5)}
.cgroup .ch{color:var(--t-4);font-size:11px;letter-spacing:.12em;margin-left:6px;white-space:nowrap}
/* One item per group gets the callout: it is the claim, not just a check. */
.cgroup li.key{display:block;border:1px solid var(--line-hi);padding:12px 14px;margin-top:4px;color:var(--t-2)}
.cgroup li.key::before{content:none}
.cgroup li.key b{display:block;color:var(--t-1);font-weight:500;margin-bottom:4px}

/* ── Coverage ──────────────────────────────────────────────────────────────
   The coverage card reuses .card and the .rh/.g marks from the verdict card's
   "Outside this scan" item, because it is the same object shown on its own. */
.gaps-card{margin-top:24px}
.gaps-card .rh{color:var(--t-1)}
.gaps-card .rh .g{color:var(--t-3)}
.gaps-card>p{margin-top:10px;color:var(--t-2);font-size:14px;line-height:1.7}
.dims{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.dims div{margin:0}
.dims dt{color:var(--t-1);font-size:13px;font-weight:500}
.dims dd{margin:2px 0 0;color:var(--t-3);font-size:13px;line-height:1.6}
.causes{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cause{border-top:1px solid var(--line-hi);padding-top:14px}
.cause .n{color:var(--t-4);font-size:11px;letter-spacing:.14em}
.cause h4{margin:6px 0 0;font-size:14px;font-weight:500;color:var(--t-1)}
.cause p{margin-top:8px;color:var(--t-2);font-size:13.5px;line-height:1.7}
.ceil{margin-top:34px;border:1px solid var(--line);padding:22px 24px}
.ceil-h{font-weight:500;color:var(--t-1)}
.ceil>p{margin-top:8px;color:var(--t-2);font-size:14px;line-height:1.7;max-width:62ch}
.caps{margin-top:20px;display:flex;flex-direction:column;gap:12px}
/* The bar's width is the cap itself — build-site.js writes both from one number,
   so the bar and the figure beside it cannot drift apart. */
.cap{display:grid;grid-template-columns:13ch minmax(0,1fr) 4ch;gap:14px;align-items:center;font-size:13px}
.cap .age{color:var(--t-3)}
.cap .bar{height:10px;border:1px solid var(--line);position:relative}
.cap .fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.13)}
.cap b{text-align:right;color:var(--risky);font-weight:500}
/* The last row is the uncapped one: it is not a warning, so it is not amber. */
.cap:last-child b{color:var(--t-3)}
.fn{margin-top:10px;color:var(--t-3);font-size:13px;line-height:1.7}

/* ── Watchlist cards ───────────────────────────────────────────────────────
   `.off` is the chain nothing watches. Dashed border and an amber latency, so
   "not monitored" reads as a state of the product, not a missing card. */
.wgrid{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.wcard{border:1px solid var(--line);padding:18px 20px}
.wh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wh h3{font-size:15px}
.wh .lat{color:var(--t-4);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.wcard ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;color:var(--t-2);font-size:13.5px;line-height:1.6}
.wcard li{display:grid;grid-template-columns:2ch 1fr;gap:8px}
.wcard li::before{content:'→';color:var(--t-4)}
.wcard>p{margin-top:12px;color:var(--t-3);font-size:13.5px;line-height:1.7}
.wcard.off{border-style:dashed}
.wcard.off .wh h3{color:var(--t-3)}
.wcard.off .lat{color:var(--risky)}

/* ── Pricing tiers ─────────────────────────────────────────────────────────
   Same hairline grid as .cgrid. */
.tiers{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.tier{background:var(--bg-0);padding:20px 22px}
.tier h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-4);font-weight:500}
.tier ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:0;font-size:13.5px}
.tier li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);color:var(--t-3)}
.tier li:last-child{border-bottom:none}
.tier li b{color:var(--t-1);font-weight:500;text-align:right}
.tier li b.no{color:var(--t-4)}
.tier-note{margin-top:20px}

/* ── New layout, narrow ────────────────────────────────────────────────────*/
@media (max-width:860px) and (min-width:601px){
  .causes{grid-template-columns:1fr 1fr}
  .causes .cause:last-child{grid-column:1/-1}
}
@media (max-width:600px){
  .cgrid,.wgrid,.tiers{grid-template-columns:1fr}
  .causes{grid-template-columns:1fr;gap:18px}
  .dims{grid-template-columns:1fr}
  .cgroup{padding:18px 16px}
  .wcard,.tier,.ceil{padding:16px 16px}
  .cap{grid-template-columns:11ch minmax(0,1fr) 4ch;gap:10px;font-size:12.5px}
}