/* HYSAD — Pagine contenuto (Guide, articoli, strumenti).
   Base condivisa: topbar/nav identici alle altre pagine (copiati da
   sul-campo.html), tipografia editoriale, calcolatore.
   Convenzioni: tutte le classi nuove hanno prefisso hc*, per non
   collidere con hysad-desktop-80.css, che su desktop con mouse forza con
   !important h1, h2, section, .pageHero, .finalCta, .card, .label ecc.
   Dove quelle regole generiche colpiscono comunque (h1, h2, section) le
   si sovrascrive qui con selettori a classe + !important.
   Accent per pagina: --c1 / --c2 impostati inline sul <body>. */

:root{--bg:#061110;--text:#eef7f5;--muted:#a8c2bd;--line:rgba(184,255,236,.18);--brand:#4fa687;--accent:#4EC9B0;--max:1240px;--header:72px}
*,*::before,*::after{box-sizing:border-box}
/* hidden deve vincere anche su elementi con display:grid/flex impostato da classe */
[hidden]{display:none!important}
html{scroll-behavior:smooth}html,body{max-width:100%;overflow-x:clip}
body{--c1:#8fffd2;--c2:#4EC9B0;margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
.bgCanvas{position:fixed;inset:0;z-index:0;opacity:.22;width:100%!important;height:100%!important;max-width:100vw!important}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:3px 3px;opacity:.05}
.site{position:relative;z-index:2}
.readProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:0 0 14px rgba(78,201,176,.45);transition:width .1s linear}

/* ---- Topbar (identica alle altre pagine) ---- */
.topbar{height:var(--header);position:fixed;top:0;left:0;right:0;z-index:80;background:linear-gradient(180deg,rgba(6,17,16,.88),rgba(6,17,16,.58));backdrop-filter:blur(18px);border-bottom:1px solid rgba(184,255,236,.12)}
.nav{height:var(--header);display:flex;align-items:center;justify-content:center;gap:18px}
.homeLogo{position:absolute;left:24px;height:48px;width:150px;display:flex;align-items:center;justify-content:flex-start}
.homeLogo img{max-height:36px;max-width:144px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 14px rgba(255,255,255,.10))}
.navLinks{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.045);max-width:min(1060px,calc(100vw - 240px));min-width:0;overflow:hidden}
.navLinks a{font-size:12.5px;line-height:1;white-space:nowrap;padding:12px 13px;border-radius:999px;font-weight:900;background:rgba(255,255,255,.034);border:1px solid rgba(184,255,236,.13);transition:.22s;min-width:0}
.navLinks a span{background:linear-gradient(135deg,var(--c1),#fff 48%,var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.navLinks a:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.menuBtn{display:none;background:transparent;color:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
@media(min-width:1181px){:root{--header:80px}.navLinks{padding:8px;gap:9px;max-width:min(1120px,calc(100vw - 260px))}.navLinks a{font-size:13.5px;padding:13px 15px}.homeLogo{height:52px;width:164px}.homeLogo img{max-height:40px;max-width:158px}}

/* ---- Contenitori ---- */
.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}
.hcWrap{width:min(var(--max),calc(100% - 48px));margin:0 auto}
.hcNarrow{width:min(820px,calc(100% - 48px));margin:0 auto}
main{position:relative}

/* ---- Breadcrumb visibile (speculare al BreadcrumbList) ---- */
.hcCrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 22px;padding:0;list-style:none;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:rgba(168,194,189,.75)}
.hcCrumbs li{display:flex;align-items:center;gap:8px}
.hcCrumbs li+li::before{content:"/";color:rgba(168,194,189,.4)}
.hcCrumbs a{color:rgba(218,239,234,.78);transition:color .18s}
.hcCrumbs a:hover{color:var(--c1)}
.hcCrumbs [aria-current]{color:var(--c1)}

