@import url("/fonts.css");

/* ─────────────────────────── tokens ───────────────────────────
   Anchor colour is EU institutional blue (#003399) — chosen because the
   subject is EU regulation, not because it is a safe SaaS indigo.        */
:root{
  --ground:#F7F8FB; --surface:#FFFFFF; --surface-2:#FCFDFE; --sunken:#F1F4F9;
  --ink:#0A1024; --ink-2:#3C455C; --muted:#5A6480; --faint:#8C96AE;
  --line:#E2E7F0; --line-2:#EDF0F6;
  --brand:#003399; --brand-lift:#2E5CE6; --brand-wash:#EEF2FE; --brand-edge:#CBD8FA; --on-brand:#FFFFFF;
  --pass:#0F8F5F; --pass-wash:#E7F5EE; --pass-edge:#BCE3D0;
  --warn:#B47407; --warn-wash:#FDF3E0; --warn-edge:#F0DBAE;
  --fail:#C8323F; --fail-wash:#FDEDEE; --fail-edge:#F4CBCE;
  --shadow-sm:0 1px 2px rgba(10,16,36,.05), 0 1px 1px rgba(10,16,36,.03);
  --shadow-md:0 4px 12px rgba(10,16,36,.06), 0 1px 3px rgba(10,16,36,.04);
  --shadow-lg:0 24px 60px -20px rgba(10,16,36,.22), 0 6px 18px -8px rgba(10,16,36,.10);
  --r:12px; --r-sm:8px; --r-chip:5px;
  --display:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --body:"Public Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#070A14; --surface:#0F1424; --surface-2:#121829; --sunken:#0B1020;
    --ink:#EDF0F7; --ink-2:#C2CADB; --muted:#939EB6; --faint:#6B7690;
    --line:#1E2740; --line-2:#182038;
    --brand:#7096FF; --brand-lift:#8FADFF; --brand-wash:#111C3C; --brand-edge:#26386B; --on-brand:#050914;
    --pass:#3DC98D; --pass-wash:#0C2419; --pass-edge:#1C4735;
    --warn:#E8AE3F; --warn-wash:#241B08; --warn-edge:#4A3814;
    --fail:#F0707C; --fail-wash:#2A1116; --fail-edge:#54222B;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 4px 14px rgba(0,0,0,.45);
    --shadow-lg:0 28px 70px -24px rgba(0,0,0,.75), 0 8px 22px -10px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#070A14; --surface:#0F1424; --surface-2:#121829; --sunken:#0B1020;
  --ink:#EDF0F7; --ink-2:#C2CADB; --muted:#939EB6; --faint:#6B7690;
  --line:#1E2740; --line-2:#182038;
  --brand:#7096FF; --brand-lift:#8FADFF; --brand-wash:#111C3C; --brand-edge:#26386B; --on-brand:#050914;
  --pass:#3DC98D; --pass-wash:#0C2419; --pass-edge:#1C4735;
  --warn:#E8AE3F; --warn-wash:#241B08; --warn-edge:#4A3814;
  --fail:#F0707C; --fail-wash:#2A1116; --fail-edge:#54222B;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px rgba(0,0,0,.45);
  --shadow-lg:0 28px 70px -24px rgba(0,0,0,.75), 0 8px 22px -10px rgba(0,0,0,.5);
}

/* ─────────────────────────── base ─────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:1.08; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
svg{display:block}
::selection{background:var(--brand-wash); color:var(--brand)}
:focus-visible{outline:2px solid var(--brand-lift); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px; top:0; background:var(--brand); color:var(--on-brand); padding:10px 16px; border-radius:0 0 8px 0; z-index:100}
.skip:focus{left:0}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
.wrap-narrow{max-width:940px; margin:0 auto; padding:0 28px}
.sec{padding:104px 0; border-top:1px solid var(--line)}
.sec-tight{padding:76px 0}
.eyebrow{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); display:flex; align-items:center; gap:9px}
.eyebrow::before{content:""; width:16px; height:1px; background:var(--brand-edge)}
.eyebrow-c{justify-content:center}
.h2{font-size:clamp(30px,3.6vw,45px)}
.lede{font-size:18px; color:var(--muted); line-height:1.62; max-width:62ch}
.head{display:flex; flex-direction:column; gap:18px; margin-bottom:52px}
.head-c{align-items:center; text-align:center}
.head-c .lede{text-align:center}
.mono-label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.stack{display:flex; flex-direction:column}
.row{display:flex; align-items:center}

/* ─────────────────────────── buttons ─────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-size:15px; font-weight:600; letter-spacing:-.01em;
  padding:0 20px; height:46px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s;
}
.btn-primary{background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--brand-lift); transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--faint); transform:translateY(-1px)}
.btn-sm{height:38px; font-size:14px; padding:0 15px}
.btn-lg{height:54px; font-size:16px; padding:0 26px}
.btn[disabled]{opacity:.6; cursor:not-allowed; transform:none}

/* ─────────────────────────── chips ─────────────────────────── */
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-chip); border:1px solid}
.chip-pass{color:var(--pass); background:var(--pass-wash); border-color:var(--pass-edge)}
.chip-warn{color:var(--warn); background:var(--warn-wash); border-color:var(--warn-edge)}
.chip-fail{color:var(--fail); background:var(--fail-wash); border-color:var(--fail-edge)}
.chip-info{color:var(--brand); background:var(--brand-wash); border-color:var(--brand-edge)}
.chip-idle,.chip-na{color:var(--faint); background:var(--sunken); border-color:var(--line)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}

