/* Studio AI - interfaccia da leggere come un foglio di carta.
   Fondo chiaro, testo grande, una sola azione per riga. */
:root{
  --carta:#faf9f7; --bianco:#ffffff; --inchiostro:#1c1c1a; --grigio:#585751;
  --linea:#e4e2dd; --rosso:#c8281c; --rosso-chiaro:#fdeceb; --rosso-scuro:#a81f15;
  --verde:#2f6b3c; --verde-chiaro:#eef4ee; --giallo:#8a6300; --giallo-chiaro:#fdf3e0;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('/static/font/source-serif.woff2') format('woff2');
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  color-scheme:light;
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;
  background:var(--carta);color:var(--inchiostro);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ---------- struttura ---------- */
.app{max-width:900px;margin:0 auto;padding:0 20px 80px}
.testata{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--linea);margin-bottom:34px;flex-wrap:wrap}
.logo{font-family:'Source Serif 4',Georgia,serif;font-size:20px;font-weight:700;letter-spacing:-.2px;text-decoration:none}
.logo span{color:var(--rosso)}
.menu{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.menu a{padding:8px 14px;border-radius:8px;text-decoration:none;color:var(--grigio);font-size:16px}
.menu a:hover{background:#efede8;color:var(--inchiostro)}
.menu a.on{background:var(--inchiostro);color:#fff;font-weight:600}
.menu select{font:inherit;font-size:15px;padding:8px 12px;border:1px solid var(--linea);
  border-radius:8px;background:var(--bianco);color:var(--inchiostro);max-width:230px}

h1{font-family:'Source Serif 4',Georgia,serif;font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
h2{font-family:'Source Serif 4',Georgia,serif;font-size:21px;font-weight:700;margin-bottom:14px}
h3{font-size:17px;font-weight:700;margin:20px 0 8px}
.sottotitolo{color:var(--grigio);font-size:17px;margin-bottom:30px}
.piccolo{font-size:15px;color:var(--grigio)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:14px}

/* ---------- la lista delle cose da fare ---------- */
.cosa{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;
  padding:22px 24px;margin-bottom:12px;display:flex;gap:20px;align-items:center;justify-content:space-between}
.cosa .testo{flex:1;min-width:0}
.cosa .chi{font-size:15px;color:var(--grigio);margin-bottom:2px}
.cosa .titolo{font-size:19px;font-weight:700;line-height:1.35;margin-bottom:4px}
.cosa .dettaglio{font-size:15.5px;color:var(--grigio)}
.cosa.urgente{border-left:4px solid var(--rosso)}
@media(max-width:640px){.cosa{flex-direction:column;align-items:stretch;gap:14px}
  .cosa .btn-pieno{width:100%;text-align:center}}

.finito{background:var(--verde-chiaro);border:1px solid #cfe0d2;border-radius:12px;
  padding:30px;text-align:center;font-size:19px;color:var(--verde);font-weight:600}

/* ---------- bottoni ---------- */
.btn-pieno,.btn-linea{font:inherit;font-size:16px;font-weight:600;padding:12px 22px;border-radius:8px;
  cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-block;white-space:nowrap}
.btn-pieno{background:var(--inchiostro);color:#fff}
.btn-pieno:hover{background:#3a3a36}
.btn-pieno:active{transform:scale(.985)}
.btn-linea{background:var(--bianco);border-color:var(--linea);color:var(--inchiostro)}
.btn-linea:hover{background:#f1efea}
.btn-piccolo{font-size:14.5px;padding:8px 14px}
.link{color:var(--rosso);text-decoration:none;font-weight:600}

/* ---------- riquadri e tabelle ---------- */
.pannello{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:24px;margin-bottom:18px}
table{width:100%;border-collapse:collapse}
table.righe th{text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--grigio);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--linea)}
table td{padding:14px 10px;border-bottom:1px solid var(--linea);vertical-align:middle;font-size:16px}
tr:last-child td{border-bottom:none}
.numero{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data{font-variant-numeric:tabular-nums;color:var(--grigio);white-space:nowrap}
.azioni-cella{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.tag{display:inline-block;padding:4px 11px;border-radius:999px;font-size:13.5px;font-weight:600;
  background:#f0eee9;color:var(--grigio);white-space:nowrap}
.tag.da_inviare,.tag.mancante,.tag.da_verificare,.tag.fattura_mancante,.tag.da_rispondere,.tag.nuova,
.tag.aperta,.tag.foto,.tag.scansione,.tag.foglio_rifatto{background:var(--rosso-chiaro);color:var(--rosso)}
.tag.inviato,.tag.originale_richiesto,.tag.fattura_richiesta,.tag.standby,.tag.attesa_cliente,
.tag.email_pronta,.tag.avvisato{background:var(--giallo-chiaro);color:var(--giallo)}
.tag.confermato,.tag.ricevuto,.tag.originale_ok,.tag.originale,.tag.inviata_sdi,.tag.risposto,
.tag.inviata,.tag.chiusa{background:var(--verde-chiaro);color:var(--verde)}

/* ---------- posta e normativa ---------- */
.posta,.norma{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:22px;margin-bottom:14px}
.posta.risposto,.norma.inviata,.norma.archiviata{opacity:.8}
.posta-testa{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:8px}
.posta-testa .piccolo{display:block}
.sintesi{color:var(--grigio);font-size:16px}
.bozza{background:var(--carta);border:1px solid var(--linea);border-left:3px solid var(--inchiostro);
  border-radius:0 10px 10px 0;padding:16px 18px;margin:14px 0}
.bozza .etichetta{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--grigio);font-weight:700}
.bozza p{margin-top:8px;font-size:16px;white-space:pre-line;line-height:1.65}
.grande-bozza{max-width:68ch}
.azioni{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.barra-stato{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:13px 16px;
  font-size:15px;color:var(--grigio);margin-bottom:20px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}
.grande-numero{font-size:34px;font-weight:800;margin:6px 0 8px}
.elenco{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15.5px;color:var(--grigio)}
.elenco b{color:var(--inchiostro);text-transform:capitalize;margin-right:6px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin-bottom:22px}
.scheda{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:18px;text-decoration:none;display:block}
.scheda b{display:block;font-size:19px;font-weight:700;line-height:1.25;hyphens:auto;margin-bottom:2px}
.scheda span{font-size:14.5px;color:var(--grigio)}
.due-colonne{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.due-colonne{grid-template-columns:1fr}}

/* ---------- moduli ---------- */
.form{display:flex;flex-direction:column;gap:16px;max-width:520px}
.form.griglia{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:100%}
.form.griglia button{grid-column:1/-1;justify-self:start}
label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--grigio)}
input,select,textarea{font:inherit;font-size:17px;padding:13px 15px;border-radius:8px;
  border:1px solid var(--linea);background:var(--bianco);color:var(--inchiostro)}
input:focus,select:focus{outline:2px solid var(--inchiostro);outline-offset:-2px;border-color:transparent}

.messaggio{background:var(--verde-chiaro);border:1px solid #cfe0d2;color:var(--verde);
  padding:14px 18px;border-radius:12px;margin-bottom:20px;font-size:16px}
.messaggio.errore{background:var(--rosso-chiaro);border-color:#f3c9c6;color:var(--rosso)}
.avviso-demo{background:var(--giallo-chiaro);border:1px solid #f0dfb8;color:var(--giallo);
  padding:12px 18px;border-radius:12px;margin-bottom:20px;font-size:15px}

/* ---------- accesso ---------- */
.accesso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.riquadro{background:var(--bianco);border:1px solid var(--linea);border-radius:16px;padding:38px;
  width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px}
.claim{color:var(--grigio);font-size:17px;margin-bottom:4px}
.separatore{text-align:center;color:var(--grigio);font-size:14px;position:relative;margin:8px 0}
.separatore::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--linea)}
.separatore span{background:var(--bianco);padding:0 12px;position:relative}
.registrazione summary{cursor:pointer;font-size:15px;color:var(--grigio);padding:8px 0}
.grande{padding:16px 26px;font-size:18px;width:100%;text-align:center}

/* ---------- aiuto ---------- */
.bolla-aiuto{position:fixed;right:20px;bottom:20px;z-index:40;background:var(--inchiostro);color:#fff;
  border:none;border-radius:999px;padding:14px 24px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  box-shadow:0 2px 14px rgba(0,0,0,.12)}
.pannello-aiuto{position:fixed;right:20px;bottom:82px;width:min(400px,calc(100vw - 40px));background:var(--bianco);
  border:1px solid var(--linea);border-radius:16px;padding:18px;display:none;flex-direction:column;gap:12px;z-index:41;
  box-shadow:0 8px 40px rgba(0,0,0,.10)}
.pannello-aiuto.aperto{display:flex}
.aiuto-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.chiudi{background:none;border:none;color:var(--grigio);font-size:24px;cursor:pointer;line-height:1;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.aiuto-conversazione{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow:auto}
.messaggio-aiuto{padding:12px 14px;border-radius:12px;font-size:15.5px;line-height:1.55;white-space:pre-line}
.messaggio-aiuto.tool{background:var(--carta);border:1px solid var(--linea)}
.messaggio-aiuto.mio{background:var(--inchiostro);color:#fff;align-self:flex-end;max-width:85%}
.giudizio{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:14px;color:var(--grigio)}
.giudizio button{font:inherit;font-size:14px;background:var(--bianco);border:1px solid var(--linea);
  color:var(--inchiostro);border-radius:8px;padding:9px 14px;min-height:40px;cursor:pointer}
.aiuto-form{display:flex;gap:8px}
.aiuto-form input{flex:1;font-size:16px;padding:11px 13px}
.recap{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:18px;
  font-family:ui-monospace,Menlo,monospace;font-size:14px;line-height:1.7;white-space:pre-wrap;overflow-x:auto;margin-bottom:14px}

/* ---------- primo avvio ---------- */
.avvio{max-width:640px;margin:20px auto}
.avvio h1{font-size:30px}
.passi{font-size:14px;color:var(--grigio);font-weight:600;margin-bottom:12px}
.grande-testo{font-size:17.5px}
.avvio-form{max-width:100%;gap:18px;margin-top:26px}
.avvio-form input,.avvio-form select{font-size:18px;padding:15px 16px}
.scelta{flex-direction:row;align-items:flex-start;gap:14px;background:var(--bianco);border:1px solid var(--linea);
  border-radius:12px;padding:18px 20px;cursor:pointer}
.scelta:hover{border-color:var(--inchiostro)}
.scelta input{width:22px;height:22px;margin-top:2px;accent-color:var(--inchiostro);flex:none}
.scelta span{display:flex;flex-direction:column;gap:5px;color:var(--inchiostro);font-size:17px}
.scelta .piccolo{font-size:15px}

/* ---- gruppi della schermata Oggi ---- */
.gruppo{margin-bottom:38px}
.gruppo-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--inchiostro);flex-wrap:wrap}
.gruppo-testa h2{margin-bottom:2px}
.gruppo .cosa{margin-bottom:8px;padding:18px 22px}
.gruppo .cosa .titolo{font-size:18px}

@media(max-width:640px){
  .bolla-aiuto{padding:11px 18px;font-size:15px;right:14px;bottom:14px}
  .pannello-aiuto{right:14px;bottom:70px}
  .app{padding-bottom:110px}
  h1{font-size:27px}
  .testata{padding:16px 0;margin-bottom:24px}
  .gruppo-testa{flex-direction:column;gap:10px}
  .gruppo-testa form,.gruppo-testa .btn-pieno{width:100%}
  .gruppo-testa button{width:100%}
}

.riga-cliente{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--linea)}
.riga-cliente:last-child{border-bottom:none}
.riga-cliente b{font-weight:600}
@media(max-width:640px){.riga-cliente{flex-direction:column;align-items:stretch;gap:10px}
  .riga-cliente form,.riga-cliente .btn-pieno,.riga-cliente .btn-linea{width:100%;text-align:center}}
.cosa.fatta{opacity:.75}

/* ---- collegamento casella ---- */
.provider-scelta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.provider{font:inherit;font-size:16px;font-weight:600;padding:16px 18px;border:1px solid var(--linea);
  background:var(--bianco);border-radius:12px;cursor:pointer;text-align:left;color:var(--inchiostro)}
.provider:hover{border-color:var(--inchiostro)}
.provider.scelto{border-color:var(--inchiostro);border-width:2px;background:#f4f2ed}
.stato-collegato{display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:var(--verde-chiaro);border:1px solid #cfe0d2;border-radius:12px;padding:18px 20px;flex-wrap:wrap}
.griglia-due{display:grid;grid-template-columns:2fr 1fr;gap:14px}

/* ---- regole ---- */
.regola-testa{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.regola-testa h2{margin-bottom:0}
.interruttore{flex-direction:row;align-items:center;gap:10px;font-size:16px;color:var(--inchiostro);cursor:pointer}
.interruttore input{width:22px;height:22px;accent-color:var(--inchiostro)}
.regola-campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px}
@media(max-width:640px){.griglia-due{grid-template-columns:1fr}}

/* ================= pagina pubblica (la prima che si vede) ================= */
.pagina-pubblica{max-width:820px;margin:0 auto;padding:0 20px 70px}
.testata-pubblica{display:flex;justify-content:space-between;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--linea);margin-bottom:52px}

.apertura{text-align:center;margin-bottom:56px}
.apertura h1{font-size:clamp(28px,4.4vw,40px);line-height:1.22;letter-spacing:-.7px;margin-bottom:20px}
.apertura-testo{font-size:18px;color:var(--grigio);max-width:640px;margin:0 auto 30px;line-height:1.65}
.apertura-testo b{color:var(--inchiostro)}
.apertura .grande,.chiusura .grande{max-width:420px;margin:0 auto}
.sotto-bottone{font-size:15px;color:var(--grigio);margin-top:14px}

.etichetta-sezione{text-align:center;font-size:14px;color:var(--grigio);margin-bottom:14px}
.anteprima{margin-bottom:58px}
.finestra{border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:var(--bianco);
  box-shadow:0 18px 50px rgba(0,0,0,.07)}
.finestra-barra{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid var(--linea);background:#f3f1ec}
.finestra-barra span{width:11px;height:11px;border-radius:50%;background:#d9d5cd}
.finestra-dentro{padding:22px}
.finta-titolo{font-size:22px;font-weight:800;margin-bottom:16px}
.finta-cosa{display:flex;justify-content:space-between;align-items:center;gap:16px;
  border:1px solid var(--linea);border-radius:12px;padding:14px 16px;margin-bottom:9px}
.finta-chi{font-size:14.5px;color:var(--grigio)}
.finta-cosa-titolo{font-size:16.5px;font-weight:700;margin:2px 0}
.finto-bottone{font-size:13.5px;font-weight:600;border:1px solid var(--linea);border-radius:8px;
  padding:8px 14px;white-space:nowrap}
.finto-bottone.scuro{background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}

.cosa-fa,.tre-passi,.rassicurazioni,.chiusura{margin-bottom:58px}
.cosa-fa h2,.tre-passi h2,.chiusura h2{text-align:center;font-size:24px;margin-bottom:26px}
.elenco-cose{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.elenco-cose>div{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:20px}
.elenco-cose b{display:block;font-size:17px;margin-bottom:6px}
.elenco-cose span{font-size:15.5px;color:var(--grigio);line-height:1.6}

.tre-passi ol{list-style:none;counter-reset:passo;display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto}
.tre-passi li{counter-increment:passo;display:flex;gap:16px;align-items:flex-start;
  background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:18px 20px}
.tre-passi li>div{flex:1;min-width:0}
.tre-passi li::before{content:counter(passo);flex:0 0 36px;width:36px;height:36px;border-radius:50%;
  background:var(--inchiostro);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.tre-passi b{display:block;font-size:17px;margin-bottom:4px}
.tre-passi span{font-size:15.5px;color:var(--grigio)}

.rassicurazioni{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 28px}
@media(max-width:640px){.rassicurazioni{grid-template-columns:1fr}}
.rassicurazioni>div{border-left:3px solid var(--inchiostro);padding-left:16px}
.rassicurazioni b{display:block;font-size:16px;margin-bottom:4px}
.rassicurazioni span{font-size:15px;color:var(--grigio)}

.chiusura{text-align:center}
.entra{max-width:460px;margin:34px auto 0;text-align:left}
.entra details{border-top:1px solid var(--linea);padding:14px 0}
.entra summary{cursor:pointer;font-size:16px;color:var(--grigio)}
.entra details[open] summary{color:var(--inchiostro);font-weight:600;margin-bottom:14px}
.piede{text-align:center;font-size:15px;color:var(--grigio);padding-top:24px;border-top:1px solid var(--linea)}
@media(max-width:640px){
  .finta-cosa{flex-direction:column;align-items:flex-start;gap:10px}
  .apertura{margin-bottom:44px}
}
.sotto-titolo-sezione{text-align:center;font-size:16px;color:var(--grigio);margin:-16px 0 24px}
.cosa-non-fa{margin-bottom:58px}
.cosa-non-fa h2{text-align:center;font-size:24px;margin-bottom:26px}
.cosa-non-fa .elenco-cose>div{background:transparent;border-style:dashed}


/* ---- accessibilità: si vede sempre dove sei con la tastiera ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,.provider:focus-visible{
  outline:3px solid var(--inchiostro);outline-offset:2px;border-radius:8px}
.salta-al-contenuto{position:absolute;left:-9999px;top:0;background:var(--inchiostro);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;z-index:100;font-weight:600}
.salta-al-contenuto:focus{left:0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.aiuto-campo{font-size:14px;color:var(--grigio);margin-top:2px}
.prossimi-passi{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.prossimi-passi p{width:100%;margin-bottom:2px}
.avviso-demo .link{margin-left:6px;white-space:nowrap}

/* ---- messaggio con annulla ---- */
.messaggio{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.annulla-form{margin:0}
.btn-annulla{font:inherit;font-size:14.5px;font-weight:600;background:transparent;border:1px solid currentColor;
  color:inherit;border-radius:8px;padding:10px 16px;min-height:40px;cursor:pointer;opacity:.85}
.btn-annulla:hover{opacity:1}

.cerca{width:100%;max-width:420px;margin-bottom:18px;font-size:17px;padding:13px 16px}

/* ---- anteprime: si legge tutto prima di mandare ---- */
.riga-intestazione { display:flex; gap:10px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--linea); }
.riga-intestazione .etichetta { color:var(--grigio); font-size:13px; min-width:64px; }
.riga-intestazione .chi { color:var(--grigio); font-size:13px; margin-left:auto; }
.etichetta-campo { display:block; margin:16px 0 6px; color:var(--grigio); font-size:13px; }
.campo-testo { width:100%; padding:14px; border:1px solid var(--linea); border-radius:12px;
  font:inherit; line-height:1.6; background:var(--bianco); resize:vertical; }
.campo-testo:focus { outline:2px solid var(--inchiostro); outline-offset:1px; }
.titolo-sezione { margin:28px 0 10px; font-size:18px; }
.documento-testa { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.documento-testa span { color:var(--grigio); font-size:13px; }
.tabella-documento { width:100%; border-collapse:collapse; }
.tabella-documento td { padding:8px 0; border-bottom:1px solid var(--linea); vertical-align:top; }
.tabella-documento td:first-child { color:var(--grigio); width:45%; }
.nota-documento { color:var(--grigio); font-size:14px; margin-top:10px; }
.controllo summary { cursor:pointer; }
.controllo[open] summary { margin-bottom:12px; }
.dettaglio-email summary { cursor:pointer; color:var(--grigio); font-size:14px; margin-top:10px; }
.azioni-anteprima { margin-top:24px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* ---- collegamento della casella: due bottoni e basta ---- */
.scelta-casella { display:flex; gap:12px; flex-wrap:wrap; }
.scelta-casella .btn-pieno { text-decoration:none; text-align:center; }
.altra-strada { margin-top:20px; }
.altra-strada summary { cursor:pointer; color:var(--grigio); font-size:15px; }

/* ---- barra laterale con icone, come i gestionali che gli studi già usano ---- */
.app { display:flex; align-items:stretch; gap:0; max-width:none; padding:0; }
.barra { width:104px; flex:0 0 104px; border-right:1px solid var(--linea); background:var(--bianco);
  display:flex; flex-direction:column; align-items:stretch; padding:18px 8px 14px; position:sticky; top:0;
  height:100vh; }
.barra .logo { text-align:center; font-weight:800; font-size:20px; text-decoration:none; margin-bottom:22px; }
.barra .menu { display:flex; flex-direction:column; gap:4px; }
.barra .voce { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px;
  border-radius:12px; text-decoration:none; color:var(--grigio); font-size:13px; line-height:1.2;
  text-align:center; position:relative; }
.barra .voce svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.barra .voce:hover { background:var(--carta); color:var(--inchiostro); }
.barra .voce.on { background:var(--inchiostro); color:var(--bianco); }
.barra .esci { margin-top:auto; }
.pallino { position:absolute; top:8px; right:14px; width:10px; height:10px; border-radius:50%;
  background:var(--linea); }
.pallino.acceso { background:var(--verde); }
.app > main { flex:1; min-width:0; max-width:920px; padding:28px 24px 80px; margin:0 auto; }

@media (max-width:760px){
  .app { flex-direction:column; }
  .barra { width:auto; flex:none; height:auto; position:fixed; bottom:0; left:0; right:0; top:auto;
    flex-direction:row; justify-content:space-around; border-right:0; border-top:1px solid var(--linea);
    padding:6px 4px; z-index:40; }
  .barra .logo { display:none; }
  .barra .menu { flex-direction:row; gap:0; flex:1; justify-content:space-around; }
  .barra .esci { margin-top:0; }
  .barra .voce { font-size:12px; padding:6px 8px; }
  .app > main { padding:20px 16px 96px; }
}

@media (max-width:760px){
  /* la bolla dell'aiuto non deve coprire il menù in basso */
  .bolla-aiuto { bottom:80px; right:14px; padding:10px 16px; font-size:14px; }
  .pannello-aiuto { bottom:80px; }
  /* su schermo stretto l'uscita sta nelle impostazioni, non nella barra */
  .barra .esci { display:none; }
}

/* ---- prezzo in chiaro sulla landing ---- */
.firma-apertura { margin-top:14px; color:var(--grigio); font-size:15px; max-width:640px; }
.prezzo-sezione { padding:56px 0; text-align:center; }
.cartellino { display:inline-block; text-align:left; border:1px solid var(--linea); border-radius:16px;
  background:var(--bianco); padding:28px 32px; }
.prezzo-grande { font-family:'Source Serif 4',Georgia,serif;font-size:clamp(38px,4.6vw,50px); font-weight:700; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.prezzo-nota { color:var(--grigio); margin-top:4px; }
.prezzo-elenco { margin:18px 0 0; padding-left:20px; color:var(--inchiostro); }
.prezzo-elenco li { margin:6px 0; }

/* ---- pastiglie di rassicurazione, tempi di avvio, domande frequenti ---- */
.pastiglie { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding:0; }
.pastiglie li { border:1px solid var(--linea); border-radius:999px; padding:6px 14px; font-size:14px;
  color:var(--grigio); background:var(--bianco); }
.tempi { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px; }
.tempi li { display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:baseline;
  border-top:1px solid var(--linea); padding-top:14px; }
.tempi b { font-size:19px; }
.tempi span { color:var(--grigio); }
.domande { padding:56px 0; }
.domande details { border-top:1px solid var(--linea); padding:16px 0; }
.domande summary { cursor:pointer; font-weight:600; }
.domande p { color:var(--grigio); margin-top:10px; max-width:70ch; }
@media (max-width:700px){ .tempi li { grid-template-columns:1fr; gap:4px; } }
.rete-sicurezza { margin-top:22px; color:var(--grigio); font-size:15px; max-width:70ch; }

/* ---- accessibilità: bordi visibili, messa a fuoco chiara, etichette per i lettori di schermo ---- */
.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; }
/* i bottoni si toccano bene anche col dito */
.btn-pieno, .btn-linea, .barra .voce { min-height:44px; display:inline-flex; align-items:center;
  justify-content:center; }
.barra .voce { flex-direction:column; }

/* ---- il foglio dell'allegato, come lo riceve il cliente ---- */
.foglio { background:var(--bianco); border:1px solid var(--linea); border-radius:16px; padding:34px 36px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); }
.foglio-testa { display:flex; flex-direction:column; gap:2px; padding-bottom:18px; margin-bottom:18px;
  border-bottom:2px solid var(--inchiostro); }
.foglio-testa span { color:var(--grigio); font-size:14px; }
.foglio-piede { margin-top:24px; padding-top:14px; border-top:1px solid var(--linea);
  color:var(--grigio); font-size:13px; }
.torna { margin-bottom:10px; }
@media print { .barra, .azioni, .avviso-demo, .bolla-aiuto, .torna { display:none !important; }
  .foglio { border:0; box-shadow:none; padding:0; } }

/* ---- accessibilità: pensata per chi ha 60 anni e non vede benissimo ---- */
:root{--bordo-campo:#8e887e}          /* contrasto 3.5:1, a norma WCAG per i controlli */
input,select,textarea{border-color:var(--bordo-campo)}
.btn-linea{border-color:var(--bordo-campo)}
.btn-piccolo{padding:11px 16px;font-size:15px}     /* area cliccabile piena, non microscopica */
.menu a{padding:10px 14px}
.altri-dati{grid-column:1/-1;border-top:1px solid var(--linea);padding-top:14px}
.altri-dati summary{cursor:pointer;font-size:15px;color:var(--grigio);padding:6px 0}
.altri-dati[open] summary{color:var(--inchiostro);font-weight:600}
.mostra-pw{flex-direction:row;align-items:center;gap:9px;font-size:15px;color:var(--grigio);cursor:pointer}
.mostra-pw input{width:20px;height:20px;accent-color:var(--inchiostro)}

/* Aree da toccare piu' grandi: dita e schermi piccoli non perdonano (WCAG 2.5.5) */
.link, .menu a, .piccolo a, .riga-cliente a:not(.btn-pieno):not(.btn-linea){
  display:inline-block; padding:8px 2px; min-height:24px;
}
@media(pointer:coarse){
  .link, .menu a, .piccolo a{ padding:12px 4px; min-height:44px; line-height:20px }
}

/* Avviso della prova: il testo su una riga, le due scorciatoie sotto, staccate */
.avviso-demo{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.avviso-demo .scorciatoie{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:640px){
  .avviso-demo .scorciatoie{width:100%;gap:8px;flex-direction:column}
  .avviso-demo .scorciatoie a{padding:10px 0}
}
.codice-recupero{font-family:ui-monospace,Menlo,monospace;font-size:30px;font-weight:700;
  letter-spacing:2px;margin:10px 0;word-break:break-all}

/* ---------- il modello F24 disegnato ---------- */
.f24{border:1px solid #c9d3e0;border-radius:8px;background:#fff;overflow:hidden;margin:4px 0 14px;
  font-size:15px}
.f24-testa{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 16px;
  background:#eef3f9;border-bottom:1px solid #c9d3e0}
.f24-sigla{font-weight:800;letter-spacing:.06em;font-size:15px}
.f24-nome{color:#4a5566;font-size:14px;flex:1}
.f24-scadenza{font-size:14px;font-weight:700;color:var(--inchiostro)}
.f24-blocco{border-bottom:1px solid #e4e8ee}
.f24-blocco-titolo{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:#6b7686;
  padding:9px 16px 0}
.f24-contribuente{display:flex;flex-direction:column;gap:2px;padding:4px 16px 14px}
.f24-contribuente b{font-size:16px}
.f24-contribuente span{font-size:14px;color:var(--grigio)}
.f24-tabella{width:100%;border-collapse:collapse;margin:6px 0 12px}
.f24-tabella th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:#6b7686;
  font-weight:600;text-align:left;padding:6px 16px;border-bottom:1px solid #e4e8ee;line-height:1.3}
.f24-tabella td{padding:10px 16px;border-bottom:1px solid #f0f2f5;font-size:15px}
.f24-tabella tr:last-child td{border-bottom:none}
.f24-codice{font-weight:700}
.f24-tabella .col-stretta{width:82px;text-align:center}
.f24-tabella .col-importo{width:150px;text-align:right}
.f24-saldo{display:flex;justify-content:space-between;align-items:baseline;padding:13px 16px;
  background:#eef3f9;font-size:15px}
.f24-saldo span{text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;color:#4a5566;font-weight:600}
.f24-saldo b{font-size:20px}
.f24-nota{font-size:13.5px;color:var(--grigio);padding:0 16px 12px}
.f24-nota.attenzione{color:var(--rosso);font-weight:600}

/* ---------- il file che ha mandato il cliente ---------- */
.file-cliente{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:4px 0 14px}
.finto-file{flex:0 0 auto}
.scatto{width:190px;height:135px;background:#f1efe9;border:1px solid var(--linea);border-radius:4px;
  padding:16px 14px;transform:rotate(-3.5deg);box-shadow:0 4px 14px rgba(0,0,0,.10);position:relative;overflow:hidden}
.scatto.dritto{transform:none}
.scatto-riga{height:7px;background:#cfcbc2;border-radius:4px;margin-bottom:9px;width:70%;filter:blur(1.1px)}
.scatto-riga.lunga{width:92%}
.scatto-riga.corta{width:45%}
.scatto-ombra{position:absolute;inset:0;background:linear-gradient(115deg,rgba(0,0,0,.16),transparent 45%)}
.finto-foglio{width:210px;border:1px solid var(--linea);border-radius:4px;background:#fff;overflow:hidden}
.finto-foglio-riga{display:grid;grid-template-columns:1fr 1.4fr 1fr;font-size:11px;color:var(--grigio)}
.finto-foglio-riga span{padding:6px 7px;border-bottom:1px solid #eee;border-right:1px solid #eee}
.finto-foglio-riga.vuota span{height:26px}
.file-didascalia{font-size:13.5px;color:var(--grigio);margin-top:10px;max-width:230px;line-height:1.5}
.file-dati{flex:1;min-width:180px}
.dati-allegato{margin-top:10px}
.dati-allegato summary{cursor:pointer;font-size:14.5px;color:var(--grigio);padding:6px 0}
@media(max-width:640px){.f24-tabella th,.f24-tabella td{padding:8px 10px;font-size:14px}
  .f24-tabella .col-stretta{width:58px}.f24-tabella .col-importo{width:110px}}

/* ---------- autofattura e circolare disegnate ---------- */
.documento-carta{border:1px solid var(--linea);border-radius:8px;background:#fff;overflow:hidden;margin:4px 0 14px}
.carta-testa{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;
  background:#f4f2ee;border-bottom:1px solid var(--linea)}
.carta-tipo{font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:13px}
.carta-stato{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--giallo);
  background:var(--giallo-chiaro);border-radius:999px;padding:3px 10px;font-weight:700}
.carta-corpo{padding:12px 16px}
.carta-riga{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:15px}
.carta-riga span{color:var(--grigio)}
.carta-importi{width:100%;border-collapse:collapse;border-top:1px solid var(--linea)}
.carta-importi td{padding:10px 16px;font-size:15px;border-bottom:1px solid #f0eee9}
.carta-importi td:last-child{text-align:right}
.carta-importi .carta-totale td{font-weight:800;font-size:17px;background:#f4f2ee;border-bottom:none}
.carta-piede{font-size:13px;color:var(--grigio);padding:11px 16px;line-height:1.5}
.lettera{padding:26px 28px}
.lettera-intestazione{font-weight:800;font-size:15px;border-bottom:2px solid var(--inchiostro);
  padding-bottom:8px;margin-bottom:18px}
.lettera-titolo{font-size:18px;font-weight:700;line-height:1.35;margin-bottom:3px}
.lettera-fonte{font-size:13.5px;color:var(--grigio);margin-bottom:14px}
.lettera-corpo{font-size:15.5px;line-height:1.7;white-space:pre-line}
.lettera-chiusura{font-size:15.5px;margin-top:14px;color:var(--grigio)}
.promemoria-dati{border-top:none;margin-top:12px}
.promemoria-dati td{padding:9px 0;border-bottom:1px solid #f0eee9}
.promemoria-dati td:first-child{color:var(--grigio);width:45%}
.promemoria-dati td:last-child{text-align:left}
.f24-scorri{overflow-x:auto;-webkit-overflow-scrolling:touch}
.f24-scorri .f24-tabella{min-width:520px}
@media(max-width:640px){
  .f24-scorri .f24-tabella{min-width:460px}
  .file-cliente{gap:14px}
  .documento-carta .carta-riga{flex-direction:column;gap:2px}
  .documento-carta .carta-riga b{font-size:15px}
}


/* ===== passo 1: critica progettuale (gerarchia) ===== */
/* Il banner della prova non deve essere la prima cosa che si vede. */
.avviso-demo{background:transparent;border:none;border-bottom:1px solid var(--linea);border-radius:0;
  color:var(--grigio);font-size:14px;padding:10px 0;margin-bottom:22px;
  flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.avviso-demo .scorciatoie{gap:14px}
.avviso-demo .scorciatoie a,.avviso-demo .scorciatoie button{font:inherit;font-size:13.5px;color:var(--grigio);
  text-decoration:underline;text-underline-offset:3px;background:none;border:none;padding:0;cursor:pointer}
.avviso-demo .scorciatoie a:hover,.avviso-demo .scorciatoie button:hover{color:var(--inchiostro)}
@media(max-width:640px){.avviso-demo{flex-direction:column;align-items:flex-start;gap:6px}}

/* Da dove si comincia si vede, non si spiega. */
.cosa.da-qui{border-color:var(--inchiostro);box-shadow:0 1px 0 var(--inchiostro)}

/* Il titolo della pagina resta il piu' forte: il filetto dei gruppi si alleggerisce. */
.gruppo-testa{border-bottom:1px solid var(--linea)}
.gruppo-testa h2{font-size:19px}

/* Il cliente e' l'ancora della riga: si legge prima dell'oggetto. */
.cosa .chi{font-size:15.5px;color:var(--inchiostro);font-weight:600;margin-bottom:1px}
.cosa .titolo{font-weight:600}

/* Barra laterale: etichette leggibili e bersagli veri (44px). */
.barra a,.barra .voce{min-height:44px}


/* ===== passo 2: UX (una sola azione primaria, feedback all'invio) ===== */
.attesa-invio{opacity:.6;pointer-events:none}

/* ===== passo 3: qualita' visiva =====
   Preso dalla scuola "premium" solo cio' che serve a chi legge:
   scala tipografica coerente, profondita' misurata, movimenti brevi e naturali.
   Scartati vetro, fondo nero e animazioni scenografiche: qui si lavora, non si guarda. */

:root{
  --curva:cubic-bezier(.32,.72,0,1);
  --ombra-appoggio:0 1px 2px rgba(28,28,26,.04), 0 8px 24px -12px rgba(28,28,26,.10);
  --ombra-rilievo:0 1px 2px rgba(28,28,26,.05), 0 14px 34px -14px rgba(28,28,26,.16);
}

/* Scala tipografica: 15 / 17 / 19 / 22 / 28 / 34, tracciatura stretta solo sui titoli. */
h1{font-size:34px;letter-spacing:-.022em;line-height:1.18}
h2{font-size:22px;letter-spacing:-.012em}
.cosa .titolo{font-size:19px;letter-spacing:-.006em}
.sottotitolo{font-size:17px;max-width:64ch}

/* Le schede si appoggiano al foglio, non ci sono incollate. */
.cosa,.pannello,.posta,.norma{box-shadow:var(--ombra-appoggio);transition:box-shadow .22s var(--curva),transform .22s var(--curva),border-color .22s var(--curva)}
.cosa:hover{box-shadow:var(--ombra-rilievo)}
.cosa.da-qui{box-shadow:var(--ombra-rilievo);border-color:var(--inchiostro)}

/* Il bottone risponde al dito: si abbassa appena, senza spostare nulla intorno. */
.btn-pieno,.btn-linea{transition:background-color .18s var(--curva),color .18s var(--curva),
  border-color .18s var(--curva),transform .12s var(--curva),box-shadow .18s var(--curva)}
.btn-pieno:active,.btn-linea:active{transform:scale(.985)}

/* Respiro tra i gruppi: si capisce dove finisce una cosa e inizia l'altra. */
.gruppo{margin-bottom:46px}
.gruppo-testa{padding-bottom:14px;margin-bottom:16px}
main{padding-top:4px}

/* Chi non vuole movimento non lo subisce. */
@media (prefers-reduced-motion: reduce){
  .cosa,.pannello,.posta,.norma,.btn-pieno,.btn-linea{transition:none}
  .btn-pieno:active,.btn-linea:active{transform:none}
}

/* ===== passo 4: leggibilita' prima dello stile =====
   Le intestazioni in maiuscoletto stretto sono un vezzo grafico: per chi legge
   con gli occhiali sono le righe piu' faticose della pagina. Testo normale. */
table.righe th{text-transform:none;letter-spacing:0;font-size:14px;color:var(--grigio);font-weight:600}

/* ===== passo 7: accessibilita' =====
   Contrasto, etichette e nomi erano gia' a posto. Restavano collegamenti
   troppo bassi da centrare col dito: nessuno sotto i 44px. */
.avviso-demo .scorciatoie a,.avviso-demo .scorciatoie button{
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
a.link{display:inline-flex;align-items:center;min-height:44px}
p a.link,.dettaglio a.link,.piccolo a.link{min-height:0;display:inline}  /* dentro una frase resta testo */

/* ===== passo 8: conversione ===== */
.seconda-strada{margin-top:14px;font-size:15.5px;color:var(--grigio)}

/* ===== come scrive lo studio ===== */
.logo-riga{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-top:16px}
.logo-attuale{border:1px solid var(--linea);border-radius:12px;padding:12px;background:var(--carta)}
.logo-attuale img{max-height:70px;max-width:220px;display:block}
.logo-bozza{max-height:46px;margin-bottom:12px}
textarea{width:100%;font:inherit;font-size:16px;line-height:1.6;resize:vertical}

/* ===== revisione landing: header, prezzo, footer ===== */
.testata-pubblica{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--carta) 92%, transparent);
  backdrop-filter:blur(8px);display:flex;align-items:center;gap:26px;
  padding:14px 6vw;border-bottom:1px solid var(--linea)}
.testata-pubblica .logo{margin-right:auto}
.menu-pubblico{display:flex;gap:22px;align-items:center}
.menu-pubblico a{color:var(--inchiostro);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap;
  padding:10px 2px;border-bottom:2px solid transparent}
.menu-pubblico a:hover{border-bottom-color:var(--rosso)}
.btn-testata{padding:11px 22px;font-size:15px;white-space:nowrap}
.apri-menu{display:none;background:none;border:1px solid var(--linea);border-radius:8px;
  font-size:20px;padding:6px 12px;cursor:pointer;color:var(--inchiostro)}
@media(max-width:900px){
  .menu-pubblico{display:none;position:absolute;top:100%;left:0;right:0;background:var(--carta);
    border-bottom:1px solid var(--linea);flex-direction:column;align-items:stretch;padding:8px 6vw 16px;gap:0}
  .menu-pubblico.aperto{display:flex}
  .menu-pubblico a{padding:13px 2px;border-bottom:1px solid var(--linea);font-size:16px}
  .apri-menu{display:block}
}

/* Il cartellino del prezzo diventa il punto dove si compra. */
.prezzo-sezione .cartellino{max-width:560px;margin:0 auto;background:var(--bianco);
  border:1px solid var(--linea);border-radius:16px;padding:34px 36px;box-shadow:var(--ombra-rilievo)}
.prezzo-piccolo{font-size:15px;color:var(--grigio);text-align:center;margin-bottom:2px}
.prezzo-grande{text-align:center}
.prezzo-elenco.spunte{list-style:none;padding:0;margin:22px 0}
.prezzo-elenco.spunte li{padding:9px 0 9px 30px;position:relative;border-bottom:1px solid var(--linea);font-size:15.5px}
.prezzo-elenco.spunte li:last-child{border-bottom:none}
.prezzo-elenco.spunte li::before{content:"";position:absolute;left:2px;top:14px;width:14px;height:8px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg)}
.btn-cartellino{display:block;text-align:center;margin-top:6px}
.prezzo-garanzia{font-size:13.5px;color:var(--grigio);text-align:center;margin-top:12px}

/* Footer da azienda, non da esperimento. */
.piede{border-top:1px solid var(--linea);padding:40px 6vw 30px;font-size:14.5px}
.piede-colonne{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;max-width:1000px;margin:0 auto 26px}
.piede-colonne p{color:var(--grigio);margin-top:8px;max-width:36ch}
.piede-titolo{font-weight:700;color:var(--inchiostro) !important;margin-bottom:4px}
.piede-colonne a{display:block;color:var(--grigio);text-decoration:none;padding:5px 0}
.piede-colonne a:hover{color:var(--rosso)}
.piede-riga{max-width:1000px;margin:0 auto;color:var(--grigio);font-size:13px;
  border-top:1px solid var(--linea);padding-top:18px}
@media(max-width:700px){.piede-colonne{grid-template-columns:1fr}}

/* Le ancore atterrano sotto l'header fisso, non nascoste dietro. */
.pagina-pubblica [id]{scroll-margin-top:86px}

/* ===== revisione landing, secondo giro: pagina larga da software company ===== */
.pagina-pubblica{max-width:1180px}
.pagina-pubblica.pagina-stretta{max-width:760px}
.testo-lungo h2{font-size:20px;margin:28px 0 8px}
.testo-lungo p{margin-bottom:10px;color:var(--inchiostro)}

/* Hero a due colonne: promessa a sinistra, prodotto a destra. */
.apertura-larga{text-align:left;margin-bottom:64px}
.apertura-colonne{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,9fr);gap:56px;align-items:center}
.apertura-larga h1{font-size:clamp(30px,3.4vw,46px)}
.apertura-larga .apertura-testo{margin:0 0 28px}
.apertura-larga .grande{margin:0;max-width:none;display:inline-block;padding-left:34px;padding-right:34px}
.apertura-larga .sotto-bottone,.apertura-larga .argomenti{text-align:left;justify-content:flex-start}
.apertura-dx .etichetta-sezione{margin-bottom:10px}
.apertura-dx .finestra{box-shadow:var(--ombra-rilievo)}
@media(max-width:960px){
  .apertura-colonne{grid-template-columns:1fr;gap:30px}
  .apertura-larga{text-align:center}
  .apertura-larga .apertura-testo{margin:0 auto 26px}
  .apertura-larga .sotto-bottone,.apertura-larga .argomenti{text-align:center;justify-content:center}
}

/* Le sezioni interne respirano sulla larghezza nuova. */
.cosa-fa .griglia,.griglia-cose{max-width:1100px}
.piede-legale{font-size:12.5px}
.piede-legale a{color:var(--grigio)}

/* ===== pagine di ingresso: la card di registrazione, non la tendina ===== */
.pagina-ingresso{max-width:1040px}
.ingresso-colonne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;
  align-items:center;padding:44px 0 70px;min-height:70vh}
.ingresso-valore h1{font-size:clamp(26px,3vw,36px);margin-bottom:22px}
.ingresso-punti{list-style:none;padding:0;margin:0 0 22px}
.ingresso-punti li{padding:9px 0 9px 30px;position:relative;font-size:16.5px}
.ingresso-punti li::before{content:"";position:absolute;left:2px;top:16px;width:14px;height:8px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg)}
.ingresso-card{background:var(--bianco);border:1px solid var(--linea);border-radius:16px;
  padding:34px 36px;box-shadow:var(--ombra-rilievo)}
.ingresso-card h2{margin-bottom:4px}
.ingresso-card .form{margin-top:18px}
.ingresso-card .btn-pieno{width:100%;text-align:center;margin-top:6px}
.ingresso-cambio{font-size:14.5px;color:var(--grigio);margin-top:14px;text-align:center}
@media(max-width:860px){
  .ingresso-colonne{grid-template-columns:1fr;gap:26px;padding-top:20px}
  .ingresso-valore{order:2}
  .ingresso-card{padding:26px 20px}
}

/* ===== card di registrazione: campi affiancati, robustezza, consenso ===== */
.campi-affiancati{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.campi-affiancati{grid-template-columns:1fr}}
.facoltativo{font-size:12.5px;color:var(--grigio);font-weight:400}
.robustezza{display:block;height:4px;background:var(--linea);border-radius:99px;margin-top:8px;overflow:hidden}
.robustezza span{display:block;height:100%;width:0;border-radius:99px;transition:width .25s ease}
.consenso{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin:14px 0 4px}
.consenso input{margin-top:3px;width:18px;height:18px;flex-shrink:0}
.riga-fiducia{font-size:13px;color:var(--grigio);text-align:center;margin-top:12px}

/* ===== flusso registrazione: riepilogo e codice con la stessa card ===== */
.riepilogo-dati{margin:18px 0}
.riepilogo-dati div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--linea)}
.riepilogo-dati div:last-child{border-bottom:none}
.riepilogo-dati dt{color:var(--grigio);font-size:14.5px;white-space:nowrap}
.riepilogo-dati dd{font-weight:600;text-align:right;font-size:14.5px}
.cosa-succede{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.cosa-succede .elenco-passi{margin:8px 0 0;padding-left:20px}
.cosa-succede li{margin-top:6px;font-size:14.5px}
.scatola-codice{background:var(--carta);border:1px dashed var(--grigio);border-radius:12px;
  padding:18px;text-align:center;margin:18px 0}
.codice-recupero{font-family:ui-monospace,monospace;font-size:26px;font-weight:700;letter-spacing:2px;margin:6px 0}

.tabella-scorri{overflow-x:auto}

/* ===== primi passi: la checklist di avvio con le spunte vere ===== */
.primi-passi{margin-bottom:26px}
.primi-passi h2{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;margin-bottom:12px}
.passi-avvio{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:640px){.passi-avvio{grid-template-columns:1fr}}
.passo-avvio{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--linea);
  border-radius:12px;text-decoration:none;color:var(--inchiostro);font-size:15px;font-weight:600;background:var(--carta)}
.passo-avvio:hover{border-color:var(--inchiostro)}
.passo-avvio .spunta{width:18px;height:18px;border:2px solid var(--grigio);border-radius:50%;flex-shrink:0;position:relative}
.passo-avvio.fatto{color:var(--grigio);font-weight:500;text-decoration:line-through}
.passo-avvio.fatto .spunta{border-color:var(--verde);background:var(--verde-chiaro)}
.passo-avvio.fatto .spunta::after{content:"";position:absolute;left:4px;top:3px;width:7px;height:4px;
  border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg)}

/* ===== ritmo della landing: un respiro solo per tutte le sezioni ===== */
.pagina-pubblica main > section{margin:0 0 84px}
.pagina-pubblica main > section:last-child{margin-bottom:56px}
.pagina-pubblica .prezzo-sezione{padding:0}

/* Le domande: colonna leggibile, righe con il piu', risposte rientrate */
.domande{max-width:820px;margin-left:auto !important;margin-right:auto !important}
.domande h2{text-align:center;margin-bottom:22px}
.domande details{border-top:1px solid var(--linea);padding:0}
.domande details:last-of-type{border-bottom:1px solid var(--linea)}
.domande summary{list-style:none;cursor:pointer;font-weight:600;font-size:17px;
  padding:18px 34px 18px 0;position:relative}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;color:var(--grigio);transition:transform .18s var(--curva)}
.domande details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.domande details p{padding:0 34px 18px 0;color:var(--grigio);max-width:64ch}

/* Il finale: una banda scura che chiude la pagina, non un titolo sperso */
.chiusura{background:var(--inchiostro);color:var(--carta);border-radius:20px;
  padding:56px 24px;text-align:center}
.chiusura h2{color:var(--carta)}
.chiusura .sotto-titolo-sezione{color:color-mix(in srgb, var(--carta) 75%, transparent)}
.chiusura .btn-pieno{background:var(--carta);color:var(--inchiostro)}
.chiusura .btn-pieno:hover{background:#fff}
.chiusura .seconda-strada{color:color-mix(in srgb, var(--carta) 70%, transparent)}
.chiusura .seconda-strada .link{color:var(--carta)}

/* Titoli di sezione uniformi */
.cosa-fa h2,.tre-passi h2,.rassicurazioni h2,.cosa-non-fa h2,.prezzo-sezione h2{text-align:center;margin-bottom:22px}

/* ===== le anteprime del tool si dichiarano: sono immagini, non bottoni ===== */
.finestra{cursor:default;user-select:none}
.finestra *{pointer-events:none}
.finestra-barra{position:relative}
.finestra-tag{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:11.5px;letter-spacing:.02em;color:var(--grigio);
  background:var(--carta);border:1px solid var(--linea);border-radius:999px;padding:3px 10px}
.finto-bottone{cursor:default}

/* ===== ritmo unico anche dentro il tool e nelle pagine di testo ===== */
.pannello{margin-bottom:24px}
.pannello:last-child{margin-bottom:0}
.testo-lungo h2{margin:34px 0 10px}
.testo-lungo h1{margin-bottom:6px}
.testo-lungo .sottotitolo{margin-bottom:26px}
.kpi{gap:12px;margin-bottom:26px}


.cta-di-mezzo{text-align:center;margin-top:26px}
.cta-di-mezzo .btn-pieno{display:inline-block;padding-left:30px;padding-right:30px}
.prima-dopo h2,.per-chi h2{text-align:center;margin-bottom:22px}

/* ===== per chi e', per chi no ===== */
.due-colonne{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1000px;margin:0 auto}
@media(max-width:720px){.due-colonne{grid-template-columns:1fr}}
.colonna-si,.colonna-no{background:var(--bianco);border:1px solid var(--linea);border-radius:16px;padding:24px 26px}
.colonna-si{border-top:3px solid var(--verde)}
.colonna-no{border-top:3px solid var(--grigio)}
.colonna-si h3,.colonna-no h3{font-size:17px;margin-bottom:10px}
.due-colonne ul{list-style:none;padding:0;margin:0}
.due-colonne li{padding:8px 0 8px 26px;position:relative;font-size:15.5px;border-bottom:1px solid var(--linea)}
.due-colonne li:last-child{border-bottom:none}
.colonna-si li::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:7px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg)}
.colonna-no li::before{content:"\00d7";position:absolute;left:2px;top:6px;color:var(--grigio);font-size:18px}

/* ===== pagina degli errori: dentro il brand, con una via d'uscita utile ===== */
.errore-pubblico{text-align:center;padding:70px 0 90px}
.codice-errore{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--rosso);margin-bottom:8px}
.errore-azioni{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===== card registrazione: i tre difetti visti da Davide ===== */
.consenso{flex-direction:row !important;align-items:flex-start}
.campi-affiancati label{min-width:0}
.campi-affiancati input{width:100%;min-width:0}
.facoltativo{font-style:normal}
.robustezza{display:none;height:3px}

/* ===== giro avvocato del diavolo (council 01/09 sera): tipografia e rosso misurato ===== */
.pagina-pubblica .cosa-fa h2,.pagina-pubblica .tre-passi h2,.pagina-pubblica .cosa-non-fa h2,
.pagina-pubblica .prima-dopo h2,.pagina-pubblica .per-chi h2,.pagina-pubblica .prezzo-sezione h2,
.pagina-pubblica .domande h2,.pagina-pubblica .chiusura h2,.pagina-pubblica .rassicurazioni h2{font-size:clamp(24px,2.6vw,32px)}
.apertura-larga h1{font-size:clamp(34px,3.4vw,52px);font-weight:560;line-height:1.08;text-wrap:balance;margin-bottom:16px}
.pagina-pubblica .apertura-larga .btn-pieno.grande,.btn-cartellino.btn-pieno{background:var(--rosso)}
.pagina-pubblica .apertura-larga .btn-pieno.grande:hover,.btn-cartellino.btn-pieno:hover{background:var(--rosso-scuro)}
.fascia-numeri b{font-variant-numeric:tabular-nums}
::selection{background:var(--rosso-chiaro)}

/* ===== giro di mercato (01/09 notte): pattern dai migliori, adattati al brand ===== */
/* Cornice del prodotto: screenshot vero con l'ombra alla Stripe scaldata sull'inchiostro */
.cornice-prodotto{margin:0;background:var(--bianco);border:1px solid #e7e4dd;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 60px -12px rgba(28,28,26,.18),0 18px 36px -18px rgba(28,28,26,.22)}
.cornice-prodotto .finestra-barra{display:flex;gap:6px;align-items:center;background:#f3f1ec;
  border-bottom:1px solid #e7e4dd;padding:11px 14px}
.cornice-prodotto .finestra-barra span{width:10px;height:10px;border-radius:50%;background:#dcd8d0;display:block}
.cornice-prodotto img{display:block;width:100%;height:auto}
.cornice-prodotto figcaption{font-size:13px;color:var(--grigio);padding:10px 14px;border-top:1px solid var(--linea);background:var(--carta)}
.apertura-dx{background:linear-gradient(160deg,#f1efe9,#e8e5dd);border-radius:20px;padding:26px 22px;position:relative}
.apertura-dx::before{content:"";position:absolute;inset:-24px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(200,40,28,.05),transparent)}

/* Etichetta di sezione: filo rosso editoriale, usata con parsimonia */
.etichetta-sezione{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rosso);margin-bottom:12px}
.etichetta-sezione.centro{text-align:center}

/* Fascia dei numeri: cifre in serif, fonte dichiarata sotto */
.fascia-numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 84px;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:34px 0}
.fascia-numeri div{padding:0 22px;border-left:1px solid var(--linea)}
.fascia-numeri div:first-child{border-left:none}
.fascia-numeri b{display:block;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(30px,2.6vw,40px);
  font-weight:600;color:var(--rosso);font-variant-numeric:tabular-nums lining-nums;margin-bottom:6px;line-height:1}
.fascia-numeri span{display:block;font-size:14.5px;line-height:1.5;margin-bottom:8px}
.fascia-numeri em{display:block;font-style:normal;font-size:12.5px;color:var(--grigio)}
@media(max-width:820px){.fascia-numeri{grid-template-columns:1fr}.fascia-numeri div{border-left:none;padding:14px 0;border-top:1px solid var(--linea)}.fascia-numeri div:first-child{border-top:none}}

/* Il motto a tre tempi: una riga sola, grande, in serif */
.motto{text-align:center;margin:0 0 84px}
.motto p{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(26px,3vw,38px);font-weight:600;
  line-height:1.25;letter-spacing:-.01em;max-width:18ch;margin:0 auto}

/* Prima/dopo a due colonne: il prima spento, il dopo col filo rosso */
.confronto-split{display:grid;grid-template-columns:1fr 1fr;max-width:1000px;margin:0 auto;
  border:1px solid #e7e4dd;border-radius:12px;overflow:hidden;background:var(--bianco);box-shadow:var(--ombra-appoggio)}
.lato-prima{background:#f3f1ec;padding:28px 30px}
.lato-dopo{background:var(--bianco);padding:28px 30px;box-shadow:inset 4px 0 0 var(--rosso)}
.confronto-split h3{font-size:16px;margin-bottom:14px}
.lato-prima h3{color:var(--grigio)}
.confronto-split ul{list-style:none;margin:0;padding:0}
.confronto-split li{padding:12px 0 12px 30px;position:relative;font-size:15.5px;border-top:1px solid var(--linea);line-height:1.5}
.lato-prima li{color:var(--grigio)}
.lato-prima li::before{content:"\00d7";position:absolute;left:4px;top:10px;font-size:18px;color:var(--grigio)}
.lato-dopo li{font-weight:500}
.lato-dopo li::before{content:"";position:absolute;left:4px;top:19px;width:12px;height:7px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg)}
@media(max-width:720px){.confronto-split{grid-template-columns:1fr}.lato-dopo{box-shadow:inset 0 4px 0 var(--rosso)}}

/* La sezione sulla legge: colonne editoriali su fondo bianco */
.legge{background:var(--bianco);border:1px solid var(--linea);border-radius:20px;padding:56px clamp(24px,5vw,72px)}
.legge h2{margin-bottom:22px;max-width:26ch}
.legge-colonne{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.legge-colonne p{font-size:16.5px;line-height:1.65;color:var(--inchiostro)}
@media(max-width:820px){.legge-colonne{grid-template-columns:1fr;gap:16px}}

/* Card quiete: bordo protagonista, ombra sussurrata, alzata di 2px al passaggio */
.elenco-cose>div{transition:transform .3s ease-out,box-shadow .3s ease-out}
.elenco-cose>div:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(28,28,26,.08)}

/* CTA: alzata e ombra rossa al passaggio, focus alla Stripe */
.btn-pieno{transition:background .2s ease-out,transform .2s ease-out,box-shadow .2s ease-out}
.btn-pieno:hover{transform:translateY(-1px)}
.pagina-pubblica .apertura-larga .btn-pieno.grande:hover,.btn-cartellino.btn-pieno:hover{box-shadow:0 6px 16px rgba(200,40,28,.25)}

/* Ritmo verticale piu' arioso sui grandi schermi */
.pagina-pubblica main > section{margin-bottom:clamp(72px,9vw,110px)}
.fascia-numeri,.motto{margin-bottom:clamp(72px,9vw,110px)}

@media(prefers-reduced-motion:reduce){.elenco-cose>div,.btn-pieno{transition:none}}

/* ===== ritocchi dopo la QA visiva del giro di mercato ===== */
/* Sei mestieri, sei card: tre per riga, senza buchi */
.cosa-fa .elenco-cose{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cosa-fa .elenco-cose{grid-template-columns:1fr}}
/* Il motto respira su una colonna piu' larga */
.motto p{max-width:none}
/* I tre passi: card affiancate, numero sopra, testo a tutta larghezza */
.pagina-pubblica .tempi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin-left:auto;margin-right:auto}
.pagina-pubblica .tempi li{display:block;background:var(--bianco);border:1px solid var(--linea);border-radius:12px;
  padding:24px 26px;border-top:1px solid var(--linea);counter-increment:passo}
.pagina-pubblica .tempi li::before{content:counter(passo);position:static;display:inline-flex;width:30px;height:30px;
  border-radius:50%;background:var(--inchiostro);color:var(--carta);align-items:center;justify-content:center;
  font-weight:700;font-size:14.5px;margin-bottom:12px}
.pagina-pubblica .tempi{counter-reset:passo}
.pagina-pubblica .tempi b{display:block;margin-bottom:6px}
.pagina-pubblica .tempi span{display:block;line-height:1.55}
@media(max-width:820px){.pagina-pubblica .tempi{grid-template-columns:1fr}}

/* Niente scorrimento orizzontale, mai */
html,body{overflow-x:clip}

/* Testata su telefono: tutto dentro lo schermo */
@media(max-width:520px){
  .testata-pubblica{gap:8px;padding:12px 12px}
  .btn-testata{padding:10px 10px;font-size:13.5px}
  .testata-pubblica .logo{font-size:16px}
  .apri-menu{padding:6px 9px;font-size:18px}
}

/* Card d'ingresso: la CTA primaria e' rossa come nel resto del sito, i link del consenso scorrono nel testo */
.ingresso-card .btn-pieno{background:var(--rosso)}
.ingresso-card .btn-pieno:hover{background:var(--rosso-scuro);box-shadow:0 6px 16px rgba(200,40,28,.25)}
.consenso .link{display:inline;padding:0}

/* ===== secondo giro di critica: coerenza finale ===== */
/* Una sola CTA piena, un solo colore: rossa su tutta la parte pubblica */
.pagina-pubblica .btn-pieno{background:var(--rosso)}
.pagina-pubblica .btn-pieno:hover{background:var(--rosso-scuro)}
.pagina-pubblica .chiusura .btn-pieno{background:var(--carta);color:var(--inchiostro)}
.pagina-pubblica .chiusura .btn-pieno:hover{background:#fff}
/* Una sola scala per i titoli di sezione */
.pagina-pubblica main h2{font-size:clamp(24px,2.6vw,32px)}
.apertura-larga h1{font-weight:600}
/* La riga sulla carta, sotto le CTA di registrazione */
.nota-carta{text-align:center;font-size:13px;color:var(--grigio);margin-top:10px}

/* ===== campo password: occhietto dentro il campo + requisiti rosso/verde ===== */
.campo-password{position:relative;display:block}
.campo-password input{width:100%;padding-right:52px}
.occhio{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;
  cursor:pointer;color:var(--grigio);padding:10px;border-radius:8px;line-height:0;min-height:44px;min-width:44px;
  display:flex;align-items:center;justify-content:center}
.occhio:hover{color:var(--inchiostro);background:#f1efea}
.occhio:focus-visible{outline:2px solid var(--inchiostro);outline-offset:2px}
.requisiti{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.requisiti li{font-size:14px;color:var(--grigio);display:flex;align-items:center;gap:8px;transition:color .2s}
.requisiti li.ok{color:#2f6b3c}
.requisiti li.manca{color:#c8281c}
.req-segno{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:#f0eee9;flex:none;transition:background .2s}
.requisiti li.ok .req-segno{background:var(--verde-chiaro,#eef4ee)}
.requisiti li.manca .req-segno{background:var(--rosso-chiaro,#fdeceb)}

/* ===== accesso con Google / Microsoft ===== */
.accessi-social{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.btn-social{display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;font-weight:600;
  color:var(--inchiostro);background:var(--bianco);border:1px solid var(--linea);border-radius:10px;
  padding:13px 18px;text-decoration:none;min-height:48px}
.btn-social:hover{background:#f6f4ef;border-color:#c9c6bf}
.btn-social svg{flex:none}

/* ===== primo avvio: barra a tappe + pillole di scelta ===== */
.avvio-progresso{display:flex;align-items:center;gap:10px;margin-bottom:30px}
.tappa{display:flex;align-items:center;gap:9px}
.tappa-pallino{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:#f0eee9;color:var(--grigio);font-size:14px;font-weight:700;flex:none;transition:all .2s}
.tappa.attiva .tappa-pallino{background:var(--inchiostro);color:#fff}
.tappa.fatta .tappa-pallino{background:var(--verde-chiaro,#eef4ee);color:#2f6b3c}
.tappa-nome{font-size:14.5px;color:var(--grigio);white-space:nowrap}
.tappa.attiva .tappa-nome{color:var(--inchiostro);font-weight:700}
.tappa-linea{flex:1;height:2px;background:var(--linea);border-radius:2px;min-width:18px}
.tappa-linea.fatta{background:#2f6b3c}
@media(max-width:560px){.tappa-nome{display:none}.tappa.attiva .tappa-nome{display:inline}}

.gruppo-scelte{border:none;padding:0;margin:0}
.gruppo-scelte legend{font-size:15px;color:var(--grigio);margin-bottom:9px;padding:0}
.scelte-riga{display:flex;gap:9px;flex-wrap:wrap}
.scelte-riga.colonna{flex-direction:column}
.scelta-pillola{position:relative;cursor:pointer;display:inline-flex}
.scelta-pillola input{position:absolute;opacity:0;pointer-events:none}
.scelta-pillola span{display:inline-flex;align-items:center;padding:11px 18px;border:1px solid var(--linea);
  border-radius:99px;background:var(--bianco);font-size:15.5px;color:var(--inchiostro);transition:all .15s;min-height:44px}
.scelta-pillola:hover span{border-color:#c9c6bf}
.scelta-pillola input:checked + span{background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}
.scelta-pillola input:focus-visible + span{outline:2px solid var(--inchiostro);outline-offset:2px}
.scelte-riga.colonna .scelta-pillola span{border-radius:12px;width:100%}

/* ===== importazione: le tre strade ===== */
.tre-strade{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.tre-strade{grid-template-columns:1fr}}
.strada{position:relative;display:flex;flex-direction:column;gap:8px}
.strada form{margin-top:auto}
.strada-numero{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--inchiostro);
  color:#fff;align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-bottom:4px}
.zona-file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  border:2px dashed var(--linea);border-radius:12px;padding:22px 14px;cursor:pointer;transition:border-color .15s;
  background:var(--carta,#faf9f7)}
.zona-file:hover{border-color:var(--inchiostro)}
.zona-file input{position:absolute;opacity:0;width:1px;height:1px}
.zona-file-testo{font-size:15.5px;font-weight:600}

/* Sulle pagine di ingresso la bolla di aiuto copriva il bottone su telefono: via. */
body:has(.pagina-ingresso) .bolla-aiuto,
body:has(.pagina-ingresso) .pannello-aiuto{display:none}

/* ===== percorso di avvio: un solo percorso a tappe, una sola azione alla volta ===== */
.percorso-avvio{margin-bottom:26px}
.percorso-testa{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.percorso-testa h2{font-size:18px;margin:0}
.percorso-grande .percorso-testa h2{font-size:22px}
.percorso{list-style:none;margin:0;padding:0}
.percorso-tappa{display:flex;gap:14px;position:relative;padding-bottom:18px}
.percorso-tappa:last-child{padding-bottom:0}
.percorso-tappa::before{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:2px;background:var(--linea)}
.percorso-tappa:last-child::before{display:none}
.percorso-tappa.fatta::before{background:var(--verde,#2f6b3c)}
.percorso-pallino{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:#f0eee9;color:var(--grigio);font-weight:700;font-size:14px;flex:none;z-index:1}
.percorso-tappa.attiva .percorso-pallino{background:var(--inchiostro);color:#fff}
.percorso-tappa.fatta .percorso-pallino{background:var(--verde-chiaro,#eef4ee);color:var(--verde,#2f6b3c)}
.percorso-corpo{display:flex;flex-direction:column;gap:6px;padding-top:4px;min-width:0}
.percorso-titolo{font-weight:700;font-size:16px}
.percorso-tappa.fatta .percorso-titolo{color:var(--grigio);font-weight:500;text-decoration:line-through}
.percorso-tappa:not(.attiva):not(.fatta) .percorso-titolo{color:var(--grigio);font-weight:500}
.percorso-dopo{color:#6e6960}
.percorso-bottone{align-self:flex-start;margin-top:4px}
.percorso-alternative{margin-top:16px}
.btn-testo{background:none;border:none;padding:0;font:inherit;font-size:inherit;color:var(--rosso,#c8281c);
  text-decoration:underline;cursor:pointer}

/* ===== icone leggere nelle card dei moduli ===== */
.elenco-cose.con-icone > div{position:relative}
.icona-cosa{display:flex;width:40px;height:40px;border-radius:10px;background:#f0eee9;color:var(--inchiostro);
  align-items:center;justify-content:center;margin-bottom:12px}
.icona-cosa svg{width:22px;height:22px}

/* sezione "non e' un chatbot" */
.non-chatbot{padding:56px 0 8px}
.non-chatbot h2{text-align:center}

/* CTA dentro la barra della prova */
.btn-demo-attiva{padding:10px 16px;font-size:14.5px;border-radius:8px;min-height:44px;white-space:nowrap}
@media(max-width:700px){.btn-demo-attiva{white-space:normal}}

/* il grassetto DENTRO il testo delle card resta in linea (block e' solo il titolo) */
.elenco-cose span b{display:inline;font-size:inherit;margin:0;color:var(--inchiostro)}

/* il bottone dei 3 mesi nella barra della prova: rosso pieno come in home, sempre leggibile.
   Le regole dei link della barra lo spogliavano (background:none, padding 0): qui si ridefinisce
   tutto con specificita' che vince su .avviso-demo .scorciatoie a. */
.avviso-demo .scorciatoie a.btn-demo-attiva{background:var(--rosso);color:#fff;text-decoration:none;
  padding:9px 16px;border-radius:9px;font-weight:600;font-size:14.5px;min-height:40px}
.avviso-demo .scorciatoie a.btn-demo-attiva:hover{color:#fff;background:var(--rosso-scuro)}

/* la circolare si legge come un foglio: a capo veri, tipografia da lettera */
.testo-circolare{white-space:pre-line;line-height:1.65;font-size:15.5px}


/* ===== impostazioni: schede larghe, titoli interi, icona leggera ===== */
.schede-impostazioni{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.schede-impostazioni .scheda b{font-size:18px;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.schede-impostazioni .scheda{display:flex;flex-direction:column;gap:6px;padding:20px}
.schede-impostazioni .icona-cosa{margin-bottom:4px}

/* Ogni bottone non ovvio spiega sotto, tra parentesi, cosa succede premendo:
   chi lo vede per la prima volta non deve indovinare. */
.azione-spiegata{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.nota-bottone{display:block;font-size:13.5px;color:var(--grigio);text-align:center;line-height:1.35;max-width:200px}

/* ===== pagina confronto: tabella leggibile, colonna nostra evidenziata ===== */
.confronto-tabella,.confronto-schede{padding:44px 0 8px}
.confronto-tabella h2,.confronto-schede h2{text-align:center}
.scorri-tabella{overflow-x:auto;margin-top:22px;-webkit-overflow-scrolling:touch}
.tavola-confronto{border-collapse:collapse;width:100%;min-width:860px;background:var(--bianco);
  border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.tavola-confronto th,.tavola-confronto td{padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--linea);font-size:14.5px;line-height:1.5}
.tavola-confronto tr:first-child th{font-size:15.5px;background:#f6f4ef}
.tavola-confronto tr:last-child th,.tavola-confronto tr:last-child td{border-bottom:none}
.tavola-confronto th:first-child{width:15%;color:var(--grigio);font-weight:600}
.tavola-confronto .col-nostra{background:var(--rosso-chiaro,#fdeceb)}
.tavola-confronto tr:first-child .col-nostra{color:var(--rosso);font-weight:800}
.fonti-confronto{max-width:820px;margin:30px auto 40px;line-height:1.7}

/* tre strade per la casella, note comprese */
.tre-caselle{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:760px){.tre-caselle{grid-template-columns:1fr}}
.tre-caselle .btn-pieno,.tre-caselle .btn-linea{display:flex;flex-direction:column;gap:3px;align-items:center;padding:14px 10px}
.nota-bottone-chiara{display:block;font-size:13.5px;font-weight:400;color:rgba(255,255,255,.95);text-align:center}
.tre-caselle .btn-linea .nota-bottone{max-width:none}

/* ===== Oggi: barra dei filtri per tipo di attivita' ===== */
.filtri-oggi{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 20px;position:sticky;top:0;z-index:5;
  background:var(--carta,#faf9f7);padding:10px 0;border-bottom:1px solid var(--linea)}
.filtri-oggi .filtro{font:inherit;font-size:14.5px;border:1px solid var(--linea);background:var(--bianco);
  border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;color:var(--inchiostro);min-height:40px}
.filtri-oggi .filtro span{color:var(--grigio);font-size:13px;margin-left:2px}
.filtri-oggi .filtro:hover{border-color:#c9c6bf}
.filtri-oggi .filtro.attivo{background:var(--inchiostro);color:#fff}
.filtri-oggi .filtro.attivo span{color:rgba(255,255,255,.7)}

/* automazioni: doppio interruttore e cartellino delle azioni mai delegate */
.interruttori-regola{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.tag-clic{font-size:13.5px;font-weight:600;color:var(--grigio);border:1px solid var(--linea);
  border-radius:99px;padding:7px 13px;white-space:nowrap;background:#f6f4ef}
@media(max-width:640px){.interruttori-regola{align-items:flex-start}}

/* il prezzo si legge intero: 149 grande, +IVA piccolo ma visibile accanto */
.prezzo-iva{font-size:.45em;font-weight:600;color:var(--grigio);vertical-align:middle}

/* ===== calcolatore del tempo: tre campi, conto dichiarato ===== */
.calcolo-sezione{padding:64px 0 20px}
.calcolo-sezione h2{text-align:center}
.calcolo-sezione .sotto-titolo-sezione{text-align:center;max-width:560px;margin:10px auto 30px}
.calcolo-scatola{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:stretch;
  background:var(--bianco);border:1px solid var(--linea);border-radius:16px;padding:28px;max-width:860px;margin:0 auto}
.calcolo-campi{display:flex;flex-direction:column;gap:16px}
.calcolo-campi label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--inchiostro);font-weight:600}
.calcolo-campi input{font:inherit;font-size:18px;padding:10px 14px;border:1.5px solid var(--linea-scura,#c9c6bf);
  border-radius:8px;max-width:140px;background:var(--carta)}
.calcolo-campi input:focus{outline:2.5px solid var(--inchiostro);outline-offset:1px}
.calcolo-esito{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:22px}
.calcolo-ore{font-size:19px;margin:0}
.calcolo-ore b{display:block;font-size:56px;font-weight:800;line-height:1.05;color:var(--rosso)}
.calcolo-dettaglio{font-size:14.5px;color:var(--grigio);margin:8px 0 0;max-width:200px}
.calcolo-formula{max-width:860px;margin:14px auto 0}
.calcolo-formula summary{cursor:pointer;font-weight:600;padding:12px 0;color:var(--grigio)}
.calcolo-formula p{color:var(--grigio);line-height:1.7;max-width:720px}
@media(max-width:760px){.calcolo-scatola{grid-template-columns:1fr;padding:20px}
  .calcolo-campi input{max-width:100%}}