/* ---- Hero ---- */
.hcHero{position:relative;padding:calc(var(--header) + 58px) 0 clamp(34px,4vw,54px);overflow:hidden}
.hcHero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 0%,color-mix(in srgb,var(--c1),transparent 86%),transparent 42%);pointer-events:none;z-index:-1}
.hcKicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c1),transparent 62%);background:color-mix(in srgb,var(--c1),transparent 92%);font-size:11.5px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:var(--c1)}
.hcHero h1,.hcHero h1.hcTitle{margin:0;font-size:clamp(32px,4.6vw,58px)!important;line-height:1.02!important;letter-spacing:-.045em;font-weight:950;text-wrap:balance;max-width:980px}
.hcHero h1 .hcGrad{background:linear-gradient(135deg,var(--c1),#fff 55%,var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hcLead{max-width:760px;margin:22px 0 0;color:var(--muted);font-size:clamp(16px,1.6vw,19.5px);line-height:1.6}

/* ---- Layout articolo: testo + indice laterale ---- */
.hcLayout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(34px,5vw,72px);align-items:start;padding-bottom:clamp(40px,5vw,70px)}
.hcToc{position:sticky;top:calc(var(--header) + 26px);border-left:1px solid rgba(184,255,236,.14);padding-left:18px}
.hcToc p{margin:0 0 12px;font-size:11px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:rgba(168,194,189,.7)}
.hcToc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hcToc a{display:block;padding:7px 10px;border-radius:10px;font-size:13px;font-weight:700;line-height:1.35;color:rgba(218,239,234,.62);transition:.18s}
.hcToc a:hover{background:rgba(255,255,255,.045);color:#eef7f5}
.hcToc a.on{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 2px 0 0 var(--c1)}

/* ---- Tipografia editoriale ---- */
.hcProse{min-width:0;font-size:clamp(16px,1.3vw,17.5px);line-height:1.78;color:rgba(224,242,237,.88)}
.hcProse>*:first-child{margin-top:0}
.hcProse h2,.hcProse h2.hcH2{margin:clamp(46px,5vw,64px) 0 16px!important;font-size:clamp(24px,2.3vw,31px)!important;line-height:1.14!important;letter-spacing:-.03em;color:#f4fbf9;scroll-margin-top:calc(var(--header) + 24px);text-wrap:balance}
.hcProse h2::after{content:"";display:block;width:44px;height:2px;margin-top:14px;border-radius:999px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.hcProse h3{margin:32px 0 10px;font-size:clamp(18px,1.6vw,20.5px);line-height:1.3;letter-spacing:-.01em;color:#f1faf7}
.hcProse p{margin:0 0 18px}
.hcProse strong{color:#fff;font-weight:800}
.hcProse a{color:var(--c1);border-bottom:1px solid color-mix(in srgb,var(--c1),transparent 60%);transition:border-color .18s}
.hcProse a:hover{border-color:var(--c1)}
.hcProse ul,.hcProse ol{margin:0 0 20px;padding-left:22px}
.hcProse li{margin:0 0 9px;padding-left:4px}
.hcProse li::marker{color:var(--c1);font-weight:900}
.hcProse table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:.92em;line-height:1.5}
.hcProse th,.hcProse td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(184,255,236,.12)}
.hcProse th{font-size:11.5px;font-weight:950;letter-spacing:.1em;text-transform:uppercase;color:var(--c1);border-bottom-color:color-mix(in srgb,var(--c1),transparent 60%)}
.hcProse tbody th{border-bottom-color:rgba(184,255,236,.12);white-space:nowrap}
.hcNw{white-space:nowrap}
.hcTableWrap{overflow-x:auto;margin:0 0 24px;border:1px solid rgba(184,255,236,.12);border-radius:18px;background:rgba(255,255,255,.025)}
.hcTableWrap table{margin:0}
.hcTableWrap tr:last-child td{border-bottom:0}

/* Box: nota, allerta, sintesi, checklist */
.hcBox{position:relative;margin:26px 0;padding:22px 24px;border:1px solid rgba(184,255,236,.2);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));overflow:hidden}
.hcBox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--c1),var(--c2))}
.hcBox>*:last-child{margin-bottom:0}
.hcBoxTitle{display:block;margin:0 0 8px;font-size:11.5px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:var(--c1)}
.hcBox.alert{border-color:rgba(255,155,155,.42);background:linear-gradient(160deg,rgba(255,155,155,.1),rgba(255,155,155,.03))}
.hcBox.alert::before{background:linear-gradient(180deg,#ffd0a0,#ff9b9b)}
.hcBox.alert .hcBoxTitle{color:#ffb4a8}
.hcBox.key p{color:#f1faf7;font-weight:650;font-size:1.04em;line-height:1.62}
.hcBox a.hcTel{font-weight:950;color:#fff;border:0;white-space:nowrap}
.hcChecklist{list-style:none!important;padding-left:0!important}
.hcChecklist li{position:relative;padding-left:32px!important}
.hcChecklist li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:6px;border:2px solid var(--c1);box-shadow:0 0 12px color-mix(in srgb,var(--c1),transparent 70%)}
.hcSteps{counter-reset:hcStep;list-style:none!important;padding-left:0!important}
.hcSteps>li{counter-increment:hcStep;position:relative;padding-left:48px!important;margin-bottom:16px!important}
.hcSteps>li::before{content:counter(hcStep);position:absolute;left:0;top:.1em;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:14px;font-weight:950;color:#06100e;background:linear-gradient(135deg,var(--c1),var(--c2))}

/* ---- Card griglia (hub Guide, "leggi anche") ---- */
.hcCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.hcCard{position:relative;display:flex;flex-direction:column;gap:12px;padding:32px 30px 26px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));overflow:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s}
.hcCard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--k1,var(--c1)),var(--k2,var(--c2)))}
.hcCard:hover{transform:translateY(-6px);border-color:rgba(184,255,236,.34);box-shadow:0 28px 64px rgba(0,0,0,.34)}
.hcCardTag{font-size:11px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:var(--k1,var(--c1))}
.hcCard h2,.hcCard h3{margin:0!important;font-size:clamp(20px,1.9vw,25px)!important;line-height:1.16!important;letter-spacing:-.03em;text-wrap:balance;background:linear-gradient(135deg,var(--k1,var(--c1)),#fff 60%,var(--k2,var(--c2)));-webkit-background-clip:text;background-clip:text;color:transparent}
.hcCard p{margin:0;flex:1;color:var(--muted);font-size:15px;line-height:1.62}
.hcGo{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;font-weight:950;letter-spacing:.1em;text-transform:uppercase;color:#eef7f5}
.hcGo i{font-style:normal;color:var(--k1,var(--c1));transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.hcCard:hover .hcGo i{transform:translateX(6px)}
.hcCard.feature{grid-column:1/-1}

/* ---- Sezioni pagina ---- */
section.hcSec,.hcSec{padding:clamp(44px,5vw,72px) 0!important}
/* FAQ degli articoli: allineate alla colonna del testo, non centrate */
.hcFaqCol .hyFaqList{max-width:none;margin:0}
@media(min-width:1021px){.hcFaqCol{width:calc(100% - 260px - clamp(34px,5vw,72px))}}
/* L'hero deve scendere sotto la topbar fissa: vince su section.hcSec */
section.hcSec.hcHero{padding:calc(var(--header) + 58px) 0 clamp(34px,4vw,54px)!important}
.hcProse>h2:first-child{margin-top:0!important}
.hcSecHead{margin:0 0 26px}
.hcSecHead h2,.hcSecHead h2.hcH2{margin:0!important;font-size:clamp(26px,3vw,40px)!important;line-height:1.08!important;letter-spacing:-.04em;text-wrap:balance}
.hcSecHead p{max-width:720px;margin:12px 0 0;color:var(--muted);line-height:1.65;font-size:16px}

/* ---- CTA finale ---- */
.hcCta{position:relative;overflow:hidden;margin:clamp(20px,3vw,40px) 0 clamp(64px,8vw,100px);border-radius:34px;border:1px solid color-mix(in srgb,var(--c2),transparent 62%);background:radial-gradient(circle at 18% 0%,color-mix(in srgb,var(--c1),transparent 86%),transparent 40%),rgba(255,255,255,.035);padding:clamp(34px,4.5vw,52px);text-align:center}
.hcCta h2,.hcCta h2.hcH2{margin:0 0 14px!important;font-size:clamp(26px,3.4vw,44px)!important;line-height:1.04!important;letter-spacing:-.045em;text-wrap:balance}
.hcCta p{max-width:640px;margin:0 auto 26px;color:var(--muted);font-size:17px;line-height:1.62}
.hcBtns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hcBtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c2),transparent 25%);background:linear-gradient(135deg,var(--c1),var(--c2));color:#06100e;font-size:13.5px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .24s,box-shadow .24s;font-family:inherit}
.hcBtn:hover{transform:translateY(-3px);box-shadow:0 18px 44px color-mix(in srgb,var(--c2),transparent 78%)}
.hcBtn.ghost{background:rgba(255,255,255,.04);color:#eef7f5;border-color:rgba(184,255,236,.24)}
.hcBtn.ghost:hover{border-color:var(--c1)}
.hcBtn:focus-visible,.hcCard:focus-visible{outline:2px solid var(--c1);outline-offset:3px}

/* ==== Simulatore v3 (strumenti/costo-del-fermo.html) ====
   Una colonna (.hcNarrow, 820px) per hero e domande, caselle ampie, un
   riepilogo ancorato in fondo al modulo (.hcDock) e la stima estesa sotto
   (.hcReport, larga quanto header e footer), senza scroll interni.
   Regole di stile dello strumento: pesi 400/600/700 (800+ su Windows diventa
   Segoe UI Black), maiuscolo solo su .hcBtn, raggi 16 / 24 / 999.
   Classi da non usare (hysad-desktop-80.css le forza con !important):
   .field .formRow .card .label .metric .col .stat .btn .cta .grid .stats */

/* Hero della pagina strumento: più compatto, così la prima domanda si vede subito */
section.hcSec.hcHero.hcToolHero{padding:calc(var(--header) + 32px) 0 24px!important}
.hcToolHero .hcCrumbs{margin-bottom:16px}
.hcToolHero .hcKicker{margin-bottom:14px}
.hcToolHero .hcLead{max-width:760px;margin-top:16px;font-size:clamp(16px,1.35vw,17px);line-height:1.6}
.hcToolDate{margin:10px 0 0;color:rgba(168,194,189,.8);font-size:13.5px;line-height:1.4}

/* Modulo: niente card, le domande stanno sul fondo della pagina */
.hcForm{margin:0;color-scheme:dark}
.hcFormBody{container:hcform/inline-size}
.hcFormHeadRow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.hcIntroPriv{max-width:520px;margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.hcFormStep{padding:36px 0 8px;border-top:1px solid rgba(184,255,236,.12)}
.hcFormHead+.hcFormStep{padding-top:28px;border-top:0}
.hcForm h2.hcFormStepTitle{margin:0 0 20px!important;color:#f4fbf9;font-size:22px!important;line-height:1.25!important;font-weight:700;letter-spacing:-.015em!important;text-transform:none}
.hcFormStepIntro{margin:-12px 0 22px;color:var(--muted);font-size:15.5px;line-height:1.55}

/* Campo numerico: etichetta, aiuto sopra, casella, errore */
.hcField{min-width:0;margin:0 0 28px}
.hcField>label,.hcQ>legend{display:block;margin:0;padding:0;color:#f1faf7;font-size:17px;line-height:1.35;font-weight:700;transition:color .2s}
.hcField:focus-within>label{color:#c8e7ff}
.hcHint{max-width:560px;margin:4px 0 0;color:rgba(168,194,189,.95);font-size:15px;line-height:1.5}
.hcInput{display:flex;align-items:center;width:min(100%,398px);min-height:58px;margin-top:10px;border:1px solid rgba(184,255,236,.22);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035)),#0b1a19;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .2s,box-shadow .2s,background .2s}
.hcInput+.hcHint{margin-top:8px}
.hcInput input,.hcInput select{flex:1;min-width:0;width:100%;height:56px;margin:0;padding:0 10px 0 18px;border:0;background:transparent;color:#fff;font-family:inherit;font-size:18px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;outline:none;-moz-appearance:textfield;appearance:none}
.hcInput input::placeholder{color:rgba(168,194,189,.74);font-weight:400}
.hcInput input::-webkit-outer-spin-button,.hcInput input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hcUnit{flex:none;padding:0 18px 0 0;color:rgba(168,194,189,.9);font-size:15px;font-weight:600;white-space:nowrap}
.hcInput:focus-within{border-color:rgba(200,231,255,.7);background:linear-gradient(180deg,rgba(200,231,255,.09),rgba(255,255,255,.045)),#0b1a19;box-shadow:0 0 0 4px rgba(200,231,255,.14),inset 0 1px 0 rgba(255,255,255,.08);outline:2px solid transparent;outline-offset:2px}
/* il controllo a fuoco non deve finire sotto l'intestazione fissa */
.hcForm input,.hcForm select,.hcForm button,.hcForm summary{scroll-margin-top:calc(var(--header) + 16px)}
.hcInput.isInvalid,.hcInput:has(input[aria-invalid="true"]){border-color:#ff9b9b;box-shadow:0 0 0 4px rgba(255,155,155,.14)}
.hcErr{margin:8px 0 0;color:#ffb4a8;font-size:14px;line-height:1.45;font-weight:600}
.hcSelect{width:min(100%,560px)}
.hcSelect select{padding:0 46px 0 18px;font-size:17px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#c8e7ff 50%),linear-gradient(135deg,#c8e7ff 50%,transparent 50%);background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.hcSelect select option{background:#0b1c1a;color:#eef7f5}

/* Coppie di campi: affiancate solo se c'è spazio, allineate con la subgrid */
.hcPair{display:grid;grid-template-columns:minmax(0,1fr);column-gap:24px;align-items:start}
@container hcform (min-width:560px){
  .hcPair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hcPair>.hcField .hcInput{width:100%}
}
@supports (grid-template-rows:subgrid){
  .hcPair>.hcField{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .hcPair>.hcField>label{grid-row:1}
  .hcPair>.hcField>.hcHint{grid-row:2}
  .hcPair>.hcField>.hcInput{grid-row:3;align-self:start}
  .hcPair>.hcField>.hcErr{grid-row:4}
}
.hcPair+.hcCallout{margin:-14px 0 28px}

/* Domande a scelta: radio nativi visibili, una riga per opzione */
.hcQ{min-width:0;margin:0 0 28px;padding:0;border:0}
.hcQ>legend{margin:0 0 12px}
.hcQ>.hcHint{margin:-6px 0 12px}
.hcChoices{display:grid;gap:8px;max-width:560px}
.hcChoices.two{max-width:none}
@container hcform (min-width:480px){.hcChoices.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}}
.hcChoice{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 18px 12px 16px;border:1px solid rgba(184,255,236,.18);border-radius:16px;background:#0c1b1a;color:#dcece8;font-size:16px;line-height:1.3;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.hcChoice input{flex:none;width:20px;height:20px;margin:0;accent-color:#c8e7ff;cursor:pointer}
.hcChoiceTxt{flex:1;min-width:0}
.hcChoicePct{flex:none;margin-left:auto;color:var(--muted);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.hcChoice:has(input:checked){border-color:rgba(200,231,255,.6);background:linear-gradient(rgba(200,231,255,.08),rgba(200,231,255,.08)),#0c1b1a;color:#fff}
.hcChoice input:focus-visible{outline:2px solid #c8e7ff;outline-offset:2px}
@supports selector(:has(*)){
  .hcChoice:has(input:focus-visible){outline:2px solid #c8e7ff;outline-offset:2px}
  .hcChoice input:focus-visible{outline:none}
}
.hcQWarn{margin:-14px 0 28px}
.hcSkip{margin:-20px 0 24px}

/* Nota con filo laterale: l'unico riquadro informativo dello strumento */
.hcCallout{position:relative;margin:14px 0 0;padding:12px 16px 12px 18px;border:1px solid rgba(184,255,236,.12);border-radius:16px;background:rgba(255,255,255,.035);color:#dcece8;font-size:15px;line-height:1.5}
.hcCallout::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:999px;background:linear-gradient(180deg,#c8e7ff,#86d7bd)}
.hcCallout.warn{border-color:rgba(255,208,160,.28);background:rgba(255,208,160,.06);color:#ffe2c4}
.hcCallout.warn::before{background:linear-gradient(180deg,#ffd0a0,#ff9b9b)}
ul.hcCallout{padding-left:34px}
ul.hcCallout li+li{margin-top:6px}
.hcField>.hcCallout{margin-top:12px}

/* Apri/chiudi (ipotesi di calcolo, formule): stesso disegno delle FAQ */
.hcDisc{margin:8px 0 0;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03);transition:border-color .2s}
.hcDisc[open]{border-color:rgba(200,231,255,.45)}
.hcDisc>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 20px;list-style:none;cursor:pointer;color:#eef7f5;font-size:16px;line-height:1.35;font-weight:700}
.hcDisc>summary::-webkit-details-marker{display:none}
.hcDisc>summary::after{content:"+";content:"+" / "";flex:none;display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#c8e7ff;font-size:16px;font-weight:600;line-height:1;transition:transform .25s}
.hcDisc[open]>summary::after{transform:rotate(45deg)}
.hcDisc>summary:focus-visible{outline:2px solid #c8e7ff;outline-offset:-2px;border-radius:16px}
.hcDiscT{padding:14px 0}
.hcDiscSub{margin-left:8px;color:var(--muted);font-size:14px;font-weight:400}
.hcDiscBody{padding:4px 20px 20px}
.hcDiscBody>.hcPair>.hcField:last-child,.hcDiscBody .hcField{margin-bottom:0}
.hcHow ol{margin:0;padding-left:22px;color:rgba(224,242,237,.9);font-size:15px;line-height:1.65;font-variant-numeric:tabular-nums}
.hcHow li+li{margin-top:8px}

/* Pulsanti secondari */
.hcGhostBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border:1px solid rgba(200,231,255,.3);border-radius:999px;background:rgba(255,255,255,.035);color:#eef7f5;font-family:inherit;font-size:14.5px;line-height:1.2;font-weight:600;text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
.hcTextBtn{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:#c8e7ff;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(200,231,255,.45);text-underline-offset:4px;transition:text-decoration-color .2s}
@media(hover:hover) and (pointer:fine){
  .hcGhostBtn:hover{border-color:rgba(200,231,255,.6);background:rgba(200,231,255,.06)}
  .hcTextBtn:hover{text-decoration-color:#c8e7ff}
  .hcChoice:hover{border-color:rgba(184,255,236,.34)}
}
.hcGhostBtn:focus-visible,.hcTextBtn:focus-visible{outline:2px solid #c8e7ff;outline-offset:3px;border-radius:999px}
.hcResetRow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:20px}
#simReset{color:rgba(218,239,234,.8);text-decoration-color:rgba(218,239,234,.35)}
.hcUndo{display:flex;align-items:center;gap:10px;margin:0;color:#dcece8;font-size:15px}

/* Riepilogo ancorato: in fondo al modulo, resta in vista mentre si compila */
.hcDock{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;min-height:56px;margin-top:24px;padding:12px 12px 12px 20px;border:1px solid rgba(200,231,255,.26);border-radius:16px;background:rgba(7,20,19,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 16px 44px rgba(0,0,0,.45)}
.hcDock.is-live{position:sticky;bottom:16px;z-index:30;min-height:72px;animation:hcDockIn .18s ease-out}
@keyframes hcDockIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hcDockTxt{min-width:0}
.hcDockStatus{margin:0;color:#dcece8;font-size:14px;line-height:1.35;font-weight:600}
.hcDockStatus.empty{color:var(--muted);font-size:15px;font-weight:400}
.hcDockStatus.ok{color:#bff3dd}
.hcDockStatus.part,.hcDockStatus.chk{color:#ffe0c2}
.hcDockStatus.bad{color:#ffb4a8}
.hcDockStatus .hcTextBtn{display:inline-flex;min-height:32px;padding:0 2px;font-size:inherit}
.hcDockFig{margin:2px 0 0;color:var(--muted);font-size:15px;line-height:1.2}
.hcDockNum{color:#fff;font-size:26px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hcDockNum.isLong{font-size:22px}
.hcDockPer{color:#dcece8;font-size:15px}
.hcDockOnce{margin-left:6px;color:var(--muted);font-size:15px}
.hcDockDay{display:grid;gap:2px;margin:0;text-align:right}
.hcDockDay span{color:var(--muted);font-size:13.5px}
.hcDockDay b{color:#fff;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.hcShowM{display:none}
html:has(.hcDock.is-live){scroll-padding-bottom:112px}

/* Stima estesa: sotto il modulo, larga quanto header e footer */
.hcReportWrap{width:min(1080px,var(--max),calc(100% - 48px));margin:40px auto 0}
.hcReport{position:relative;overflow:hidden;container-type:inline-size;padding:32px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));scroll-margin-top:calc(var(--header) + 16px);outline:none}
.hcReport::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#c8e7ff,#86d7bd)}
.hcRepHead{margin:0 0 24px}
.hcReport h2.hcRepTitle{margin:0 0 10px!important;color:#f4fbf9;font-size:26px!important;line-height:1.2!important;font-weight:700;letter-spacing:-.02em}
.hcRepStatus{position:relative;margin:0;padding-left:14px;color:#dcece8;font-size:15px;line-height:1.5;font-weight:600}
.hcRepStatus::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:999px;background:#86d7bd}
.hcRepStatus.ok{color:#bff3dd}
.hcRepStatus.part,.hcRepStatus.chk{color:#ffe0c2}
.hcRepStatus.part::before,.hcRepStatus.chk::before{background:#ffd0a0}
.hcRepStatus.bad{color:#ffb4a8}
.hcRepStatus.bad::before{background:#ff9b9b}
.hcRepStatus.ex::before{background:linear-gradient(180deg,#c8e7ff,#86d7bd)}
.hcRepStatus .hcTextBtn{display:flex;margin-top:2px;padding:0}
.hcRepGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@container (min-width:760px){.hcRepGrid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px}}
.hcRepLabel{margin:0;color:var(--muted);font-size:16px}
.hcRepNum{margin:4px 0 0;color:#fff;font-size:56px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hcRepNum.isLong{font-size:46px}
.hcRepSub{max-width:520px;margin:10px 0 22px;color:var(--muted);font-size:16px;line-height:1.55}
.hcRepSub[hidden]+.hcScen{margin-top:26px}
.hcScen,.hcParts{width:100%;border-collapse:collapse;font-size:16px}
.hcParts{font-size:15px}
.hcScen caption,.hcParts caption{margin:0 0 10px;color:#f1faf7;font-size:16px;font-weight:700;text-align:left}
.hcScen thead th,.hcParts thead th{padding:0 0 8px;border-bottom:1px solid rgba(184,255,236,.18);color:var(--muted);font-size:13.5px;font-weight:600;text-align:left}
.hcScen thead th:last-child,.hcParts thead th:not(:first-child){text-align:right}
.hcScen tbody th,.hcScen tbody td,.hcParts tbody th,.hcParts tbody td{padding:13px 0;border-bottom:1px solid rgba(184,255,236,.1);vertical-align:middle}
.hcScen tbody th,.hcParts tbody th{color:#dcece8;font-weight:600;text-align:left}
.hcScenH{display:block;margin-top:2px;color:var(--muted);font-size:13.5px;font-weight:400}
.hcScen td,.hcParts td{color:#fff;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.hcParts td{width:100px;padding-left:12px}
.hcParts tfoot th,.hcParts tfoot td{padding:13px 0 0;border-top:1px solid rgba(184,255,236,.22);color:#fff;font-weight:700;text-align:left}
.hcParts tfoot td{padding-left:12px;text-align:right}
.hcParts .hcNil,.hcNil{color:rgba(168,194,189,.95);font-weight:400}
.hcScenNote{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.hcRepSave{position:relative;margin:20px 0 0;padding-left:16px;color:#eef7f5;font-size:15.5px;line-height:1.55}
.hcRepSave::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:999px;background:linear-gradient(180deg,#c8e7ff,#86d7bd)}
.hcRepSave strong{color:#c8e7ff;font-weight:700}
.hcReport>.hcCallout,.hcReport>.hcReview,.hcReport>.hcDisc,.hcReport>.hcRepExcl,.hcReport>.hcRepActions{margin-top:24px}
.hcReview{padding-top:24px;border-top:1px solid rgba(184,255,236,.12)}
.hcReview h3{margin:0 0 16px;color:#f4fbf9;font-size:18px;font-weight:700}
.hcReviewGrid{display:grid;gap:24px}
@container (min-width:760px){.hcReviewGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hcReviewBlock h4{margin:0 0 8px;color:#eef7f5;font-size:15px;font-weight:700}
.hcReviewBlock ul{margin:0 0 4px;padding:0;list-style:none;color:var(--muted);font-size:14.5px;line-height:1.55}
.hcReviewBlock li+li{margin-top:2px}
.hcRepExcl{margin-bottom:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.hcRepExcl a{color:#c8e7ff;text-underline-offset:3px}
.hcRepActions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.hcRepActions .hcBtn{min-height:50px}
/* Stampa/PDF: secondo solo alla richiesta di parere, ma ben visibile */
.hcBtn.hcPrintCta{background:linear-gradient(135deg,rgba(200,231,255,.13),rgba(134,215,189,.07));color:#f4fbf9;border-color:color-mix(in srgb,var(--c1),transparent 40%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(200,231,255,.06)}
.hcBtn.hcPrintCta:hover{border-color:var(--c1);background:linear-gradient(135deg,rgba(200,231,255,.2),rgba(134,215,189,.11));box-shadow:0 18px 44px color-mix(in srgb,var(--c1),transparent 82%),inset 0 1px 0 rgba(255,255,255,.1)}
.hcPrintIco{flex:none;width:19px;height:19px;color:var(--c1)}
.hcRepPriv{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.hcCopied{min-height:1.4em;margin:8px 0 0;color:#c8e7ff;font-size:14px;font-weight:600}

/* Solo per i lettori di schermo */
.hcSrOnly{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Desktop touch (≥1181px senza desktop-80): stima più ariosa */
@media(min-width:1181px){.hcReport{padding:40px}.hcRepNum{font-size:60px}.hcRepNum.isLong{font-size:50px}}
@media(min-width:1181px) and (hover:hover) and (pointer:fine){.hcReport{padding:32px}.hcRepNum{font-size:56px}.hcRepNum.isLong{font-size:46px}.hcCta{border-radius:24px}}

/* Puntatore touch: bersagli più alti */
@media(pointer:coarse){
  .hcInput{min-height:60px}
  .hcInput input,.hcInput select{height:58px}
  .hcChoice{min-height:60px}
  .hcGhostBtn,.hcTextBtn{min-height:48px}
  .hcDisc>summary{min-height:56px}
  .hcDock.is-live{bottom:20px;min-height:80px}
  .hcDockLink{min-height:48px}
  .hcForm:has(input[type="text"]:focus) .hcDock.is-live{position:static}
}

/* Mobile */
@media(max-width:720px){
  section.hcSec.hcHero.hcToolHero{padding:calc(var(--header) + 28px) 0 20px!important}
  .hcToolHero .hcKicker{margin-bottom:12px}
  .hcToolHero .hcLead{font-size:16px;line-height:1.55}
  .hcReportWrap{width:calc(100% - 34px);margin-top:32px}
  .hcFormHeadRow{display:grid;gap:10px}
  .hcFormHeadRow .hcGhostBtn{width:100%;min-height:48px}
  .hcFormStep{padding-top:28px}
  .hcForm h2.hcFormStepTitle{font-size:20px!important}
  .hcFormStepIntro{font-size:15px}
  .hcField,.hcQ{margin-bottom:24px}
  .hcField>label,.hcQ>legend{font-size:16px}
  .hcHint{font-size:14.5px}
  .hcInput{width:100%;min-height:56px}
  .hcInput input{padding:0 10px 0 16px;font-size:17px}
  .hcUnit{padding-right:16px;font-size:14.5px}
  .hcChoice{font-size:15.5px}
  .hcChoicePct{font-size:14.5px}
  .hcDock{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:10px 10px 10px 16px}
  .hcDock.is-live{bottom:10px;min-height:62px}
  .hcDockDay{display:none!important}
  .hcDockStatus{font-size:13px}
  .hcDockNum{font-size:22px}
  .hcDockNum.isLong{font-size:19px}
  .hcDockPer{font-size:14px}
  .hcDockOnce{font-size:13.5px}
  .hcHideM{display:none}
  .hcShowM{display:inline}
  .hcReport{padding:22px 18px}
  .hcReport h2.hcRepTitle{font-size:22px!important}
  .hcRepNum{font-size:44px}
  .hcRepNum.isLong{font-size:36px}
  .hcScen{font-size:15px}
  .hcParts td{width:88px}
  .hcRepActions{flex-direction:column;align-items:stretch}
  .hcRepActions .hcBtn{width:100%;min-height:52px}
  .hcRepActions .hcTextBtn{justify-content:center;min-height:48px}
  html:has(.hcDock.is-live){scroll-padding-bottom:96px}
}
@media(max-width:400px){.hcDockOnce{display:none}}
/* Schermi bassi (telefono in orizzontale, zoom forte): il dock ancorato coprirebbe quasi tutto */
@media(max-height:520px){.hcDock.is-live{position:static}html:has(.hcDock.is-live){scroll-padding-bottom:0}}

/* Contrasto elevato di Windows */
@media(forced-colors:active){
  .hcInput,.hcChoice,.hcDisc,.hcDock,.hcReport,.hcCallout{border:1px solid CanvasText}
  .hcChoice:has(input:checked){outline:2px solid Highlight}
  .hcCallout::before,.hcReport::before,.hcRepSave::before,.hcRepStatus::before{display:none}
}
@media(prefers-reduced-motion:reduce){.hcDock.is-live{animation:none}}

/* Foglio di stampa del simulatore: in stampa si vede solo quello.
   print-color-adjust:exact forza Chrome/Edge a stampare i fondi colorati
   anche con "Grafica di sfondo" deselezionato nella finestra di stampa. */
.hcPrint{display:none}
@media print{
  @page{size:A4;margin:15mm 16mm}
  body:has(>#hcPrint){background:#fff!important}
  body:has(>#hcPrint)>:not(#hcPrint){display:none!important}
  #hcPrint{display:block!important;color:#17211f;font:10.5pt/1.5 Arial,Helvetica,sans-serif;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* position:fixed in stampa si àncora all'area di contenuto (dentro i
     margini di @page), non al bordo del foglio: un piè di pagina "fisso"
     finirebbe sopra le ultime righe invece che sotto. Il piè di pagina
     resta quindi nel flusso, una sola volta, in fondo all'ultima pagina. */
  .hcPrintHead{display:flex;align-items:flex-end;justify-content:space-between;gap:20pt;
    padding-bottom:9pt;margin-bottom:16pt;border-bottom:1.4pt solid #143a33}
  .hcPrintLogo{display:block;height:22pt;width:auto}
  .hcPrintHeadMeta{display:grid;gap:2pt;text-align:right;color:#5b6b67;font-size:8.7pt;line-height:1.45}

  #hcPrint h1.hcPrintTitle{margin:0 0 14pt;color:#0e1f1c;font-size:18pt;font-weight:800;letter-spacing:-.01em}

  .hcPrintHero{margin:0 0 6pt;padding:14pt 18pt;border:1.2pt solid #143a33;border-radius:6pt;
    background:#eef5f3;break-inside:avoid}
  .hcPrintHeroLabel{margin:0;color:#48605b;font-size:10pt}
  .hcPrintHeroNum{margin:2pt 0 0;color:#0e2e28;font-size:27pt;font-weight:800;letter-spacing:-.01em;
    font-variant-numeric:tabular-nums}
  .hcPrintHeroSub{margin:6pt 0 0;color:#3c4b47;font-size:9.7pt}
  .hcPrintPartial{margin:8pt 0 0;padding-left:10pt;border-left:2.4pt solid #d98a3d;color:#6b4a1d;font-size:9.3pt}

  #hcPrint h2{margin:20pt 0 8pt;padding-bottom:4pt;border-bottom:.8pt solid #c9d3d0;
    color:#0e1f1c;font-size:12pt;font-weight:700;break-after:avoid}
  #hcPrint h3{margin:0 0 5pt;color:#1c4a41;font-size:9.3pt;font-weight:700;
    text-transform:uppercase;letter-spacing:.045em;break-after:avoid}

  table.hcPrintScen{width:100%;border-collapse:collapse;margin:0;font-size:10pt;break-inside:avoid}
  table.hcPrintScen thead th{padding:5pt 4pt;border-bottom:1.2pt solid #143a33;background:#eef5f3;
    color:#3c4b47;font-size:8.6pt;font-weight:700;text-align:left;text-transform:uppercase;letter-spacing:.03em}
  table.hcPrintScen tbody th,table.hcPrintScen tbody td{padding:6pt 4pt;border-bottom:.7pt solid #dbe3e1;
    font-weight:400;text-align:left}
  table.hcPrintScen tbody th{color:#17211f;font-weight:600}
  table.hcPrintScen thead th:last-child,table.hcPrintScen tbody td{text-align:right;
    font-variant-numeric:tabular-nums;font-weight:700}

  .hcPrintCols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18pt}
  .hcPrintCols>div{break-inside:avoid}

  #hcPrint p{margin:9pt 0 0}
  #hcPrint p.hcPrintNote{margin-top:8pt;color:#5b6b67;font-size:8.7pt;line-height:1.5}
  #hcPrint ul,#hcPrint ol{margin:0;padding-left:15pt}
  #hcPrint li{margin:0 0 3.5pt;break-inside:avoid}
  #hcPrint .hcPrintCols ul{padding-left:13pt}
  #hcPrint .hcPrintCols li{color:#333;font-size:9.6pt}

  .hcPrintFoot{display:flex;justify-content:space-between;gap:16pt;margin-top:22pt;padding-top:7pt;
    border-top:.8pt solid #c9d3d0;color:#5b6b67;font-size:8.3pt;line-height:1.55;break-inside:avoid}
  .hcPrintFootCol{display:grid;gap:1pt}
  .hcPrintFootCol b{color:#17211f;font-size:8.7pt}
  .hcPrintFootRight{text-align:right}
}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
/* Card con reveal: la transition di .reveal sostituirebbe quella della card
   (bordo/ombra istantanei) e .reveal.in, venendo dopo, annullerebbe il
   sollevamento in hover. Qui le due cose convivono. */
.hcCard.reveal{transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s}
.hcCard.reveal.in:hover{transform:translateY(-6px)}

/* ---- Responsive ---- */
@media(max-width:1180px){.nav{justify-content:space-between}.homeLogo{position:static}.navLinks{display:none}.menuBtn{display:inline-flex;align-items:center;justify-content:center}}
@media(max-width:1020px){
  .hcLayout{grid-template-columns:1fr}
  .hcToc{display:none}
}
@media(max-width:720px){
  :root{--header:68px}
  .wrap,.hcWrap,.hcNarrow{width:calc(100% - 34px)}
  section.hcSec.hcHero{padding-top:calc(var(--header) + 40px)!important}
  .hcCards{grid-template-columns:1fr}
  .hcCard{padding:28px 22px 22px;border-radius:24px}
  .hcBox{padding:20px 18px}
  .hcCta{border-radius:26px;padding:32px 20px}
  .hcBtns .hcBtn{width:100%}
  .hcProse th,.hcProse td{padding:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .topbar,.bgCanvas,.noise,.readProgress,.hcToc,.hcCta,.footer,.hcRepActions{display:none!important}
  body{background:#fff;color:#111}
  .hcProse,.hcProse strong,.hcProse h2,.hcProse h3{color:#111}
  section.hcSec.hcHero{padding-top:0!important}
  .reveal{opacity:1;transform:none}
}