:root{
  --carta:#FBF8F3; --bianco:#FFFFFF; --inchiostro:#132420; --fumo:#657570;
  --bosco:#0F4C3A; --bosco-chiaro:#1F9D6B; --menta:#7FE9B6;
  --ambra:#F0A417; --ambra-cupa:#C8850C;
  --mattone:#C2543F; --rosso-chiaro:#FF7A66; --linea:#13242017; --linea-forte:#1324202E;
  --su-bosco:#EAF3EE; --fumo-bosco:#9FC2B2; --linea-bosco:#EAF3EE2E;
  --colonna:520px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:Figtree,"Segoe UI",system-ui,sans-serif;line-height:1.45;
  -webkit-font-smoothing:antialiased;padding-bottom:104px;overflow-x:hidden}
.col{width:100%;max-width:var(--colonna);margin:0 auto;padding:0 20px}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.032em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(33px,9vw,43px)}
h2{font-size:clamp(25px,6.6vw,31px)}
h3{font-size:18px;font-weight:800;letter-spacing:-.018em;line-height:1.22}
p{margin:0;font-size:17px}
section{padding:46px 0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500}
.fumo{color:var(--fumo)}
.pila{display:flex;flex-direction:column;gap:14px}

/* ---------- IL MOVIMENTO ----------
   Entra scorrendo e si toglie quando esce, nelle due direzioni. Lo stato
   nascosto lo mette lo script: se non parte, la pagina si legge comunque. */
.js .an{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--r,0s)}
.js .an.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .an{opacity:1!important;transform:none!important;transition:none!important}
  *{scroll-behavior:auto}
}

/* ---------- LA GIOSTRA ----------
   Due lastre affiancate che scorrono di lato mentre titolo e bottone restano
   fermi: cambia il ragionamento, non la pagina. Va da sola e non si ferma. */
.giostra{position:relative;overflow:hidden}
.giostra .binario{display:flex;transition:transform .7s cubic-bezier(.4,.8,.25,1)}
.giostra .lastra{flex:0 0 100%;min-width:100%}
.punti{display:flex;gap:6px;justify-content:center;margin-top:14px}
.punti i{width:22px;height:4px;border-radius:2px;background:var(--linea-forte);
  transition:background .3s ease;cursor:pointer}
