@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#f5f5f7;--ink:#111;--ink-2:#333;--muted:#666;--line:#ddd}
  body{background:#fff;color:#111;font-size:11pt}
  body::before,header,footer,.res-edit,.nav,#paywall,.altlink,.btn{display:none!important}
  #scr-res{display:block!important;max-width:none;padding:0}
  .score-card,.kpi,.bottleneck,.chart,.f,.card{background:#fff;box-shadow:none;border:1px solid #d9d9df;break-inside:avoid;color:#111}
  .res-top{grid-template-columns:32% 1fr}
  .score-card{min-height:0}
  .score-card::after,.gauge .val b,.f-t,h2,h3{color:#111}
  .f.locked .f-t{filter:none;opacity:1}
  #findList .f{display:block}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* =====================================================================
   CORREZIONI DI LEGGIBILITÀ
   Il magenta pieno #b500b5 su fondo scuro dà un contrasto di 1,6:1 —
   sotto qualsiasi soglia leggibile. Come TESTO su scuro va usata la
   variante chiara (--acc-soft); il magenta pieno resta perfetto come
   FONDO con testo bianco sopra, ed è lì che continua a lavorare.
   ===================================================================== */
.kick b,
.logo .sub,
.logo .mark,
.pot b,
.cb-ic,
.pw-list .ck,
.cert .big,
.rl.done .rl-n,
.fgroup-n,
.fgroup-help .linkbtn,
.fgroup-help .linkbtn:hover,
.prog-l span:first-child,
.chip.on.alt,
.sec-t b,
.tag.imp b{color:var(--acc-soft)}
footer{color:#8b90a3}
/* ---------- il binario dei passi, versione definitiva ----------
   Scritto con l'id e non con la classe perché più in alto c'era una
   regola che dava a ogni passo la stessa larghezza (`flex:1`): con i nomi
   nascosti diventavano cinque riquadri vuoti. Qui il nome per esteso
   resta solo sul passo dove sei; gli altri sono pallini numerati, e ci
   stanno comodi anche in colonna stretta.                              */
#rail{justify-content:flex-start;gap:7px;overflow-x:auto;margin-bottom:18px}
#rail .rl{flex:none;min-width:0;padding:8px 12px;border-radius:999px}
#rail .rl .rl-t{display:none}
#rail .rl.now .rl-t{display:inline;padding-right:2px}
#rail .rl.done{cursor:pointer}
#rail .rl:not(.now):not(.done){opacity:.55}
@media(max-width:760px){
  #rail{gap:5px;margin-left:-2px}
  #rail .rl{padding:7px 10px}
  /* la barra dei pulsanti è appiccicata in basso: senza questo spazio
     coprirebbe l'ultimo campo del passo, e su un modulo è il difetto
     peggiore che ci sia — non vedi quello che stai rispondendo */
  #steps{padding-bottom:96px}
}

/* ---------- TESTATA DEL PASSO ----------
   Prima era un titolone nudo appoggiato sulla pagina. Adesso è un blocco:
   pastiglia col numero del passo, sopratitolo che dice dove sei, titolo,
   e una riga sottile che chiude. Vale per tutti i passi del wizard.     */
.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#scr-wizard .prog{margin-bottom:22px}
.step-h{display:flex;align-items:flex-start;gap:14px;margin-bottom:10px}
.step-badge{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  font-size:16px;font-weight:800;color:#fff;background:var(--brand-gradient);
  box-shadow:0 8px 22px -10px rgba(181,0,181,.9),0 1px 0 rgba(255,255,255,.35) inset;
  margin-top:3px}
.step-hx{min-width:0}
.step-kick{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc-soft);margin-bottom:5px}
.step .step-h h2{margin:0;font-size:31px;line-height:1.12}
.step .sd{margin-left:54px;padding-bottom:20px;margin-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.07)}

/* ---------- LE DUE VIE D'USCITA SOTTO UN CAMPO ----------
   "Sfoglia l'elenco completo" e "Non lo so" erano due scritte sottolineate
   buttate lì. Sono scelte vere, quindi ora hanno la forma di scelte:
   due pastiglie con l'icona, che si sollevano quando ci passi sopra.    */
.cb-alt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.cb-sep{display:none}
.cb-alt .linkbtn{display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;text-decoration:none;font-size:12.5px;font-weight:600;
  color:var(--ink-2);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.11);
  transition:.16s var(--ease)}
.cb-alt .linkbtn:hover{color:var(--ink);background:rgba(181,0,181,.12);
  border-color:rgba(233,76,233,.5);transform:translateY(-1px);text-decoration:none}
.cb-alt .linkbtn:active{transform:translateY(0)}
.cb-alt .linkbtn::before{font-size:13px;line-height:1;opacity:.85}
.cb-alt [data-list]::before{content:"☰"}
.cb-alt [data-tier]::before{content:"◍"}
.cb-alt [data-skip]::before{content:"?";font-weight:800}

/* ---------- scelta del percorso dopo l'accesso ---------- */
.path-choice{padding-top:54px;padding-bottom:66px}
.path-intro{text-align:center;max-width:830px;margin:0 auto 34px}
.path-intro h1{font-size:clamp(42px,6vw,74px);line-height:.98;margin:16px 0 20px}
.path-intro .lead{max-width:780px;margin-left:auto;margin-right:auto}
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.path-card{position:relative;display:flex;flex-direction:column;padding:25px;border-radius:18px;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 55px rgba(0,0,0,.18)}
.path-card.path-best{border-color:rgba(233,76,233,.58);box-shadow:0 24px 70px rgba(125,0,180,.2)}
.path-card h2{font-size:29px;margin:11px 0 9px}
.path-card p{color:var(--ink-2);font-size:13.5px;line-height:1.62;margin:0 0 16px}
.path-card ul{color:var(--muted);font-size:12.5px;line-height:1.55;margin:0 0 20px;padding-left:18px}
.path-card li{margin:5px 0}
.path-badge{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--acc-soft)}
.path-ribbon{position:absolute;right:16px;top:15px;padding:5px 9px;border-radius:999px;
  color:#fff;background:var(--brand-gradient);font-size:9px;font-weight:800;letter-spacing:.1em}
.path-meta{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding:14px 0;
  border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:var(--muted)}
.path-meta b{color:var(--ink)}
.path-card .btn{width:100%;text-align:center;justify-content:center}
.path-trust{text-align:center;color:var(--muted);font-size:12px;margin:22px auto 0;max-width:850px}
.path-after{margin:20px auto 0;max-width:760px;padding:15px 17px;border-radius:12px;
  color:var(--ink-2);background:rgba(57,207,112,.08);border:1px solid rgba(57,207,112,.3);line-height:1.55}

@media(max-width:760px){
  .step-badge{width:34px;height:34px;border-radius:11px;font-size:14px}
  .step-h{gap:11px}
  .step .step-h h2{font-size:24px}
  .step .sd{margin-left:0;padding-bottom:16px;margin-bottom:20px}
  .cb-alt .linkbtn{padding:9px 13px}
  .path-choice{padding-top:30px}
  .path-grid{grid-template-columns:minmax(0,1fr);width:100%}
  .path-card{min-width:0;overflow:hidden;padding:21px}
  .path-card .btn{padding-left:12px;padding-right:12px;font-size:14px}
  .path-meta span{text-align:right}
}
/* Keep the transparent wordmark aligned at every viewport. */
.hd{gap:16px;min-width:0}
.logo{min-width:0;gap:12px;flex:0 1 auto}
.logo img{display:block;width:clamp(164px,18vw,218px);max-width:100%;height:auto;max-height:80px;flex:0 1 auto;object-fit:contain}
.logo .sub{flex:0 0 auto;white-space:nowrap}
.hd-r{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;min-width:0}
@media(max-width:600px){
  .hd{height:auto;min-height:76px;gap:10px;flex-wrap:wrap;padding-block:12px}
  .logo{gap:8px;max-width:100%}
  .logo img{width:164px;max-height:62px}
  .logo .sub{padding-left:8px;font-size:11px;letter-spacing:.08em}
  .hd-r{margin-left:auto;font-size:11px}
  .hd-r .pill{padding:6px 10px}
}