/* ─────────────────────────── nav ─────────────────────────── */
.nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter:blur(14px) saturate(1.6); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:34px; height:62px}
.logo{display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:600; font-size:16.5px; letter-spacing:-.03em}
.logo-mark{width:24px; height:24px; flex:none}
.nav-links{display:flex; gap:26px; font-size:14.5px; color:var(--muted); font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:10px}
@media (max-width:900px){.nav-links{display:none}}

/* ─────────────────────────── hero ─────────────────────────── */
.hero{position:relative; overflow:hidden; padding:74px 0 96px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr); gap:56px; align-items:center}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:22px}
.hero h1{font-size:clamp(38px,4.9vw,60px); letter-spacing:-.038em; line-height:1.03}
.hero h1 em{font-style:normal; color:var(--brand)}
.hero-sub{font-size:18.5px; color:var(--muted); line-height:1.58; max-width:50ch}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr; gap:44px} .hero{padding:56px 0 72px}}

.scanner{width:100%; max-width:600px; display:flex; flex-direction:column; gap:12px}
.scan-field{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px 8px 8px 18px; box-shadow:var(--shadow-lg); transition:border-color .2s, box-shadow .2s}
.scan-field:focus-within{border-color:var(--brand-edge); box-shadow:var(--shadow-lg), 0 0 0 4px var(--brand-wash)}
.scan-glyph{color:var(--faint); flex:none}
.scan-input{flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font-family:var(--mono); font-size:16px; letter-spacing:-.01em; height:52px; outline:none}
.scan-input::placeholder{color:var(--faint)}
.scan-note{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13.5px; color:var(--muted)}
.scan-note b{font-weight:600; color:var(--ink-2)}
.scan-sep{width:1px; height:12px; background:var(--line)}
.scan-error{font-size:13.5px; color:var(--fail); display:none}
.scan-error.on{display:block}
.hero-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.trustbar{margin-top:14px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; color:var(--faint)}
.trustbar span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}

/* ─────────────────────────── app surface ─────────────────────────── */
.app{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden}
.app-bar{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.app-dots{display:flex; gap:5px}
.app-dots i{width:8px; height:8px; border-radius:50%; background:var(--line); display:block}
.app-url{flex:1; min-width:0; font-family:var(--mono); font-size:11.5px; color:var(--muted); background:var(--sunken); border:1px solid var(--line-2); border-radius:6px; padding:4px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-body{padding:20px}

.dial{position:relative; width:132px; height:132px; flex:none}
.dial-ring{position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--dial-color, var(--pass)) calc(var(--pct,0) * 1%), var(--sunken) 0); transition:background .1s linear; -webkit-mask:radial-gradient(circle, transparent 60%, #000 61%); mask:radial-gradient(circle, transparent 60%, #000 61%)}
.dial-core{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px}
.dial-num{font-family:var(--mono); font-size:33px; font-weight:500; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums}
.dial-den{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.06em}
.dial-lg{width:168px; height:168px}
.dial-lg .dial-num{font-size:44px}

.reg-rows{display:flex; flex-direction:column; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden}
.reg-row{display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--surface); font-size:13.5px; opacity:0; transform:translateY(3px); animation:rowin .4s ease forwards}
@keyframes rowin{to{opacity:1; transform:none}}
.reg-row .nm{font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--ink-2); font-weight:500}
.reg-row .sc{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums}

.pipe{display:flex; flex-direction:column; gap:11px; padding:6px 2px}
.pipe-step{display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--faint); transition:color .3s}
.pipe-step.on{color:var(--ink-2)}
.pipe-step.done{color:var(--muted)}
.pipe-ico{width:20px; height:20px; border-radius:50%; flex:none; border:1.5px solid var(--line); display:grid; place-items:center; transition:border-color .3s, background .3s}
.pipe-step.on .pipe-ico{border-color:var(--brand); border-right-color:transparent; animation:spin .7s linear infinite}
.pipe-step.done .pipe-ico{border-color:var(--pass); background:var(--pass-wash); animation:none}
.pipe-step.done .pipe-ico::after{content:""; width:8px; height:4px; border-left:1.5px solid var(--pass); border-bottom:1.5px solid var(--pass); transform:rotate(-45deg) translate(1px,-1px)}
@keyframes spin{to{transform:rotate(360deg)}}
.pipe-meta{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint)}
.pipe-log{font-family:var(--mono); font-size:11px; line-height:1.9; color:var(--faint); background:var(--sunken); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:10px 12px; height:104px; overflow:hidden}
.pipe-log b{color:var(--brand); font-weight:500}