.punti i.on{background:var(--ambra)}
.eroe .punti i{background:#EAF3EE38}
.eroe .punti i.on{background:var(--ambra)}

/* ---------- il bottone ---------- */
.azione{display:flex;flex-direction:column;gap:9px;align-items:center}
.bot{display:flex;align-items:center;justify-content:center;width:100%;border:0;cursor:pointer;
  text-decoration:none;font-family:inherit;font-size:17px;font-weight:800;letter-spacing:-.012em;
  min-height:58px;padding:15px 20px;border-radius:14px;background:var(--ambra);color:#231703;
  box-shadow:0 2px 0 var(--ambra-cupa),0 10px 22px #f0a4173d;text-align:center;line-height:1.2}
.bot:active{transform:translateY(2px);box-shadow:0 0 0 var(--ambra-cupa)}
.rassicura{font-size:13px;color:var(--fumo);text-align:center;line-height:1.45}
.rassicura b{color:var(--inchiostro);font-weight:700}
.rassicura.chiara{color:var(--fumo-bosco)}
.rassicura.chiara b{color:var(--su-bosco)}
.fissa{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:11px 0 max(11px,env(safe-area-inset-bottom));
  background:#FBF8F3F2;border-top:1px solid var(--linea-forte);backdrop-filter:blur(12px);
  transition:transform .25s ease}
.fissa.via{transform:translateY(130%)}
.fissa .bot{min-height:54px;font-size:16px}
:focus-visible{outline:3px solid var(--ambra);outline-offset:2px}

/* ---------- APERTURA A TUTTO SCHERMO ----------
   svh e non vh: su un telefono vh conta anche la barra del browser e il
   bottone finirebbe sotto il bordo dello schermo. */
.eroe{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:0 0 58px;background:var(--bosco)}
.eroe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eroe .velo{position:absolute;inset:0;background:
  linear-gradient(180deg,#0F4C3AD9 0%,#0F4C3A66 20%,#0A3327EB 56%,#0A3327FC 100%)}
.eroe .pila-eroe{position:relative;color:var(--su-bosco);padding-top:70px;width:100%}
.eroe h1{color:var(--su-bosco)}
.eroe h1 em{font-style:normal;color:var(--rosso-chiaro)}
.eroe .giostra{margin-top:16px}
.perno{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.28;color:#fff;
  margin-bottom:11px}
.perno b{color:var(--menta)}
.scorri{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);z-index:2;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--linea-bosco);color:var(--su-bosco);
  display:grid;place-items:center;text-decoration:none;font-size:16px;
  animation:respira 2.4s ease-in-out infinite}
@keyframes respira{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
@media (prefers-reduced-motion:reduce){.scorri{animation:none}}

/* ---------- i due grafici dell'apertura ---------- */
.pannello{background:#08120DA8;border:1px solid var(--linea-bosco);border-radius:16px;
  padding:16px 15px 13px;backdrop-filter:blur(8px)}
.dv-riga+.dv-riga{margin-top:11px}
.dv-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.dv-cap span{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--su-bosco)}
.dv-cap b{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:600;color:var(--fumo-bosco)}
.dv-pista{position:relative;height:32px;border-radius:8px;background:#EAF3EE1A;overflow:hidden}
.dv-pieno{display:block;height:100%;width:100%;border-radius:8px}
.dv-pieno.alto{background:var(--menta)}
.dv-pieno.basso{background:var(--rosso-chiaro);transition:width 1.9s cubic-bezier(.3,.8,.3,1)}
.dv-manca{position:absolute;top:0;right:11px;height:100%;display:flex;align-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;letter-spacing:-.03em;
  color:var(--rosso-chiaro);opacity:0;transition:opacity .5s ease}
.dv-manca.dentro{opacity:1}

/* la barra composta: il tuo blocco resta a sinistra e i costi si accodano */
.torta-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 7px}
.torta-cap span{font-size:13.5px;font-weight:700;color:var(--su-bosco)}
.torta-cap b{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:600;color:var(--fumo-bosco)}
.torta{display:flex;height:42px;border-radius:9px;overflow:hidden;background:#EAF3EE14}
.torta i{display:block;height:100%;width:0;transition:width .6s cubic-bezier(.35,.85,.3,1)}
.torta i.tuo{background:var(--menta)}
.torta i.piu{background:#37D68F}
.torta i.edile{background:#E9A85C}
.torta i.strut{background:#C9814A}
.torta i.marg{background:#6E9C8B}
.legenda{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:12px}
.legenda div{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fumo-bosco);
  opacity:0;transition:opacity .4s ease}
.legenda div.dentro{opacity:1}
.legenda em{width:10px;height:10px;border-radius:3px;flex:0 0 auto;font-style:normal}
.legenda b{color:var(--su-bosco);font-weight:700}
.nota-chiara{margin-top:11px;font-size:11px;line-height:1.5;color:#9FC2B2CC}

/* ---------- garanzie e fonti ---------- */
.garanzie{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--linea-forte);
  border:1px solid var(--linea-forte);border-radius:14px;overflow:hidden;margin-top:20px}
.garanzie div{background:var(--bianco);padding:14px 10px;text-align:center;font-size:13px;
  font-weight:700;line-height:1.3}
.garanzie div span{display:block;font-size:17px;margin-bottom:4px}
.fonte{margin-top:16px;padding-top:13px;border-top:1px solid var(--linea);
  font-size:11.5px;line-height:1.55;color:var(--fumo)}

/* ---------- ti riconosci ---------- */
.spunte{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.spunta{display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:start;background:var(--bianco);
  border:1px solid var(--linea);border-radius:13px;padding:15px 16px;font-size:16px;line-height:1.4}
.spunta i{width:26px;height:26px;border-radius:8px;background:var(--bosco);color:var(--su-bosco);
  display:grid;place-items:center;font-style:normal;font-weight:900;font-size:14px}
.spunta.no{border-color:#C2543F45;background:#C2543F0A}
.spunta.no i{background:var(--mattone)}

/* ---------- i due quadrati dei cento ---------- */
.quadro{position:relative;display:grid;grid-template-columns:190px 1fr;margin:20px 0 4px}
.cento{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;width:190px}
.cento i{aspect-ratio:1;border-radius:2px;background:var(--linea-forte);
  transition:background .3s ease,transform .3s ease;transform:scale(.86)}
.cento i.on{transform:scale(1)}
.cento i.on.a{background:var(--mattone)}
.cento i.on.b{background:var(--bosco-chiaro)}
.cento i.on.c{background:#1324201F}
.cento i.on.d{background:var(--ambra-cupa)}
.punta{position:absolute;left:198px;display:flex;align-items:center;gap:7px;
  opacity:0;transition:opacity .5s ease;max-width:calc(100% - 202px)}
.punta.dentro{opacity:1}
.punta .fil{flex:0 0 22px;height:2px;position:relative;background:currentColor}
.punta .fil::before{content:"";position:absolute;left:-6px;top:-4px;border:5px solid transparent;
  border-right-color:currentColor}
.punta b{font-size:12.5px;font-weight:800;line-height:1.28;letter-spacing:-.01em}
.punta.p1{top:4px}.punta.p2{top:72px}.punta.p3{top:140px}
.rosso{color:var(--mattone)}.verdino{color:var(--bosco-chiaro)}.orato{color:var(--ambra-cupa)}
.resto{font-size:12.5px;color:var(--fumo);line-height:1.5;margin-top:12px}
.tesi{background:var(--bosco);color:var(--su-bosco);border-radius:16px;padding:22px 20px;margin-top:24px;
  font-size:17.5px;line-height:1.45;font-weight:700}
.tesi b{color:var(--menta)}

/* ---------- le due strade ---------- */
.strada{border-radius:16px;padding:26px 22px;border:1px solid var(--linea-forte);background:var(--bianco)}
.strada.buona{border:2px solid var(--bosco);background:var(--bosco);color:var(--su-bosco)}
.strada .cap{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;background:var(--linea-forte);color:var(--inchiostro);
  padding:5px 10px;border-radius:6px;margin-bottom:12px}
.strada.buona .cap{background:var(--ambra);color:#231703}
.strada h3{margin-bottom:15px;font-size:23px}
.cifra{display:flex;align-items:baseline;gap:2px;margin:2px 0 8px;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;line-height:.94}
.cifra .segno{font-size:clamp(38px,10vw,50px);font-weight:600}
.cifra b{font-size:clamp(62px,17vw,86px);font-weight:600;letter-spacing:-.05em}
.cifra .pc{font-size:clamp(30px,8vw,40px);font-weight:600;margin-left:2px}
.cifra.rosso{color:var(--mattone)}
.cifra.verde{color:var(--menta)}
.cifra-eti{font-size:15px;line-height:1.4;margin-bottom:18px;font-weight:600;color:var(--fumo)}
.strada.buona .cifra-eti{color:var(--fumo-bosco)}
.voci{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none}
.voci li{display:grid;grid-template-columns:21px 1fr;gap:11px;font-size:16px;line-height:1.42;align-items:start}
.voci li i{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  font-weight:900;font-style:normal;margin-top:2px}
.giu i{background:#C2543F1F;color:var(--mattone)}
.su i{background:#3FBF871F;color:var(--menta)}
.strada.buona .fonte{border-color:var(--linea-bosco);color:var(--fumo-bosco)}

/* ---------- i cursori prima/dopo ---------- */
.cursore{position:relative;border-radius:16px;overflow:hidden;background:#E8E2D9;aspect-ratio:4/3;
  touch-action:none;cursor:ew-resize;user-select:none;box-shadow:0 10px 30px #13242014}
.cursore img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cursore .sopra{clip-path:inset(0 50% 0 0)}
.cursore .asta{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--ambra);
  transform:translateX(-1.5px);pointer-events:none}
.cursore .presa{position:absolute;top:50%;left:50%;width:48px;height:48px;border-radius:50%;
  background:var(--ambra);color:#231703;transform:translate(-50%,-50%);display:grid;place-items:center;
  font-size:17px;font-weight:900;pointer-events:none;box-shadow:0 5px 16px #13242040}
.cursore .marca{position:absolute;bottom:10px;background:#132420D9;color:#FBF8F3;padding:5px 10px;
  border-radius:99px;pointer-events:none;font-size:10px}
.cursore .marca.sx{left:10px}
.cursore .marca.dx{right:10px;color:var(--ambra)}
.coppia+.coppia{margin-top:22px}
.coppia h3{font-size:16px;margin-bottom:9px}

/* ---------- vincono tutti ---------- */
.vantaggi{display:flex;flex-direction:column;gap:1px;background:var(--linea-forte);
  border:1px solid var(--linea-forte);border-radius:14px;overflow:hidden;margin-top:18px}
.va{display:grid;grid-template-columns:112px 1fr;gap:14px;background:var(--bianco);
  padding:18px 16px;align-items:start}
.va-n{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:26px;
  font-weight:600;letter-spacing:-.045em;color:var(--bosco-chiaro);line-height:1.1}
.va b{display:block;font-size:16px;font-weight:800;letter-spacing:-.015em}
.va span{display:block;font-size:14.5px;color:var(--fumo);line-height:1.45;margin-top:3px}
@media (max-width:430px){.va{grid-template-columns:96px 1fr;gap:11px}.va-n{font-size:23px}}

/* ---------- i passi ---------- */
.passo{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--linea)}
.passo:last-of-type{border-bottom:1px solid var(--linea)}
.passo .n{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--bosco-chiaro);padding-top:4px}
.passo p{font-size:15px;color:var(--fumo);margin-top:6px;line-height:1.45}
.passo.primo{background:#1F9D6B0F;border-radius:13px;padding:18px 16px;border:1px solid #1F9D6B3D;
  margin-bottom:4px;border-top:1px solid #1F9D6B3D}
.bollo{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;margin-left:8px;vertical-align:2px;white-space:nowrap}
.bollo.gratis{background:var(--bosco-chiaro);color:#fff}
.bollo.nostro{background:var(--linea-forte);color:var(--inchiostro)}

/* ---------- le persone e il core business ---------- */
.verde{background:var(--bosco);color:var(--su-bosco)}
.verde .fumo{color:var(--fumo-bosco)}
.due-video{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;align-items:start}
.verticale{position:relative;border-radius:16px;overflow:hidden;background:#0A3327;aspect-ratio:9/16;
  box-shadow:0 12px 34px #0000002e}
.verticale video{width:100%;height:100%;object-fit:cover;display:block}
.due-video h3{font-size:16px;letter-spacing:-.015em;color:var(--su-bosco);text-align:center}
.due-video>div>p{text-align:center}
@media (max-width:430px){
  .due-video{grid-template-columns:1fr;gap:26px}
  .verticale{max-width:280px;margin:0 auto}
}
.core{margin-top:34px;padding-top:26px;border-top:1px solid var(--linea-bosco);text-align:center}
.core .mono{color:var(--ambra);display:block;margin-bottom:18px;font-size:15px;font-weight:600;
  letter-spacing:.22em}
.core .fa{display:flex;flex-direction:column;gap:15px}
.core .fa b{display:block;font-size:17px}
.core .fa span{font-size:15px;color:var(--fumo-bosco)}
.luoghi{margin-top:22px;display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.luoghi span{border:1px solid var(--linea-bosco);border-radius:99px;padding:6px 13px;font-size:14px;font-weight:700}
.daempire{border:1px dashed var(--ambra);border-radius:12px;padding:14px;margin-top:24px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.7;color:var(--ambra)}

/* ---------- domande ---------- */
.dm{border-bottom:1px solid var(--linea)}
.dm summary{cursor:pointer;list-style:none;padding:17px 0;font-size:17px;font-weight:800;
  display:flex;justify-content:space-between;gap:14px;align-items:center;letter-spacing:-.015em}
.dm summary::-webkit-details-marker{display:none}
.dm summary::after{content:"+";font-size:22px;font-weight:700;color:var(--bosco-chiaro);flex:0 0 auto}
.dm[open] summary::after{content:"–"}
.dm p{padding:0 0 17px;font-size:16px;color:var(--fumo);line-height:1.52}

/* ---------- il questionario ---------- */
.quiz{background:var(--bianco);border:1px solid var(--linea-forte);border-radius:18px;padding:22px 18px;
  margin-top:20px;box-shadow:0 10px 30px #13242012}
.quiz-testa{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.avanz{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--fumo)}
.tacche{display:flex;gap:4px;margin-top:7px}
.tacche i{width:19px;height:4px;border-radius:2px;background:var(--linea-forte)}
.tacche i.on{background:var(--ambra)}
.dom{font-size:23px;font-weight:900;letter-spacing:-.028em;line-height:1.14;margin-bottom:7px}
.aiuto{font-size:15px;color:var(--fumo);margin-bottom:16px;line-height:1.4}
.scelte{display:grid;gap:9px}
.scelta{display:block;width:100%;text-align:left;font-family:inherit;font-size:16px;font-weight:600;
  min-height:54px;padding:15px 16px;border-radius:12px;border:2px solid var(--linea-forte);
  background:var(--carta);color:var(--inchiostro);cursor:pointer}
.scelta.presa{border-color:var(--bosco);background:#1F9D6B14}
.campi{display:grid;gap:11px}
.campi label{display:grid;gap:5px;font-size:12px;font-weight:800;color:var(--fumo);
  letter-spacing:.04em;text-transform:uppercase}
.campi input{font-family:inherit;font-size:17px;min-height:54px;padding:14px 15px;border-radius:12px;
  border:2px solid var(--linea-forte);background:var(--carta);color:var(--inchiostro)}
.quiz-piede{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.indietro{background:none;border:0;font-family:inherit;font-size:15px;font-weight:700;color:var(--fumo);
  cursor:pointer;padding:10px 4px}
#avanti{width:auto;min-width:150px}
.esito-ok{width:44px;height:44px;border-radius:50%;background:var(--bosco-chiaro);color:#fff;
  display:grid;place-items:center;font-size:22px;font-weight:900;margin-bottom:14px}
.nota{margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.7;
  color:var(--fumo);border-left:2px solid var(--ambra);padding-left:12px}
footer{border-top:1px solid var(--linea-forte);padding:24px 0 36px;color:var(--fumo);font-size:13px}
footer .col{display:flex;flex-direction:column;gap:5px}
/* ---------- L'APERTURA IN TRE TEMPI ----------
   Titolo in alto e fermo, i grafici in basso. Lo spazio della soluzione e'
   riservato da subito: quando si apre non sposta di un pixel le barre di sopra,
   che era il difetto della versione con la traslazione. */
.eroe .pila-eroe{display:flex;flex-direction:column;justify-content:flex-start;
  min-height:calc(100svh - 58px);padding-top:78px}
/* il vuoto fra titolo e grafici e' fisso e corto: prima il pannello finiva
   schiacciato in fondo e il titolo restava solo in cima */
.eroe .riempi{flex:0 0 22px}
.eroe .pannello{margin-bottom:16px}
.soluzione{height:176px;margin-top:13px;padding-top:12px;border-top:1px solid var(--linea-bosco)}
.sol-tit{display:block;text-align:center;font-size:21px;font-weight:900;letter-spacing:-.025em;
  color:#fff;margin-bottom:11px;opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease}
.sol-tit.dentro{opacity:1;transform:none}

/* la barra composta: i pezzi stanno per posizione, non per ordine nel flusso.
   Serve perche' alla fine il margine deve SCORRERE fin sotto al blocco tuo, e
   una riga in flex non lo puo' fare scivolando. */
.scala{position:relative;padding:15px 0 14px;opacity:0;transition:opacity .5s ease}
.scala.dentro{opacity:1}
.asse{position:relative;height:34px;border-radius:8px;background:#EAF3EE14;overflow:hidden}
.pz{position:absolute;top:0;height:100%;display:block;
  transition:left 1.25s cubic-bezier(.4,.85,.25,1),width .95s cubic-bezier(.35,.85,.3,1),
    background-color .9s ease,opacity .5s ease}
.pz.oggi{background:var(--rosso-chiaro)}
.pz.edile{background:#E9A85C}
.pz.prog{background:#C9814A}
.pz.marg{background:#37D68F}
.et{position:absolute;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;font-weight:800;
  letter-spacing:.01em;color:var(--su-bosco);opacity:0;
  transition:opacity .6s ease,left 1.25s cubic-bezier(.4,.85,.25,1)}
.et.dentro{opacity:1}
.et.sopra{top:0}
.et.sotto{bottom:0}
#et-oggi{color:var(--rosso-chiaro)}
#et-marg{color:#37D68F}
.nota-chiara{margin-top:10px;font-size:11px;line-height:1.55;color:#9FC2B2CC;
  opacity:0;transition:opacity .5s ease}
.nota-chiara.dentro{opacity:1}
@media (max-width:400px){
  .soluzione{height:186px}
  .sol-tit{font-size:21px}
  .et{font-size:9.5px}
}

/* ---------- i tre vantaggi ----------
   Il numero sta sopra e non di fianco: di fianco al testo non puo' passare i
   cinquanta pixel, sopra ne prende ottanta e domina la casella come deve.
   Tre colori, uno per parte: qui non conta solo che sia un guadagno, conta chi
   lo prende. */
.vantaggi{display:flex;flex-direction:column;gap:1px;background:var(--linea-forte);
  border:1px solid var(--linea-forte);border-radius:14px;overflow:hidden;margin-top:18px}
.va{display:block;background:var(--bianco);padding:20px 18px 22px}
.va-n{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(60px,19vw,82px);font-weight:600;letter-spacing:-.06em;line-height:.86;
  display:flex;align-items:baseline;margin-bottom:10px}
.va-n b,.va-n span{font-size:inherit;font-weight:600;color:inherit;letter-spacing:inherit;
  line-height:inherit;margin:0}
.va-n .s{font-size:.46em}
.va-n .p{font-size:.4em;margin-left:1px}
.va.vende .va-n{color:var(--bosco-chiaro)}
.va.investe .va-n{color:#3A6EA5}
.va.compra .va-n{color:var(--ambra-cupa)}
.va-k{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em}
.va-p{display:block;font-size:15px;color:var(--fumo);line-height:1.45;margin-top:4px}

/* --- aggiunte per Webflow --- */
/* il salto al questionario deve essere immediato: con lo scorrimento animato
   su una pagina cosi' lunga il bottone sembra non rispondere */
html{scroll-behavior:auto!important}
#valore-su,#valore-quiz,#valore-giu{display:block}
#valore-quiz .quiz{margin-top:0}
.consenso{margin-top:16px;font-size:14px;line-height:1.45;color:var(--fumo)}
.consenso label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.consenso input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--bosco)}
.consenso a{color:var(--bosco);text-decoration:underline}
.consenso-avviso{margin-top:8px;color:var(--mattone);font-weight:600}
/* il form di Webflow non deve aggiungere niente di suo. Il bottone di invio si
   nasconde: lo fa scattare il questionario. Qui con :has, che non dipende da
   come e' stato nominato il contenitore nel Designer; in piu' lo nasconde
   anche il JS, che e' la difesa che funziona sempre */
#valore-form .w-form,#valore-form form,.w-form:has(#valore-quiz) form{margin:0}
#valore-form input[type="submit"],form:has(#valore-quiz) input[type="submit"],
form:has(#valore-quiz) .w-button[type="submit"]{position:absolute!important;left:-9999px!important;
  width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0!important}
.w-form-done,.w-form-fail{border-radius:14px;padding:18px 20px;font-size:17px}
.w-form-done{background:#EAF3EE;color:var(--bosco)}