/* ==========================================================================
   Horizon insegne digitali · Landing «Render gratuito della vetrina»
   Stile del brand kit Horizon: interfaccia bianca e nera, un solo carattere
   (Manrope), niente sfumature né bagliori. Colori invertiti: fasce bianche
   (primo schermo, chiusura, piè di pagina) e sezioni nere (modulo, paure).
   Un solo pulsante principale per schermata: nero sul bianco, bianco sul nero.
   Il colore vero è la luce dell'insegna: il giallo LED compare solo dentro
   gli «schermi» (la foto del primo schermo, l'insegna di prova, ACCENDILA).
   Verde e rosso solo per dire «fatto» e «da correggere» nel modulo.
   Mobile-first: gli stili base sono per il telefono, da 900px due colonne.
   Pensata per chi ha 30-60 anni: testo grande, pulsanti alti, poco da leggere.
   ========================================================================== */

/* ---------- Carattere ospitato sul nostro server (niente Google Fonts) ---------- */
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),
      url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Token (dal brand kit Horizon) ---------- */
:root{
  /* colori invertiti: le sezioni di contenuto (modulo, paure) sono nere, le fasce (primo schermo, chiusura,
     piè di pagina) sono bianche. La pagina ha un solo aspetto, anche con il tema scuro del telefono. */
  --bg:#0B0B0C; --surface:#1C1C1E; --ink:#F5F5F7; --muted:#A1A1A6; --line:#3A3A3C;
  --primary:#F5F5F7; --on-primary:#0B0B0C;
  /* bordo di campi, scelte e caselle: almeno 3:1 sul nero. Testo d'esempio nei campi: almeno 4,5:1 */
  --field-line:#76767C; --placeholder:#8E8E94;
  /* fasce bianche: primo schermo, invito finale, piè di pagina */
  --band:#FFFFFF; --on-band:#0B0B0C; --on-band-muted:#5F6066; --on-band-line:rgba(11,11,12,.16);
  /* solo dentro gli schermi LED */
  --led-black:#050506; --led-frame:#1A1A1C; --led-glow:#FFD24A;
  /* stati del modulo */
  --ok:#5BD08A; --on-ok:#0B0B0C; --bad:#FF8A80;
  /* spunte disegnate: bianca (su nero o su verde) e nera (su bianco) */
  --chk-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4l3.1 3 6.5-6.7' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chk-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4l3.1 3 6.5-6.7' fill='none' stroke='%230B0B0C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chk-on-primary:var(--chk-dark); --chk-on-bg:var(--chk-light); --chk-on-ok:var(--chk-dark);
  /* anello del cursore da tastiera: chiaro sulle sezioni nere, nero sulle fasce bianche */
  --focus:var(--ink);
  /* carattere */
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* angoli: 12 campi e scelte, 14 pulsante principale e schermi, 22 pannelli */
  --r-sm:12px; --r:14px; --r-lg:22px;
  --shadow-led:0 24px 60px rgba(0,0,0,.22); --shadow-pop:0 12px 32px rgba(0,0,0,.5);
  /* curve forti (regola della skill emil-design-eng): ease-out per entrate e risposte, ease-in-out per i movimenti sullo schermo */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease:var(--ease-out);
  /* [Taste] due curve in più, approssimazioni bezier delle ease viste su dooh.com: power2.out e back.out(1.7) */
  --ease-out-cubic:cubic-bezier(.215,.61,.355,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
  --gutter:max(20px, env(safe-area-inset-left,0px));
  --gutter-r:max(20px, env(safe-area-inset-right,0px));
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
h1,h2,h3{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
p{margin:0}
a{color:inherit}
img,svg,canvas{max-width:100%}
[hidden]{display:none!important}
[id]{scroll-margin-top:16px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hero,.final,.bar,footer{--focus:#0B0B0C}
.wrap{max-width:1120px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-size:.76rem;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* segnaposto da sostituire prima del lancio: evidenziati apposta, poi spariscono */
.tbd{background:#FFE58A;color:#0B0B0C!important;border-radius:4px;padding:0 .3em}
.ico{width:1.3em;height:1.3em;flex:none}
@keyframes up{from{opacity:0;transform:translateY(16px)}}

/* ---------- Pulsanti ---------- */
/* Principale: nero, testo bianco, 58px. Sulle fasce nere si rovescia: bianco con testo nero. */
.btn{display:flex;align-items:center;justify-content:center;gap:.55em;width:100%;min-height:58px;padding:.6em 1.4em;border:0;border-radius:var(--r);background:var(--primary);color:var(--on-primary);font:800 1.06rem/1.2 var(--font);text-align:center;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .16s var(--ease-out),background .15s ease;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn[aria-disabled=true]{cursor:progress}
.hero .btn,.final .btn{background:#0B0B0C;color:#FFFFFF}
/* invio in corso: la freccia lascia il posto a una rotella */
#send.busy .arrow{display:none}
#send.busy .send-l::before{content:"";display:inline-block;width:18px;height:18px;margin-right:.5em;vertical-align:-3px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .55s linear infinite}
.btn .arrow{font-weight:800;transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover .arrow{transform:translateX(4px)}}
.spin{width:20px;height:20px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .55s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Secondario: bianco con bordo, testo nero. Si capisce che si tocca, ma non ruba la scena al nero. */
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;border:1.5px solid var(--field-line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:700 1rem var(--font);text-decoration:none;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .12s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ghost:hover{border-color:var(--ink)}}
.ghost:active{background:var(--surface);transform:scale(.97)}

/* ==========================================================================
   Primo schermo (fascia nera). Sul telefono sta tutto nella prima schermata:
   titolo, pulsante per la foto e, subito sotto, il riquadro del prima e dopo.
   Nel riquadro parte la scena (assets/js/scena.js) e quando finisce diventa la
   tendina da trascinare. Il testo si legge e il pulsante si tocca da subito.
   ========================================================================== */
.hero{position:relative;color:var(--on-band);background:var(--band)}
.top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
  padding:max(10px,env(safe-area-inset-top,0px)) var(--gutter-r) 6px var(--gutter)}
/* logo in testata: «HORIZON» più il simbolo, con il suo spazio di rispetto (blocco «Logo che si compone» qui sotto) */
.logo{display:flex;align-items:center;min-height:44px;padding:6px 0;text-decoration:none}
.logo img{display:block;height:auto}
/* ---------- Logo che si compone ----------
   Testata: «HORIZON» con il simbolo, senza «TEAM» (richiesta di Nicolò, 30 ottobre 2026). La scritta è ritagliata dal
   file del logo del kit (horizon-wordmark-nero.png), il simbolo è il file del kit (horizon-simbolo-nero.png): scritta e
   simbolo allineati in basso, come nel logo intero. Le lettere salgono una alla volta, l'orizzonte si apre dalla vetta,
   l'arco sorge sopra. Piè di pagina: il logo intero del kit in tre pezzi (la scritta entra da sinistra, l'orizzonte si
   apre, l'arco sorge). In entrambi i casi gli strati animati (.lgo-l) sono copie dello stesso file ritagliate con
   clip-path: alla fine spariscono e restano le immagini originali (.lgo-0), nitide e intatte. */
.lgo{--lgo-end:1.85s;position:relative;display:block;width:fit-content}
.lgo>img{display:block;width:100%;height:auto}
.lgo-l{position:absolute;left:0;top:0;width:100%;opacity:0;pointer-events:none}
.lgo-l>img{display:block;width:100%;height:auto}
.lgo-h{--lgo-end:1.95s;--lk:1;display:flex;align-items:flex-end;gap:calc(var(--lk) * 7px)}
.lgo-w,.lgo-s{position:relative}
.lgo-w{width:calc(var(--lk) * 109px)}
.lgo-s{width:calc(var(--lk) * 44px)}
.lgo-w>img,.lgo-s>img{display:block;width:100%;height:auto}
/* le sette lettere: ogni copia mostra la sua colonna (confini a metà degli spazi tra le lettere) */
.lgo-c:nth-child(2){--i:0;clip-path:polygon(0 0,14.76% 0,14.76% 100%,0 100%)}
.lgo-c:nth-child(3){--i:1;clip-path:polygon(14.76% 0,32.22% 0,32.22% 100%,14.76% 100%)}
.lgo-c:nth-child(4){--i:2;clip-path:polygon(32.22% 0,47.39% 0,47.39% 100%,32.22% 100%)}
.lgo-c:nth-child(5){--i:3;clip-path:polygon(47.39% 0,53.52% 0,53.52% 100%,47.39% 100%)}
.lgo-c:nth-child(6){--i:4;clip-path:polygon(53.52% 0,67.67% 0,67.67% 100%,53.52% 100%)}
.lgo-c:nth-child(7){--i:5;clip-path:polygon(67.67% 0,84.64% 0,84.64% 100%,67.67% 100%)}
.lgo-c:nth-child(8){--i:6;clip-path:polygon(84.64% 0,100% 0,100% 100%,84.64% 100%)}
/* il simbolo in due pezzi: vetta con le ali dell'orizzonte (sotto) e arco (sopra) */
.lgo-b>img{clip-path:polygon(0 100%,0 36%,44% 36%,47.5% 22%,51.4% 22%,55% 36%,100% 36%,100% 100%)}
.lgo-m>img{clip-path:polygon(0 0,100% 0,100% 36%,55% 36%,51.4% 22%,47.5% 22%,44% 36%,0 36%)}
.lgo.lgo-play .lgo-0{animation:lgo-in 0s var(--lgo-end) both}
.lgo-h.lgo-play .lgo-c{animation:lgo-c .45s calc(var(--i) * 70ms + 50ms) cubic-bezier(.2,.8,.2,1) both,lgo-out 0s var(--lgo-end) forwards}
.lgo-h.lgo-play .lgo-b{animation:lgo-b .75s .6s cubic-bezier(.2,.7,.2,1) both,lgo-out 0s var(--lgo-end) forwards}
.lgo-h.lgo-play .lgo-m{animation:lgo-m .6s 1.15s cubic-bezier(.2,.8,.2,1) both,lgo-out 0s var(--lgo-end) forwards}
/* piè di pagina: il logo intero, ritagliato in scritta, vetta con le ali, arco */
.lgo-t{clip-path:polygon(0 0,64.39% 0,64.39% 100%,0 100%)}
.lgo-tb{clip-path:polygon(64.39% 100%,64.39% 36.01%,80.15% 36.01%,81.82% 20.73%,82.44% 20.73%,84% 36.01%,100% 36.01%,100% 100%)}
.lgo-tm{clip-path:polygon(76.3% 0,87.84% 0,87.84% 36.01%,84% 36.01%,82.44% 20.73%,81.82% 20.73%,80.15% 36.01%,76.3% 36.01%)}
.lgo.lgo-play>.lgo-t{animation:lgo-t .8s .15s cubic-bezier(.65,0,.35,1) both,lgo-out 0s var(--lgo-end) forwards}
.lgo.lgo-play>.lgo-tb{animation:lgo-tb .9s .5s cubic-bezier(.2,.7,.2,1) both,lgo-out 0s var(--lgo-end) forwards}
.lgo.lgo-play>.lgo-tm{animation:lgo-m .75s 1.05s cubic-bezier(.2,.8,.2,1) both,lgo-out 0s var(--lgo-end) forwards}
/* in attesa di partire (solo con JavaScript) il logo è nascosto; finita l'animazione (main.js) restano solo le immagini originali */
.lgo.lgo-wait .lgo-0{visibility:hidden}
.lgo.lgo-done .lgo-l{display:none}
/* il logo vero ricompare con visibility e non con opacity: così il browser lo disegna nitido come un'immagine ferma */
@keyframes lgo-in{from{visibility:hidden}to{visibility:visible}}
@keyframes lgo-out{to{opacity:0}}
@keyframes lgo-c{0%{opacity:0;transform:translateY(55%)}100%{opacity:1;transform:none}}
@keyframes lgo-b{0%{opacity:0;clip-path:inset(0 49% 0 49%)}6%{opacity:1}100%{opacity:1;clip-path:inset(0)}}
@keyframes lgo-m{0%{opacity:0;transform:translateY(45%)}100%{opacity:1;transform:none}}
@keyframes lgo-t{0%{opacity:1;clip-path:polygon(0 0,0 0,0 100%,0 100%)}60%{opacity:1;clip-path:polygon(0 0,64.39% 0,40% 100%,0 100%)}100%{opacity:1;clip-path:polygon(0 0,64.39% 0,64.39% 100%,0 100%)}}
@keyframes lgo-tb{0%{opacity:1;clip-path:polygon(82.13% 100%,82.13% 36.01%,82.13% 36.01%,82.13% 20.73%,82.13% 20.73%,82.13% 36.01%,82.13% 36.01%,82.13% 100%)}100%{opacity:1;clip-path:polygon(64.39% 100%,64.39% 36.01%,80.15% 36.01%,81.82% 20.73%,82.44% 20.73%,84% 36.01%,100% 36.01%,100% 100%)}}
.call{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 13px;border:1.5px solid var(--on-band);border-radius:999px;
  color:var(--on-band);font-size:.98rem;font-weight:700;font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap}
.call{transition:transform .12s var(--ease-out)}
.call:active{transform:scale(.96)}
.call svg{width:18px;height:18px;flex:none}
.hero-in{display:grid;gap:16px;padding:6px var(--gutter-r) 24px var(--gutter)}
/* tutti i testi della pagina sono centrati (richiesta di Nicolò, 29 ottobre 2026). Restano allineati a sinistra solo
   i fumetti della chat e il testo accanto alle caselle dei consensi */
.hero-copy{text-align:center}
.hero .eyebrow{display:none;margin:0 0 12px;color:var(--on-band-muted)}
.hero h1{font-size:clamp(1.7rem,7.4vw,4rem);line-height:1.08;color:var(--on-band)}
.hero h1 em{font-style:normal}
.hero .sub{display:none;max-width:34em;margin:14px auto 0;font-size:1.08rem;line-height:1.45;color:var(--on-band-muted)}
.hero .sub b{color:var(--on-band);font-weight:700}
.cta-wrap{max-width:460px;margin:16px auto 0}
.hero-micro{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;margin-top:10px;font-size:.88rem;color:var(--on-band-muted)}
.hero-micro span{white-space:nowrap}
.hero-micro span::before{content:"✓";margin-right:.35em;color:var(--on-band);font-weight:800}
.hero-ba{display:grid;gap:4px;min-width:0}
.alt{justify-self:center;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:0 .3em;align-items:center;min-height:48px;font-size:1rem;color:var(--on-band-muted);text-align:center;text-underline-offset:4px}
.alt b{color:var(--on-band);font-weight:700}
.hero .alt{gap:2px 8px;font-size:.95rem;text-decoration:none}
.alt-a{display:inline-flex;align-items:center;gap:8px;color:var(--on-band);font-weight:700}
.alt-a b{color:var(--on-band);font-weight:700;text-decoration:underline;text-decoration-color:rgba(11,11,12,.4);text-underline-offset:5px}
.alt-a svg{width:20px;height:20px;flex:none}
.micro{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:.92rem;color:var(--muted)}
.micro span{white-space:nowrap}
.micro span::before{content:"✓";margin-right:.35em;color:var(--ink);font-weight:800}

/* telefoni stretti: titolo un po' più piccolo, parole lunghe con il trattino invece di uscire */
@media (max-width:359px){
  h1,h2,h3{hyphens:auto}
  .hero .btn{font-size:1rem}
  .hero-micro{font-size:.82rem;gap:2px 10px}
}
/* schermi strettissimi (telefono con lo zoom al 150%): del telefono resta l'icona, il nome lo dice per intero */
@media (max-width:299px){
  .call{padding:0 12px}
  .call span{display:none}
}
/* telefono in orizzontale: testo a sinistra, riquadro a destra alto quanto lo schermo */
@media (min-width:600px) and (max-width:899px) and (max-height:560px){
  .hero-in{grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding-bottom:14px}
  .hero h1{font-size:1.9rem}
  .cta-wrap{margin-top:12px}
  .ba{width:min(calc((100vw - 60px) * .5),calc((100svh - 90px) * 4 / 3))}
}

/* ==========================================================================
   Sezioni chiare
   ========================================================================== */
section{padding-block:52px}
.head{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:640px;margin:0 auto 24px;text-align:center}
.head h2{font-size:clamp(1.85rem,7.2vw,2.6rem)}
.head p{font-size:1.06rem;color:var(--muted)}
.rvon .rv{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.rvon .rv.seen{opacity:1;transform:none}

/* ---------- Prima e dopo (nel primo schermo) ---------- */
.ba{--pos:30%;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--led-black);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.ba-pic{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
/* la scena disegna sopra il «dopo»: alla fine è la stessa foto, e la tendina la taglia come il «dopo» */
.scene{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;max-width:none;pointer-events:none}
/* la posizione della tendina: in partenza dal valore --pos del CSS, poi main.js scrive clip-path e translate direttamente
   sugli elementi (niente variabile sul contenitore: a ogni fotogramma cambierebbero gli stili di tutti i figli) */
.after,.scene{clip-path:inset(0 0 0 var(--pos))}
.ba-tag{position:absolute;top:auto;bottom:10px;z-index:2;padding:5px 11px;border-radius:999px;background:rgba(11,11,12,.82);color:#FFFFFF;font-size:.8rem;font-weight:700;pointer-events:none;transition:opacity .4s}
.ba-tag.l{left:10px}
.ba-tag.r{right:10px;background:#FFFFFF;color:#0B0B0C}
/* binario largo quanto il riquadro, spostato con translate (percentuale della propria larghezza = del riquadro): la riga bianca è ::before, il pomello sta a left:0 */
.ba-line{position:absolute;z-index:3;top:0;bottom:0;left:0;width:100%;translate:var(--pos) 0;pointer-events:none;transition:opacity .4s}
.ba-line::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#FFFFFF}
.ba-knob{position:absolute;left:0;top:50%;display:grid;place-items:center;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:#FFFFFF;color:#0B0B0C;box-shadow:0 0 0 3px rgba(11,11,12,.35)}
.ba-knob svg{width:24px;height:24px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
/* mentre la scena gira: niente tendina, si vede solo il canvas (che parte dalla foto del prima) */
.ba.intro .after{clip-path:inset(0 0 0 100%)}
.ba.intro .scene{clip-path:none}
.ba.intro .ba-line,.ba.intro .ba-tag{opacity:0}

/* ---------- Modulo ---------- */
/* la sezione del modulo resta bianca (richiesta di Nicolò, 29 ottobre 2026): qui i colori tornano quelli chiari */
.ask{--bg:#FFFFFF; --surface:#F4F4F5; --ink:#0B0B0C; --muted:#5F6066; --line:#D4D4D8;
  --primary:#0B0B0C; --on-primary:#FFFFFF; --field-line:#8A8B90; --placeholder:#6E6F75;
  --ok:#157A3E; --on-ok:#FFFFFF; --bad:#B3261E; --focus:#0B0B0C;
  --chk-on-primary:var(--chk-light); --chk-on-bg:var(--chk-dark); --chk-on-ok:var(--chk-light);
  --shadow-pop:0 12px 32px rgba(0,0,0,.18);
  color-scheme:light;background:var(--bg);color:var(--ink)}
.ask-grid{display:grid;gap:24px}
.ask-head{display:grid;gap:10px;align-content:start;text-align:center}
.ask-head h2{font-size:clamp(1.85rem,7.2vw,2.6rem)}
.ask-head>p{font-size:1.06rem;color:var(--muted)}
.gets{display:grid;gap:10px;margin:8px 0 0;padding:0;list-style:none}
.gets li{font-size:1.04rem}
.gets b{font-weight:800}
.gi{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;vertical-align:1px;border-radius:50%;background:var(--surface);color:var(--ink);font-weight:800;font-size:.95rem}
.price{margin-top:6px;padding:14px 16px;border-radius:var(--r-sm);background:var(--surface);font-size:1rem;color:var(--muted)}
.price b{color:var(--ink);font-weight:800}
/* il pannello del modulo: grigio chiaro, angoli larghi, campi bianchi dentro */
.card{min-width:0;padding:28px 20px;border-radius:var(--r-lg);background:var(--surface);text-align:left}
form{display:grid;gap:20px}

/* i passi numerati: il numero diventa una spunta verde quando il passo è a posto */
.step{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:4px 0 -6px;font-size:1.12rem;line-height:1.25;letter-spacing:-.01em}
.step:first-child{margin-top:0}
.step-n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:.95rem;font-weight:800;letter-spacing:0;transition:background .2s,color .2s}
.step.ok .step-n{background:var(--ok) var(--chk-on-ok) center/20px no-repeat;color:transparent}
.step .opt{display:inline-block;margin-left:4px;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:0;vertical-align:2px}

/* foto */
.photo{display:grid;gap:12px}
/* riquadro, foto e avviso di attesa occupano lo stesso posto: non si vedono mai insieme, e il modulo non si sposta */
.js .photo>.drop,.js .photo>.preview,.js .photo>.photo-wait{grid-area:1/1}
.file{display:block;font:inherit;font-size:1rem}
.js .file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
/* il riquadro della foto è un grande pulsante: cerchio nero con la fotocamera, bordo tratteggiato che diventa nero al tocco */
.drop{display:grid;justify-items:center;gap:6px;padding:24px 18px;border:2px dashed var(--field-line);border-radius:var(--r);background:var(--bg);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
@media (hover:hover) and (pointer:fine){.drop:hover{border-color:var(--ink);border-style:solid}}
.drop.over{border-color:var(--ink);border-style:solid}
.drop:active{background:var(--surface);transform:scale(.99)}
.photo .file:focus-visible+.drop{outline:3px solid var(--focus);outline-offset:3px}
/* con la foto già scelta il campo è «Cambia foto»: l'anello va su quel pulsante */
.photo .file:focus-visible~.photo-tools #change{outline:3px solid var(--focus);outline-offset:3px}
.drop-ico{display:grid;place-items:center;width:60px;height:60px;margin-bottom:6px;border-radius:50%;background:var(--primary);color:var(--on-primary)}
.drop-ico svg{width:28px;height:28px}
.drop b{font-size:1.1rem;font-weight:800;line-height:1.25}
.drop span:last-child{color:var(--muted);font-size:.95rem}
.photo[data-state="ready"] .drop,.photo[data-state="nopreview"] .drop,.photo[data-state="replacing"] .drop,.photo[data-state="ready"] .nophoto,.photo[data-state="nopreview"] .nophoto,.photo[data-state="replacing"] .nophoto{display:none}
.photo[data-state="loading"] .drop{pointer-events:none}
.photo[data-state="loading"] .drop>*{visibility:hidden}
.photo[data-state="replacing"] .preview{opacity:.5;pointer-events:none}
.photo-wait{display:none}
.js .photo-wait{position:relative;z-index:2;align-self:center;justify-self:center;display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:var(--bg);color:var(--ink);font-weight:700;box-shadow:var(--shadow-pop);opacity:0;pointer-events:none}
.photo[data-state="loading"] .photo-wait,.photo[data-state="replacing"] .photo-wait{opacity:1}
.photo[data-state="nopreview"] .photo-wait{position:absolute}
.nophoto{color:var(--muted);font-size:.95rem}
.photo-err{color:var(--bad);font-size:.95rem;font-weight:600}
.photo-err:empty{display:none}
.photo-ok{padding:12px 14px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--ok) 10%,var(--bg));font-size:.98rem}
.preview{position:relative;width:100%;margin:0 auto;overflow:hidden;border-radius:var(--r);background:#000;user-select:none;-webkit-user-select:none}
.preview canvas{display:block;width:100%;height:100%}
.photo-tools{display:grid;gap:10px}
.tool-row{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px}

/* campi: bianchi su grigio, bordo che diventa nero mentre scrivi, verde quando è giusto, rosso quando manca qualcosa */
.field{display:grid;gap:7px;min-width:0;align-content:start}
label,legend{font-size:1rem;font-weight:700}
.inp{position:relative}
input[type=text],input[type=tel]{width:100%;min-height:56px;padding:0 2.8em 0 1em;text-align:left;border:1.5px solid var(--field-line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:inherit;font-size:1.06rem;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--placeholder);opacity:1}
input[type=text]:focus,input[type=tel]:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
/* campo rosso con il cursore dentro: resta rosso, ma con l'anello nero intorno si vede dove sei */
.field.bad input:focus{box-shadow:0 0 0 1.5px var(--bad),0 0 0 5px color-mix(in srgb,var(--bad) 22%,transparent)}
.field.good input{border-color:var(--ok)}
.field.good input:focus{box-shadow:0 0 0 1.5px var(--ok)}
.field.bad input{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.inp::after{content:"";position:absolute;right:14px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s var(--ease);background:var(--ok) var(--chk-on-ok) center/20px no-repeat}
.field.good .inp::after{opacity:1;transform:none}
.err{color:var(--bad);font-size:.95rem;font-weight:600}
.err:empty,.hint:empty{display:none}
.hint{color:var(--muted);font-size:.92rem;font-weight:400}
.hint.note{color:var(--ink);font-weight:600}
.pair{display:grid;gap:20px}

/* scelta di cosa mostrare: quattro tasti grandi con un pallino; scelto diventa nero con la spunta */
.pills{margin:0;padding:0;border:0;min-width:0}
.pills legend{width:100%;margin-bottom:10px;padding:0;text-align:left}
.pills legend .hint{font-weight:400}
.pill-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pill{position:relative;font-weight:600}
.pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pill span{display:flex;align-items:center;gap:10px;width:100%;height:100%;min-height:56px;padding:8px 12px;border:1.5px solid var(--field-line);border-radius:var(--r-sm);background:var(--bg);font-size:.96rem;line-height:1.2;text-align:left;justify-content:flex-start;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s var(--ease-out)}
.pill span::before{content:"";flex:none;width:20px;height:20px;border:2px solid var(--field-line);border-radius:50%;background:var(--bg) none center/16px no-repeat;transition:border-color .15s,background-color .15s}
@media (hover:hover) and (pointer:fine){.pill:hover span{border-color:var(--ink)}}
.pill:active span{transform:scale(.97)}
.pill input:checked+span{border-color:var(--primary);background:var(--primary);color:var(--on-primary);font-weight:700}
.pill input:checked+span::before{border-color:var(--on-primary);background-color:var(--on-primary);background-image:var(--chk-on-bg)}
/* 7/11: scelta multipla, il segno è una casella (angoli morbidi) e non più un pallino */
.pill input[type=checkbox]+span::before{border-radius:6px}
.pill input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}

/* consensi: ogni consenso è una riga grande da toccare, con una casella vera */
.checks{display:grid;gap:8px}
.check{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--muted);font-size:.84rem;font-weight:400;line-height:1.4;text-align:left;cursor:pointer;transition:border-color .15s ease,transform .12s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.check:hover{border-color:var(--field-line)}}
.check:active{transform:scale(.98)}
.check:has(input:checked){border-color:var(--ink)}
.check input{width:20px;height:20px;margin:0;border:2px solid var(--field-line);border-radius:6px;background:var(--bg) none center/15px no-repeat;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .15s,border-color .15s}
.check input:checked{border-color:var(--primary);background-color:var(--primary);background-image:var(--chk-on-primary)}
.check input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.check.bad{border-color:var(--bad)}
.check.bad input{border-color:var(--bad)}
.check strong{color:var(--ink);font-weight:700}
.checks .err{margin:-4px 0 2px 2px}
.form-error{padding:12px 14px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--bad) 9%,var(--bg));border:1.5px solid var(--bad);color:var(--bad);font-size:1rem;font-weight:600}
.form-error:empty{display:none}
.form-error.info{background:var(--bg);border-color:var(--ink);color:var(--ink)}
#send{margin-top:4px}
#send .bar{position:absolute;left:0;bottom:0;height:4px;width:100%;transform:scaleX(0);transform-origin:left;background:color-mix(in srgb,var(--on-primary) 55%,transparent);transition:transform .2s linear}
.legal{color:var(--muted);font-size:.82rem;line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* conferma */
.done{display:grid;gap:12px;animation:up .4s var(--ease-out)}
.done-top{display:flex;align-items:center;justify-content:center;gap:14px}
.tick{flex:none;width:56px;height:56px}
.tick circle{fill:var(--ok)}
.tick path{stroke:var(--on-ok);stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .15s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done h3{font-size:1.65rem;outline:none}
.done>p{font-size:1.04rem;color:var(--muted)}
.done b{color:var(--ink);font-variant-numeric:tabular-nums}
.done-shot:empty{display:none}
.done-shot .preview{max-width:420px;margin:0 auto}
.done-note{padding:12px 14px;border-radius:var(--r-sm);background:var(--bg);color:var(--ink)!important;font-size:.98rem}
/* note secondarie della conferma: una riga piccola e grigia, senza riquadro, così spicca solo il pulsante della guida */
.done-small{margin:-4px 0 0;font-size:.9rem;line-height:1.45;color:var(--muted)}
.done-small+.done-small{margin-top:-8px}
.guide-box{display:grid;justify-items:center;gap:10px;padding:14px 16px 14px;border-radius:var(--r);background:var(--bg)}
.guide-box .cover{width:68px}
.guide-box p{font-size:.98rem;color:var(--muted)}
.guide-box p b{color:var(--ink)}
/* copertina della guida: uno schermo LED */
.cover{position:relative;overflow:hidden;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;padding:8px;border:3px solid var(--led-frame);border-radius:6px;background:var(--led-black);transform:rotate(-4deg)}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.5px) 0 0/5px 5px}
.cover .k{font-size:.42rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF}
.cover .big{font-size:.62rem;font-weight:800;line-height:.95;color:var(--led-glow);text-shadow:0 0 4px currentColor}
.cover .m{font-size:.42rem;color:#A1A1A6}
.row-btns{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px}

/* 7/11: tolti gli stili della scena a scorrimento #trasforma (copia: backup/main-prima-di-togliere-scena-7-11.css) */

/* ---------- Le 4 paure ---------- */
/* come una chat: il cliente a destra (fumetti neri), Horizon a sinistra (fumetti bianchi) */
.chat{display:grid;gap:10px;max-width:560px;margin-inline:auto;padding:14px 14px 18px;border-radius:var(--r-lg);background:var(--surface)}
.chat-top{display:flex;align-items:center;gap:10px;padding:2px 2px 10px;border-bottom:1px solid var(--line)}
.chat-av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:800}
.chat-top b{display:block;font-size:1rem;line-height:1.2}
.chat-top small{display:block;font-size:.82rem;color:var(--muted)}
.hz{justify-self:start;max-width:88%;text-align:left;padding:10px 14px 12px;border-radius:18px 18px 18px 4px;background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.45}
.hz .who{display:block;margin-bottom:2px;font-size:.78rem;font-weight:800;letter-spacing:.02em}
.fear summary{display:block;width:fit-content;max-width:88%;margin-left:auto;padding:11px 16px;border-radius:18px 18px 4px 18px;background:var(--ink);color:var(--bg);font-size:1.02rem;font-weight:700;line-height:1.35;text-align:left;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease)}
.fear summary::-webkit-details-marker{display:none}
.fear summary:active{transform:scale(.97)}
.fear summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* spunte di «letto» dopo la domanda aperta */
.fear[open] summary::after{content:"";display:inline-block;width:16px;height:10px;margin-left:8px;vertical-align:middle;background:var(--chk-on-primary) 0 0/10px 10px no-repeat,var(--chk-on-primary) 6px 0/10px 10px no-repeat;opacity:.7}
.fear .hz{margin-top:10px;animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}}
/* «sta scrivendo…»: tre puntini che pulsano */
.typing{display:none;width:58px;height:36px;margin-top:10px;border-radius:18px 18px 18px 4px;background:var(--bg)}
.typing i{display:inline-block;width:7px;height:7px;margin:14px 0 0 9px;border-radius:50%;background:var(--muted);animation:dot 1s infinite}
.typing i+i{margin-left:5px;animation-delay:.15s}.typing i+i+i{animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.fear.wait .hz{display:none}
.fear.wait .typing{display:block}
/* entrata: le domande arrivano una alla volta (solo con JavaScript e senza «riduci movimento») */
.chat.pre .fear,.chat.pre .hz-hi{opacity:0;transform:translateY(10px) scale(.97)}
.chat .fear.in,.chat .hz-hi.in{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.chat.pre .fear:not(.in):not(.writing),.chat.pre .hz-hi:not(.in){visibility:hidden}
.chat.pre .fear.writing{opacity:1;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.chat .fear.writing summary{color:transparent;min-width:64px;position:relative}
.chat .fear.writing summary::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -16px;border-radius:50%;background:var(--bg);box-shadow:12.5px 0 var(--bg),25px 0 var(--bg);animation:dot 1s infinite}

/* ---------- Chi siamo ---------- */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:10px}
.nums div{padding:16px 12px;border-radius:var(--r);background:var(--surface)}
.nums b{display:block;font-size:clamp(1.5rem,6.4vw,2.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.nums div>span{display:block;margin-top:4px;color:var(--muted);font-size:.86rem;line-height:1.3}
/* contatore: ogni cifra è una colonna 0-9 (due giri) che scorre fino al suo valore (main.js, blocco «Chi siamo») */
.odo{display:inline-flex;align-items:flex-start;vertical-align:top}
.odo>span{line-height:1.1}
.odo-c{height:1.1em;overflow:hidden}
.odo-s{display:block;white-space:pre;transform:translateY(calc(var(--n,0) * -1.1em));transition:transform var(--t,1.2s) cubic-bezier(.2,.8,.2,1) var(--dl,0s)}
/* i tre riquadri salgono uno alla volta */
.nums.odo-on>div{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 140ms)}
.nums.odo-on.go>div{opacity:1;transform:none}

/* ---------- Invito finale (fascia nera) ---------- */
.final{background:var(--band);color:var(--on-band);text-align:center}
/* chi siamo, in breve, sotto il pulsante finale */
.final-about{display:grid;gap:12px;max-width:640px;margin-top:44px;padding-top:28px;border-top:1px solid var(--on-band-line)}
.final-about .eyebrow{color:var(--on-band-muted)}
.fa-t{font-size:.98rem;color:var(--on-band-muted)}
.fa-t b{color:var(--on-band)}
.final .nums{margin-top:6px}
.final .nums div{background:none;border:1px solid var(--on-band-line)}
.final .nums b{color:var(--on-band)}
.final .nums div>span{color:var(--on-band-muted)}
.final-in{display:grid;justify-items:center;gap:14px;max-width:640px}
/* lo schermo LED del brand: puntinato, cornice scura, scritta gialla accesa */
/* lo schermo LED del brand: puntinato, cornice scura. La scritta è fatta di punti luminosi (maschera a puntini)
   con sotto una copia sfocata che fa da alone. Con JavaScript si accende lettera per lettera (classe .on),
   poi una luce la attraversa ogni tanto (classe .run, solo mentre si vede). */
.final-led{--led-off:#2A230E;position:relative;isolation:isolate;display:grid;place-items:center;margin-bottom:8px;max-width:100%;padding:12px 20px 14px;overflow:hidden;border:6px solid var(--led-frame);border-radius:var(--r);background-color:var(--led-black);background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px);background-size:4px 4px;box-shadow:var(--shadow-led);font-size:clamp(1.75rem,calc(15.8vw - 15px),4.6rem);font-weight:800;line-height:1.05;letter-spacing:.05em;white-space:nowrap;transition:box-shadow .8s}
.final-led>span{grid-area:1/1}
.led-dots{color:var(--led-glow);-webkit-mask:radial-gradient(circle,#000 1.25px,transparent 1.7px) 0 0/4px 4px;mask:radial-gradient(circle,#000 1.25px,transparent 1.7px) 0 0/4px 4px}
.led-glow{color:var(--led-glow);opacity:.75;filter:blur(7px)}
.final-led::after{content:"";position:absolute;z-index:2;top:-20%;bottom:-20%;left:0;width:30%;pointer-events:none;opacity:0;mix-blend-mode:overlay;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:translateX(-120%) skewX(-12deg)}
/* spenta, prima di accendersi: si vedono solo i LED scuri delle lettere */
.led-js .ch{display:inline-block}
.led-js .led-dots .ch{color:var(--led-off)}
.led-js .led-glow .ch{opacity:0}
.led-js.on .led-dots .ch{animation:ign .62s steps(1,end) calc(var(--i) * 95ms + 200ms) forwards}
.led-js.on .led-glow .ch{animation:ign-g .62s steps(1,end) calc(var(--i) * 95ms + 200ms) forwards}
@keyframes ign{0%{color:var(--led-off)}14%{color:#FFE9A6}26%{color:var(--led-off)}42%{color:var(--led-glow)}54%{color:#6B5618}70%,100%{color:var(--led-glow)}}
@keyframes ign-g{0%{opacity:0}14%{opacity:1}26%{opacity:0}42%{opacity:.8}54%{opacity:.2}70%,100%{opacity:1}}
.led-js.on{box-shadow:var(--shadow-led),0 0 70px rgba(255,210,74,.16)}
.final-led.run::after{animation:sweep 4.2s ease-in-out .3s infinite}
.final-led.run .led-glow{animation:breathe 4.2s ease-in-out infinite}
@keyframes sweep{0%{opacity:1;transform:translateX(-120%) skewX(-12deg)}45%,100%{opacity:1;transform:translateX(440%) skewX(-12deg)}}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
.final h2{font-size:clamp(1.85rem,7.2vw,2.6rem)}
.final-in>p:not(.final-led){font-size:1.06rem;color:var(--on-band-muted)}
.final .btn{max-width:440px;margin-top:6px}
.final .alt{color:var(--on-band-muted)}

/* ---------- Piè di pagina (fascia nera, logo bianco) ---------- */
footer{padding-block:32px calc(110px + env(safe-area-inset-bottom,0px));background:var(--band);color:var(--on-band-muted);font-size:.86rem}
footer .wrap{display:grid;justify-items:center;gap:4px;text-align:center}
.f-logo{display:block;width:112px;height:auto;margin:0 auto 14px}
footer b{color:var(--on-band);font-variant-numeric:tabular-nums;user-select:all}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:6px}
footer nav a{display:inline-flex;align-items:center;min-height:40px;color:var(--on-band)}

/* ---------- Barra fissa in basso (solo telefono) ---------- */
.dock{position:fixed;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:56px 1fr;gap:10px;padding:10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gutter);background:color-mix(in srgb,var(--surface) 96%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateY(115%);transition:transform .2s var(--ease-out)}
.dock.show{transform:none;transition-duration:.3s}
.dock .btn{min-height:56px}
.dock .tel{display:grid;place-items:center;border:1.5px solid var(--field-line);border-radius:var(--r);color:var(--ink);text-decoration:none;transition:transform .12s var(--ease-out)}
.dock .tel:active{transform:scale(.95)}
.dock .tel svg{width:24px;height:24px}

/* ---------- Avvisi brevi ---------- */
.toast{position:fixed;z-index:30;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));max-width:min(92vw,420px);padding:12px 18px;text-align:center;border-radius:var(--r);background:var(--ink);color:var(--bg);font-size:.96rem;box-shadow:var(--shadow-pop);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Pagine semplici (privacy, conferma) ---------- */
.bar{background:var(--band);color:var(--on-band)}
.simple footer{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.page{max-width:720px;padding-block:40px 64px}
.page .eyebrow{margin-bottom:8px}
.page .ghost{margin-top:12px}
.page b{color:var(--ink);font-variant-numeric:tabular-nums}
.steps{display:grid;gap:12px;margin:24px 0;padding:0;list-style:none;counter-reset:passo}
.page .steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;color:var(--ink)}
.steps li::before{counter-increment:passo;content:counter(passo);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:800;font-size:.95rem}
.brief{display:grid;gap:8px;margin:20px 0 8px;padding:16px 18px;border-radius:var(--r-lg);background:var(--surface)}
.page .brief p{color:var(--ink)}
.page .brief p+p{margin-top:0}
.page h2[id]{scroll-margin-top:20px}
.page small{color:var(--muted)}
.page h1{font-size:clamp(1.85rem,7.2vw,2.5rem);margin-bottom:16px}
.page h2{font-size:1.3rem;margin:32px 0 8px}
.page p,.page li{color:var(--muted)}
.page p+p{margin-top:10px}
.page ul{padding-left:1.2em}
.page .lead{font-size:1.1rem;color:var(--ink)}
.page .btn{max-width:420px;margin-top:24px}
.page .draft,.page .draft b{color:#0B0B0C}
.draft{margin-bottom:24px;padding:12px 14px;border-radius:var(--r-sm);background:#FFF3C4;color:#0B0B0C;font-size:.95rem}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width:900px){
  body{font-size:18px}
  .top{max-width:1320px;margin:0 auto;padding:22px clamp(24px,4vw,56px) 10px}
  .logo .lgo-h{--lk:1.15}
  .hero-in{grid-template-columns:minmax(0,30rem) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;
    width:100%;max-width:1320px;margin:0 auto;padding:24px clamp(24px,4vw,56px) 64px}
  .hero .eyebrow,.hero .sub{display:block}
  .hero h1{font-size:clamp(2.6rem,4vw,3.6rem)}
  .hero .sub{font-size:1.12rem}
  .cta-wrap{margin-top:24px}
  .hero-ba{justify-items:end}
  .ba{width:min(100%,calc((100svh - 170px) * 4 / 3))}
  section{padding-block:80px}
  .ask-grid{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
  .ask-head{position:sticky;top:32px}
  .card{padding:32px}
  .pair{grid-template-columns:1fr 1fr}
  .dock{display:none}
  .toast{bottom:28px}
  footer{padding-bottom:32px}
}

/* ---------- Contrasto elevato di Windows (colori forzati) ----------
   Le caselle, le scelte e le spunte sono disegnate da noi: senza questa riga sparirebbe lo stato «scelto». */
@media (forced-colors:active){
  .check input,.pill span,.pill span::before,.step-n,.inp::after,.tick{forced-color-adjust:none}
  .check input{border-color:CanvasText}
  .check input:checked{border-color:Highlight;background-color:Highlight}
  .pill input:checked+span{border-color:Highlight;background:Highlight;color:HighlightText}
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* niente spostamenti, scale e sfocature; restano dissolvenze e cambi di colore brevi, che aiutano a capire cosa succede */
  *,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color,box-shadow!important;transition-duration:.2s!important;transition-delay:0s!important;transition-timing-function:ease!important}
  .tick path{stroke-dashoffset:0}
  .rvon .rv{opacity:1;transform:none}
  .done,.fear .hz,.photo-ok,.form-error{animation:rm-fade .2s ease!important}
}
@keyframes rm-fade{from{opacity:0}}