/* Secure Vibes: every page after the landing film (scan, report, sign-in, verify, certificate…).
   Same world as the film's daylight scenes: paper ground, white cards, ink type, one green for actions, and the
   A-to-F energy label as the only colour system. Loaded after style.css; it re-points style.css's tokens and
   restyles the few parts the film shows differently. Strict CSP: no inline styles. The old look stays in git
   (tag old-design) and the pixel town still plays on scan.html?town=1. */

@font-face { font-family: "Archivo"; src: url("/fonts/Archivo-Variable-latin.woff2") format("woff2"); font-weight: 300 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }

html:has(body.jp){ background:#ECEFF3; color-scheme:light }
body.jp{
  color-scheme:light;
  /* the film's energy label */
  --A:#0E8C4A; --B:#4DB04A; --C:#B4CC2E; --D:#F2CC1B; --E:#F0912A; --F:#DD4128;
  --ink:#121A2A; --paper:#F4F6F9; --day:#ECEFF3; --line:#D5DBE4; --go-btn:#0E7F45; --go-btn-hover:#0B6B3A; --dusk:#15213A;
  /* style.css tokens, in daylight */
  --bg:#ECEFF3; --surface:#FFFFFF; --raised:#F4F6F9; --inset:#F4F6F9; --overlay:rgba(18,26,42,.55);
  --border:#D5DBE4; --border-strong:#9AA6B8; --grid:transparent;
  --text:#121A2A; --text-2:#33405A; --muted:#55627A; --faint:#6B7689;
  --signal:#0E7F45; --signal-hover:#0B6B3A; --signal-ink:#FFFFFF; --signal-soft:rgba(14,127,69,.08);
  --crit:#B42318; --crit-bg:#FDECEA; --crit-line:#F1B5AD;
  --high:#B54708; --high-bg:#FEF0E3; --high-line:#F3C79C;
  --med:#8A6100;  --med-bg:#FBF4DA;  --med-line:#E7D28B;
  --low:#1F5FA8;  --low-bg:#E9F1FB;  --low-line:#AEC9EA;
  --pass:#0E7F45; --pass-bg:#E5F4EB; --pass-line:#A5D6B9;
  --info:#55627A; --info-bg:#EEF1F5; --info-line:#C9D1DC;
  --grade-a:var(--A); --grade-b:var(--B); --grade-c:#8EA41C; --grade-d:#C79A00; --grade-f:var(--F);
  --font-sans:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --focus:0 0 0 2px #fff, 0 0 0 4px #14A35A;
  background:var(--bg); color:var(--text); font:400 17px/1.5 var(--font-sans);
}
.jp h1,.jp h2,.jp h3{font-family:var(--font-sans);font-weight:800;font-stretch:108%;letter-spacing:-.02em;color:var(--ink)}
.jp ::selection{background:rgba(20,163,90,.22);color:var(--ink)}
.jp a{color:var(--ink);text-decoration-color:#9AA6B8}
.jp a:hover{text-decoration-color:var(--go-btn)}
.jp code{background:#EEF1F5;border-color:var(--line);color:var(--ink)}
.jp .skip{background:var(--go-btn);color:#fff;z-index:60}

/* ---------- top bar: the film's, in daylight ---------- */
.jnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;
  padding:0 max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px));
  color:var(--ink);background:rgba(236,239,243,.94);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.jp .brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:800;font-stretch:118%;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.jp .mark{display:inline-grid;grid-template-rows:repeat(6,3px);gap:1.5px;width:20px;flex:none}
.jp .mark i{display:block;height:3px;border-radius:0 2px 2px 0}
.jp .mark i:nth-child(1){background:var(--A);width:55%}.jp .mark i:nth-child(2){background:var(--B);width:64%}
.jp .mark i:nth-child(3){background:var(--C);width:73%}.jp .mark i:nth-child(4){background:var(--D);width:82%}
.jp .mark i:nth-child(5){background:var(--E);width:91%}.jp .mark i:nth-child(6){background:var(--F);width:100%}
.jnav .fnav-links{display:flex;align-items:center;gap:22px}
.jnav .fnav-link,.jnav a.nav-signin{color:inherit;text-decoration:none;font-weight:600;font-size:15px;opacity:.85;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.jnav .fnav-link:hover,.jnav a.nav-signin:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.jnav .auth-slot{display:flex;align-items:center}
.jnav .auth-slot:empty{display:none}
.jnav .acct,.jnav .acct-out{display:none}
.jnav .acct-btn{display:inline-block}
.jnav .acct-btn > span{font-family:var(--font-sans);font-weight:800}
@media (max-width:520px){
  .jnav{height:56px;padding:0 16px}
  .jnav .fnav-links{gap:14px}
  .jnav .fnav-link,.jnav a.nav-signin{font-size:14px}
  .jnav .why{display:none}
}

/* ---------- footer: the film's ---------- */
.jfoot{display:flex;gap:10px 26px;align-items:center;flex-wrap:wrap;margin-top:56px;padding:26px max(24px,env(safe-area-inset-right,0px)) max(34px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));border-top:1px solid var(--line);font-size:15px;color:#4A5568}
.jfoot a{color:inherit;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.jfoot a:hover{text-decoration:underline}
.jfoot .brand{margin-right:auto}
.jfoot .foot-links{display:flex;flex-wrap:wrap;gap:2px 22px}
@media (max-width:520px){ .jfoot{padding-left:16px;padding-right:16px} .jfoot .brand{width:100%} .jfoot .foot-links{gap:2px 18px} }

/* ---------- page frame ---------- */
.jp .page{padding-top:28px;padding-bottom:0;min-height:60vh;background:none}
.jp .wrap{max-width:1080px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.jp .panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px -34px rgba(18,26,42,.35)}
.jp .panel--ticks::before,.jp .panel--ticks::after{display:none}
.jp .eyebrow{font:500 12px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.jp .lead,.jp .r-sub{color:var(--text-2)}
.jp .fine{color:var(--muted)}

/* buttons: one green for the action, quiet outlines for the rest */
.jp .btn{font-family:var(--font-sans);font-weight:700;font-stretch:104%;border-radius:12px;border:1px solid #C9D1DC;background:#fff;color:var(--ink);box-shadow:none}
.jp .btn:hover{border-color:var(--ink);background:#fff}
.jp .btn-signal{background:var(--go-btn);border-color:var(--go-btn);color:#fff}
.jp .btn-signal:hover{background:var(--go-btn-hover);border-color:var(--go-btn-hover);color:#fff}
.jp .btn-ghost{background:transparent}
.jp .btn:disabled,.jp .btn[disabled]{opacity:.6}
.jp .pill{background:#EEF1F5;border-color:var(--line);color:var(--text-2);font-family:var(--font-mono)}
.jp .notice{border-radius:12px}

/* ---------- live check: the film's "We look the way hackers do" card ---------- */
.jp .scan-console{padding:26px}
.jp .scan-console h1{font-size:clamp(28px,6vw,44px);margin:6px 0 4px}
.jp .scan-console .host{color:var(--go-btn)}
.jp .rec-dot{background:var(--go-btn)}
.jp .radar-wrap{display:none}
.jp .scan-grid{display:block}
.jp .meter{background:#E3E8EF;border-radius:999px;overflow:hidden}
.jp .meter i{background:var(--go-btn)}
.jp .log-wrap{background:#F7F9FB;border:1px solid var(--line);border-radius:14px}
.jp .log-bar{color:var(--muted);border-color:var(--line)}
.jp .log{color:var(--text-2)}
.jp .trust--quiet li{color:var(--muted)}

/* ---------- the result: grade, a few words, then the fix ---------- */
.result{display:grid;gap:16px;align-items:start}
@media (min-width:900px){ .result{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px} .result > .r-grade{position:sticky;top:88px} }
.r-grade{display:flex;flex-direction:column;gap:10px;min-width:0}
.r-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font:500 13px/1.5 var(--font-mono);color:var(--muted)}
.r-meta .r-host{color:var(--ink);font-weight:600}
.r-private{display:inline-flex;align-items:center;gap:5px;color:var(--crit)}
.r-private svg{width:13px;height:13px}
.r-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 18px 50px -34px rgba(18,26,42,.35)}
.r-letter{--g:var(--F);width:104px;height:104px;border-radius:50%;display:grid;place-items:center;border:10px solid var(--g);background:#fff}
.r-letter span{font:800 58px/1 var(--font-sans);font-stretch:112%;color:var(--ink)}
.r-letter.g-a{--g:var(--A)}.r-letter.g-b{--g:var(--B)}.r-letter.g-c{--g:var(--C)}.r-letter.g-d{--g:var(--D)}.r-letter.g-e{--g:var(--E)}.r-letter.g-f{--g:var(--F)}
/* the ring fills to the security score (--p, 0–100); the letter sits on a disc inside it */
.r-letter{--p:100;--track:#E3E8EF;position:relative;border:0;background:conic-gradient(var(--g) calc(var(--p) * 1%),var(--track) 0)}
.r-letter::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff}
.r-letter span{position:relative}
.r-score{min-width:0}
.r-score > p{margin:0}
.r-pct{font:800 clamp(44px,11vw,60px)/1 var(--font-sans);font-stretch:112%;color:var(--ink)}
.r-pct-k{margin-top:6px !important;font:500 13px/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.r-pct-next{margin-top:4px !important;font-size:14px;color:var(--text-2)}
/* what we found, at a glance: one bar, then each kind with its count and what it means */
.r-found-sum{display:grid;gap:14px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 18px 50px -34px rgba(18,26,42,.35)}
.r-found-sum > *{margin:0}
.r-found-sum h2{font-size:clamp(22px,2.4vw,28px);line-height:1.1}
.sev-bar{display:flex;gap:3px;height:16px;border-radius:8px;overflow:hidden}
.sev-bar i{display:block;min-width:12px}
/* one clear colour per kind, used by the bar and by each problem card's edge: red, orange, yellow, blue, grey */
.jp{--sev-crit:#DD4128;--sev-high:#F0912A;--sev-med:#F2CC1B;--sev-low:#7FA7DB;--sev-info:#C9D1DC}
html[data-theme="night"] .jp{--sev-info:#3A4A68}
.sev-bar--crit{background:var(--sev-crit)}.sev-bar--high{background:var(--sev-high)}.sev-bar--med{background:var(--sev-med)}.sev-bar--low{background:var(--sev-low)}.sev-bar--info{background:var(--sev-info)}
.jp .f-item::before{width:5px;background:var(--sev-info)}
.jp .f-item[data-sev="critical"]::before{background:var(--sev-crit)}.jp .f-item[data-sev="high"]::before{background:var(--sev-high)}
.jp .f-item[data-sev="medium"]::before{background:var(--sev-med)}.jp .f-item[data-sev="low"]::before{background:var(--sev-low)}
.sev-legend{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sev-legend > li{display:grid;grid-template-columns:2.4ch minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:center}
.sev-legend-n{grid-row:span 3;align-self:start;font:800 24px/1.1 var(--font-sans);text-align:center;color:var(--ink)}
.sev-legend > li > .sev{justify-self:start}
.sev-legend-d{font-size:14px;line-height:1.4;color:var(--text-2);min-width:0}
.sev-legend-items{grid-column:2;list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px;min-width:0}
.sev-legend-items > li{display:grid;gap:2px;padding-inline-start:12px;border-inline-start:2px solid var(--line);min-width:0}
.sev-legend li[data-sev="critical"] .sev-legend-items > li{border-color:var(--sev-crit)}
.sev-legend li[data-sev="high"] .sev-legend-items > li{border-color:var(--sev-high)}
.sev-legend li[data-sev="medium"] .sev-legend-items > li{border-color:var(--sev-med)}
.sev-legend li[data-sev="low"] .sev-legend-items > li{border-color:var(--sev-low)}
.sev-legend-items a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.sev-legend-items a:hover{text-decoration-color:currentColor}
/* the technical name under a plain title: for developers, and to teach the term */
.f-tech{display:block;margin-top:3px;font:500 12.5px/1.45 var(--font-mono);color:var(--muted);overflow-wrap:anywhere;text-align:start;unicode-bidi:isolate}
.f-ref{color:var(--faint,var(--muted))}
.f-title .f-tech{font-weight:500}
.r-found{margin-top:16px}
/* progress over time, inside the grade card */
.r-trend{grid-column:1 / -1;display:flex;align-items:center;gap:14px;padding-top:14px;border-top:1px dashed var(--line);min-width:0}
.r-spark{flex:none;width:120px;height:36px;color:var(--ink)}
.r-trend-words{min-width:0;display:grid;gap:2px}
.r-trend-words p,.r-trend > p{margin:0;font-size:14px;line-height:1.4;color:var(--text-2)}
.r-trend-t{font-weight:600;color:var(--ink) !important}
.r-trend-t.is-up{color:#0E7F45 !important}.r-trend-t.is-down{color:var(--crit) !important}
html[data-theme="night"] .r-trend-t.is-up{color:#3DD68C !important}
/* time to fix: makes the fix look doable */
.f-mins{display:inline-block;font:600 12px/1.4 var(--font-mono);color:var(--text-2);background:var(--info-bg);border-radius:6px;padding:1px 7px;white-space:nowrap}
.f-head .f-mins{margin-inline-start:auto}
.sev-legend-items .f-mins{justify-self:start;margin-top:2px}
.r-plan{font-size:15px;line-height:1.45;color:var(--text-2)}
/* repeat problems: in a row, came back, new */
.f-repeat{display:inline-block;font:600 12px/1.4 var(--font-sans);border-radius:6px;padding:1px 8px;white-space:nowrap}
.f-repeat.is-streak{background:var(--high-bg);color:var(--high)}
.f-repeat.is-back{background:var(--crit-bg);color:var(--crit)}
.f-repeat.is-new{background:var(--info-bg);color:var(--text-2)}
.r-plan b{color:var(--ink)}
.r-found-note{margin:12px 0 0}
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:4px;min-width:0}
.ladder li{position:relative;height:20px;display:flex;align-items:center;border-radius:0 5px 5px 0;color:#fff;font:800 12px/1 var(--font-sans);padding-left:7px;opacity:.38}
.ladder li.is-on{opacity:1}
.ladder .l-a{width:52%;background:var(--A)}.ladder .l-b{width:60%;background:var(--B)}.ladder .l-c{width:68%;background:var(--C);color:var(--ink)}
.ladder .l-d{width:76%;background:var(--D);color:var(--ink)}.ladder .l-e{width:84%;background:var(--E)}.ladder .l-f{width:92%;background:var(--F)}
.ladder-tag{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;font:800 13px/1 var(--font-sans);padding:4px 8px 4px 10px;clip-path:polygon(7px 0,100% 0,100% 100%,7px 100%,0 50%)}
.r-words{grid-column:1 / -1;min-width:0}
.r-label{margin:0 0 4px;font:500 13px/1.4 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.r-words h1{margin:0;font-size:clamp(28px,6.4vw,40px);line-height:1.05}
.r-worst{margin:10px 0 0;font-size:17px;color:var(--text-2)}
.r-worst b{color:var(--ink)}
.r-no{margin:0;font:500 12px/1.4 var(--font-mono);color:var(--faint)}

/* the fix: the first thing to do, right under the grade */
.jp .next-step{margin:0;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:22px;box-shadow:0 18px 50px -34px rgba(18,26,42,.35)}
.jp .next-step .next-head{margin:0 0 12px}
.jp .next-step h2{font-size:clamp(24px,5.4vw,32px);line-height:1.08;margin:0 0 6px}
.jp .next-step .next-head p{margin:0;color:var(--text-2)}
.jp .fix-actions{display:flex;flex-direction:column;gap:8px;margin:14px 0 6px}
.jp .copy-big{width:100%;min-height:58px;font-size:20px}
.jp .btn-download{align-self:flex-start;border:0;padding-left:0;padding-right:0;min-height:40px;text-decoration:underline;text-underline-offset:4px;font-weight:600;background:none}
.jp .agent-q{font:500 12px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.jp .chip-btn{border:1px solid #C9D1DC;background:#fff;color:var(--ink);border-radius:999px;font:600 14px var(--font-sans);min-height:40px;padding:0 14px}
.jp .chip-btn[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.jp .agent-how{color:var(--muted);font-size:15px}
.jp .see-prompt summary{font-weight:600;cursor:pointer;min-height:40px;display:flex;align-items:center}
.jp .prompt-panel{background:#F7F9FB;border:1px solid var(--line);border-radius:12px}
.jp .prompt-body{color:var(--text-2);background:none;font-size:13px}
.jp .fix-scope{font-size:15px;color:var(--muted)}
.jp .fix-rescan{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.jp .fix-rescan p{color:var(--text-2)}

/* not tested yet: one quiet card, not a hazard tape */
.jp .untested{background:#fff;border:1px solid var(--line);border-left:6px solid var(--E);border-radius:18px;padding:22px;margin-top:22px;box-shadow:none}
.jp .untested::before,.jp .untested::after{display:none}
.jp .untested h2{font-size:clamp(22px,5vw,28px);margin:4px 0 6px}
.jp .untested-k{color:var(--high);font:600 12px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.jp .untested-glyph{background:var(--E);color:#fff}
.jp .untested-lead{color:var(--text-2);font-size:16px}
.jp .untested-list{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px;padding:0;list-style:none}
.jp .untested-list li{display:inline-flex;border:1px solid var(--line);background:#F7F9FB;border-radius:999px;padding:5px 12px;font-size:14px;color:var(--text-2)}
.jp .untested-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.jp .untested-foot .fine{margin:0;font-size:14px}
/* certificate: is the live site still the version we checked? (certificate.js versionLine) */
.jp .cert-version{margin:-8px 0 20px;padding:12px 16px;border-radius:12px;border:1px solid var(--info-line);background:var(--info-bg);font-size:15px;color:var(--text-2)}
.jp .cert-version p{margin:0}
.jp .cert-version b{color:var(--text)}
.jp .cert-version[data-state="same"]{border-color:var(--pass-line);background:var(--pass-bg)}
.jp .cert-version[data-state="same"] b{color:var(--pass)}
.jp .cert-version[data-state="changed"]{border:2px solid var(--high);background:var(--high-bg)}
.jp .cert-version[data-state="changed"] b{color:var(--high)}
/* "Prove it's your app" (scan.js methodsUi): one big copy-to-your-AI button, other ways folded away */
.jp .prove-ai{margin:12px 0 0;padding:18px;border:2px solid var(--ink);border-radius:16px;background:#fff}
.jp .prove-steps{margin:0 0 16px;padding:0;list-style:none;counter-reset:ps;display:grid;gap:10px}
.jp .prove-steps li{counter-increment:ps;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:17px;line-height:1.4;color:var(--text-2)}
.jp .prove-steps li::before{content:counter(ps);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font:700 14px/1 var(--font-sans)}
.jp .prove-steps b{color:var(--text)}
.jp .prove-peek{margin-top:12px}
.jp .prove-peek summary,.jp .prove-other summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--text-2);text-decoration:underline;text-underline-offset:4px}
.jp .prove-peek pre{margin:6px 0 0;max-height:220px;overflow:auto;padding:12px;border-radius:10px;background:var(--inset);border:1px solid var(--border);font:400 13px/1.5 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.jp .prove-other{margin-top:10px}
.jp .prove-other[open] summary{margin-bottom:8px}
/* the next level after the deep check (scan.js agentSoon): quiet, dashed, clearly not for sale yet */
.jp .agent-soon{flex:1 1 100%;margin-top:6px;padding:12px 14px;border:1.5px dashed var(--border-strong);border-radius:12px;background:transparent}
.jp .agent-soon p{margin:0}
.jp .agent-soon-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:16px}
.jp .agent-soon-p{font-weight:700;color:var(--text-2)}
.jp .soon-chip{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--info-bg);border:1px solid var(--info-line);color:var(--text-2);font:600 12px/1.5 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.jp .agent-soon-d{margin-top:4px;color:var(--muted);font-size:15px}
.jp .next-level{margin:0 0 24px}

/* the details: closed until asked for */
.jp #found{margin-top:22px}
.jp .found-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 22px}
.jp .found-box > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;cursor:pointer;font-size:18px;color:var(--ink)}
.jp .found-box > summary::-webkit-details-marker{display:none}
.jp .found-more{font:600 14px var(--font-sans);border:1px solid #C9D1DC;border-radius:999px;padding:6px 14px;flex:none}
.jp .found-box[open] .found-more{font-size:0}
.jp .found-box[open] .found-more::after{content:"Hide";font-size:14px} /* Arabic: public/css/rtl.css */
.jp .found-box[open]{padding-bottom:18px}
.jp .f-item{background:#fff;border-color:var(--line)}
.jp .evidence{background:#F7F9FB;border-color:var(--line);color:var(--text-2)}
.jp .r-section{margin-top:22px}
.jp .r-section h2{font-size:clamp(24px,5vw,32px)}
.jp .r-help{margin-top:22px}

/* ---------- leftovers of the old console look, switched off ---------- */
.jp .eyebrow::before,.jp .handoff-k::before{content:none}
.jp .handoff-k{color:var(--muted)}
.jp .unlock::before{display:none}
.jp .unlock{border-top:6px solid var(--A)}
.jp .untested-list li{padding:5px 12px;position:static}
.jp .untested-list li::before{content:none}
.jp .untested-foot .btn{white-space:normal;text-align:center}
.jp .next-head,.jp .fix-body{padding:0}
.jp .fix-body{gap:12px}
.jp .ladder li{opacity:.55}
.jp .ladder li.is-on{opacity:1}

.jp .unlock{border-color:var(--line);border-top-color:var(--A)}
.jp .fix-rescan{padding:14px 0 0}

/* ================================================================ night colours
   The film's night palette for every page after the landing. theme.js sets data-theme on <html> before the page
   paints: the saved choice, else the browser's light/dark setting. Screen only: printouts stay in daylight. */
@media screen {
html[data-theme="night"]:has(body.jp){ background:#0E1626; color-scheme:dark }
html[data-theme="night"] body.jp{
  color-scheme:dark;
  --ink:#F4F6F9; --paper:#F4F6F9; --line:#2A3854; --dusk:#15213A;
  --bg:#0E1626; --surface:#15213A; --raised:#18233A; --inset:#0B1220; --overlay:rgba(5,8,15,.72);
  --border:#2A3854; --border-strong:#4A5C80; --grid:transparent;
  --text:#F4F6F9; --text-2:#C3CCDA; --muted:#97A3B8; --faint:#7D8AA3;
  --signal:#14A35A; --signal-hover:#0F8C4C; --signal-ink:#FFFFFF; --signal-soft:rgba(20,163,90,.14);
  --crit:#FF7A6B;  --crit-bg:#3A1B1E; --crit-line:#7A2D37;
  --high:#FFA25C;  --high-bg:#35241A; --high-line:#7A4828;
  --med:#F2C94E;   --med-bg:#2F2A1C;  --med-line:#756130;
  --low:#7DBBFF;   --low-bg:#1A2A40;  --low-line:#385C7F;
  --pass:#3DD68C;  --pass-bg:#122E25; --pass-line:#236A4C;
  --info:#A9B4C6;  --info-bg:#1C2639; --info-line:#3A4A68;
  --grade-c:#B4CC2E; --grade-d:#F2CC1B;
  --focus:0 0 0 2px #0E1626, 0 0 0 4px #3DD68C;
  background:var(--bg); color:var(--text);
}
html[data-theme="night"] .jp a{color:var(--text);text-decoration-color:#4A5C80}
html[data-theme="night"] .jp a:hover{text-decoration-color:#3DD68C}
html[data-theme="night"] .jp code{background:#0B1220;border-color:#2A3854;color:var(--text)}
html[data-theme="night"] .jp ::selection{background:rgba(61,214,140,.3);color:#fff}
html[data-theme="night"] /* top bar + footer: the film's bar at night */
.jnav{color:#F4F6F9;background:rgba(14,22,38,.92);box-shadow:0 1px 0 #22304A}
html[data-theme="night"] .jfoot{border-top-color:#22304A;color:var(--muted)}
html[data-theme="night"] .fmenu-btn{color:#F4F6F9}
html[data-theme="night"] /* cards: dusk navy on the darker ground */
.jp .panel,
html[data-theme="night"] .r-card,
html[data-theme="night"] .jp .next-step,
html[data-theme="night"] .jp .untested,
html[data-theme="night"] .jp .found-box,
html[data-theme="night"] .jp .f-item,
html[data-theme="night"] .jp .ho,
html[data-theme="night"] .jp .unlock,
html[data-theme="night"] .jp .r-help{background:#15213A;border-color:#2A3854;box-shadow:0 24px 60px -36px rgba(0,0,0,.8)}
html[data-theme="night"] .jp .next-step{border:2px solid #F4F6F9}
html[data-theme="night"] .jp .untested{border-left-color:var(--E)}
html[data-theme="night"] .jp .unlock{border-top-color:var(--A)}
html[data-theme="night"] .r-letter{--track:#22304A}
html[data-theme="night"] .r-letter::before{background:#0E1626}
html[data-theme="night"] .r-found-sum{background:#15213A;border-color:#2A3854;box-shadow:0 24px 60px -36px rgba(0,0,0,.8)}
html[data-theme="night"] .jp .ladder li{opacity:.5}
html[data-theme="night"] .jp .ladder li.is-on{opacity:1}
html[data-theme="night"] .ladder .l-c,
html[data-theme="night"] .ladder .l-d{color:#121A2A}
html[data-theme="night"] /* dark letters on the two light bars */
.ladder-tag{background:#F4F6F9;color:#121A2A}
html[data-theme="night"] /* buttons: ghost on dark,
html[data-theme="night"] the same green for the main action */
.jp .btn{background:transparent;border-color:#4A5C80;color:#F4F6F9}
html[data-theme="night"] .jp .btn:hover{background:#18233A;border-color:#F4F6F9}
html[data-theme="night"] .jp .btn-signal{background:var(--go-btn);border-color:var(--go-btn);color:#fff}
html[data-theme="night"] .jp .btn-signal:hover{background:var(--go-btn-hover);border-color:var(--go-btn-hover)}
html[data-theme="night"] .jp .chip-btn{background:transparent;border-color:#4A5C80;color:#F4F6F9}
html[data-theme="night"] .jp .chip-btn[aria-checked="true"]{background:#F4F6F9;border-color:#F4F6F9;color:#121A2A}
html[data-theme="night"] .jp .found-more{border-color:#4A5C80;color:#F4F6F9}
html[data-theme="night"] /* inner wells */
.jp .prompt-panel,
html[data-theme="night"] .jp .evidence,
html[data-theme="night"] .jp .log-wrap,
html[data-theme="night"] .jp .untested-list li,
html[data-theme="night"] .jp .pill{background:#0E1626;border-color:#2A3854;color:var(--text-2)}
html[data-theme="night"] .jp .meter{background:#22304A}
html[data-theme="night"] .jp .notice.ok{color:#7BE3AE}
html[data-theme="night"] .jp .notice.bad,
html[data-theme="night"] .jp .ho-confirm p{color:#FF9C90}

/* parts added after the mockup: new cards, forms, menu, proof and certificate pieces */
html[data-theme="night"] .jp .prove-ai,html[data-theme="night"] .jp .agent-soon{background:#15213A;border-color:#F4F6F9}
html[data-theme="night"] .jp .agent-soon{border-color:#4A5C80;background:transparent}
html[data-theme="night"] .jp .prove-steps li::before{background:#F4F6F9;color:#121A2A}
html[data-theme="night"] .jp .prove-peek pre{background:#0B1220;border-color:#2A3854;color:var(--text-2)}
html[data-theme="night"] .jp .text-input,html[data-theme="night"] .jp input[type="text"],html[data-theme="night"] .jp input[type="email"],html[data-theme="night"] .jp input[type="url"],html[data-theme="night"] .jp select,html[data-theme="night"] .jp textarea{background:#0B1220;border-color:#4A5C80;color:#F4F6F9}
html[data-theme="night"] .jp ::placeholder{color:#7D8AA3}
html[data-theme="night"] .jp .fmenu-panel{background:#15213A;color:#F4F6F9;box-shadow:0 18px 50px -12px rgba(0,0,0,.7),0 0 0 1px #2A3854}
html[data-theme="night"] .jp .fmenu-panel a{color:#F4F6F9}
html[data-theme="night"] .jp .fmenu-panel a:hover,html[data-theme="night"] .jp .fmenu-panel a:focus-visible,html[data-theme="night"] .jp .fmenu-panel a[aria-current="page"]{background:#22304A}
html[data-theme="night"] .jp .soon-chip{background:#1C2639;border-color:#3A4A68;color:#C3CCDA}

}

@media print{ .jnav,.jfoot,.jp .skip{display:none !important} }

/* style.css text colours written for a dark ground: daylight versions */
.jp .notice.ok{color:#14532D}
.jp .notice.bad{color:#7A1D14}
.jp .notice.bad strong{color:var(--crit)}
.jp .onfile.is-worse .onfile-foot p{color:var(--high)}
.jp .ho-confirm p{color:#7A1D14}
.jp .ho-confirm b{color:var(--ink)}
.jp .sig-check[data-state="ok"]{color:var(--pass)}
.jp .sig-check[data-state="bad"]{color:var(--crit)}
.jp .cs-label::before,.jp .f-k::before,.jp .onfile-k::before,.jp .cert-k::before{content:none}
.jp [tabindex="-1"]:focus,.jp [tabindex="-1"]:focus-visible{box-shadow:none;outline:none}
.jp .how3 li[data-state="current"] .how3-n{color:#fff}
.jp .how3 li + li::before{color:var(--muted)}
/* phones: the three steps as one quiet line of numbers */
@media (max-width:520px){
  .jp .how3{gap:8px}
  .jp .how3 li{padding:6px 8px;gap:6px}
  .jp .how3-t{font-size:12.5px}
  .jp .how3 small,.jp .how3 .how3-note{display:none}
}
html[dir="rtl"] .f-tech{text-align:right}

/* the other checks, right under the result */
.next-checks{margin-top:22px}
.nc-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin-top:12px}
.nc-tile{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0}
.nc-tile.nc-deep{border:2px solid var(--A)}
.nc-tile > p{margin:0}
.nc-name{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-weight:700;font-size:17px;color:var(--ink)}
.nc-price{font:700 16px/1 var(--font-mono);color:var(--ink);white-space:nowrap}
.nc-sub{font-size:14px;line-height:1.45;color:var(--text-2);flex:1}
.nc-tile .btn{align-self:stretch;justify-content:center}
.nc-tile.is-soon{opacity:.75}
.nc-tile.is-soon .soon-chip{align-self:flex-start}
html[data-theme="night"] .nc-tile{background:#15213A;border-color:#2A3854}
html[data-theme="night"] .nc-tile.nc-deep{border-color:var(--A)}