/* guida.css — veste dei due documenti della guida TRADER.SCAN (10-08-2026).
   Chiara e divulgativa, più calda (scelta dell'utente), ma con la disciplina di un documento che
   deve reggere anche davanti a chi cerca un appiglio legale: niente colore decorativo, gerarchia
   costruita sul peso del testo e su tre soli accenti.
   Un foglio di stile per due documenti: se una regola cambia, cambia in entrambi. */
:root{
  --ink:#1a1714;--txt:#332e28;--dim:#6b6459;--faint:#97907f;--line:#e2dcd0;--hair:#efeae0;
  --paper:#fffdf9;--soft:#faf6ef;--amber:#b8791a;--amber-s:#fdf6e7;--green:#1f7a52;--green-s:#f0f7f2;
  --red:#a8322f;--red-s:#fcf1ef;
  --sans:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'SFMono-Regular',Consolas,'Courier New',monospace;
  --serif:Georgia,'Times New Roman',serif;
}
body{margin:0;background:#3a3733;color:var(--txt);font-family:var(--sans)}
doc-page{--doc-bg:var(--paper)}

/* barra della lingua: solo a schermo, mai stampata */
.langbar{position:sticky;top:0;z-index:9;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 18px;background:#221f1c;border-bottom:1px solid #3a3733}
.lb{font:700 10.5px var(--mono);letter-spacing:.14em;padding:8px 13px;background:transparent;color:#a7a096;border:1px solid #4a453f;cursor:pointer}
.lb.on{background:var(--amber);border-color:var(--amber);color:#1a1714}
.lbnote{font:11px var(--sans);color:#7d766c;margin-left:6px}
@media print{.langbar{display:none}}

/* intestazione e piede ripetuti su ogni pagina stampata */
.rh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.rh-b{font:700 10px var(--mono);letter-spacing:.2em;color:var(--ink)}
.rh-b b{color:var(--amber)}
.rh-t{font:9.5px var(--mono);letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.rf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:8px;border-top:1px solid var(--line);font:8.5px var(--sans);color:var(--faint)}
.rf2{font-family:var(--mono);letter-spacing:.08em}

.kick{font:700 9.5px var(--mono);letter-spacing:.2em;color:var(--amber);text-transform:uppercase;margin:0 0 10px}
h1{font:600 30px/1.18 var(--serif);color:var(--ink);margin:0 0 12px;letter-spacing:-.01em}
.lead{font:14.5px/1.72 var(--sans);color:var(--txt);margin:0 0 22px;max-width:62ch}
.lead b{color:var(--ink)}
h2.sec{font:600 17px/1.3 var(--serif);color:var(--ink);margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--hair)}
h3.sub{font:700 10.5px var(--mono);letter-spacing:.14em;color:var(--amber);text-transform:uppercase;margin:18px 0 8px}
p{font:13px/1.68 var(--sans);margin:0 0 11px;orphans:3;widows:3}
p.fine{font-size:10.5px;line-height:1.6;color:var(--dim)}
p.qa{margin-bottom:9px}
p.qa b{color:var(--ink)}
.ph{color:var(--amber);font-family:var(--mono);font-size:11.5px}

/* le due colonne «cosa fa / cosa non fa»: CSS columns no — sono due blocchi affiancati che
   NON devono spezzarsi, quindi tabella-less flex con break-inside evitato. */
.two{display:flex;gap:14px;margin:0 0 18px;break-inside:avoid}
.box{flex:1 1 0;padding:15px 16px 16px;border:1px solid var(--line);break-inside:avoid}
.box.does{background:var(--green-s);border-color:#cfe3d6}
.box.nots{background:var(--red-s);border-color:#eed3d0}
.bt{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px}
.does .bt{color:var(--green)}
.nots .bt{color:var(--red)}
.box ul{margin:0;padding-left:15px}
.box li{font:11.5px/1.58 var(--sans);margin-bottom:7px;orphans:3;widows:3}
.box li b{color:var(--ink)}
ul.no{list-style:none;padding-left:0}
ul.no li{padding-left:15px;position:relative}
ul.no li::before{content:"\2715";position:absolute;left:0;top:1px;font:9px var(--mono);color:var(--red)}

.warn{border:1px solid #e6cfa0;background:var(--amber-s);padding:15px 16px;margin:0 0 20px;break-inside:avoid}
.wt{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0 0 8px}
.warn p{font-size:12px;line-height:1.66;margin:0}
.warn b{color:#7a4d05}

ul.tick,ul.rule{list-style:none;padding-left:0;margin:0 0 12px}
ul.tick li,ul.rule li{font:12.5px/1.62 var(--sans);padding-left:18px;position:relative;margin-bottom:9px;orphans:3;widows:3;break-inside:avoid}
ul.tick li::before{content:"\2713";position:absolute;left:0;top:0;font:11px var(--mono);color:var(--green)}
ul.rule li::before{content:"\00A7";position:absolute;left:0;top:0;font:12px var(--serif);color:var(--amber)}
ul.tick li b,ul.rule li b{color:var(--ink)}

/* il percorso per profilo (documento del cliente) */
.path{margin:0 0 18px}
.step{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--hair);break-inside:avoid}
.step:last-child{border-bottom:1px solid var(--hair)}
.step-n{flex:0 0 62px;font:700 9.5px var(--mono);letter-spacing:.12em;color:var(--amber);text-transform:uppercase;padding-top:2px}
.step-b{flex:1 1 auto}
.step-b h4{font:700 13px var(--sans);color:var(--ink);margin:0 0 5px}
.step-b p{font-size:12.5px;margin:0 0 6px}
.step-b ul{margin:4px 0 0;padding-left:16px}
.step-b li{font:12px/1.55 var(--sans);margin-bottom:4px}

.note{border-left:3px solid var(--amber);background:var(--soft);padding:12px 15px;margin:0 0 16px;break-inside:avoid}
.note p{font-size:12px;margin:0}
.note p+p{margin-top:7px}

table.t{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:12px}
table.t th{text-align:left;font:700 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-bottom:1.5px solid var(--line);padding:0 8px 7px 0}
table.t td{padding:8px 8px 8px 0;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.55}
table.t td b{color:var(--ink)}

.sign{margin-top:26px;padding-top:14px;border-top:2px solid var(--ink);break-inside:avoid}
.sg{font:700 11px var(--mono);letter-spacing:.18em;color:var(--ink)}
.sign p{font-size:11.5px;line-height:1.7}
.soon{font:13px/1.7 var(--sans);color:var(--dim);padding:40px 0}
a{color:var(--amber)}
a:hover{color:#8d5c11}
@media print{.L[hidden]{display:none!important}}

/* chiusa del documento: l'avvertenza legale resta, il blocco con i dati societari è stato
   togliere su richiesta dell'utente (10-08-2026) — meglio nessun dato che dati finti. */
.end{margin-top:24px;padding-top:12px;border-top:1px solid var(--ink);break-inside:avoid}

/* LE QUATTRO FAMIGLIE DEI SEGNALI (10-08-2026). Segnalato dall'utente: «migliora tutta questa
   sezione e anche le scritte, tutto uguale il font» — e aveva ragione due volte. La lista dei
   dodici nomi usava una classe (.names) che NON esisteva nel foglio di stile: il browser la
   disegnava coi suoi valori predefiniti, cioè in un carattere diverso da tutto il resto del
   documento. REGOLA: una classe scritta nell'HTML e mai definita nel CSS non dà errore, dà un
   pezzo di pagina che sembra di un altro documento. Ora i nomi sono in quattro colonne, numerati
   con lo stesso monospaziato delle altre etichette. */
.fam{display:flex;gap:12px;margin:0 0 16px;break-inside:avoid}
.fam-c{flex:1 1 0;padding:12px 13px 13px;background:var(--soft);border:1px solid var(--line);break-inside:avoid}
.fam-h{font:700 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--line);min-height:22px}
ol.nm{margin:0;padding-left:0;list-style:none;counter-reset:none}
ol.nm li{font:11.5px/1.42 var(--sans);color:var(--ink);margin-bottom:8px;padding-left:20px;position:relative}
ol.nm li::before{content:counter(nmi,decimal-leading-zero);counter-increment:nmi;position:absolute;left:0;top:1px;font:700 9px var(--mono);color:var(--faint)}
.fam{counter-reset:nmi}

/* IL LOGO (10-08-2026, difetto trovato in verifica: le guide non avevano nessuna immagine e
   l'intestazione usava un marchio scritto a mano in monospaziato — lo stesso punto su cui
   l'utente è tornato tre volte per le mail). Vettoriale (logo_main.svg): in un PDF che il cliente
   conserva e ristampa, un PNG a 210 px diventa sfocato alla prima stampa su carta. */
.dl{display:block;width:210px;height:auto;margin:0 0 20px}
@media screen{.rh,.rf{display:none}}
.rh-logo{display:block;width:118px;height:auto}
@media print{.dl{width:190px}}