/* Secure Vibes — "SIGNAL": a calm threat-intel console; the report is a case file.
   Rule of thumb: the UI is calm, the findings are loud. Yellow (--signal) is reserved for the primary
   action, focus, the brand mark and the live caret — never for severity.
   Strict CSP: no inline styles. Dynamic values are set with element.style.setProperty(). */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #07090C;
  --surface: #0E1217;
  --raised: #151B22;
  --inset: #0A0D11;
  --overlay: rgba(7, 9, 12, .9);

  /* lines */
  --border: #253040;
  --border-strong: #5F6E82;
  --grid: rgba(140, 154, 171, .06);

  /* text */
  --text: #E8EDF2;
  --text-2: #B6C2CF;
  --muted: #8C9AAB;
  --faint: #5F6B7A;

  /* brand signal (hazard yellow) */
  --signal: #FFD23F;
  --signal-hover: #FFE07A;
  --signal-ink: #07090C;
  --signal-soft: rgba(255, 210, 63, .08);

  /* severity: fg / tinted bg / line */
  --crit: #FF4D5E;  --crit-bg: #301A21;  --crit-line: #7A2D37;
  --high: #FF8A3D;  --high-bg: #30231C;  --high-line: #7A4828;
  --med:  #F2C14E;  --med-bg:  #2E2A1F;  --med-line:  #756130;
  --low:  #6CB6FF;  --low-bg:  #1B2937;  --low-line:  #385C7F;
  --pass: #3DD68C;  --pass-bg: #152D27;  --pass-line: #236A4C;
  --info: #A3AEBB;  --info-bg: #23282E;  --info-line: #515861;

  --grade-a: var(--pass);
  --grade-b: #A3D65C;
  --grade-c: var(--med);
  --grade-d: var(--high);
  --grade-f: var(--crit);

  /* type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-hero: clamp(2.25rem, 1.2rem + 3.3vw, 4.1rem);
  --track-label: .14em;

  /* shape & space */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --tap: 44px;
  --wrap: 1200px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms; --t-med: 220ms; --t-slow: 480ms;

  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--signal);
}

/* ================================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--text); text-decoration-color: var(--border-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--signal); }
h1, h2, h3, h4 { font-weight: 650; line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 .5em; color: var(--text); text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); }
h3 { font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.25; }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; }
code, pre, kbd, samp, .mono { font-family: var(--font-mono); font-feature-settings: "zero" 1; }
code { font-size: .88em; color: var(--text); background: var(--raised); border: 1px solid var(--border); padding: .05em .35em; border-radius: var(--r-sm); }
::selection { background: rgba(255, 210, 63, .3); color: var(--text); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--signal); color: var(--signal-ink); font-weight: 600; padding: 10px 14px; border-radius: var(--r-md); text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

.bg-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

.eyebrow {
  display: block; margin: 0 0 14px;
  font: 500 12px/1.3 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: "// "; color: var(--signal); }
span.eyebrow { display: inline-block; }

/* ================================================================ buttons */
.btn {
  --bg: var(--raised); --fg: var(--text); --bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 0 20px;
  border: 1px solid var(--bd); border-radius: var(--r-md);
  background: var(--bg); color: var(--fg);
  font: 600 15px/1 var(--font-sans); letter-spacing: -0.005em; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast);
}
.btn:hover { --bg: #1C232C; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus); border-radius: var(--r-md); }
.btn-signal { --bg: var(--signal); --fg: var(--signal-ink); --bd: var(--signal); }
.btn-signal:hover { --bg: var(--signal-hover); --bd: var(--signal-hover); }
.btn-ghost { --bg: transparent; --fg: var(--text); --bd: var(--border-strong); }
.btn-ghost:hover { --bg: var(--raised); }
.btn-sm { min-height: var(--tap); padding: 0 14px; font-size: 14px; }
.btn-xl { min-height: 56px; padding: 0 26px; font-size: 17px; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; transform: none; opacity: .5; }
.btn.is-copied { --bg: var(--pass); --fg: var(--signal-ink); --bd: var(--pass); }
.spin { display: inline-block; flex: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

.linklike { border: 0; background: none; padding: 0; min-height: var(--tap); font: 500 15px var(--font-sans); color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { text-decoration-color: var(--signal); }

/* tags (mono labels) */
.tag {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 22px; padding: 0 8px;
  font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent;
}
.tag--full { color: var(--text-2); border-color: var(--border-strong); }
.tag--signal { color: var(--signal); border-color: rgba(255, 210, 63, .45); }
.tag--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--crit); }

/* severity pills: color + glyph + label, never color alone */
.sev {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 24px; padding: 0 8px;
  font: 600 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid; border-radius: var(--r-sm);
  color: var(--info); background: var(--info-bg); border-color: var(--info-line);
}
.sev__glyph { font-size: 9px; line-height: 1; }
.sev--crit { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); }
.sev--high { color: var(--high); background: var(--high-bg); border-color: var(--high-line); }
.sev--med  { color: var(--med);  background: var(--med-bg);  border-color: var(--med-line); }
.sev--low  { color: var(--low);  background: var(--low-bg);  border-color: var(--low-line); }
.sev--pass { color: var(--pass); background: var(--pass-bg); border-color: var(--pass-line); }
.sev--info { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.pill {
  display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 8px;
  font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}
.pill.tier-full { color: var(--signal); border-color: rgba(255, 210, 63, .45); }

/* ================================================================ panels */
.panel { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.panel--ticks::before, .panel--ticks::after { content: ""; position: absolute; width: 12px; height: 12px; border: 1px solid var(--muted); pointer-events: none; }
.panel--ticks::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--r-lg); }
.panel--ticks::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--r-lg); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-head .eyebrow { margin: 0; }

/* ================================================================ topbar */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(7, 9, 12, .94); border-bottom: 1px solid var(--border); }
.topbar .wrap { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--text); text-decoration: none; font: 600 19px/1 var(--font-sans); letter-spacing: -0.035em; }
.logo svg { width: 28px; height: 28px; flex: none; }
.logo b { color: var(--signal); font-weight: 600; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; min-width: 0; }
.nav a { color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.nav a:hover { color: var(--text); }
.nav a.btn { color: var(--signal-ink); }
.nav .btn { flex: none; }
.nav .nav-cta { order: 2; }
.auth-slot { order: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.auth-slot:empty { display: none; }
html[data-auth="in"] .auth-slot { order: 3; }
.nav a.nav-signin { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 2px; color: var(--text); }
@media (max-width: 900px) { .nav > a:not(.btn) { display: none; } }

/* account */
.acct-wrap { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.acct { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px/1 var(--font-mono); color: var(--text-2); padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.acct-btn { display: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.acct-btn > span { display: grid; place-items: center; width: 34px; height: 34px; margin: 5px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--raised); font: 600 15px/1 var(--font-mono); color: var(--text); }
.acct-btn[aria-expanded="true"] > span { border-color: var(--signal); color: var(--signal); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: min(300px, calc(100vw - 32px)); padding: 14px; background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--r-lg); }
.acct-menu-who { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.acct-menu-who b { display: block; margin-top: 2px; font: 500 13.5px/1.35 var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.acct-menu .btn { width: 100%; }
@media (max-width: 640px) {
  .acct, .acct-out { display: none; }
  .acct-btn { display: inline-block; }
  .nav { gap: 12px; }
}
@media (min-width: 641px) { .acct-menu { display: none !important; } }

/* ================================================================ forms */
.field-label { display: block; margin: 0 0 8px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.text-input {
  display: block; width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--inset);
  font: 500 16px var(--font-sans); color: var(--text); caret-color: var(--signal);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.text-input::placeholder { color: var(--faint); }
.text-input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(255, 210, 63, .18); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14.5px; color: var(--text-2); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--signal); flex: none; cursor: pointer; }
.consent a { color: var(--text); }
.form-error { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--crit-bg); border: 1px solid var(--crit-line); color: #FFC2C8; font-weight: 500; font-size: 14.5px; }
.form-error::before { content: "■ "; color: var(--crit); font-size: 10px; vertical-align: 2px; }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }
.fine a { color: var(--text-2); }
.check-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.notice { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--raised); font-size: 14.5px; color: var(--text-2); }
.notice.ok { background: var(--pass-bg); border-color: var(--pass-line); color: #C9F2DD; }
.notice.ok strong { color: var(--pass); }
.notice.bad { background: var(--crit-bg); border-color: var(--crit-line); color: #FFC2C8; }
.notice.bad strong { color: #FFD9DD; }
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.notice p { margin: 0 0 10px; }
.hint-text { color: var(--text-2); font-size: 14.5px; }
.loading-line { display: flex; gap: 10px; align-items: center; }

/* ================================================================ hero */
.hero { padding: 56px 0 72px; border-bottom: 1px solid var(--border); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }
.hero h1 { font-size: var(--fs-hero); font-weight: 650; letter-spacing: -0.04em; line-height: 1.02; margin-bottom: 20px; color: var(--text-2); }
.hero h1 .hl { color: var(--text); }
.hero h1 .hl::after { content: "▍"; color: var(--signal); font-weight: 400; margin-left: .04em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lead { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; color: var(--text-2); max-width: 38em; margin-bottom: 26px; }
.lead code { font-size: .85em; }
.lead-short { display: none; }
.cite { font: 500 .72em var(--font-mono); letter-spacing: .02em; color: var(--muted); text-decoration: none; white-space: nowrap; }
.cite:hover { color: var(--text); }

/* scan wizard ("target console") */
.wizard { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); max-width: 640px; overflow: hidden; scroll-margin-top: 80px; }
.wiz-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border); background: var(--inset); }
.wiz-progress li { min-width: 0; display: flex; }
.wiz-progress li + li { border-left: 1px solid var(--border); }
.wiz-step { flex: 1; min-width: 0; min-height: 50px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 0; background: transparent; text-align: left; font: 500 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); position: relative; }
button.wiz-step { cursor: pointer; }
button.wiz-step:disabled { cursor: default; }
button.wiz-step:not(:disabled):hover .wiz-l { color: var(--text); }
.wiz-n { flex: none; font: 500 12px/1 var(--font-mono); color: inherit; }
.wiz-l { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wiz-v { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.2 var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.wiz-v:empty { display: none; }
.wiz-progress li[data-state="current"] .wiz-step { color: var(--text); background: var(--surface); }
.wiz-progress li[data-state="current"] .wiz-step::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--signal); }
.wiz-progress li[data-state="current"] .wiz-n { color: var(--signal); }
.wiz-progress li[data-state="done"] .wiz-step { color: var(--muted); }
.wiz-progress li[data-state="done"] .wiz-n { color: var(--pass); }
.wiz-progress li[data-state="done"] .wiz-n span { display: none; }
.wiz-progress li[data-state="done"] .wiz-n::after { content: "✓"; }
.wiz-pane { padding: 20px; }
.wiz-title { font-size: 20px; margin: 0 0 4px; }
.wiz-sub { margin: 0 0 14px; font-size: 14.5px; color: var(--text-2); }
.wiz-host, .inbox-email { font-family: var(--font-mono); font-weight: 500; font-size: .92em; color: var(--text); overflow-wrap: anywhere; border-bottom: 1px solid var(--signal); }
.wizard > .form-error { margin: 0 20px 20px; }
.wiz-pane .signin-title { font-size: 19px; }

.url-row { display: flex; gap: 10px; }
.url-input { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 56px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--inset); padding-left: 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.url-input:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(255, 210, 63, .18); }
.url-input span { font: 500 15px var(--font-mono); color: var(--muted); }
.url-input input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 500 17px var(--font-mono); padding: 14px 12px 14px 1px; color: var(--text); caret-color: var(--signal); }
.url-input input::placeholder { color: var(--faint); }
.url-input input:focus, .url-input input:focus-visible { outline: none; box-shadow: none; }

