:root{
  --nero:#0A0A0A; --nero-2:#121212; --nero-3:#191919; --nero-4:#222222;
  --crema:#F7F2E8; --crema-72:rgba(var(--crema-rgb),.72); --crema-55:rgba(var(--crema-rgb),.55); --crema-38:rgba(var(--crema-rgb),.38);
  --linea:rgba(var(--crema-rgb),.10); --linea-2:rgba(var(--crema-rgb),.17);
  --oro:var(--ott-2); --ott-1:#E6F0A8; --ott-2:#DAEC64; --ott-3:#6F7A1B; --ott-4:#3B4113; --ott-5:#22260F;
  --testo:'Inter',-apple-system,system-ui,sans-serif;
  --g:16px; --pill:999px; --r:calc(18px*var(--scala-raggi)); --r-g:calc(24px*var(--scala-raggi)); --rail:258px;
  color-scheme:dark;
  /* 23/10/2026 (T03) - il tema dell'editor: ogni colore della palette ha la compagna -rgb (la ricalcola
     js/comune.js quando il tema cambia il colore) e due scale, per il testo e per gli angoli. */
  --inchiostro:#111111;
  --ott-2s:#BECE55;
  --ott-link:#636D17;
  --ott-barre:#BECE55;
  --serif:'Playfair Display',Georgia,serif; --max:640px; --griglia:1200px; --griglia-ingresso:1180px; --griglia-porta:1000px;
  --sup-barra:rgba(14,14,14,.94); --sup-velo:rgba(11,11,11,.94); --sup-copertina-1:#252525; --sup-copertina-2:#121212; --sup-copertina-3:#0B0B0B; --sup-scheda:#252525; --sup-fatto-1:#1F1F1F; --sup-fatto-2:#111111;
  --nero-rgb:10,10,10; --nero-2-rgb:18,18,18; --nero-3-rgb:25,25,25; --nero-4-rgb:34,34,34; --crema-rgb:247,242,232; --ott-1-rgb:230,240,168; --ott-2-rgb:218,236,100; --ott-3-rgb:111,122,27; --ott-4-rgb:59,65,19; --ott-5-rgb:34,38,15; --rosso-rgb:192,57,43; --inchiostro-rgb:17,17,17; --ott-2s-rgb:190,206,85; --ott-link-rgb:99,109,23; --ott-barre-rgb:190,206,85;
  --scala-testo:1; --scala-raggi:1; --scala-spazi:1;
  /* voce 4 (24/10/2026, Roberto): il corpo del testo per un telefono. Paragrafi 16 px, testi secondari 14, etichette 12;
     moltiplicati per --scala-testo dove si usano. I numeri grandi restano come sono. */
  --corpo:16px; --corpo-s:14px; --corpo-xs:12px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--nero);color:var(--crema);font:400 calc(var(--corpo)*var(--scala-testo))/1.5 var(--testo);-webkit-font-smoothing:antialiased}