/* ─────────────────────────── panels & findings ─────────────────────────── */
.panel{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.panel-h{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line-2); font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint)}
.panel-b{padding:16px 14px}
.findings{display:flex; flex-direction:column}
.finding{display:grid; grid-template-columns:3px 1fr; border-bottom:1px solid var(--line-2)}
.finding:last-child{border-bottom:0}
.f-stripe{background:var(--faint)}
.f-high .f-stripe{background:var(--fail)}
.f-medium .f-stripe{background:var(--warn)}
.f-low .f-stripe{background:var(--pass)}
.f-body{padding:14px 16px; display:flex; flex-direction:column; gap:8px; min-width:0}
.f-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.f-title{font-size:14.5px; font-weight:600; letter-spacing:-.01em}
.f-art{font-family:var(--mono); font-size:11px; color:var(--brand); background:var(--brand-wash); border:1px solid var(--brand-edge); border-radius:4px; padding:1px 6px}
.f-desc{font-size:13.5px; color:var(--muted); line-height:1.55}
.f-ev{font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--ink-2); background:var(--sunken); border-left:2px solid var(--line); padding:8px 11px; border-radius:0 4px 4px 0; overflow-x:auto}
.f-fix{border:1px solid var(--brand-edge); background:var(--brand-wash); border-radius:var(--r-sm); padding:11px 13px; display:flex; flex-direction:column; gap:7px}
.f-fix .t{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--brand)}
.f-fix ol{margin:0; padding-left:18px; font-size:13px; color:var(--ink-2); line-height:1.6}
.f-copy{font-family:var(--mono); font-size:11.5px; background:var(--surface); border:1px solid var(--brand-edge); border-radius:6px; padding:9px 11px; color:var(--ink-2); white-space:pre-wrap; overflow-x:auto}

/* ─────────────────────────── results page ─────────────────────────── */
.res-head{padding:34px 0 26px}
.res-grid{display:grid; grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:22px; align-items:start}
@media (max-width:960px){.res-grid{grid-template-columns:1fr}}
.res-side{display:flex; flex-direction:column; gap:16px; position:sticky; top:82px}
@media (max-width:960px){.res-side{position:static}}
.score-block{display:flex; align-items:center; gap:18px}
.score-meta{display:flex; flex-direction:column; gap:8px; min-width:0}
.kv{display:flex; flex-direction:column; gap:1px}
.kv .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.kv .v{font-family:var(--mono); font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; word-break:break-all}
.kv-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.locked{position:relative; border:1px dashed var(--brand-edge); background:var(--brand-wash); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.locked h3{font-size:19px}
.locked p{font-size:14px; color:var(--muted); line-height:1.6; max-width:56ch}
.locked ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--ink-2); line-height:1.75}
.blurred{filter:blur(5px); opacity:.55; user-select:none; pointer-events:none}

/* ─────────────────────────── report ─────────────────────────── */
.rep{max-width:900px; margin:0 auto; padding:40px 28px 80px; display:flex; flex-direction:column; gap:34px}
.rep-cover{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:34px; display:flex; flex-direction:column; gap:22px; box-shadow:var(--shadow-sm)}
.rep-title{font-size:34px; letter-spacing:-.035em}
.rep-sec{display:flex; flex-direction:column; gap:16px}
.rep-sec-h{display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--line); padding-bottom:10px}
.rep-sec-h .n{font-family:var(--mono); font-size:12px; color:var(--brand)}
.rep-sec-h h2{font-size:23px}
.rep-item{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); page-break-inside:avoid; break-inside:avoid}
.rep-item-h{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:13px 16px; border-bottom:1px solid var(--line-2); background:var(--surface-2)}
.rep-item-b{padding:16px; display:flex; flex-direction:column; gap:12px}
.rep-num{font-family:var(--mono); font-size:11px; color:var(--faint)}
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
table.tbl th{text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:8px 10px; border-bottom:1px solid var(--line)}
table.tbl td{padding:9px 10px; border-bottom:1px solid var(--line-2); color:var(--ink-2); vertical-align:top}
table.tbl td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.checklist{display:flex; flex-direction:column; gap:0}
.checklist div{display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line-2); font-size:14px; color:var(--ink-2)}
.checkbox{width:15px; height:15px; border:1.5px solid var(--faint); border-radius:3px; flex:none; margin-top:3px}
.roadmap-phase{border-left:2px solid var(--brand-edge); padding:2px 0 2px 18px; display:flex; flex-direction:column; gap:8px}