/* trust strip */
.trust { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; max-width: 660px; }
.trust li { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.trust li::before { content: "◉"; color: var(--pass); font-size: 10px; }
.trust a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.trust a:hover { color: var(--text); }
.wiz-foot { margin: 10px 0 0; max-width: 640px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* intercepted log */
.intercept { padding: 22px 22px 20px; }
.intercept-log { list-style: none; margin: 0 0 16px; padding: 14px 16px; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-md); font: 400 14px/1.5 var(--font-mono); display: grid; gap: 8px; }
.intercept-log li { display: grid; grid-template-columns: 5ch minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.il-t { color: var(--faint); font-size: 12.5px; }
.il-req { color: var(--text); overflow-wrap: anywhere; }
.il-req b { color: var(--high); font-weight: 500; margin-right: .4em; }
.il-what { color: var(--muted); font-size: 12px; white-space: nowrap; }
.il-meta .il-req { color: var(--muted); font-size: 12.5px; }
.intercept-src { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.intercept-src a { color: var(--text-2); }
.intercept-punch { margin: 0; padding-top: 14px; border-top: 1px dashed var(--border); font-size: 15px; color: var(--text-2); }
.intercept-punch b { color: var(--text); }

/* ================================================================ sections */
.section { padding: 96px 0; }
.section--line { border-top: 1px solid var(--border); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 44px; }
.section-head h2 { margin: 0; }
.section-head > p { color: var(--text-2); font-size: 16.5px; margin: 0; }
.section-lead { color: var(--text-2); font-size: 17px; max-width: 34em; }

/* what you get + sample case file */
.what { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.what-copy h2 { margin-bottom: 16px; }
.gets { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.get { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.get-n { font: 500 13px/1.6 var(--font-mono); color: var(--signal); }
.get h3 { margin: 0 0 6px; font-size: 18px; }
.get p { margin: 0; color: var(--text-2); font-size: 15.5px; }

.example-note { margin: 12px 2px 0; font-size: 13px; color: var(--muted); }
.dossier { padding: 0; overflow: hidden; }
.dossier-band { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px dashed var(--border); font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dossier-band b { color: var(--text); font-weight: 500; }
.dossier-class { color: var(--crit); }
.dossier-head { display: flex; gap: 28px; align-items: center; padding: 24px 20px 6px 28px; }
.dossier-meta { margin: 0; display: grid; gap: 6px; min-width: 0; }
.dossier-meta div { display: grid; grid-template-columns: 7ch minmax(0, 1fr); gap: 10px; font: 400 13px/1.4 var(--font-mono); }
.dossier-meta dt { color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; padding-top: 1px; }
.dossier-meta dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.dossier-verdict { margin: 14px 20px 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.dossier .tally { margin: 16px 20px 0; }
.dossier .f-list { margin: 16px 20px 0; }
.dossier .ex-prompt { margin: 16px 20px 20px; }

/* grade stamp */
.stamp {
  --c: var(--grade-f);
  flex: none; display: inline-grid; place-items: center; align-content: center; gap: 6px;
  width: 112px; aspect-ratio: 1; padding: 10px;
  color: var(--c);
  border: 3px double var(--c); border-radius: var(--r-md);
  outline: 1px solid var(--c); outline-offset: 4px;
  transform: rotate(-6deg);
  background: color-mix(in srgb, var(--c) 9%, transparent);
}
.stamp__letter { font: 700 60px/.9 var(--font-mono); letter-spacing: -0.04em; }
.stamp__label { font: 600 9.5px/1.15 var(--font-mono); letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.stamp--a { --c: var(--grade-a); } .stamp--b { --c: var(--grade-b); }
.stamp--c { --c: var(--grade-c); } .stamp--d { --c: var(--grade-d); }
.stamp--f, .stamp--e { --c: var(--grade-f); }
.stamp--in { animation: stamp-in var(--t-slow) var(--ease) both; }
@keyframes stamp-in {
  0% { transform: rotate(-6deg) scale(1.6); opacity: 0; }
  60% { transform: rotate(-6deg) scale(.96); opacity: 1; }
  100% { transform: rotate(-6deg) scale(1); }
}

/* severity tally */
.tally-bar { display: flex; gap: 2px; height: 8px; border-radius: 2px; overflow: hidden; background: var(--raised); }
.seg { display: block; flex: var(--w, 1) 1 0; min-width: 4px; }
.seg--crit { background: var(--crit); } .seg--high { background: var(--high); } .seg--med { background: var(--med); }
.seg--low { background: var(--low); } .seg--pass { background: var(--pass-line); } .seg--info { background: var(--info-line); }
.tally-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tally-legend span::before { content: "■ "; font-size: 9px; vertical-align: 1px; }
.t-crit::before { color: var(--crit); } .t-high::before { color: var(--high); } .t-med::before { color: var(--med); }
.t-low::before { color: var(--low); } .t-pass::before { color: var(--pass); } .t-info::before { color: var(--info); }

/* prompt panels (landing + report) */
.prompt-panel, .ex-prompt { background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ex-prompt { border-radius: var(--r-md); }
.prompt-bar, .ex-prompt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 44px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.prompt-file { display: flex; align-items: center; gap: 10px; font: 500 13px var(--font-mono); color: var(--text-2); }
.prompt-file i { width: 8px; height: 8px; background: var(--signal); border-radius: 1px; }
.prompt-body, .ex-prompt-body { margin: 0; color: var(--text-2); white-space: pre-wrap; word-break: break-word; tab-size: 2; font-family: var(--font-mono); }
.prompt-body { padding: 20px 22px 24px; max-height: 440px; overflow: auto; font-size: 13.5px; line-height: 1.7; }
.ex-prompt-body { padding: 12px 14px; font-size: 12.5px; line-height: 1.65; }
.prompt-body::-webkit-scrollbar { width: 10px; }
.prompt-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.prompt-body .h, .ex-prompt-body .h { color: var(--text); font-weight: 600; }
.prompt-body .q, .ex-prompt-body .q { color: var(--low); }
.ex-prompt-foot { margin: 0; padding: 9px 14px; border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font: 500 12px/1.4 var(--font-mono); }
.prompt-note { margin: 0; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 14px; }
.prompt-note b { color: var(--text); }
.prompt-for { font: 500 12.5px var(--font-mono); color: var(--signal); }
.show-more { display: none; }

/* prompt showcase */
.showcase { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); }
.ticks li::before { content: "✓"; flex: none; width: 20px; font: 600 14px/1.6 var(--font-mono); color: var(--pass); }

/* checks grid */
.checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.check { background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.check-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.check h3 { font-size: 16.5px; margin: 0; }
.check p { margin: 0; color: var(--text-2); font-size: 14.5px; flex: 1; }
.probe { display: block; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--border); background: var(--inset); border-radius: var(--r-sm); font-size: 12px; line-height: 1.4; color: var(--high); overflow-wrap: anywhere; }

/* field notes */
.notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.note { padding: 24px 0 0; border-top: 2px solid var(--crit-line); display: flex; flex-direction: column; }
.note-num { margin: 0 0 10px; font: 600 clamp(2rem, 1.4rem + 1.6vw, 2.75rem)/1 var(--font-mono); letter-spacing: -0.04em; color: var(--text); }
.note-num small { display: block; margin-top: 8px; font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.note-text { color: var(--text-2); font-size: 15.5px; flex: 1; }
.note-src { margin: 0; font: 400 12.5px/1.5 var(--font-mono); color: var(--muted); }
.note-src a { color: var(--text-2); }

/* handoff */
.handoff { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.handoff .panel { padding: 22px; }
.handoff-k { margin: 0 0 18px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.handoff h3 { font-size: 18px; margin: 0 0 8px; }
.handoff p:last-child { margin: 0; color: var(--text-2); font-size: 15px; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; }
.plan { display: flex; flex-direction: column; padding: 28px; }
.plan.featured { border-color: rgba(255, 210, 63, .5); background: linear-gradient(180deg, rgba(255, 210, 63, .05), transparent 40%), var(--surface); }
.plan-k { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 12.5px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.plan .price { font: 600 48px/1 var(--font-sans); letter-spacing: -0.045em; margin: 18px 0 8px; }
.plan .price small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan-tag { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--text); }
.plan ul { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 10px; flex: 1; }
.plan li { padding-left: 26px; position: relative; color: var(--text-2); font-size: 15px; }
.plan li::before { content: "✓"; position: absolute; left: 0; font-family: var(--font-mono); color: var(--pass); }
.plan li.no { color: var(--faint); }
.plan li.no::before { content: "–"; color: var(--faint); }
.plan .btn { align-self: flex-start; }
.plan-note { margin-top: 12px; }

/* faq */
.faq { display: grid; gap: 8px; max-width: 860px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.faq details[open] { border-color: var(--border-strong); }
.faq summary { cursor: pointer; padding: 16px 52px 16px 18px; min-height: var(--tap); font-weight: 600; font-size: 16.5px; line-height: 1.35; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 400 20px/1 var(--font-mono); color: var(--muted); }
.faq details[open] > summary::after { content: "–"; color: var(--signal); }
.faq details > div { padding: 0 18px 18px; color: var(--text-2); font-size: 15.5px; }
.faq details > div p:last-child { margin: 0; }
.faq strong { color: var(--text); }
.faq-more { border: 0 !important; background: none !important; }
.faq-more > summary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: transparent; font-size: 15px; }
.faq-more > summary::after { position: static; transform: none; margin-left: 10px; }
.faq-more[open] > summary { display: none; }
.faq-more > .faq-rest { padding: 0; }

/* cta band + footer */
.cta-band { padding: 72px 0; border-top: 1px solid var(--border); }
.cta-band .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { margin: 0; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
.footer { background: #050608; border-top: 1px solid var(--border); color: var(--muted); padding: 44px 0 52px; font-size: 14px; }
.footer .wrap { display: flex; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; align-items: flex-start; }
.footer a { color: var(--text-2); text-decoration: none; }
.footer a:hover { color: var(--text); }
.footer .logo { color: var(--text); }
.footer nav { display: flex; gap: 0 20px; flex-wrap: wrap; max-width: 560px; }
.footer nav a { display: inline-flex; align-items: center; min-height: var(--tap); }
.footer p { margin: 12px 0 0; max-width: 34em; }
.footer-scope { font: 400 12px/1.5 var(--font-mono); color: var(--faint); letter-spacing: .02em; }

/* ================================================================ sign-in component */
.signin-form { display: grid; gap: 0; }
.signin-title { font-size: 20px; margin: 0 0 4px; }
.signin-intro { color: var(--text-2); font-size: 15px; margin: 0 0 14px; }
.signin-form .consent { margin-top: 12px; }
.signin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
/* Sign in with Google: Google's light button (white, #747775 outline, #1F1F1F text, 18px "G" mark). */
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 16px 0 12px;
  margin-top: 16px; background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775; border-radius: 4px; cursor: pointer;
  font: 500 15px/1 Roboto, "Geist", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .1px; width: 100%; max-width: 360px; }
.btn-google:hover { background: #F2F2F2; }
.btn-google:focus-visible { outline: 3px solid var(--signal, #FFD23F); outline-offset: 2px; }
.btn-google:disabled { opacity: .7; cursor: progress; }
.btn-google img { width: 18px; height: 18px; flex: none; }
.btn-google[hidden], .signin-or[hidden] { display: none; }
.signin-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; color: var(--text-3, #8a94a6); font-size: 13px; max-width: 360px; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--line, #26303d); }
.inbox { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); }
.inbox-icon { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--inset); display: grid; place-items: center; }
.inbox-icon svg { width: 24px; height: 24px; }
.inbox h3 { font-size: 20px; margin: 2px 0 6px; }
.inbox p { margin: 0 0 8px; color: var(--text-2); }
.inbox .check-row { margin-top: 12px; }
.dev-note { padding: 6px 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); display: inline-block; font-family: var(--font-mono); font-size: 12px; }
.code-form { margin: 6px 0 12px; }
.code-row { display: flex; gap: 10px; }
.code-input { max-width: 190px; font: 600 20px var(--font-mono); letter-spacing: .3em; text-align: center; }
.signin-havecode { margin-top: 12px; }

/* ================================================================ consent (rules of engagement) */
.consent-block { border: 0; margin: 0; padding: 0; min-width: 0; }
.consent-block legend { padding: 0; margin: 0 0 8px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.consent-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.consent-opt { display: flex; gap: 10px; align-items: flex-start; min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--inset); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.consent-opt:hover { border-color: var(--text-2); }
.consent-opt.is-selected { border-color: var(--signal); background: var(--signal-soft); }
.consent-opt:has(input:focus-visible) { box-shadow: var(--focus); }
.cc-radio { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--signal); flex: none; cursor: pointer; }
.cc-radio:focus-visible { box-shadow: none; }
.cc-text { min-width: 0; }
.cc-title { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.cc-sub { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.consent-block[disabled] { opacity: .55; }
.consent-block[disabled] .consent-opt { cursor: not-allowed; }
.consent-statement { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-left: 2px solid var(--signal); background: var(--raised); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.consent-statement p { margin: 0 0 6px; }
.consent-statement p:last-child { margin: 0; }
.consent-statement.is-empty { border-left-color: var(--border-strong); }
.cs-label { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cs-label::before { content: "// "; color: var(--signal); }
.cs-text { color: var(--text); }
.cs-empty { color: var(--muted); }
.cs-links { font-size: 13px; color: var(--muted); }
.cs-links a { color: var(--text-2); }
.consent-confirm { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--text); min-height: var(--tap); align-items: center; }
.consent-confirm input { width: 22px; height: 22px; margin: 0; }
.consent-confirm.is-disabled { opacity: .5; cursor: not-allowed; }
.consent-confirm.is-disabled input { cursor: not-allowed; }
.consent-action { margin-top: 10px; }
.consent-action .btn[disabled] { --bg: var(--raised); --fg: var(--faint); --bd: var(--border); opacity: 1; }
.consent-who { margin-top: 10px; font-size: 12.5px; overflow-wrap: anywhere; }
.consent-who b { color: var(--text-2); font-family: var(--font-mono); font-weight: 500; }

/* terms re-accept */
.terms-box { padding: 14px 16px; border: 1px solid var(--med-line); border-radius: var(--r-md); background: var(--med-bg); font-size: 14.5px; }
.terms-box strong { display: block; font-size: 17px; margin-bottom: 4px; color: var(--text); }
.terms-box p { margin: 0 0 12px; color: var(--text-2); }

/* AI agent chips */
.agent-pick { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.agent-q { font: 500 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.agent-chips-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { min-height: var(--tap); padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: transparent; color: var(--text-2); font: 500 14.5px var(--font-sans); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.chip-btn:hover { color: var(--text); border-color: var(--text-2); }
.chip-btn[aria-checked="true"] { color: var(--text); border-color: var(--signal); background: var(--signal-soft); }
.chip-btn[aria-checked="true"]::before { content: "✓ "; color: var(--signal); }
.chip-btn:focus-visible { box-shadow: var(--focus); }

/* ================================================================ pages: sign-in, 404, private report */
.page { padding: 48px 0 88px; min-height: calc(100vh - 61px); }
.auth-panel { max-width: 640px; margin-inline: auto; padding: 32px; }
.auth-panel h1 { font-size: clamp(28px, 3.6vw, 40px); }
.auth-panel .lead { font-size: 17px; margin-bottom: 22px; }
.auth-panel > .notice { margin: 0 0 18px; }
.signin-why { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border); }
.auth-panel .check-row { margin-top: 8px; }
.nf-code { margin: 0 0 18px; padding: 10px 12px; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-md); font: 400 14px/1.4 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.nf-code span { color: var(--text); }
.error-panel { max-width: 760px; margin-inline: auto; border-color: var(--crit-line); }
.error-panel h1 { font-size: clamp(26px, 3.2vw, 34px); }
.error-panel #error-msg { color: var(--text-2); }

/* ================================================================ scan console */
.scan-console { padding: 28px; max-width: 980px; margin-inline: auto; }
.progress-head { margin-bottom: 22px; }
.rec-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--crit); margin-right: 8px; vertical-align: 1px; animation: blink 1.4s steps(1) infinite; }
.progress-head h1 { font-size: clamp(26px, 3.6vw, 42px); margin: 0; overflow-wrap: anywhere; }
.progress-head .host { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.04em; color: var(--text); border-bottom: 2px solid var(--signal); }
.p-eta { margin: 10px 0 0; font: 400 14px/1.4 var(--font-mono); color: var(--muted); }
.scan-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--inset); }
.radar-wrap { display: grid; place-items: center; }
.radar {
  position: relative; width: 168px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--border-strong); overflow: hidden;
  background:
    radial-gradient(circle, transparent 0 22%, rgba(140, 154, 171, .16) 22.5% 23%, transparent 23.5% 47%, rgba(140, 154, 171, .16) 47.5% 48%, transparent 48.5% 72%, rgba(140, 154, 171, .14) 72.5% 73%, transparent 73.5%),
    linear-gradient(rgba(140, 154, 171, .12), rgba(140, 154, 171, .12)) center / 100% 1px no-repeat,
    linear-gradient(rgba(140, 154, 171, .12), rgba(140, 154, 171, .12)) center / 1px 100% no-repeat,
    #080B0F;
}
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 210, 63, .32), rgba(255, 210, 63, .08) 14%, transparent 22%); animation: sweep 2.4s linear infinite; }
.radar-core { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--signal); }
@keyframes sweep { to { transform: rotate(1turn); } }
.scan-now { min-width: 0; }
.scan-now-k { margin: 0 0 4px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.scan-now-v { margin: 0 0 14px; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; min-height: 1.3em; }
.meter { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.meter > i { display: block; height: 100%; width: 4%; background: var(--signal); transition: width .5s var(--ease); }
.p-leave { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }

.log-wrap { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--inset); }
.log-bar { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.log-bar-r { color: var(--faint); }
.log { list-style: none; margin: 0; padding: 12px 14px; max-height: min(44vh, 400px); min-height: 120px; overflow-y: auto; overscroll-behavior: contain; font: 400 13px/1.6 var(--font-mono); color: var(--text-2); }
.log::after { content: "▍"; display: block; color: var(--signal); animation: blink 1s steps(1) infinite; }
.log:empty::before { content: "Awaiting target…"; color: var(--faint); }
.log__line { display: grid; grid-template-columns: 7.5ch 5ch minmax(0, 1fr); gap: 10px; }
.log__line time { color: var(--faint); }
.log__tag { color: var(--muted); }
.log__msg { overflow-wrap: anywhere; }
.log__line--start .log__tag { color: var(--signal); }
.log__line--done .log__tag { color: var(--pass); }
.log__line--done .log__msg { color: var(--muted); }
.log__line--new { animation: line-in var(--t-med) var(--ease); }
@keyframes line-in { from { opacity: 0; transform: translateY(4px); } }

.wait-agent { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.wait-agent:empty { display: none; }
.wait-agent .agent-q { flex-basis: 100%; }
.wait-said { margin-top: 8px; }
.wait-said:empty { display: none; }
.tip { margin: 18px 0 0; font-size: 14px; color: var(--text-2); }
.trust--quiet { margin-top: 10px; }
.trust--quiet li::before { content: "✕"; color: var(--muted); font-size: 10px; }

/* ================================================================ report (case file) */
.report { max-width: 1040px; margin-inline: auto; }
.report-panel { padding: 0; overflow: hidden; }
.case-band { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 12px 24px; border-bottom: 1px dashed var(--border); font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.case-band b { color: var(--text-2); font-weight: 500; }
.case-band .case-class { margin-left: auto; color: var(--crit); }
.report-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "grade meta" "grade title" "grade counts"; gap: 0 36px; align-items: start; padding: 28px 28px 24px; }
.report-head .stamp { grid-area: grade; width: 132px; margin: 6px 6px 0; }
.report-head .stamp__letter { font-size: 74px; }
.report-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; font: 400 13px var(--font-mono); color: var(--muted); }
.m-host { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.report-meta > .m-item::before { content: "·"; margin-right: 10px; color: var(--faint); }
.report-head h1 { grid-area: title; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -0.025em; margin: 0; color: var(--text); }
.report-head .counts { grid-area: counts; margin-top: 18px; }
.counts .tally-legend { margin-top: 10px; }
.scope-note { margin: 0; padding: 10px 24px; border-top: 1px solid var(--border); font: 400 12px/1.5 var(--font-mono); color: var(--faint); background: var(--inset); }

.r-section { margin-top: 40px; }
.r-section > h2 { font-size: clamp(22px, 2.4vw, 28px); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.r-sub { color: var(--text-2); margin: 0 0 18px; font-size: 15px; }
.r-section > .eyebrow { margin-bottom: 10px; }

/* fix it now */
.next-step { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: hidden; margin-top: 20px; }
.next-head { padding: 20px 24px 0; }
.next-head h2 { margin: 0 0 4px; font-size: clamp(22px, 2.4vw, 28px); }
.next-head p { margin: 0; color: var(--text-2); }
.fix-body { padding: 18px 24px 4px; display: grid; gap: 14px; }
.copy-big { width: 100%; min-height: 60px; font-size: 17px; }
.agent-how { margin: 0; padding: 10px 12px; border-left: 2px solid var(--signal); background: var(--raised); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 14.5px; color: var(--text-2); }
.prompt-status { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.prompt-status:empty { display: none; }
.see-prompt > summary { cursor: pointer; min-height: var(--tap); display: inline-flex; gap: 8px; align-items: center; font: 500 13px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); list-style: none; }
.see-prompt > summary::-webkit-details-marker { display: none; }
.see-prompt > summary::before { content: "▸"; color: var(--signal); transition: transform var(--t-fast); }
.see-prompt[open] > summary::before { transform: rotate(90deg); }
.see-prompt .prompt-panel { margin: 4px 0 8px; }
.fix-scope { margin: 0 0 12px; font-size: 14.5px; color: var(--text-2); }
.fix-scope a { font-weight: 600; color: var(--text); text-decoration-color: var(--signal); }
.fix-rescan { margin-top: 8px; padding: 16px 24px 22px; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.fix-rescan > p { margin: 0; flex: 1 1 280px; color: var(--text-2); font-size: 15px; }
.fix-rescan > p b { color: var(--text); }
.rescan-slot { flex-basis: 100%; }
.rescan-slot:empty { display: none; }
.rescan-box { padding: 18px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--raised); }
.rescan-box h3 { margin: 0 0 4px; font-size: 18px; }
.rescan-box > .fine { margin-bottom: 14px; }

/* findings: intel cards */
.f-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.f-item { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.f-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--info-line); }
.f-item[data-sev="critical"]::before { background: var(--crit); }
.f-item[data-sev="high"]::before { background: var(--high); }
.f-item[data-sev="medium"]::before { background: var(--med); }
.f-item[data-sev="low"]::before { background: var(--low); }
.f-sum { display: grid; gap: 6px; padding: 14px 16px 14px 18px; min-height: var(--tap); }
summary.f-sum { cursor: pointer; list-style: none; position: relative; padding-right: 48px; }
summary.f-sum::-webkit-details-marker { display: none; }
summary.f-sum::after { content: "+"; position: absolute; right: 16px; top: 14px; font: 400 20px/1 var(--font-mono); color: var(--muted); }
details[open] > summary.f-sum::after { content: "–"; color: var(--signal); }
.f-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.f-cat { font: 400 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.f-title { font-weight: 600; font-size: 16.5px; line-height: 1.3; letter-spacing: -0.012em; overflow-wrap: anywhere; color: var(--text); }
.f-impact { color: var(--text-2); font-size: 14.5px; }
.f-body { padding: 0 16px 16px 18px; }
.f-k { margin: 6px 0 6px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.f-k::before { content: "// "; color: var(--signal); }
.evidence { white-space: pre-line; font: 400 13px/1.55 var(--font-mono); background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; overflow-wrap: anywhere; margin: 0 0 12px; color: var(--text-2); }
.evidence b { color: var(--muted); font-weight: 500; }
.fix { padding-top: 2px; color: var(--text-2); font-size: 15px; }
.fix strong { display: block; margin-bottom: 4px; color: var(--text); }
.fix ul { margin: 6px 0 0; padding-left: 20px; }
.human { margin-top: 10px; padding: 10px 12px; background: var(--high-bg); border: 1px solid var(--high-line); border-radius: var(--r-md); font-size: 14.5px; }
.human strong { color: var(--high); display: inline; }
.fix, .human, .passes li { overflow-wrap: anywhere; }

/* locked findings: real title + severity, evidence and fix redacted */
.f-item.is-locked { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255, 210, 63, .03) 10px 20px), var(--surface); }
.redacted { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 2px; }
.redact { display: inline-block; height: .95em; width: var(--w, 16ch); background: #C9D2DC; border-radius: 1px; user-select: none; opacity: .9; }
.redact--short { --w: 8ch; }
.redact--mid { --w: 12ch; }
.redact--long { --w: 22ch; }
.clearance { font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.clearance::before { content: "⛒ "; color: var(--signal); }
.f-unlock { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); margin-right: 12px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); color: var(--text); font: 500 13px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.f-unlock:hover { border-color: var(--signal); color: var(--signal); }
.f-unlock svg { width: 14px; height: 14px; }
.found-locked { margin: 14px 0 0; font: 500 12px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.found-locked a { color: var(--signal); text-decoration: none; }
.found-locked a:hover { text-decoration: underline; }
.f-list--mini .f-title { font-size: 15px; }
.f-list--mini .f-body { padding-bottom: 12px; }
.f-list--mini .evidence { margin: 0; font-size: 12.5px; }

/* clean result */
.all-clear { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--pass-line); background: var(--pass-bg); border-radius: var(--r-md); color: #C9F2DD; }
.all-clear b { color: var(--pass); }
.all-clear::before { content: "✓"; flex: none; font: 600 18px/1.3 var(--font-mono); color: var(--pass); }

/* passes */
.passes-box > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); font: 500 13px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pass); }
.passes-box > summary::-webkit-details-marker { display: none; }
.passes-box > summary::after { content: "▸"; transition: transform var(--t-fast); }
.passes-box[open] > summary::after { transform: rotate(90deg); }
.passes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 8px 0 0; }
.passes li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: 14.5px; color: var(--text-2); }
.passes li::before { content: "✓"; flex: none; font: 600 13px/1.5 var(--font-mono); color: var(--pass); }

/* video briefing */
.video-section > h2, .video-section > .r-sub, .video-section > .eyebrow { max-width: 960px; }
.video-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; max-width: 960px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: #000; display: grid; place-items: center; color: var(--text-2); overflow: hidden; border: 1px solid var(--border); }
.video-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-wait { text-align: center; padding: 16px; font: 400 14px/1.5 var(--font-mono); width: 100%; color: var(--muted); }
.video-wait .meter { margin: 12px auto 0; max-width: 240px; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; background: rgba(7, 9, 12, .25); cursor: pointer; }
.video-play-btn { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--signal); transition: transform var(--t-fast) var(--ease); }
.video-play-btn svg { width: 34px; height: 34px; margin-left: 5px; }
.video-play:hover .video-play-btn { transform: scale(1.06); }
.video-play:focus-visible { box-shadow: inset 0 0 0 3px var(--signal); }

/* unlock: declassify */
.unlock { background: var(--surface); border: 1px solid rgba(255, 210, 63, .45); border-radius: var(--r-lg); overflow: hidden; }
.unlock::before { content: ""; display: block; height: 6px; background: repeating-linear-gradient(-45deg, var(--signal) 0 10px, var(--bg) 10px 20px); }
.unlock-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--border); }
.unlock-head .eyebrow { margin-bottom: 10px; }
.unlock-head h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 30px); }
.unlock-head p { margin: 0; color: var(--text-2); }
.unlock-incl { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.unlock-incl li { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.unlock-incl li::before { content: "✓ "; color: var(--pass); }
.unlock-steps { list-style: none; margin: 0; padding: 0; }
.ustep { padding: 22px 24px; border-bottom: 1px dashed var(--border); display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "n title" ". body"; gap: 0 16px; align-items: center; }
.ustep:last-child { border-bottom: 0; }
.ustep > .n { grid-area: n; width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid var(--border-strong); display: grid; place-items: center; font: 500 14px var(--font-mono); color: var(--muted); }
.ustep > h3 { grid-area: title; margin: 0; font-size: 18px; }
.ustep > .ustep-body { grid-area: body; margin-top: 8px; min-width: 0; }
.ustep[data-state="active"] .n { border-color: var(--signal); color: var(--signal); }
.ustep[data-state="done"] .n { border-color: var(--pass-line); color: var(--pass); background: var(--pass-bg); }
.ustep[data-state="done"] .n::after { content: "✓"; }
.ustep[data-state="done"] .n span { display: none; }
.ustep[data-state="todo"] .ustep-body, .ustep[data-state="todo"] h3 { opacity: .55; }
.ustep p { color: var(--text-2); }
.methods-label { margin: 6px 0 8px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.methods { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.method-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--inset); }
.method-tabs button { flex: 1 1 auto; min-height: 46px; border: 0; border-right: 1px solid var(--border); background: transparent; padding: 10px 14px; font: 500 14px var(--font-sans); cursor: pointer; color: var(--muted); position: relative; }
.method-tabs button:last-child { border-right: 0; }
.method-tabs button:hover { color: var(--text); }
.method-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); }
.method-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--signal); }
.method-body { padding: 16px; background: var(--surface); }
.method-body p { margin-bottom: 10px; color: var(--text-2); }
.copybox { display: flex; gap: 10px; align-items: stretch; margin: 8px 0 14px; }
.copybox pre { flex: 1; min-width: 0; margin: 0; background: var(--inset); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; font: 400 13px/1.55 var(--font-mono); white-space: pre-wrap; word-break: break-all; }
.copybox pre.tall { max-height: 260px; overflow: auto; word-break: break-word; }
.copybox .btn { align-self: flex-start; }
.dns-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 14.5px; margin: 0 0 10px; }
.dns-grid dt { font-weight: 600; }
.dns-grid dd { margin: 0; font-family: var(--font-mono); word-break: break-all; color: var(--text-2); }
.verify-row { margin-top: 14px; }
.auto-check { display: inline-flex; align-items: center; gap: 8px; font: 400 13px var(--font-mono); color: var(--text-2); }
.auto-check:empty { display: none; }
.auto-check.is-on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pass); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.ustep .consent-block { margin: 4px 0 0; }
.r-foot { margin-top: 40px; }

/* ================================================================ responsive */
@media (max-width: 1080px) {
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handoff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .hero { padding: 36px 0 56px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wizard, .wiz-foot, .trust, .lead { max-width: none; }
  .intercept { max-width: none; }
  .what, .showcase { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .example { max-width: 640px; }
  .section-head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 32px; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .section { padding: 72px 0; }
}
@media (max-width: 760px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .report-head { gap: 0 22px; padding: 22px 20px 20px; }
  .report-head .stamp { width: 104px; }
  .report-head .stamp__letter { font-size: 58px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .hero { padding: 18px 0 44px; }
  .kicker { display: none; }
  .hero h1 { font-size: 34px; letter-spacing: -0.035em; margin-bottom: 12px; }
  .lead { margin-bottom: 16px; font-size: 16px; }
  .lead-long { display: none; }
  .lead-short { display: inline; }
  .section { padding: 56px 0; }
  .section-head > p { font-size: 15.5px; }
  .handoff { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .handoff .panel { padding: 18px; }
  .handoff-k { margin-bottom: 10px; }
  .page { padding: 20px 0 56px; }
  .panel, .auth-panel { padding: 20px; }
  .cta-band { padding: 52px 0; }
}
@media (max-width: 560px) {
  .url-row { flex-direction: column; }
  .url-row .btn { width: 100%; }
  .url-input { min-height: 52px; }
  .wiz-pane { padding: 14px; }
  .wizard > .form-error { margin: 0 14px 14px; }
  .wiz-step { flex-direction: row; gap: 6px; padding: 8px 10px; min-height: 44px; font-size: 11px; letter-spacing: .06em; }
  .wiz-v { display: none; }
  .trust { gap: 2px 14px; }
  .trust li { font-size: 10.5px; }
  .consent-opts { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .consent-opt { align-items: center; padding: 8px 12px; }
  .consent-opt .cc-sub { display: none; }
  .wiz-pane .wiz-sub { margin-bottom: 10px; }
  .signin-actions .btn, .check-row > .btn { width: 100%; }
  .consent-action .btn { width: 100%; }
  .copybox { flex-direction: column; }
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check { padding: 14px; gap: 8px; }
  .check p { display: none; }
  .check-top { flex-direction: column-reverse; gap: 8px; }
  .check h3 { font-size: 14.5px; line-height: 1.25; }
  .probe { font-size: 11px; padding: 6px 7px; }
  .intercept { padding: 18px 16px; }
  .intercept-log { padding: 12px; font-size: 13px; }
  .intercept-log li { grid-template-columns: 4ch minmax(0, 1fr); }
  .il-what { grid-column: 2; margin-top: -6px; }
  .dossier-head { gap: 20px; padding: 20px 16px 4px 22px; }
  .dossier-meta { gap: 8px; }
  .dossier-meta div { grid-template-columns: minmax(0, 1fr); gap: 0; font-size: 12.5px; }
  .dossier-meta dt { font-size: 10.5px; }
  .dossier-band { padding: 10px 16px; }
  .dossier .stamp { width: 92px; }
  .dossier .stamp__letter { font-size: 46px; }
  .dossier .stamp__label { font-size: 8.5px; }
  .dossier-verdict, .dossier .tally, .dossier .f-list { margin-left: 16px; margin-right: 16px; }
  .dossier .ex-prompt { margin: 14px 16px 16px; }
  .dossier-verdict { font-size: 17px; }
  .prompt-panel[data-clamp]:not(.is-open) .prompt-body { max-height: 280px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .show-more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--border); background: var(--surface); color: var(--text); font: 500 13px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .prompt-body { padding: 16px; font-size: 12.5px; }
  .faq summary { font-size: 16px; padding: 14px 48px 14px 16px; }
  .faq details > div { padding: 0 16px 16px; }
  .footer nav { gap: 0 16px; }
  .inbox { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .inbox-icon { display: none; }
  .code-input { max-width: none; flex: 1; }

  /* scan console */
  .scan-console { padding: 18px 16px; }
  .progress-head { margin-bottom: 16px; }
  .progress-head h1 { font-size: 26px; }
  .scan-grid { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px; }
  .radar { width: 96px; }
  .scan-now-v { font-size: 15.5px; margin-bottom: 10px; }
  .p-leave { font-size: 12.5px; }
  .log { max-height: 40vh; font-size: 12.5px; padding: 10px 12px; }
  .log__line { grid-template-columns: 5ch minmax(0, 1fr); }
  .log__line time { display: none; }
  .log-bar-r { display: none; }

  /* report */
  .case-band { padding: 9px 14px; gap: 2px 12px; font-size: 10px; letter-spacing: .08em; }
  .case-band .case-class { margin-left: auto; order: 2; }
  .case-band > span:nth-child(2) { order: 3; flex-basis: 100%; }
  .report-head { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "grade meta" "title title" "counts counts"; gap: 0 18px; padding: 18px 16px; }
  .report-head .stamp { width: 76px; margin: 6px 4px 0; gap: 3px; padding: 6px; }
  .report-head .stamp__letter { font-size: 42px; }
  .report-head .stamp__label { font-size: 7.5px; letter-spacing: .1em; }
  .report-meta { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 0; min-height: 80px; justify-content: center; font-size: 12.5px; }
  .report-meta > .m-item::before { content: none; }
  .report-head { padding: 14px 14px 16px; }
  .report-head h1 { font-size: 19px; margin-top: 12px; }
  .report-head .counts { margin-top: 12px; }
  .scope-note { padding: 8px 14px; font-size: 11px; }
  .r-section { margin-top: 32px; }
  .next-step { margin-top: 14px; }
  .next-head { padding: 14px 16px 0; }
  .next-head .eyebrow { display: none; }
  .next-head p { font-size: 14.5px; }
  .fix-body { padding: 14px 16px 2px; gap: 12px; }
  .copy-big { min-height: 56px; font-size: 16.5px; padding: 0 16px; }
  .agent-pick .agent-q { flex-basis: 100%; }
  .chip-btn { padding: 0 12px; font-size: 14px; }
  .fix-rescan { padding: 14px 16px 18px; }
  .fix-rescan .btn { width: 100%; }
  .rescan-box { padding: 14px; }
  .f-item.is-locked { grid-template-columns: minmax(0, 1fr); }
  .f-item.is-locked .f-unlock { justify-self: start; margin: -4px 16px 14px 18px; }
  .f-title { font-size: 16px; }
  .unlock-head { padding: 18px 16px 16px; }
  .ustep { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "n title" "body body"; gap: 0 10px; padding: 18px 16px; }
  .ustep > .n { width: 30px; height: 30px; font-size: 13px; }
  .ustep > h3 { font-size: 17px; }
  .method-tabs button { flex-basis: 50%; border-bottom: 1px solid var(--border); }
  .method-body { padding: 14px; }
  .video-play-btn { width: 64px; height: 64px; }
  .video-play-btn svg { width: 28px; height: 28px; }
  .video-card { padding: 8px; }
}
@media (min-width: 561px) { .consent-action .btn { width: auto; } }
@media (max-width: 380px) {
  .hero h1 { font-size: 31px; }
  .logo { font-size: 17px; }
  .nav .btn-sm { padding: 0 12px; }
}

/* ================================================================ motion & contrast preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .radar-sweep { animation: none; transform: rotate(40deg); }
  .log::after, .hero h1 .hl::after, .rec-dot { animation: none; }
}
@media (prefers-contrast: more) {
  :root { --border: #5F6E82; --muted: #B6C2CF; --faint: #8C9AAB; }
}

/* ================================================================ handoff certificate: shared bits */
.btn-ico { width: 18px; height: 18px; flex: none; }
.btn-danger { --fg: var(--crit); --bd: var(--crit-line); }
.btn-danger:hover { --bg: var(--crit-bg); }
.btn-danger-solid { --bg: var(--crit); --fg: #fff; --bd: var(--crit); }
.btn-danger-solid:hover { --bg: #FF6676; --bd: #FF6676; }
.gchip { --c: var(--grade-f); display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border: 2px solid var(--c); border-radius: var(--r-sm); color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); font: 700 19px/1 var(--font-mono); }
.gchip--a { --c: var(--grade-a); } .gchip--b { --c: var(--grade-b); } .gchip--c { --c: var(--grade-c); } .gchip--d { --c: var(--grade-d); }

/* report: certificate on file (client comparison) */
.onfile { margin-top: 14px; padding: 16px 20px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); }
.onfile.is-worse { border-color: var(--high-line); background: linear-gradient(90deg, var(--high-bg), var(--surface) 60%); }
.onfile-k { margin: 0 0 10px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.onfile-k::before { content: "// "; color: var(--signal); }
.onfile-cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.onfile-side { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2); min-width: 0; }
.onfile-side b { color: var(--text); font-weight: 500; font-size: .94em; }
.onfile-arrow { font: 400 18px var(--font-mono); color: var(--faint); }
.onfile-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.onfile-foot p { margin: 0; flex: 1 1 280px; font-size: 14.5px; color: var(--text-2); }
.onfile.is-worse .onfile-foot p { color: #FFD3B8; }

/* report: hand it to your client */
.ho { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: hidden; }
.ho-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(61, 214, 140, .05), transparent 80%); }
.ho-head .eyebrow { margin-bottom: 10px; }
.ho-head h2 { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 28px); }
.ho-head p { margin: 0; color: var(--text-2); max-width: 46em; }
.ho-body { padding: 20px 24px 24px; display: grid; gap: 16px; }
.ho-body > .notice { margin: 0; }
.ho-past { margin: 0; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); font-size: 14.5px; color: var(--text-2); }
.ho-past b { color: var(--text); font-weight: 500; }
.ho-reqs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ho-reqs li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--inset); font-size: 14.5px; line-height: 1.4; color: var(--text-2); }
.ho-reqs li::before { content: "○"; flex: none; width: 18px; font: 600 14px/1.4 var(--font-mono); color: var(--faint); text-align: center; }
.ho-reqs li[data-state="ok"] { color: var(--text); border-color: var(--pass-line); background: var(--pass-bg); }
.ho-reqs li[data-state="ok"]::before { content: "✓"; color: var(--pass); }
.ho-reqs li[data-state="todo"] { color: var(--text); border-color: rgba(255, 210, 63, .45); background: var(--signal-soft); }
.ho-reqs li[data-state="todo"]::before { content: "→"; color: var(--signal); }
.ho-reqs li[data-state="fail"] { color: var(--text); border-color: var(--high-line); background: var(--high-bg); }
.ho-reqs li[data-state="fail"]::before { content: "✕"; color: var(--high); }
.ho-act > p { margin: 0 0 12px; color: var(--text-2); max-width: 46em; }
.ho-act > .ho-big { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); margin-bottom: 6px; }
.ho-act .check-row { margin-top: 0; }
.ho-verify .methods-label { margin-top: 0; }
.ho-form { display: grid; gap: 0; max-width: 560px; }
.ho-opt { text-transform: none; letter-spacing: 0; color: var(--faint); font-family: var(--font-sans); }
.ho-form .fine { margin: 8px 0 0; }
.ho-issue { margin-top: 16px; justify-self: start; }
.ho-terms { max-width: 44em; }
.ho-issued { display: grid; gap: 0; }
.ho-cert-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; }
.ho-cert-head h3 { margin: 0; font-size: 20px; }
.ho-cert-head h3 .mono { font-weight: 500; letter-spacing: 0; }
.ho-valid { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--pass-line); border-radius: var(--r-sm); background: var(--pass-bg); color: var(--pass); font: 600 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ho-valid::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pass); }
.ho-exp { font: 400 13px var(--font-mono); color: var(--muted); }
.ho-k { margin: 0 0 8px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ho-link { display: flex; gap: 10px; align-items: stretch; margin-bottom: 22px; }
.ho-url { flex: 1; font: 500 14.5px var(--font-mono); color: var(--text); min-height: var(--tap); }
.ho-link-btns { display: flex; gap: 8px; flex: none; }
.ho-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.ho-badge { display: grid; place-items: center; min-height: 92px; padding: 20px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--r-md); background-color: var(--inset); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 12px 12px; }
.ho-badge img { height: 24px; width: auto; max-width: 100%; }
.ho-snips .copybox { margin: 0 0 16px; }
.ho-snips .copybox pre { font-size: 12.5px; }
.ho-msg { margin-top: 4px; }
.ho-msg .copybox { margin-top: 6px; }
.ho-revoke { margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--border); }
.ho-revoke-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.ho-revoke-row .fine { flex: 1 1 260px; }
.ho-confirm { padding: 14px 16px; border: 1px solid var(--crit-line); border-radius: var(--r-md); background: var(--crit-bg); }
.ho-confirm p { margin: 0 0 12px; color: #FFD3D7; font-size: 14.5px; }
.ho-confirm b { color: #fff; }

/* ================================================================ public certificate page (/c/:id) */
.page--cert { padding-top: 32px; }
.cert-wrap { max-width: 1180px; }
.cert-loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 80px 0; font: 400 14px var(--font-mono); color: var(--muted); }
.cert-missing { max-width: 640px; margin: 24px auto 0; padding: 32px; }
.cert-missing h1 { font-size: clamp(26px, 3.2vw, 34px); }
.cert-missing p { color: var(--text-2); }

.cert-status { --c: var(--muted); --cb: var(--info-bg); --cl: var(--info-line);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 18px; margin-bottom: 20px; border: 1px solid var(--cl); border-radius: var(--r-lg); background: var(--cb); }
.cert-status[data-status="valid"] { --c: var(--pass); --cb: var(--pass-bg); --cl: var(--pass-line); }
.cert-status[data-status="revoked"] { --c: var(--crit); --cb: var(--crit-bg); --cl: var(--crit-line); }
.cert-status[data-status="superseded"] { --c: var(--low); --cb: var(--low-bg); --cl: var(--low-line); }
.cert-status-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cl); border-radius: var(--r-md); color: var(--c); background: rgba(7, 9, 12, .35); }
.cert-status-icon svg { width: 24px; height: 24px; }
.cert-status-text p { margin: 0; color: var(--text-2); font-size: 15px; }
.cert-status-text a { color: var(--text); font-weight: 500; }
.cert-status-text b { color: var(--text); }
.cert-status-word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 2px !important; font: 700 15px/1.3 var(--font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--c) !important; }
.cert-status-live { font: 400 11.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: none; color: var(--muted); }