body{padding-bottom:calc(44px*var(--scala-spazi))}
img{max-width:100%} a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.et{font:600 calc(var(--corpo-xs)*var(--scala-testo))/1 var(--testo);letter-spacing:.14em;text-transform:uppercase;color:var(--crema-55);margin:0}
.micro{font-size:calc(var(--corpo-s)*var(--scala-testo));line-height:1.5;color:var(--crema-55);margin:0}
.fascia{position:sticky;top:0;z-index:30;height:56px;display:flex;align-items:center;
  background:rgba(var(--nero-rgb),.84);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.fascia .wrap{display:flex;align-items:center;justify-content:space-between;gap:calc(12px*var(--scala-spazi))}
.marchio img{display:block;height:19px;width:auto;opacity:.92}
.passo{font:600 calc(13px*var(--scala-testo))/1 var(--testo);color:var(--crema-72);white-space:nowrap}   /* voce 5.5 (24/10): era 12 px e --crema-38, 3,25:1 */
h1{font:700 calc(26px*var(--scala-testo))/1.2 var(--testo);letter-spacing:-.022em;margin:calc(22px*var(--scala-spazi)) 0 calc(8px*var(--scala-spazi))}
h1 .nome{color:var(--ott-1)}
.occhiello{font:600 calc(var(--corpo-xs)*var(--scala-testo))/1 var(--testo);letter-spacing:.14em;text-transform:uppercase;color:var(--ott-1);margin:calc(22px*var(--scala-spazi)) 0 0}
.pillola{display:flex;align-items:center;justify-content:center;gap:calc(8px*var(--scala-spazi));width:100%;min-height:52px;padding:0 calc(20px*var(--scala-spazi));
  border-radius:var(--pill);background:var(--oro);color:var(--inchiostro);font:700 calc(15.5px*var(--scala-testo))/1 var(--testo);
  box-shadow:0 8px 22px -14px rgba(var(--ott-2-rgb),.9)}
.pillola small{font:600 calc(13px*var(--scala-testo))/1 var(--testo);opacity:1;color:var(--ott-5)}   /* voce 5.3 (24/10/2026) */
.piano{display:inline-block;font:600 calc(13.5px*var(--scala-testo))/1 var(--testo);color:var(--ott-1);border-bottom:1px solid rgba(var(--ott-1-rgb),.3);padding-bottom:calc(2px*var(--scala-spazi))}
/* §5 · §13 `[v4.3]` — I PASSI DELL'INGRESSO HANNO L'AZIONE SEMPRE SOTTO GLI OCCHI.
   Il critico del craft, 16/9: sul telefono il passo «Ti ho ascoltato» finiva a metà del terzo capoverso
   senza nessuna CTA nella piega — «esattamente l'articolo in cinque puntate che il §13 vieta».
   Il testo è il messaggio personalizzato, approvato: non si taglia. Quindi è l'azione che resta ferma. */
.coda-fissa{position:sticky;bottom:0;z-index:20;margin:calc(26px*var(--scala-spazi)) calc(var(--g) * -1) 0;padding:calc(14px*var(--scala-spazi)) var(--g) calc(calc(14px*var(--scala-spazi)) + env(safe-area-inset-bottom,calc(0px*var(--scala-spazi))));
  background:linear-gradient(to top, var(--nero) 62%, rgba(var(--nero-rgb),.92) 82%, rgba(var(--nero-rgb),0));
  display:flex;flex-direction:column;gap:calc(9px*var(--scala-spazi))}
/* 24/10/2026 (72 MM, Roberto parte 5, voce 1) - la riga d'aiuto sopra il tasto cadeva nella parte trasparente della
   sfumatura e si leggeva SOPRA il paragrafo che scorre sotto. Adesso dietro al testo della coda il fondo e' pieno: la
   sfumatura sta solo nei 32 px sopra. Sul computer la coda e' statica e senza fondo (sotto, nel blocco desktop). */
.coda-fissa{padding-top:calc(32px*var(--scala-spazi));background:linear-gradient(to bottom, rgba(var(--nero-rgb),0) 0, var(--nero) 32px)}
.coda-fissa .micro{text-align:center}
.rail{display:none}
@media (min-width:1024px){
  .fascia{display:none}
  .rail{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--rail);
    padding:calc(26px*var(--scala-spazi)) calc(18px*var(--scala-spazi));background:var(--nero-2);border-right:1px solid var(--linea);z-index:20}
  .rail .marchio{margin:0 calc(6px*var(--scala-spazi)) calc(30px*var(--scala-spazi))} .rail .marchio img{height:22px}
  .rail .passi{display:flex;flex-direction:column;gap:calc(2px*var(--scala-spazi))}
  .rail .p{display:flex;align-items:center;gap:calc(11px*var(--scala-spazi));padding:calc(10px*var(--scala-spazi)) calc(12px*var(--scala-spazi));border-radius:calc(12px*var(--scala-raggi));font:600 calc(13.5px*var(--scala-testo))/1.25 var(--testo);color:var(--crema-55)}
  .rail .p i{width:22px;height:22px;border-radius:var(--pill);border:1.5px solid var(--linea-2);display:grid;place-items:center;
    font:700 calc(var(--corpo-xs)*var(--scala-testo))/1 var(--testo);font-style:normal;flex:0 0 auto}
  .rail .p.ora{background:var(--ott-5);color:var(--ott-1)} .rail .p.ora i{border-color:var(--ott-2);background:var(--ott-2);color:var(--inchiostro)}
  .rail .p.fatto i{border-color:var(--ott-4);background:var(--ott-4);color:var(--ott-1)}
  /* 24/10/2026 (Roberto parte 1.1) - «La tua Area» non e' piu' un passo: e' l'arrivo, senza numero */
  .rail .p.arrivo i{border-style:dashed}
  .rail .fondo{margin-top:auto;padding-top:calc(16px*var(--scala-spazi));border-top:1px solid var(--linea);font-size:calc(12.5px*var(--scala-testo));color:var(--crema-55)}
  .pagina{margin-left:var(--rail)}
  .griglia{display:grid;grid-template-columns:repeat(12,1fr);gap:calc(34px*var(--scala-spazi));max-width:var(--griglia-ingresso);margin:0 auto;padding:calc(44px*var(--scala-spazi)) calc(30px*var(--scala-spazi)) calc(70px*var(--scala-spazi));align-items:start}
  .wrap{max-width:none;padding:0}
  h1{margin-top:0;font-size:calc(31px*var(--scala-testo))}
  .occhiello{margin-top:0}
  .pillola{width:auto;min-width:330px}
  .coda-fissa{position:static;margin:calc(34px*var(--scala-spazi)) 0 0;padding:0;background:none;align-items:flex-start}
  .coda-fissa .micro{text-align:left}
}