@media print{
  .noprint{display:none !important}
  body{background:#fff}
  .rep{max-width:none; padding:0}
  .rep-item, .panel{box-shadow:none}
  a[href]::after{content:""}
}

/* ─────────────────────────── generic sections ─────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s, transform .2s, box-shadow .2s}
.card:hover{border-color:var(--brand-edge); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.card-ico{width:30px; height:30px; border-radius:7px; background:var(--brand-wash); border:1px solid var(--brand-edge); display:grid; place-items:center; color:var(--brand)}
.card h3{font-size:15px; letter-spacing:-.02em}
.card p{font-size:13px; color:var(--muted); line-height:1.5}
.card .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:auto; padding-top:6px}

.reg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:12px}
.reg-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; display:flex; flex-direction:column; gap:9px; transition:border-color .2s, transform .2s, box-shadow .2s}
.reg-card:hover{border-color:var(--brand-edge); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.reg-card .code{font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--ink)}
.reg-card .desc{font-size:12.5px; color:var(--muted); line-height:1.5}
.reg-card .top{display:flex; align-items:center; justify-content:space-between; gap:10px}

.steps{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--line); gap:1px}
.step{background:var(--surface); padding:26px 24px; display:flex; flex-direction:column; gap:12px}
.step-n{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; color:var(--brand); display:flex; align-items:center; gap:8px}
.step-n::after{content:""; flex:1; height:1px; background:var(--line)}
.step h3{font-size:17px; letter-spacing:-.02em}
.step p{font-size:14px; color:var(--muted); line-height:1.55}
.sig-list{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.sig{font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--muted); background:var(--sunken); border:1px solid var(--line-2); border-radius:4px; padding:2px 6px}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

.split{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:56px; align-items:center}
@media (max-width:920px){.split{grid-template-columns:1fr; gap:40px}}
.feat-list{display:flex; flex-direction:column; margin-top:6px}
.feat{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.feat:last-child{border-bottom:0}
.feat-k{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); width:96px; flex:none; padding-top:3px}
.feat-v strong{display:block; font-size:15px; font-weight:600; letter-spacing:-.015em; margin-bottom:3px}
.feat-v p{font-size:13.5px; color:var(--muted); line-height:1.55}

.eng-lane{border:1px solid var(--line); background:var(--surface); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:11px; box-shadow:var(--shadow-sm)}
.eng-lane-h{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.eng-items{display:flex; flex-wrap:wrap; gap:6px}
.eng-item{font-size:12.5px; color:var(--ink-2); background:var(--sunken); border:1px solid var(--line-2); border-radius:6px; padding:5px 9px}
.eng-note{font-size:12.5px; color:var(--muted); line-height:1.5; margin:0}
.eng-arrow{display:grid; place-items:center; height:30px; color:var(--faint)}
.eng-out{border:1px solid var(--brand-edge); background:var(--brand-wash); border-radius:var(--r); padding:16px; display:flex; align-items:center; gap:14px}
.eng-out .n{font-family:var(--mono); font-size:26px; font-weight:500; color:var(--brand); letter-spacing:-.03em}

.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start}
@media (max-width:920px){.tiers{grid-template-columns:1fr; max-width:440px; margin:0 auto}}
.tier{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px 24px; display:flex; flex-direction:column; gap:18px; position:relative}
.tier-hi{border-color:var(--brand); box-shadow:var(--shadow-lg)}
.tier-flag{position:absolute; top:-1px; right:20px; transform:translateY(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; background:var(--brand); color:var(--on-brand); padding:4px 10px; border-radius:4px}
.tier-n{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand)}
.tier-p{display:flex; align-items:baseline; gap:6px; margin-top:12px}
.tier-p .amt{font-family:var(--display); font-size:38px; font-weight:600; letter-spacing:-.04em}
.tier-p .per{font-size:13.5px; color:var(--faint)}
.tier-d{font-size:13.5px; color:var(--muted); line-height:1.55; min-height:42px}
.tier-f{display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--ink-2)}
.tier-f div{display:flex; align-items:flex-start; gap:9px}
.tier-f svg{flex:none; margin-top:5px; color:var(--brand)}
.tier .btn{width:100%}

.tl{display:flex; flex-direction:column}
.tl-item{display:grid; grid-template-columns:56px 1fr; gap:22px; padding-bottom:26px; position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:27px; top:34px; bottom:-4px; width:1px; background:var(--line)}
.tl-item:last-child::before{display:none}
.tl-n{width:56px; height:56px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; font-family:var(--mono); font-size:15px; font-weight:500; color:var(--brand); position:relative; z-index:1; box-shadow:var(--shadow-sm)}
.tl-c{padding-top:9px; display:flex; flex-direction:column; gap:6px}
.tl-c h3{font-size:18px; letter-spacing:-.02em}
.tl-c p{font-size:14.5px; color:var(--muted); line-height:1.55; max-width:56ch}

.bens{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
@media (max-width:900px){.bens{grid-template-columns:1fr}}
.ben{padding:26px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:9px}
.ben:nth-child(3n+1){padding-left:0}
.ben h3{font-size:16.5px; letter-spacing:-.02em; display:flex; align-items:center; gap:10px}
.ben p{font-size:14px; color:var(--muted); line-height:1.55}
.ben-n{font-family:var(--mono); font-size:11px; color:var(--faint)}

.aud{display:flex; flex-wrap:wrap; gap:9px}
.aud span{font-size:14px; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 16px; transition:border-color .2s, color .2s, transform .2s}
.aud span:hover{border-color:var(--brand-edge); color:var(--brand); transform:translateY(-1px)}

.faq{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:20px 0; display:flex; align-items:center; gap:16px; font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand)}
.faq-plus{margin-left:auto; flex:none; color:var(--faint); transition:transform .25s ease, color .2s}
.faq details[open] .faq-plus{transform:rotate(45deg); color:var(--brand)}
.faq-a{padding:0 44px 22px 0; font-size:14.5px; color:var(--muted); line-height:1.68; max-width:76ch}

.cta-band{border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:52px 48px; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; box-shadow:var(--shadow-md); position:relative; overflow:hidden}
.cta-band h2{font-size:clamp(28px,3.4vw,40px)}
.cta-grid{position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size:44px 44px; -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%); mask:radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%)}
.cta-inner{position:relative; display:flex; flex-direction:column; align-items:center; gap:22px}

.foot{border-top:1px solid var(--line); padding:56px 0 40px; background:var(--surface-2)}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)); gap:36px}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,1fr); gap:32px}}
.foot-col{display:flex; flex-direction:column; gap:11px}
.foot-col .ttl{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.foot-col a{font-size:14px; color:var(--muted)}
.foot-col a:hover{color:var(--ink)}
.foot-bio{font-size:13.5px; color:var(--muted); line-height:1.6; max-width:34ch}
.foot-bot{margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--faint)}
.foot-bot .mono-label{margin-left:auto}

.prose{max-width:70ch; display:flex; flex-direction:column; gap:16px}
.prose h2{font-size:22px; margin-top:14px}
.prose p, .prose li{font-size:15px; color:var(--muted); line-height:1.7}
.prose ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px}
.prose strong{color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

/* ══════════════════════════════════════════════════════════════════
   Colour layer
   The anchor stays EU institutional blue; violet and teal are added as
   supporting hues so sections read as a system rather than a monochrome.
   Semantic colours (pass / warn / fail) remain reserved for status and are
   never used decoratively — a green chip always means a check passed.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --violet:#5B34C4; --violet-wash:#F2EEFE; --violet-edge:#D8CBFA;
  --teal:#0B7C8C; --teal-wash:#E6F5F7; --teal-edge:#B7E0E6;
  --amber:#B8600A; --amber-wash:#FDF1E4; --amber-edge:#F2D2AE;
  --tint-a:rgba(0,51,153,.05);
  --tint-b:rgba(91,52,196,.055);
  --tint-c:rgba(11,124,140,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --violet:#A78BFA; --violet-wash:#1B1436; --violet-edge:#372A63;
    --teal:#4FD1C5; --teal-wash:#08262A; --teal-edge:#134A50;
    --amber:#E9A24B; --amber-wash:#241A0A; --amber-edge:#4A3517;
    --tint-a:rgba(112,150,255,.07); --tint-b:rgba(167,139,250,.07); --tint-c:rgba(79,209,197,.06);
  }
}
:root[data-theme="dark"]{
  --violet:#A78BFA; --violet-wash:#1B1436; --violet-edge:#372A63;
  --teal:#4FD1C5; --teal-wash:#08262A; --teal-edge:#134A50;
  --amber:#E9A24B; --amber-wash:#241A0A; --amber-edge:#4A3517;
  --tint-a:rgba(112,150,255,.07); --tint-b:rgba(167,139,250,.07); --tint-c:rgba(79,209,197,.06);
}

.chip-violet{color:var(--violet); background:var(--violet-wash); border-color:var(--violet-edge)}
.chip-teal{color:var(--teal); background:var(--teal-wash); border-color:var(--teal-edge)}
.btn-violet{background:var(--violet); color:#fff; box-shadow:var(--shadow-sm)}
.btn-violet:hover{background:var(--violet); filter:brightness(1.12); transform:translateY(-1px); box-shadow:var(--shadow-md)}
:root[data-theme="dark"] .btn-violet{color:#120B26}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-violet{color:#120B26}}

/* Ambient hero wash — three hues, kept low-saturation so type stays first. */
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:150%;
  background:
    radial-gradient(52% 40% at 12% 8%, var(--tint-a), transparent 68%),
    radial-gradient(46% 38% at 88% 4%, var(--tint-b), transparent 66%),
    radial-gradient(40% 34% at 62% 62%, var(--tint-c), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero > .wrap{position:relative; z-index:1}
.hero h1 em{
  background:linear-gradient(96deg, var(--brand) 0%, var(--violet) 62%, var(--teal) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Alternating section grounds so the page has rhythm rather than one flat field. */
.sec:nth-of-type(even){background:linear-gradient(180deg, transparent, var(--tint-a) 45%, transparent)}
.sec:nth-of-type(4n+3){background:linear-gradient(180deg, transparent, var(--tint-b) 45%, transparent)}

/* Rotate the accent across the analysis cards so the grid is not one colour. */
.cards .card:nth-child(4n+2) .card-ico{background:var(--violet-wash); border-color:var(--violet-edge); color:var(--violet)}
.cards .card:nth-child(4n+3) .card-ico{background:var(--teal-wash); border-color:var(--teal-edge); color:var(--teal)}
.cards .card:nth-child(4n+4) .card-ico{background:var(--amber-wash); border-color:var(--amber-edge); color:var(--amber)}
.cards .card:nth-child(4n+2):hover{border-color:var(--violet-edge)}
.cards .card:nth-child(4n+3):hover{border-color:var(--teal-edge)}
.cards .card:nth-child(4n+4):hover{border-color:var(--amber-edge)}

/* Coloured top rule on the regulation cards, cycling through the palette. */
.reg-card{position:relative; overflow:hidden}
.reg-card::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--brand); opacity:.75}
.reg-card:nth-child(3n+2)::before{background:var(--violet)}
.reg-card:nth-child(3n+3)::before{background:var(--teal)}

.tl-n{background:linear-gradient(150deg, var(--brand-wash), var(--violet-wash)); border-color:var(--brand-edge)}
.step:nth-child(2) .step-n{color:var(--violet)}
.step:nth-child(3) .step-n{color:var(--teal)}
.step:nth-child(4) .step-n{color:var(--amber)}
.ben:nth-child(3n+2) .ben-n{color:var(--violet)}
.ben:nth-child(3n+3) .ben-n{color:var(--teal)}
.tier-hi{background:linear-gradient(170deg, var(--brand-wash) 0%, var(--surface) 42%)}
.cta-band{background:linear-gradient(150deg, var(--brand-wash) 0%, var(--surface) 40%, var(--violet-wash) 100%)}
.eng-out{background:linear-gradient(120deg, var(--brand-wash), var(--violet-wash))}

/* ─────────────────────────── purchase options ─────────────────────────── */
.buy-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; width:100%}
.buy-card{
  display:flex; flex-direction:column; gap:9px; padding:18px 16px; margin:0; position:relative;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.buy-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.buy-card-hi{border-color:var(--brand); box-shadow:var(--shadow-md)}
.buy-card-shared{border-color:var(--violet-edge); background:linear-gradient(165deg, var(--violet-wash), var(--surface) 60%)}
.buy-card-shared.is-locked{opacity:.62}
.buy-flag{
  position:absolute; top:-9px; right:14px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; background:var(--brand); color:var(--on-brand);
  padding:3px 8px; border-radius:4px;
}
.buy-flag-violet{background:var(--violet); color:#fff}
.buy-name{font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:-.02em}
.buy-price{font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.04em; line-height:1}
.buy-list{margin:0; padding-left:16px; display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted); line-height:1.45}
.buy-card .btn{width:100%; margin-top:auto}

.share-offer{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; width:100%;
  border:1px solid var(--violet-edge); border-radius:var(--r); padding:16px 18px;
  background:linear-gradient(120deg, var(--violet-wash), transparent 70%);
}
.share-copy{display:flex; flex-direction:column; gap:6px; min-width:0; flex:1}
.share-copy strong{font-size:14.5px; letter-spacing:-.01em}
.share-copy span{font-size:13px; color:var(--muted); line-height:1.5}
.share-copy .chip{align-self:flex-start}
.share-actions{display:flex; gap:8px; flex-wrap:wrap}

.upsell-inline{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px dashed var(--violet-edge); background:var(--violet-wash);
  border-radius:var(--r-sm); padding:10px 12px; font-size:12.5px; color:var(--muted);
}

/* ══════════════════════════════════════════════════════════════════
   Results: summary first, detail underneath
   A compliance score is scanned, not read. The top of the page answers
   "am I in trouble, and how much" in one glance; the evidence that
   justifies it sits below, for whoever needs to act on it.
   ══════════════════════════════════════════════════════════════════ */
.verdict{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:32px; align-items:center;
  border:1px solid var(--line); border-radius:16px; padding:30px 32px; background:var(--surface);
  box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.verdict::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 90% at 0% 0%, var(--tint-a), transparent 70%);
}
.verdict > *{position:relative}
.verdict-copy{display:flex; flex-direction:column; gap:12px; min-width:0}
.verdict-line{font-family:var(--display); font-size:clamp(20px,2.4vw,27px); font-weight:600; letter-spacing:-.03em; line-height:1.2}
.verdict-sub{font-size:15px; color:var(--muted); line-height:1.6; max-width:62ch}
@media (max-width:700px){.verdict{grid-template-columns:1fr; gap:20px; padding:24px}}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.tile{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:15px 16px; display:flex; flex-direction:column; gap:5px;
}
.tile .n{font-family:var(--display); font-size:29px; font-weight:600; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.tile .l{font-size:12.5px; color:var(--muted); line-height:1.35}
.tile-pass .n{color:var(--pass)} .tile-warn .n{color:var(--warn)} .tile-fail .n{color:var(--fail)}

.reg-summary{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px}
.reg-tile{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:13px 15px; display:flex; flex-direction:column; gap:8px;
}
.reg-tile.is-na{opacity:.62}
.reg-tile .top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.reg-tile .name{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--ink)}
.reg-tile .val{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.reg-tile .bar{height:4px; border-radius:2px; background:var(--sunken); overflow:hidden}
.reg-tile .bar i{display:block; height:100%; border-radius:2px}
.reg-tile .note{font-size:11.5px; color:var(--faint); line-height:1.45}

.attention{display:flex; flex-direction:column; gap:10px}
.att-item{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:13px; align-items:start;
  border:1px solid var(--line); border-left:3px solid var(--faint); border-radius:var(--r-sm);
  background:var(--surface); padding:14px 16px;
}
.att-high{border-left-color:var(--fail)} .att-medium{border-left-color:var(--warn)} .att-low{border-left-color:var(--pass)}
.att-rank{font-family:var(--mono); font-size:12px; color:var(--faint); padding-top:2px}
.att-body{display:flex; flex-direction:column; gap:5px; min-width:0}
.att-title{font-size:15px; font-weight:600; letter-spacing:-.015em; line-height:1.35}
.att-why{font-size:13.5px; color:var(--muted); line-height:1.55}
.att-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:2px}

.detail-toggle{
  width:100%; display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2);
  padding:15px 18px; font-family:var(--display); font-size:16px; font-weight:600; letter-spacing:-.02em;
}
.detail-toggle::-webkit-details-marker{display:none}
.detail-toggle:hover{border-color:var(--brand-edge)}
.detail-toggle .hint{margin-left:auto; font-family:var(--body); font-size:13px; font-weight:400; color:var(--muted)}
details[open] > .detail-toggle{border-radius:var(--r) var(--r) 0 0; border-bottom-color:transparent}
.detail-body{border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r) var(--r); padding:18px; display:flex; flex-direction:column; gap:16px}
.sec-label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}