.cert-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.cert-rail { display: grid; gap: 16px; position: sticky; top: 84px; }

.cert-doc { --doc-c: var(--pass); position: relative; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); outline: 1px solid var(--border); outline-offset: 5px; margin: 6px; overflow: hidden; }
.cert-doc::before { content: ""; display: block; height: 3px; background: var(--doc-c); }
.cert-doc[data-status="expired"] { --doc-c: var(--info-line); }
.cert-doc[data-status="revoked"] { --doc-c: var(--crit); }
.cert-doc[data-status="superseded"] { --doc-c: var(--low-line); }
.cert-band { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 12px 28px; border-bottom: 1px dashed var(--border); font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cert-band b { color: var(--text); font-weight: 500; letter-spacing: .06em; }
.cert-band-r { margin-left: auto; }
.cert-print-status { display: none; }
.cert-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 30px 28px 26px; }
.cert-title .eyebrow { margin-bottom: 12px; }
.cert-host { margin: 0 0 10px; font: 600 clamp(28px, 1.2rem + 2.4vw, 44px)/1.08 var(--font-mono); letter-spacing: -0.045em; color: var(--text); overflow-wrap: anywhere; }
.cert-for { margin: 0 0 16px; font-size: 16px; color: var(--text-2); }
.cert-for b { color: var(--text); font-weight: 600; }
.cert-claim { margin: 0; font-size: clamp(18px, 1rem + .6vw, 22px); line-height: 1.35; letter-spacing: -0.015em; color: var(--text-2); }
.cert-claim b { color: var(--text); font-weight: 650; }
.cert-stamp-wrap { position: relative; display: grid; place-items: center; padding: 10px 14px 10px 6px; }
.cert-stamp { width: 148px; }
.cert-stamp .stamp__letter { font-size: 84px; }
.cert-stamp .stamp__label { font-size: 10.5px; }
.cert-void { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-18deg); padding: 6px 14px; border: 3px solid var(--crit); border-radius: var(--r-sm); background: rgba(14, 18, 23, .86); color: var(--crit); font: 800 22px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.cert-doc[data-status="expired"] .cert-void, .cert-doc[data-status="superseded"] .cert-void { border-color: var(--text-2); color: var(--text-2); }
.cert-doc.is-void .cert-stamp { --c: var(--faint); }
.cert-doc.is-void .cert-host, .cert-doc.is-void .cert-claim b { color: var(--text-2); }