/* 17/9 — mancava la regola che fa funzionare «hidden» su queste tre schermate (c'è in
   app_comune.css, che però l'ingresso non carica). Senza, un display: nella regola della
   riga batteva l'attributo e la riga restava a schermo: «La tua situazione:» compariva
   vuota, senza niente dopo i due punti. Trovato da Roberto il 17/9. */
[hidden]{display:none!important}

/* ═══ 17/9 — il marchio dell'evento anche qui ═════════════════════════════════
   Nelle quattro pagine d'ingresso il logo usciva a 19-26 px di altezza: la stessa
   misura a cui Fable e Astra l'avevano dichiarato illeggibile nell'app. Stessa
   soluzione: la R disegnata più il nome come TESTO della pagina, che eredita il
   carattere e resta nitido a qualunque dimensione. La versione verde per esteso
   resta quella dell'evento, dove c'è spazio per leggerla. */
.event-brand{--h:20px;display:inline-flex;align-items:center;gap:calc(6px*var(--scala-spazi));block-size:var(--h);
  inline-size:max-content;max-inline-size:100%;color:var(--crema,#F7F2E8);font-family:inherit;vertical-align:middle}
.event-brand__mark{display:block;flex:none;block-size:var(--h);inline-size:auto;max-inline-size:none}
.event-brand__name{flex:none;margin:0;font-size:calc(12.5px*var(--scala-testo));font-weight:600;letter-spacing:.005em;line-height:1;white-space:nowrap}

/* il logo dell'evento sopra la headline del passo 1. La larghezza minima è una regola
   di chi l'ha disegnato, non un gusto: sotto i 320 px «DI DIVENTARE» non si legge più.
   Il fondo verde è dentro l'immagine (non ha trasparenza), quindi gli angoli arrotondati
   servono a farlo leggere come un blocco voluto e non come un ritaglio. */
.logo-evento{display:block;width:min(340px,100%);height:auto;border-radius:calc(12px*var(--scala-raggi));margin:0 0 calc(22px*var(--scala-spazi))}
@media (min-width:900px){ .logo-evento{width:min(360px,100%);margin-bottom:calc(26px*var(--scala-spazi))} }

/* il logo dell'evento centrato SOPRA le due colonne (17/9, richiesta di Roberto):
   dentro la colonna di sinistra spingeva giù solo quella, e il riquadro «Dentro trovi»
   restava disallineato di oltre duecento pixel. */
/* 17/9 - il blocco verde e' stato tolto dalle pagine d'ingresso: Fable e Astra, guardando
   i due confronti, hanno detto la stessa cosa. Astra: «i due segni si pestano i piedi, il
   marchio compatto identifica gia' l'evento». Fable, con le misure: sul telefono il blocco
   si mangiava 228 px del primo schermo e spingeva il tasto giu' di 227, e a 40 px di
   distanza dal marchio compatto ripeteva le stesse parole e la stessa R.
   Il logo verde resta il master dell'evento: serve dove ha i suoi 320 px - la pagina di
   optin, le copertine, l'apertura dei video. Il file resta in img/, non e' cancellato.
   La correzione che chiedevano: il marchio compatto passa da 22 a 40 px di altezza, cioe'
   «una targhetta leggibile, non un cartellone». */
.marchio-solo .event-brand,.fascia .event-brand{--h:40px}
.marchio-solo .event-brand__name,.fascia .event-brand__name{font-size:calc(18px*var(--scala-testo))}

/* il marchio dell'azienda: sta solo nel piede, sotto la data, e i due nomi scritti
   sono stati tolti perché li dice il marchio stesso */
.logo-vmr{display:block;height:30px;width:auto;margin:calc(11px*var(--scala-spazi)) auto 0;opacity:.85}

/* il piede, stessa forma in tutte le pagine d'ingresso: data, marchio, privacy, centrati */
.piede,.fondo{display:block;text-align:center}
.piede p,.fondo p{margin:0;font-size:calc(var(--corpo)*var(--scala-testo));line-height:1.45;color:var(--crema-55)}
.piede .privacy,.fondo .privacy{margin-top:calc(14px*var(--scala-spazi))}
.piede .privacy a,.fondo .privacy a{font-size:calc(12.5px*var(--scala-testo));color:var(--crema-55)}

/* 20/9 (R04 §2.1) — IL VELO D'ATTESA. Finché <html> porta data-stato="caricamento" il corpo
   della pagina non si vede: il markup di dimostrazione non deve comparire nemmeno per un
   fotogramma prima che js/area.js abbia idratato la persona. La porta (index.html) NON ha
   questo attributo: non ha dati e deve essere subito usabile. */
html[data-stato="caricamento"] body > *{visibility:hidden}
html[data-stato="caricamento"] body::before{
  content:"";position:fixed;inset:0;z-index:9998;background:var(--nero,#0A0A0A);
}
html[data-stato="caricamento"] body::after{
  content:"";position:fixed;left:50%;top:50%;z-index:9999;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:2px solid rgba(var(--crema-rgb),.20);border-top-color:var(--ott-1,#E6F0A8);
  animation:velo-gira .8s linear infinite;
}
@keyframes velo-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){html[data-stato="caricamento"] body::after{animation:none}}

/* ═══ 24/10/2026 (72 MM, Roberto parte 1.3) — IL CONTO, PASSO 3 DELL'INGRESSO ═══
   Le regole del blocco .conto vivevano solo in app_viste.css, che le pagine d'ingresso non caricano: sono le stesse
   del foglio «conto» dell'Area. Il tasto «Avanti» si preme solo coi due campi pieni; «Lo faccio dopo» e' un link
   piccolo, non un secondo tasto pieno. */
.conto{display:grid;gap:calc(10px*var(--scala-spazi));margin:calc(16px*var(--scala-spazi)) 0 calc(6px*var(--scala-spazi))}
.conto label{display:block;font-size:calc(14px*var(--scala-testo));color:var(--crema-72);margin-bottom:calc(6px*var(--scala-spazi))}
.conto input{width:100%;font:500 calc(22px*var(--scala-testo))/1.2 var(--testo);color:var(--crema);background:var(--nero-2);border:1px solid rgba(var(--crema-rgb),.18);border-radius:calc(14px*var(--scala-raggi));padding:calc(12px*var(--scala-spazi)) calc(14px*var(--scala-spazi));min-height:54px;font-variant-numeric:tabular-nums}
.conto input:focus{outline:none;border-color:var(--crema)}
.conto .meno{text-align:center;font-size:calc(24px*var(--scala-testo));color:var(--crema-55);line-height:1}
.conto .esito{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:nowrap;gap:calc(10px*var(--scala-spazi));border-top:1px solid var(--linea);padding-top:calc(12px*var(--scala-spazi))}
.conto .esito .k{flex:1 1 auto;min-width:0;font-size:calc(14px*var(--scala-testo));color:var(--crema-72)}
.conto .esito .cifra{flex:0 1 auto;white-space:nowrap;font-size:calc((clamp(20px,7.4vw,30px))*var(--scala-testo));font-weight:500;letter-spacing:-.02em;color:var(--oro);font-variant-numeric:tabular-nums}
.conto .esito .cifra.vuoto{color:var(--crema-55);font-weight:400}
#salvato-conto{margin-top:calc(10px*var(--scala-spazi))}
.dice b{color:var(--ott-2);font-weight:600}
.pillola[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
.coda-fissa .dopo{display:inline-flex;align-items:center;min-height:44px;color:var(--crema-72);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--crema-rgb),.4)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--crema);outline-offset:2px}
@media (min-width:1024px){ .conto{max-width:520px} }

/* ═══ 24/10/2026 (72 MM, Roberto parte 5) — le voci della revisione che valgono anche per l'ingresso ═══ */
/* voce 13 · bersagli di almeno 44 px: «Ho un dubbio su una delle date», l'interruttore, i link del piede.
   Qui .piano e' sottolineato col bordo: si allarga l'area di tocco, non la scatola */
.piano{position:relative}
.piano::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.sw{position:relative}
.sw::before{content:"";position:absolute;inset:-8px}
.piede .privacy a,.fondo .privacy a{display:inline-flex;align-items:center;min-height:44px}
/* la riga delle date nella colonna sinistra del computer e' un piede, non un paragrafo: 14 px, su una riga */
.rail .fondo p{font-size:calc(var(--corpo-s)*var(--scala-testo))}
/* il video dei patti che non si carica: il messaggio e «Riprova» al posto del lettore (24/10/2026) */
.video-guasto{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:calc(12px*var(--scala-spazi));padding:calc(20px*var(--scala-spazi));text-align:center}
.video-guasto p{margin:0;font-size:calc(var(--corpo)*var(--scala-testo));color:var(--crema-72)}