/* ══════════════════════════════════════════════════════════════════
   Responsive
   Written after measuring what actually breaks: long URLs and DNS
   records in the report, the scan button squeezed inside its input,
   and desktop section rhythm that wastes half a phone screen on
   whitespace. Breakpoints follow the content, not device names.
   ══════════════════════════════════════════════════════════════════ */

/* Nothing may push the page sideways. Media scales; long unbreakable
   tokens — URLs, SPF records, cookie names — wrap instead of forcing
   the whole document to scroll. */
img, svg, video, canvas, iframe{max-width:100%}
.kv .v, .att-why, .f-desc, .buy-list, .foot-bio, .prose p, .prose li{overflow-wrap:anywhere}
.f-ev, .f-copy{overflow-wrap:anywhere; white-space:pre-wrap}
table.tbl td{overflow-wrap:anywhere}
.verdict-copy, .att-body, .score-meta, .share-copy, .tile, .reg-tile{min-width:0}

@media (max-width:1024px){
  .sec{padding:76px 0}
  .head{margin-bottom:40px}
  .split{gap:40px}
}

@media (max-width:768px){
  .wrap, .wrap-narrow{padding:0 22px}
  .sec{padding:60px 0}
  .sec-tight{padding:48px 0}
  .head{margin-bottom:32px; gap:14px}
  .lede{font-size:16.5px}
  .hero{padding:40px 0 56px}
  .hero-sub{font-size:17px}
  .verdict{padding:22px; gap:18px}
  .dial-lg{width:132px; height:132px}
  .dial-lg .dial-num{font-size:33px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv-grid{grid-template-columns:1fr}
  .cta-band{padding:36px 22px}
  .rep{padding:26px 20px 60px; gap:26px}
  .rep-cover{padding:24px}
  .rep-title{font-size:26px}
  .faq-a{padding-right:0}
  .detail-toggle{flex-wrap:wrap; gap:6px; font-size:15px}
  .detail-toggle .hint{margin-left:0; flex-basis:100%}
}

@media (max-width:560px){
  .wrap, .wrap-narrow{padding:0 16px}
  .sec{padding:48px 0; }
  .h2{font-size:26px}

  /* The button inside the field leaves no room to type on a phone.
     Below this width it becomes a full-width action underneath. */
  .scan-field{flex-wrap:wrap; padding:12px; gap:8px; border-radius:12px}
  .scan-input{flex-basis:100%; height:44px; font-size:16px} /* 16px stops iOS zooming on focus */
  .scan-field .btn{width:100%}
  .scan-note{font-size:12.5px; gap:8px}
  .scan-note .scan-sep{display:none}
  .scan-note span{flex-basis:100%}

  .nav-in{height:56px; gap:12px}
  .nav-cta .btn-ghost{display:none}
  .logo{font-size:15px}

  .verdict{padding:18px; border-radius:12px}
  .verdict-line{font-size:20px}
  .verdict-sub{font-size:14px}
  .buy-grid{grid-template-columns:1fr}
  .share-offer{padding:14px}
  .share-actions{width:100%}
  .share-actions .btn{flex:1}

  .tier{padding:22px 18px}
  .tier-p .amt{font-size:32px}
  .bens{grid-template-columns:1fr}
  .ben, .ben:nth-child(3n+1){padding:20px 0}
  .foot-grid{grid-template-columns:1fr; gap:26px}
  .foot-bot{flex-direction:column; align-items:flex-start; gap:8px}
  .foot-bot .mono-label{margin-left:0}

  .tl-item{grid-template-columns:44px 1fr; gap:14px}
  .tl-n{width:44px; height:44px; font-size:13px}
  .tl-item::before{left:21px}

  .f-body, .rep-item-b{padding:12px 13px}
  .panel-b{padding:13px 12px}
  .att-item{padding:12px 13px; gap:10px}

  /* Touch targets stay comfortable even where the desktop size is compact. */
  .btn-sm{height:42px}
  .faq summary{padding:16px 0; font-size:16px}
}

@media (max-width:400px){
  .tiles{grid-template-columns:1fr}
  .verdict{grid-template-columns:1fr}
  .dial-lg{width:112px; height:112px}
  .dial-lg .dial-num{font-size:28px}
  .trustbar{gap:12px}
  .rep-item-h{gap:6px}
}

/* Landscape phones: vertical space is the scarce dimension, not width. */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:28px 0 36px}
  .sec{padding:44px 0}
}