.cert-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--inset); }
.cert-fact { padding: 14px 18px 16px; min-width: 0; }
.cert-fact + .cert-fact { border-left: 1px solid var(--border); }
.cert-fact:first-child { padding-left: 28px; }
.cert-fact dt { margin-bottom: 6px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cert-fact dd { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.cert-fact small { display: block; margin-top: 3px; font: 400 12.5px/1.4 var(--font-mono); letter-spacing: 0; color: var(--muted); }

.cert-block { padding: 22px 28px; border-bottom: 1px solid var(--border); }
.cert-k { margin: 0 0 14px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cert-k::before { content: "// "; color: var(--signal); }
.cert-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cert-note a { color: var(--text-2); }
.cert-counts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cc { --c: var(--info); display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--inset); }
.cc--crit { --c: var(--crit); } .cc--high { --c: var(--high); } .cc--med { --c: var(--med); } .cc--low { --c: var(--low); }
.cc-n { font: 600 28px/1 var(--font-mono); letter-spacing: -0.04em; color: var(--text); }
.cc-l { display: flex; align-items: center; gap: 6px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.cc-g { font-size: 9px; color: var(--c); }
.cc.is-zero .cc-n { color: var(--faint); }
.cert-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.cert-sub { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.cert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cert-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.cert-list li::before { flex: none; width: 16px; font: 600 12.5px/1.6 var(--font-mono); text-align: center; }
.cert-list--ok li::before { content: "✓"; color: var(--pass); }
.cert-list--open li::before { content: "◆"; font-size: 9px; line-height: 2.2; color: var(--med); }
.cert-list--no li::before { content: "–"; color: var(--faint); }
.cert-list--no li { color: var(--muted); }
.cert-empty { margin: 0; font-size: 14.5px; color: var(--muted); }
.cert-disclaimer { margin: 0; padding: 14px 28px; border-bottom: 1px solid var(--border); background: var(--inset); font: 400 12.5px/1.55 var(--font-mono); color: var(--muted); }
.cert-sig { border-bottom: 0; }
.sig-meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 10px; font: 400 13px/1.4 var(--font-mono); }
.sig-meta div { display: flex; gap: 8px; }
.sig-meta dt { color: var(--muted); }
.sig-meta dd { margin: 0; color: var(--text); }
.sig-row { display: flex; gap: 10px; align-items: flex-start; }
.sig-value { flex: 1; min-width: 0; display: block; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--text-2); word-break: break-all; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-md); }
.sig-check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13.5px; color: var(--text-2); }
.sig-check::before { flex: none; font: 600 13px/1.5 var(--font-mono); content: "…"; color: var(--muted); }
.sig-check[data-state="ok"]::before { content: "✓"; color: var(--pass); }
.sig-check[data-state="ok"] { color: #C9F2DD; }
.sig-check[data-state="bad"]::before { content: "✕"; color: var(--crit); }
.sig-check[data-state="bad"] { color: #FFC2C8; }
.sig-check[data-state="unsupported"]::before { content: "○"; }

.cert-check { padding: 22px; }
.cert-check h2 { margin: 0 0 8px; font-size: 24px; }
.cert-check > p:not(.eyebrow) { color: var(--text-2); font-size: 15px; }
.cert-cta { width: 100%; white-space: normal; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.cert-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cert-tools .btn { padding: 0 10px; font-size: 14px; gap: 8px; }
.cert-checklist { padding: 22px; }
.cl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cl-head .eyebrow { margin-bottom: 10px; }
.cl-count { font: 500 12px var(--font-mono); color: var(--muted); white-space: nowrap; }
.cert-checklist h2 { margin: 0 0 6px; font-size: 22px; }
.cl-intro { color: var(--text-2); font-size: 14.5px; margin-bottom: 12px; }
.cl-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.cl-list li { border-bottom: 1px solid var(--border); }
.cl-list label { display: flex; gap: 12px; align-items: flex-start; min-height: var(--tap); padding: 11px 2px; cursor: pointer; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.cl-list input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pass); cursor: pointer; }
.cl-list small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.cl-list label.is-done .cl-text { color: var(--muted); }
.cl-list code { font-size: .86em; white-space: nowrap; }

/* ================================================================ landing: receiving an app? */
.receive { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.receive h2 { margin-bottom: 14px; }
.receive-copy .btn { margin-top: 6px; }
.receive-steps { list-style: none; margin: 0; padding: 0; counter-reset: rs; border-top: 1px solid var(--border); }
.receive-steps li { counter-increment: rs; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.receive-steps li::before { content: counter(rs, decimal-leading-zero); font: 500 13px/1.6 var(--font-mono); color: var(--signal); }
.receive-steps h3 { margin: 0 0 4px; font-size: 17px; }
.receive-steps p { margin: 0; color: var(--text-2); font-size: 15px; }

/* ================================================================ certificate + handoff: responsive */
@media (max-width: 1080px) {
  .cert-layout { grid-template-columns: minmax(0, 1fr); }
  .cert-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* single column: when the certificate no longer holds, re-checking is the main action, so it comes first */
@media screen and (max-width: 1080px) {
  .cert:not([data-status="valid"]) .cert-layout { display: flex; flex-direction: column; }
  .cert:not([data-status="valid"]) .cert-rail { display: contents; }
  .cert:not([data-status="valid"]) .cert-check { order: -1; }
}
@media (max-width: 980px) {
  .receive { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 860px) {
  .ho-reqs { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ho-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cert-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-fact:nth-child(3) { border-left: 0; padding-left: 28px; }
  .cert-fact:nth-child(n+3) { border-top: 1px solid var(--border); }
  .cert-rail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .onfile { padding: 14px 16px; }
  .onfile-cmp { flex-direction: column; align-items: flex-start; gap: 8px; }
  .onfile-arrow { transform: rotate(90deg); margin-left: 10px; line-height: 1; }
  .onfile-foot .btn { width: 100%; }
  .ho-head { padding: 16px 16px 14px; }
  .ho-body { padding: 16px; gap: 14px; }
  .ho-reqs { gap: 4px; }
  .ho-reqs li { padding: 8px 10px; font-size: 14px; }
  .ho-act .check-row .btn, .ho-verify > .btn { width: 100%; }
  .ho-issue { width: 100%; justify-self: stretch; }
  .ho-link { flex-direction: column; }
  .ho-link-btns > * { flex: 1; }
  .ho-cert-head h3 { font-size: 18px; flex-basis: 100%; order: 2; }
  .ho-cert-head .ho-exp { order: 3; }
  .ho-revoke .btn, .ho-confirm .btn { width: 100%; }
  .ho-revoke-row .fine { flex-basis: 100%; }

  .page--cert { padding-top: 16px; }
  .cert-status { gap: 12px; padding: 12px 14px; margin-bottom: 14px; align-items: start; }
  .cert-status-icon { width: 38px; height: 38px; }
  .cert-status-text p { font-size: 14.5px; }
  .cert-doc { margin: 5px; outline-offset: 4px; }
  .cert-band { padding: 10px 16px; gap: 2px 14px; font-size: 10.5px; }
  .cert-band-r { margin-left: 0; }
  .cert-head { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 20px 16px 20px; }
  .cert-stamp-wrap { padding: 26px 6px 0 0; }
  .cert-stamp { width: 82px; gap: 3px; padding: 6px; outline-offset: 3px; }
  .cert-stamp .stamp__letter { font-size: 46px; }
  .cert-stamp .stamp__label { font-size: 7px; letter-spacing: .1em; }
  .cert-void { font-size: 13px; padding: 4px 7px; letter-spacing: .12em; border-width: 2px; }
  .cert-host { font-size: 28px; }
  .cert-claim { font-size: 18px; }
  .cert-fact { padding: 12px 16px 14px; }
  .cert-fact:first-child, .cert-fact:nth-child(3) { padding-left: 16px; }
  .cert-fact dd { font-size: 15px; }
  .cert-block { padding: 18px 16px; }
  .cert-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .cert-cols { grid-template-columns: minmax(0, 1fr); }
  .cert-disclaimer { padding: 12px 16px; font-size: 12px; }
  .sig-row { flex-direction: column; }
  .cert-check, .cert-checklist { padding: 18px 16px; }
  .cert-tools { grid-template-columns: minmax(0, 1fr); }
  .cert-missing { padding: 22px 18px; }
  .receive-steps li { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 0; }
  .receive-copy .btn { width: 100%; }
}

/* ================================================================ print: the certificate as a one-page paper dossier */
@media print {
  body { background: #fff; color: #000; }
  .topbar, .footer, .skip { display: none !important; }
}
@media print {
  @page { size: A4; margin: 11mm 12mm; }
  .cert-page {
    --text: #1A1A1A; --text-2: #2B2A27; --muted: #5C5548; --faint: #8A8478; --border: #CFC7B5; --border-strong: #1A1A1A;
    --pass: #1E6B43; --med: #7A5A00; --high: #A6460C; --crit: #B3261E; --low: #1F5FA8;
    --grade-a: #1E6B43; --grade-b: #4D6B12; --grade-c: #7A5A00; --grade-d: #A6460C; --grade-f: #B3261E;
    --surface: #fff; --inset: #F7F4EC; --signal: #1A1A1A;
    background: #fff; color: #1A1A1A; font-size: 10pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  html { background: #fff !important; }
  .cert-page { color-scheme: light; }
  .cert-page .page { padding: 0; min-height: 0; }
  .cert-page .cert-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cert-page .cert-fact:nth-child(n) { border-top: 0; padding-left: 10px; }
  .cert-page .cert-fact + .cert-fact { border-left: 1px solid var(--border); }
  .cert-page .cert-head { grid-template-columns: minmax(0, 1fr) auto; }
  .cert-page .cert-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-page .cert-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cert-page .wrap { width: 100%; max-width: none; }
  .cert-page .cert-status, .cert-page .cert-check, .cert-page .cert-loading, .cert-page .cert-checklist .fine { display: none !important; }
  .cert-page .cert-layout { display: block; }
  .cert-page .cert-rail { position: static; display: block; }
  .cert-page .cert-doc { margin: 0; outline: 1.5px solid #1A1A1A; outline-offset: 2.5px; border: .5px solid #1A1A1A; border-radius: 0; background: #fff; break-inside: avoid; }
  .cert-page .cert-doc::before { height: 0; }
  .cert-page .cert-band { padding: 6px 14px; font-size: 7.5pt; color: #1A1A1A; border-bottom: 1px solid #1A1A1A; }
  .cert-page .cert-print-status { display: block; margin: 0; padding: 4px 14px; border-bottom: 1px dashed var(--border); font: 400 7.5pt/1.4 var(--font-mono); color: var(--muted); }
  .cert-page .cert-head { padding: 12px 14px 10px; gap: 12px; }
  .cert-page .cert-title .eyebrow { margin-bottom: 4px; font-size: 7.5pt; }
  .cert-page .eyebrow::before, .cert-page .cert-k::before { color: var(--muted); }
  .cert-page .cert-host { font-size: 21pt; margin-bottom: 4px; }
  .cert-page .cert-for { font-size: 10pt; margin-bottom: 6px; }
  .cert-page .cert-claim { font-size: 12pt; }
  .cert-page .cert-stamp-wrap { padding: 4px 10px; }
  .cert-page .cert-stamp { width: 92px; outline-offset: 3px; animation: none; }
  .cert-page .cert-stamp .stamp__letter { font-size: 50pt; }
  .cert-page .cert-stamp .stamp__label { font-size: 6.5pt; }
  .cert-page .cert-void { background: #fff; font-size: 14pt; }
  .cert-page .cert-facts { border-color: #1A1A1A; }
  .cert-page .cert-fact { padding: 6px 10px 7px; }
  .cert-page .cert-fact:first-child { padding-left: 14px; }
  .cert-page .cl-list input { appearance: none; -webkit-appearance: none; border: 1px solid #1A1A1A; border-radius: 1px; background: #fff; }
  .cert-page .cl-list input:checked { background: #1A1A1A; }
  .cert-page .cert-fact dt { font-size: 6.5pt; margin-bottom: 2px; }
  .cert-page .cert-fact dd { font-size: 9.5pt; }
  .cert-page .cert-fact small { font-size: 7pt; margin-top: 1px; }
  .cert-page .cert-block { padding: 8px 14px; }
  .cert-page .cert-k { margin-bottom: 5px; font-size: 7pt; }
  .cert-page .cert-counts { gap: 6px; }
  .cert-page .cc { padding: 4px 8px; gap: 2px; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
  .cert-page .cc-n { font-size: 13pt; }
  .cert-page .cc-l { font-size: 6.5pt; }
  .cert-page .cert-note { margin-top: 4px; font-size: 7pt; }
  .cert-page .cert-cols { gap: 4px 18px; }
  .cert-page .cert-sub { font-size: 8pt; margin-bottom: 2px; }
  .cert-page .cert-list { gap: 1px; }
  .cert-page .cert-list li, .cert-page .cert-empty { font-size: 8pt; line-height: 1.35; gap: 6px; }
  .cert-page .cert-list li::before { font-size: 7.5pt; width: 10px; line-height: 1.5; }
  .cert-page .cert-list--open li::before { font-size: 6pt; line-height: 2.1; }
  .cert-page .cert-disclaimer { padding: 6px 14px; font-size: 7pt; }
  .cert-page .sig-meta { font-size: 7.5pt; margin-bottom: 3px; gap: 2px 16px; }
  .cert-page .sig-row .btn, .cert-page .sig-check { display: none; }
  .cert-page .sig-value { padding: 4px 6px; font-size: 6.5pt; line-height: 1.35; background: #fff; }
  .cert-page .cert-checklist { margin-top: 8px; padding: 8px 14px; border: .5px solid #1A1A1A; border-radius: 0; background: #fff; break-inside: avoid; }
  .cert-page .cert-checklist::before, .cert-page .cert-checklist::after { display: none; }
  .cert-page .cl-head .eyebrow { margin-bottom: 2px; font-size: 7pt; }
  .cert-page .cl-count { display: none; }
  .cert-page .cert-checklist h2 { font-size: 10.5pt; margin-bottom: 1px; }
  .cert-page .cl-intro { font-size: 7.5pt; margin-bottom: 4px; }
  .cert-page .cl-list { grid-template-columns: 1fr 1fr; column-gap: 18px; margin: 0; border-top: 0; }
  .cert-page .cl-list li { border-bottom: .5px solid var(--border); }
  .cert-page .cl-list label { min-height: 0; padding: 2px 0; font-size: 7.5pt; line-height: 1.3; gap: 6px; color: #1A1A1A; }
  .cert-page .cl-list small { font-size: 7pt; margin-top: 0; }
  .cert-page .cl-list input { width: 9pt; height: 9pt; margin: 0; accent-color: #1A1A1A; }
  .cert-page .cl-list label.is-done .cl-text { color: #1A1A1A; }
  .cert-page code { background: none; border: 0; padding: 0; }
  .cert-page a { color: #1A1A1A; text-decoration: none; }
}
/* headings that receive focus from script (after a state change) don't need the ring */
#missing-title:focus, #ho-title:focus, #ho-cert-title:focus { box-shadow: none; }

/* ================================================================ plain-words pass: 3 steps, URL hint, hero video slot, report file download */
/* the 3 steps: ① paste link → ② see what hackers grab → ③ paste fix into your AI */
.how3 { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 640px; }
.how3 li { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.how3 li + li::before { content: "→"; position: absolute; left: -8px; z-index: 1; top: 50%; transform: translate(-50%, -50%); font: 500 12px/1 var(--font-mono); color: var(--signal); }
.how3-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--signal); color: var(--signal); font: 600 13px/1 var(--font-mono); }
.how3-t { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--text); }
.how3 li[data-state="done"] .how3-n { background: var(--pass-bg); border-color: var(--pass); color: var(--pass); }
.how3 li[data-state="current"] { border-color: var(--signal); }
.how3 li[data-state="current"] .how3-n { background: var(--signal); color: #07090C; }
.how3 li[data-state="todo"] .how3-t { color: var(--text-2); }
.how3 a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
.how3 a:hover .how3-t, .how3 a:focus-visible .how3-t { text-decoration: underline; text-decoration-color: var(--signal); }
.how3 small { display: block; margin-top: 2px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.how3--report { margin: 0 0 16px; max-width: none; }
.how3--scan { margin: 0 0 18px; max-width: none; }

/* wizard sub-steps: dots instead of numbers, so they never compete with the 3 steps above */
.wiz-n span { display: none; }
.wiz-n::after { content: "○"; }
.wiz-progress li[data-state="current"] .wiz-n::after { content: "●"; }
.wiz-progress li[data-state="done"] .wiz-n::after { content: "✓"; }

.url-hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* hero: right column holds the ad video (when there is one) and the bot log */
.hero-side { display: grid; gap: 18px; min-width: 0; }
.hero-video[hidden] { display: none; }
.hero-video-frame { background: radial-gradient(120% 90% at 30% 20%, rgba(255, 210, 63, .10), transparent 60%), var(--inset); border-color: var(--border-strong); }
.hero-video-frame video { position: absolute; inset: 0; background: transparent; }
.hero-video-frame .video-play { background: linear-gradient(180deg, rgba(7, 9, 12, 0) 40%, rgba(7, 9, 12, .7)); align-content: center; gap: 14px; }
.hero-video-cap { font: 500 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }

/* report: copy + download side by side */
.fix-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.fix-actions .copy-big { width: 100%; }
.fix-actions .btn-download { min-height: 60px; }
.file-hint { margin: -4px 0 0; font-size: 13.5px; color: var(--muted); }

@media (max-width: 640px) {
  .how3 { gap: 12px; margin-bottom: 14px; }
  .how3 li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 9px; }
  .how3 li + li::before { left: -6px; top: 19px; font-size: 10px; }
  .how3 a { flex-direction: column; align-items: flex-start; gap: 6px; }
  .how3-n { width: 22px; height: 22px; font-size: 12px; }
  .how3-t { font-size: 13px; }
  .how3 small { display: none; }
  .url-hint { font-size: 12.5px; }
  .fix-actions { grid-template-columns: minmax(0, 1fr); }
  .fix-actions .btn-download { min-height: 48px; }
}
.nav-cta-short { display: none; }
.url-input input::placeholder { font-size: 15.5px; }
@media (max-width: 640px) {
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
  .nav a.nav-signin { white-space: nowrap; }
  .url-input > span { display: none; }
  .url-input input { padding-left: 0; }
  .url-input input::placeholder { font-size: 15px; }
}

/* ================================================================ get in touch (/contact) */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; align-items: start; }
.contact-intro h1 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 16px; }
.contact-steps { list-style: none; counter-reset: cs; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; max-width: 34em; }
.contact-steps li { counter-increment: cs; position: relative; padding: 12px 14px 12px 52px; border: 1px solid var(--border); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.contact-steps li::before { content: counter(cs); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--font-mono); color: var(--signal-ink); background: var(--signal); }
.contact-steps b { display: block; color: var(--text); font-weight: 600; }
.contact-steps span { display: block; color: var(--text-2); font-size: 14.5px; margin-top: 2px; }
.contact-honest { max-width: 34em; }
.contact-book { margin-top: 18px; }
.contact-panel { padding: 28px; }
.contact-form-title { font-size: 22px; margin: 0 0 18px; }
.contact-form .field-label { margin-top: 16px; }
.contact-form .field-label:first-child { margin-top: 0; }
.contact-form .opt { margin-left: 6px; color: var(--faint); letter-spacing: .06em; text-transform: none; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-message { min-height: 130px; resize: vertical; line-height: 1.5; }
.contact-hint, .contact-warn { margin-top: 8px; }
.contact-warn { margin-top: 14px; }
.contact-send { width: 100%; margin: 16px 0 12px; }
.contact-form [aria-invalid="true"] { border-color: var(--crit); }
.contact-done p { margin: 0 0 10px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fixforyou { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.fixforyou h3 { margin: 6px 0 6px; font-size: 24px; }
.fixforyou p { margin: 0; color: var(--text-2); }
.fixforyou .fine { margin-top: 8px; color: var(--muted); }
.r-help { margin-top: 24px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.r-help p { margin: 0; color: var(--text-2); }
.r-help b { color: var(--text); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 760px) { .fixforyou { grid-template-columns: minmax(0, 1fr); } .fixforyou .btn { justify-self: start; } }
@media (max-width: 560px) { .contact-row { grid-template-columns: minmax(0, 1fr); } .contact-panel { padding: 20px; } }

/* ================================================================ pricing v2: outside check, "Not tested yet", deep check */
.pill.tier-outside { color: var(--text-2); }
.p-leave.is-email { color: var(--text-2); }
.p-leave.is-email b { color: var(--signal); }

/* "Not tested yet": loud on purpose. An outside check must never read as an all-clear. */
.untested { margin-top: 20px; border: 1px solid var(--high-line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.untested::before { content: ""; display: block; height: 6px; background: repeating-linear-gradient(-45deg, var(--high) 0 10px, var(--bg) 10px 20px); }
.untested-head { padding: 20px 24px 6px; }
.untested-k { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 12px/1.3 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--high); }
.untested-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--high); color: var(--bg); font: 700 14px/1 var(--font-sans); letter-spacing: 0; }
.untested-head h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }
.untested-lead { margin: 0; font-size: 17px; color: var(--text); }
.untested-list { list-style: none; margin: 14px 24px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.untested-list li { display: grid; gap: 2px; padding: 10px 12px 10px 34px; position: relative; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--inset); font-size: 14px; line-height: 1.4; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.untested-list li::before { content: "?"; position: absolute; left: 11px; top: 10px; font: 600 14px/1.4 var(--font-mono); color: var(--high); }
.untested-list b { color: var(--text); font-weight: 600; }
.untested-foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 18px 24px 22px; }
.untested-foot .fine { margin: 0; flex: 1 1 240px; }

/* Deep check: product choice and the separate active-testing OK */
.unlock-price { color: var(--signal); }
.product-pick { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.product-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--inset); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.product-opt:hover { border-color: var(--text-2); }
.product-opt.is-selected { border-color: var(--signal); background: var(--signal-soft); }
.product-opt:has(input:focus-visible) { box-shadow: var(--focus); }
.product-opt input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--signal); }
.po-text { min-width: 0; }
.po-name { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--text); }
.po-tag { font: 500 10.5px/1.6 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 0 6px; border: 1px solid rgba(255, 210, 63, .45); border-radius: var(--r-sm); color: var(--signal); }
.po-sub { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.po-price { font: 600 20px/1.2 var(--font-mono); color: var(--text); }
.active-consent { margin: 4px 0 18px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.active-consent .consent-statement { margin-top: 0; border-left-color: var(--high); }
.active-consent .cs-label::before { color: var(--high); }
.active-consent[disabled] { opacity: .55; }
.rescan-box .active-consent { margin-top: 12px; }

/* Certificate panel: QR code, and the 4th requirement (payment) when billing is on */
.ho-reqs[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ho-qr-row { display: flex; gap: 16px; align-items: center; margin: 4px 0 16px; }
.ho-qr { flex: none; width: 96px; height: 96px; border-radius: var(--r-sm); background: #fff; }
.ho-qr-row .fine { margin: 0; }

@media (max-width: 760px) {
  .untested-list, .product-pick { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ho-reqs[data-n="4"] { grid-template-columns: minmax(0, 1fr); }
  .untested-head { padding: 16px 16px 4px; }
  .untested-list { margin: 12px 16px 0; }
  .untested-foot { padding: 14px 16px 18px; }
  .untested-foot .btn { width: 100%; }
  .untested-lead { font-size: 16px; }
  .product-opt { grid-template-columns: auto minmax(0, 1fr); }
  .po-price { grid-column: 2; }
}

/* Certificate: which check, QR code (on screen and in print), verify link */
.cert-check--deep { color: var(--signal); }
.cert-qr { display: flex; gap: 20px; align-items: center; }
.cert-qr-img { flex: none; width: 112px; height: 112px; background: #fff; border-radius: var(--r-sm); }
.cert-qr-text { min-width: 0; }
.cert-qr-text p { margin: 0; color: var(--text-2); font-size: 14.5px; overflow-wrap: anywhere; }
.cert-qr-text .cert-k { margin-bottom: 8px; }
.cert-qr-text .cert-note { margin-top: 8px; }
.cert-verify-link { margin: 14px 0 0; }

/* /verify: type a serial number */
.verify-wrap { max-width: 720px; }
.verify-panel { padding: 32px; }
.verify-panel h1 { font-size: clamp(28px, 3.6vw, 40px); }
.verify-panel .lead { font-size: 17px; margin-bottom: 22px; }
.verify-row-in { display: flex; gap: 10px; }
.verify-row-in .text-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.verify-row-in .text-input::placeholder { text-transform: none; }
.verify-form .fine { margin-top: 8px; }
.verify-card { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--inset); }
.verify-card[data-status="valid"] { border-color: var(--pass-line); }
.verify-card[data-status="revoked"] { border-color: var(--crit-line); }
.verify-status { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font: 600 13px/1.3 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.verify-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.verify-card[data-status="valid"] .verify-status { color: var(--pass); }
.verify-card[data-status="valid"] .verify-dot { background: var(--pass); }
.verify-card[data-status="revoked"] .verify-status { color: var(--crit); }
.verify-card[data-status="revoked"] .verify-dot { background: var(--crit); }
.verify-line { margin: 0 0 14px; font-size: 17px; color: var(--text); }
.verify-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 16px; }
.verify-facts dt { font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.verify-facts dd { margin: 2px 0 0; color: var(--text); overflow-wrap: anywhere; }
.verify-facts > div:first-child { grid-column: 1 / -1; }
.verify-more { margin-top: 18px; text-align: center; color: var(--muted); }
@media (max-width: 560px) {
  .verify-panel { padding: 20px 16px; }
  .verify-row-in { flex-direction: column; }
  .verify-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-qr { align-items: flex-start; gap: 14px; }
  .cert-qr-img { width: 88px; height: 88px; }
  .ho-qr-row { align-items: flex-start; }
}
@media print {
  .cert-page .cert-qr { padding: 8px 14px; gap: 12px; break-inside: avoid; }
  .cert-page .cert-qr-img { width: 26mm; height: 26mm; border: 0; }
  .cert-page .cert-qr-text p { font-size: 8.5pt; color: #1A1A1A; }
  .cert-page .cert-qr-text .cert-note { font-size: 7.5pt; }
  .cert-page .cert-verify-link { display: none; }
}