/* The hero demo panel carried its height in a style attribute, which no media
   query can override — 352px of mostly empty box above the fold on a phone. */
.app-body-hero{min-height:352px}
@media (max-width:768px){
  .app-body-hero{min-height:280px}
  .pipe-log{height:84px}
}
@media (max-width:560px){
  .app-body-hero{min-height:0}
  .pipe-log{height:72px; font-size:10.5px}
  .app-bar{padding:9px 11px}
  .app-url{font-size:10.5px}
  .reg-row{padding:8px 10px; font-size:12.5px}
  .reg-row .nm{font-size:11px}
  .chip{font-size:10px; padding:2px 7px}
}

/* ══════════════════════════════════════════════════════════════════
   Scanning overlay
   On a phone the progress panel sat below the fold, so pressing Scan
   looked like nothing had happened. While a scan runs it takes over
   the screen: the analysis is the only thing worth looking at, and
   watching it work is what makes the depth of it believable.
   ══════════════════════════════════════════════════════════════════ */
.scan-overlay{
  position:fixed; inset:0; z-index:200; display:none;
  background:color-mix(in srgb, var(--ground) 96%, transparent);
  backdrop-filter:blur(8px);
  padding:24px; overflow-y:auto;
  align-items:center; justify-content:center;
}
.scan-overlay.on{display:flex}
body.scanning{overflow:hidden}
.scan-modal{
  width:100%; max-width:520px; display:flex; flex-direction:column; gap:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:26px; box-shadow:var(--shadow-lg);
}
.scan-modal-head{display:flex; flex-direction:column; gap:8px}
.scan-modal-head .target{
  font-family:var(--mono); font-size:13px; color:var(--brand);
  background:var(--brand-wash); border:1px solid var(--brand-edge); border-radius:6px;
  padding:7px 10px; overflow-wrap:anywhere;
}
.scan-modal h2{font-size:20px; letter-spacing:-.03em}
.scan-modal .sub{font-size:13.5px; color:var(--muted); line-height:1.5}
.scan-progress{height:4px; border-radius:2px; background:var(--sunken); overflow:hidden}
.scan-progress i{display:block; height:100%; width:0; border-radius:2px; background:linear-gradient(90deg, var(--brand), var(--violet)); transition:width .5s ease}
.scan-count{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.scan-cancel{align-self:flex-start; background:none; border:0; color:var(--muted); font-size:13px; cursor:pointer; text-decoration:underline; padding:0}
@media (max-width:560px){
  .scan-overlay{padding:0; align-items:stretch}
  .scan-modal{max-width:none; border:0; border-radius:0; padding:22px 18px; min-height:100%; justify-content:center; box-shadow:none}
  .scan-modal h2{font-size:18px}
}