/* ==================================================================
   SAPERE AI · landing della guida al terminale · foglio unico
   Serve index.html, che sta alla radice, e i file in archivio/.
   Qui non entra niente che cambi da una guida all'altra: l'unico
   valore variabile e' --titolo-corpo, dichiarato nella testa della
   pagina dentro la sua regione marcata.

   Token da brand/PALETTE.md: fondo caldo, un solo accento,
   cinque opacita' del bianco. Mobile first: il progetto e' a 390px.
   ================================================================== */

/* Fallback del titolo se Anton tarda: un condensato di sistema.
   Su iPhone c'è Helvetica Neue Condensed Bold, su Mac e Windows
   Arial Narrow Bold o Impact. Ordine dal più stretto al più largo. */
@font-face{
  font-family:'Titolo Riserva';
  src:local('HelveticaNeue-CondensedBold'),
      local('Helvetica Neue Condensed Bold'),
      local('ArialNarrow-Bold'),
      local('Arial Narrow Bold'),
      local('AvenirNextCondensed-Bold'),
      local('Impact');
}

:root{
  --fondo:      #1C0E07;
  --accento:    #FF7E1F;
  --testo:      #FFFFFF;
  --testo-93:   rgba(255,255,255,.93);
  --testo-88:   rgba(255,255,255,.88);
  --testo-62:   rgba(255,255,255,.62);
  --testo-50:   rgba(255,255,255,.5);
  --bordo:      rgba(255,126,31,.55);
  --fill:       rgba(255,126,31,.10);

  /* Fascia scura per il ritmo verticale: lo stesso fondo con un velo
     nero sopra. Scende di luce senza virare al marrone. */
  --fondo-scuro: rgba(0,0,0,.24);

  /* sans-serif-condensed è il condensato di sistema di Android (Roboto
     Condensed): senza, su Android il titolo ricade su Roboto normale e a
     360px esce dal contenitore (misurato: 374px su 316 disponibili). */
  --titoli: 'Anton', 'Titolo Riserva', 'Arial Narrow', Impact, sans-serif-condensed, sans-serif;
  --corpo:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --gutter: 22px;
  --raggio: 26px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.55;
  color:var(--testo-93);
  /* Fondo pieno su tutta la pagina. L'alone vive solo nella prima
     schermata e nella chiusura: steso sul body fa virare al marrone
     e le card ci si sciolgono dentro (difetto noto della v1). */
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{ max-width:100%; height:auto; display:block; }
[hidden]{ display:none !important; }

.visivamente-nascosto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------------
   Impianto
   ------------------------------------------------------------------ */

.contenitore{
  width:100%;
  max-width:760px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.contenitore--largo{ max-width:1040px; }

.blocco{ padding:72px 0; }

/* Ritmo verticale: le fasce si alternano per posizione, non per una
   classe scritta a mano. Chi monta la guida seguente non ha una
   classe in piu' da ricordare, e se un blocco si toglie l'alternanza
   si ricalcola da sola.
   Con gli otto blocchi di main la fascia scura tocca problema,
   meccanismo e qualifica. La chiusura e' pari anche lei ma ha il suo
   alone, e va esclusa a mano: il selettore per posizione pesa piu'
   della sua classe e glielo coprirebbe. */
main > section.blocco:nth-of-type(even):not(.blocco--chiusura){ background:var(--fondo-scuro); }

/* Prima schermata: l'alone della palette, stretto nell'angolo in alto
   a destra e chiuso dentro la sezione. Misure in pixel e non in
   percentuale: a 1440px una percentuale copre meta' schermata e il
   fondo vira al marrone. Sotto la piega il fondo torna pieno.
   Sotto i 768px niente altezza minima e niente centratura verticale:
   il contenuto parte in alto e in fondo alla schermata spunta
   l'occhiello del blocco seguente, segnale che la pagina continua.
   Da 768px in su torna a tutta altezza, centrato. */
.blocco--hero{
  display:flex;
  align-items:flex-start;
  padding:calc(20px + env(safe-area-inset-top)) 0 40px;
  background:
    radial-gradient(300px 220px at calc(100% - 18px) -46px, rgba(255,126,31,.32), transparent 72%),
    var(--fondo);
}

/* Il disarmo sta piu' vicino alla piega degli altri blocchi. Deve
   entrare quasi per intero con un solo scorrimento corto: se il
   lettore deve cercarlo, il circuito aperto dalla parola terminale
   resta aperto mentre legge il problema, e vince la sua domanda.
   Niente card, niente bordo, niente icona: il blocco piu' importante
   per la tenuta della pagina e' anche il piu' povero. */
.blocco--disarmo{ padding:44px 0 60px; }

/* Chiusura: stesso alone, piu' spento, per richiamare la testa senza
   ricolorare la fine della pagina. */
.blocco--chiusura{
  padding:88px 0 80px;
  background:
    radial-gradient(280px 200px at calc(100% - 18px) -40px, rgba(255,126,31,.18), transparent 72%),
    var(--fondo);
}

/* ------------------------------------------------------------------
   Tipografia
   ------------------------------------------------------------------ */

.occhiello{
  margin:0 0 14px;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accento);
}

/* Dove c'è il form l'arancio va al bottone e alla seconda riga del
   titolo: l'occhiello scende al bianco. Il livello della guida sta
   nella stessa riga e nello stesso colore, separato da un punto
   medio: si legge, non si decora. */
.blocco--hero .occhiello,
.blocco--chiusura .occhiello{ color:var(--testo-62); }

/* Le due meta' restano intere: la riga si spezza fra loro, mai
   dentro. */
.occhiello__parte{ white-space:nowrap; }
.occhiello__punto{ padding-right:3px; opacity:.55; }

/* Sotto i 480px la riga intera non ci sta e il punto medio andrebbe a
   capo per primo, isolato in testa alla seconda riga. Un separatore a
   inizio riga si legge come un errore di battitura, e succede nel
   punto della pagina dove si dichiara il metodo.
   Le due meta' vanno su due righe e il punto sparisce: "Dal terminale"
   si prende una riga sua, che e' anche il lavoro che deve fare. */
@media (max-width:479.98px){
  .occhiello__parte{ display:block; }
  .occhiello__punto{ display:none; }
}

/* Il titolo della promessa: due righe forzate, seconda in arancio.
   --titolo-corpo arriva dalla testa della pagina ed e' l'unico
   valore variabile di questo foglio. Non si sceglie a occhio: si
   misura la riga piu' lunga con Anton e con i condensati di riserva,
   e comanda il piu' largo dei quattro. Le misure della pagina di
   oggi stanno nella regione variabile della testa.
   Minimo e massimo del clamp fanno parte della misura, non sono due
   numeri di comodo. Il massimo e' sceso da 7rem a 6rem perche' con la
   riga lunga da diciotto caratteri, a 112px e con il condensato di
   riserva, il titolo usciva dal contenitore da 1010px in su: sul
   telefono era a posto e sul portatile no.
   Il minimo e' sceso a 1.75rem perche' altrimenti sotto i 295px
   vincerebbe sul vw proprio dove il contenitore e' piu' stretto.
   Nessun max-width: era quello che nella v1 spezzava il titolo. */
.titolo-grande{
  margin:0 0 18px;
  font-family:var(--titoli);
  font-weight:400;
  font-size:clamp(1.75rem, var(--titolo-corpo, 9.5vw), 6rem);
  line-height:.94;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--testo);
  text-wrap:balance;
}

.titolo-grande .riga{
  display:block;
  white-space:nowrap;
}

.riga--accento{ color:var(--accento); }

.titolo{
  margin:0 0 28px;
  font-family:var(--titoli);
  font-weight:400;
  font-size:clamp(2.25rem, 10vw, 4.25rem);
  line-height:.94;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--testo);
  text-wrap:balance;
}

.sottotitolo{
  margin:0 0 26px;
  max-width:34ch;
  font-size:18px;
  text-wrap:pretty;
  line-height:1.5;
  color:var(--testo-93);
}

.testo p{
  margin:0 0 18px;
  max-width:60ch;
}
.testo p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------------
   Sottoblocco "quello che ci rimetti", dentro il meccanismo.

   Il vincolo del brief e' che non diventi una card: nessun riquadro,
   nessun fondo diverso, nessun colore diverso, nessuna icona di
   avvertimento. Il corpo resta il corpo della pagina, al 93%, stessa
   misura di riga. Una card grigia lo trasformerebbe in una postilla
   legale, e una postilla non compra fiducia: e' l'unico punto della
   pagina in cui chi vende elenca quello che costa, e vale solo se
   viene letto come il resto del discorso.

   Quello che lo fa leggere non e' una cornice, e' la gerarchia.
   Spazio ampio sopra, che lo stacca dai quattro paragrafi del
   meccanismo piu' di quanto farebbe un bordo. Una marca arancio
   corta, dello stesso segno dei punti elenco della qualifica, che
   dichiara l'inizio di una cosa nuova a costo di quattro pixel di
   accento. E un titolo in Anton appena sotto il corpo dell'H2: lo
   stesso peso che avrebbe se fosse una buona notizia.
   ------------------------------------------------------------------ */

.sottoblocco{ margin-top:52px; }

.sottoblocco__marca{
  display:block;
  width:52px; height:4px;
  margin-bottom:20px;
  border-radius:2px;
  background:var(--accento);
}

/* Sotto l'H2 del blocco (10vw) e sopra il corpo. Bianco pieno: e' un
   titolo di sezione, non una avvertenza. */
.titolo--sotto{
  margin-bottom:20px;
  font-size:clamp(1.65rem, 7.4vw, 2.5rem);
}

/* Riga sul metodo: subordinata al corpo, sotto il blocco del
   meccanismo. Sostituisce il blocco autore. */
.riga-metodo{
  margin:30px 0 0;
  max-width:60ch;
  font-size:16px;
  line-height:1.6;
  color:var(--testo-62);
}

/* ------------------------------------------------------------------
   Marchio: unico punto in cui compare il personaggio.
   ------------------------------------------------------------------ */

.marchio{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
}

.marchio__logo{ width:44px; height:44px; }

.marchio__nome{
  font-family:var(--titoli);
  font-size:18px;
  letter-spacing:.06em;
  color:var(--testo);
}

/* ------------------------------------------------------------------
   Form
   Campo e bottone nella stessa pillola. Il bottone è l'unico arancio
   pieno della schermata, testo #1C0E07 (7,4:1).
   ------------------------------------------------------------------ */

.modulo{ width:100%; max-width:520px; }
.modulo--sezione{ margin-top:48px; }

.form{ margin:0; }

.pillola{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  padding:5px;
  border:2px solid rgba(255,255,255,.26);
  border-radius:999px;
  background:rgba(0,0,0,.32);
  transition:border-color .15s ease;
}

.pillola:focus-within{ border-color:rgba(255,255,255,.62); }

.pillola__campo{
  flex:1 1 auto;
  min-width:0;
  height:52px;
  padding:0 6px 0 16px;
  border:0;
  background:transparent;
  color:var(--testo);
  font-family:var(--corpo);
  font-size:16px;             /* sotto i 16px iOS zooma al focus */
  line-height:1;
  border-radius:999px;
}

.pillola__campo::placeholder{ color:var(--testo-62); opacity:1; }
.pillola__campo:focus{ outline:none; }
.pillola__campo[aria-invalid="true"]{ color:var(--testo); }

.pillola__bottone{
  flex:0 0 auto;
  height:52px;
  padding:0 20px;
  border:0;
  border-radius:999px;
  background:var(--accento);
  color:var(--fondo);
  font-family:var(--corpo);
  font-size:16px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:filter .12s ease, transform .12s ease;
}

.pillola__bottone:hover{ filter:brightness(1.08); }
.pillola__bottone:active{ transform:translateY(1px); }
.pillola__bottone:focus-visible{ outline:3px solid var(--testo); outline-offset:3px; }
.pillola__bottone:disabled{ cursor:progress; filter:saturate(.7); }

/* Sotto i 360px il bottone scende sotto il campo, a larghezza piena. */
@media (max-width:359.98px){
  .pillola{
    flex-direction:column;
    align-items:stretch;
    border-radius:28px;
  }
  .pillola__bottone{ width:100%; }
}

.form__errore{
  margin:10px 0 0;
  font-size:15px;
  font-weight:600;
  color:var(--testo);
}

.form__errore::before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  margin-right:8px;
  border-radius:50%;
  background:var(--testo);
  vertical-align:.1em;
}

/* Consenso: piccolo e subordinato al bottone, ma leggibile.
   14px al 62%: dichiara a cosa ti iscrivi, e a 13px al 50% sembrava
   scritto per non farsi leggere. */
.consenso{
  margin:12px 0 0;
  text-wrap:balance;
  font-size:14px;
  line-height:1.45;
  color:var(--testo-62);
}

.consenso__link{
  color:inherit;
  text-underline-offset:3px;
}

/* Conferma: prende il posto del form e della riga di consenso. */
.conferma{
  padding:22px 22px 20px;
  border:3px solid var(--bordo);
  border-radius:var(--raggio);
  text-align:left;
}
.conferma:focus{ outline:none; }

.conferma__titolo{
  margin:0 0 10px;
  font-family:var(--titoli);
  font-size:30px;
  line-height:1;
  text-transform:uppercase;
  color:var(--testo);
}

.conferma__testo{ margin:0 0 12px; color:var(--testo-93); }
.conferma__testo strong{ color:var(--testo); overflow-wrap:anywhere; }
.conferma__nota{ margin:0 0 8px; font-size:15px; color:var(--testo-62); }
.conferma__bozza{
  margin:14px 0 0;
  padding-top:12px;
  border-top:2px dashed rgba(255,255,255,.3);
  font-size:14px;
  font-weight:600;
  color:var(--testo-88);
}

/* ------------------------------------------------------------------
   Segnaposto
   Tratteggio bianco, mai arancio: si riconosce senza rubare l'accento.
   .seg        in linea, dentro una frase: il testo dentro e' una
               descrizione di cosa manca
   .seg--conf  in linea, tratteggio a punti: il testo dentro e' vero
               ma va confermato prima di pubblicare
   .seg-blocco riquadro con targhetta
   .seg-link   link la cui destinazione manca
   ------------------------------------------------------------------ */

.seg{
  padding:1px 6px;
  border:1.5px dashed rgba(255,255,255,.5);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:var(--testo-88);
  font-weight:600;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

.seg--conf{
  border-style:dotted;
  font-weight:inherit;
  color:inherit;
}

.seg-blocco{
  position:relative;
  margin:14px 0 0;
  padding:24px 16px 14px;
  border:2px dashed rgba(255,255,255,.4);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:var(--testo-88);
  font-size:16px;
  line-height:1.5;
}

/* Alcuni segnaposto tengono piu' di un capoverso: la descrizione di
   cosa manca ha una struttura, e su una riga sola non si vede quanto
   spazio quel contenuto occupera' davvero. */
.seg-blocco p{ margin:0 0 10px; }
.seg-blocco p:last-child{ margin-bottom:0; }

.seg-blocco::before{
  content:attr(data-etichetta);
  position:absolute;
  top:-11px; left:12px;
  max-width:calc(100% - 24px);
  padding:2px 9px;
  border-radius:999px;
  background:#3a2a22;
  color:var(--testo);
  font-family:var(--corpo);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.5;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Tratteggiato finché manca la destinazione. Quando il link è vero
   si toglie la classe e la sottolineatura torna continua. */
/* Quando la riga sul metodo e' ancora un riquadro da confermare,
   vince il margine piu' largo: attaccata al paragrafo sopra sembra
   una nota a pie' di frase. */
.seg-blocco.riga-metodo{ margin-top:30px; }

.seg-link{
  text-decoration-style:dashed;
  text-decoration-thickness:1.5px;
}

/* ------------------------------------------------------------------
   Blocco della prova
   Una o due aree, secondo la porta. Con due aree stanno una sotto
   l'altra su telefono e affiancate da 768px in su.
   ------------------------------------------------------------------ */

.prova{
  display:grid;
  gap:34px;
  margin:0;
}

.prova__lato{ margin:0; }

.prova__etichetta{
  margin:0 0 10px;
  font-family:var(--corpo);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--testo-62);
}

/* L'unica differenza di trattamento fra le due aree: l'etichetta
   DOPO e' arancio, la PRIMA resta spenta. */
.prova__etichetta--dopo{ color:var(--accento); }

.prova__cornice{
  position:relative;
  padding:10px 10px 20px;
  border:3px solid var(--bordo);
  border-radius:var(--raggio);
  background:rgba(0,0,0,.24);
}

.prova__area{
  margin:0;
  aspect-ratio:4 / 3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:28px 18px 18px;
  border-radius:16px;
}
.prova__area p{ margin:0; }

/* Sul bordo alto ci sono i numeri delle annotazioni:
   la targhetta del segnaposto scende sul bordo basso. */
.prova__area.seg-blocco::before{ top:auto; bottom:-11px; }

/* Numeri delle annotazioni, in Anton arancio, appoggiati sul bordo alto. */
.prova__marca{
  position:absolute;
  top:-19px;
  z-index:1;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border:3px solid var(--accento);
  border-radius:50%;
  background:var(--fondo);
  font-family:var(--titoli);
  font-size:20px;
  line-height:1;
  color:var(--accento);
}

.annotazioni{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  gap:14px;
}

.annotazioni li{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:12px;
  align-items:baseline;
  line-height:1.7;
}

.annotazioni__punto{ padding-inline:2px; color:var(--testo-50); }

.annotazioni__n{
  font-family:var(--titoli);
  font-size:26px;
  line-height:1;
  color:var(--accento);
}

/* La terza cattura: sotto le due, a larghezza piena, non affiancata.
   E' la conclusione del confronto e non un terzo lato, quindi non ha
   etichetta e non entra nella griglia.
   16:10 e non 4:3 per due ragioni: a larghezza piena un 4:3 diventa
   una torre di 570px che spinge la nota fuori schermata, e il posto
   deve reggere anche la variante a filmato muto, che e' orizzontale.
   Quando l'immagine o il filmato arrivano prendono questo rapporto e
   la cornice non cambia. */
.prova__lato--pieno{ margin-top:34px; }
.prova__area--pieno{ aspect-ratio:16 / 10; }

.didascalia{
  margin:18px 0 0;
  font-size:15px;
  line-height:1.7;
  color:var(--testo-62);
}

.prova__nota{
  margin:28px 0 0;
  max-width:60ch;
  font-size:15px;
  line-height:1.7;
  color:var(--testo-50);
}

/* ------------------------------------------------------------------
   Dentro la guida: riga di formato e indice
   ------------------------------------------------------------------ */

/* Il margine alto negativo serve a tenere la riga attaccata all'H2,
   che e' la sua posizione normale. Quando sopra c'e' la copertina,
   quel meno dieci la fa salire dentro la cornice: qui la riga torna
   a distanza. Vale come didascalia dati della copertina, non come
   sottotitolo del blocco. */
.copertina + .formato{ margin-top:22px; }

.formato{
  margin:-10px 0 30px;
  font-size:15px;
  line-height:2;
  color:var(--testo-62);
}

/* Niente nowrap sulle voci: a 320px una voce sola e' piu' larga del
   contenitore e uscirebbe dallo schermo invece di andare a capo.
   A tenere insieme la riga basta il separatore, che e' legato alla
   voce che chiude da uno spazio unificatore e quindi non puo' mai
   ritrovarsi in testa a una riga. */
.formato__punto{ padding-right:4px; color:var(--testo-50); }

/* ------------------------------------------------------------------
   Copertina della guida, in testa al blocco 5.

   Rapporto A4 verticale, che e' quello del PDF. Larghezza piena del
   contenitore sul telefono: a 390px viene 346 x 489, cioe' tre
   quarti della schermata utile, e lo scorrimento si ferma. Era la
   richiesta: la guida si deve vedere, e si deve vedere soprattutto
   da telefono.

   Sul portatile NON va a larghezza piena. A 760px un A4 sarebbe alto
   1075px, piu' del viewport: il lettore non vedrebbe mai la
   copertina intera e si troverebbe davanti un muro invece di un
   oggetto. Tetto a 460px, che a 900px di schermata la lascia intera
   con il titolo sopra.

   La cornice tratteggiata e' la marcatura di provvisorieta' della
   pagina. Resta finche' la copertina e' finta.
   ------------------------------------------------------------------ */

.copertina{
  margin:30px 0 0;
  padding:10px;
  display:flex;
  justify-content:center;
}

.copertina__img{
  width:100%;
  height:auto;
  aspect-ratio:1056 / 1493;
  border-radius:4px;
  /* Su fondo scuro un A4 scuro sparisce nel fondo: senza un bordo la
     copertina sembra un buco nella pagina invece di un oggetto
     appoggiato sopra. Filo bianco bassissimo, non arancio: l'arancio
     e' del bottone e non si spende qui. */
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 18px 40px rgba(0,0,0,.45);
}

.indice{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.12);
}

/* L'indice e' ancora una traccia di lavoro: finche' non e' confermato
   sta dentro un riquadro segnaposto, che gli toglie il bordo alto. */
.seg-blocco--indice{ margin-top:22px; padding:26px 16px 6px; }
.seg-blocco--indice .indice{ border-top:0; }

.indice__voce{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.seg-blocco--indice .indice__voce:last-child{ border-bottom:0; }

.indice__n{
  font-family:var(--titoli);
  font-size:38px;
  line-height:.9;
  color:var(--accento);
}

.indice__titolo{
  margin:0 0 8px;
  font-family:var(--corpo);
  font-size:18px;
  font-weight:600;
  line-height:1.5;
  color:var(--testo-88);
}

.indice__riga{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--testo-62);
}

.indice__riga .seg{ font-weight:400; color:var(--testo-62); }

/* ------------------------------------------------------------------
   Per chi è, per chi non è
   ------------------------------------------------------------------ */

.qualifica{
  display:grid;
  gap:18px;
}

.qualifica__card{
  padding:26px 22px 24px;
  border:3px solid var(--bordo);
  border-radius:var(--raggio);
}

.qualifica__card--si{
  border-color:var(--accento);
  background:var(--fill);
}

.titolo--card{
  margin-bottom:18px;
  font-size:clamp(2.25rem, 10vw, 3.25rem);
}

/* "Non è per te": stessa gerarchia, più piccolo e spento. */
.titolo--spento{
  font-size:clamp(1.75rem, 8vw, 2.5rem);
  color:var(--testo-88);
}

.elenco{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}

.elenco li{
  position:relative;
  padding-left:26px;
  line-height:1.6;
}

.elenco li::before{
  content:"";
  position:absolute;
  left:2px; top:.62em;
  width:12px; height:3px;
  border-radius:2px;
  background:var(--accento);
}

.elenco--no li{ color:var(--testo-62); }
.elenco--no li::before{ background:var(--testo-50); }

/* ------------------------------------------------------------------
   Le domande vere
   ------------------------------------------------------------------ */

.domande{ margin:0; display:grid; gap:34px; }

.domande dt{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  color:var(--testo);
}

.domande dd{ margin-inline:0; }

/* La risposta sul costo dello strumento e' l'unica delle tre che
   deve gia' occupare adesso lo spazio che occupera' poi: il numero
   non c'e', ma se lo spazio si aggiunge dopo la pagina si rimonta.
   Le quattro righe qui dentro sono le quattro cose che la risposta
   vera deve contenere, una per riga. */
.domande__costo p{ margin-bottom:8px; }

/* La sola riga del riquadro che non descrive il contenuto mancante ma
   la conseguenza di lasciarlo mancante. Sta in cima e si vede. */
.domande__blocca{
  margin-bottom:12px;
  font-weight:700;
  color:var(--testo);
}

/* ------------------------------------------------------------------
   Piede
   ------------------------------------------------------------------ */

.piede{
  padding:40px 0 calc(48px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.1);
  font-size:15px;
  line-height:1.8;
  color:var(--testo-62);
}

.piede p{ margin:0 0 12px; }

.piede__dominio{ font-weight:700; color:var(--testo); }

/* Payoff di marca: qui è una firma, non un'affermazione.
   Inter, non maiuscolo, bianco al 50%, stesso livello del disclaimer. */
.piede__payoff{ font-weight:400; color:var(--testo-50); }

.piede a{ color:var(--testo-88); }
.piede__disclaimer{ font-size:14px; color:var(--testo-50); }

/* ==================================================================
   Adattamento desktop
   ================================================================== */

@media (min-width:768px){
  :root{ --gutter:40px; }

  body{ font-size:18px; }

  .blocco{ padding:112px 0; }
  .blocco--hero{
    min-height:100vh;
    min-height:100svh;
    align-items:center;
    padding:48px 0;
    background:
      radial-gradient(560px 380px at calc(100% - 60px) -80px, rgba(255,126,31,.30), transparent 72%),
      var(--fondo);
  }
  .blocco--chiusura{
    padding:128px 0 112px;
    background:
      radial-gradient(520px 340px at calc(100% - 60px) -70px, rgba(255,126,31,.18), transparent 72%),
      var(--fondo);
  }

  /* Prima schermata e chiusura centrate: una colonna, simmetrica. */
  .contenitore--centro{
    max-width:1000px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .contenitore--centro .sottotitolo{ max-width:40ch; font-size:20px; text-wrap:balance; }
  .contenitore--centro .consenso,
  .contenitore--centro .form__errore{ margin-left:0; text-align:center; }

  .marchio{ margin-bottom:40px; }
  .marchio__logo{ width:56px; height:56px; }
  .marchio__nome{ font-size:22px; }

  .pillola__campo{ height:58px; padding-left:22px; font-size:17px; }
  .pillola__bottone{ height:58px; padding:0 30px; font-size:17px; }

  .titolo{ margin-bottom:36px; }

  .blocco--disarmo{ padding:72px 0 96px; }

  .sottoblocco{ margin-top:72px; }
  .sottoblocco__marca{ width:64px; margin-bottom:24px; }
  .titolo--sotto{ font-size:2.5rem; margin-bottom:24px; }

  .prova--due{ grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
  .prova__lato--pieno{ margin-top:40px; }
  .prova__cornice{ padding:14px 14px 24px; }
  .prova__marca{ width:44px; height:44px; top:-22px; font-size:22px; }

  .copertina{ margin-top:36px; padding:18px; }
  /* Tetto, non larghezza piena: vedi la nota sopra. */
  .copertina__img{ width:auto; max-width:100%; height:679px; }

  .seg-blocco--indice{ padding:30px 24px 6px; }

  .qualifica{ grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
  .qualifica__card{ padding:34px 32px 32px; }
  /* Su due colonne i titoli si allineano in altezza. */
  .titolo--card{ font-size:3.25rem; }
  .titolo--spento{ font-size:2.5rem; padding-top:.55rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ==================================================================
   SCHERMATA DI SCELTA · oggi serve solo archivio/
   Non e' piu' la radice del sito: la radice e' la landing della
   guida al terminale. Queste regole restano perche' le usa
   archivio/schermata-scelta-26-settembre.html, che si recupera
   quando esistera' una terza guida e ci sara' uno smistamento vero
   da fare. La landing non usa nessuna di queste classi.
   Sezione a se': niente qui sopra viene toccato. Le porte non usano
   nessuna di queste classi, e questa pagina non usa .blocco ne'
   .contenitore, quindi l'alternanza chiaro/scuro del modello non
   la vede.

   Gerarchia invertita rispetto alle porte. Ordine di peso visivo:
   1 la coppia di schede, 2 i due titoli delle schede, 3 la domanda,
   4 lockup e payoff, 5 riga per l'incerto, 6 piede.
   Conseguenza sul corpo della domanda: la regola dei 13vw/11vw delle
   porte non si applica, la domanda sta attorno a due terzi di quel
   corpo. Conseguenza sui titoli delle schede: stanno appena sopra la
   domanda, perche' sono il secondo gradino e non il terzo.

   Palette identica: quattro valori, un solo accento. In questa
   schermata l'arancio e' speso su due bordi, la seconda riga della
   domanda, i due occhielli e le due etichette di azione. Niente
   riempimento arancio, quindi nessuna delle due schede vince.
   ================================================================== */

.corpo-scelta{
  /* L'alone della palette: bagliore d'angolo in alto a destra, misure
     in pixel come nella prima schermata delle porte. In percentuale a
     1440px copre mezza schermata e il fondo vira al marrone. */
  background:
    radial-gradient(300px 220px at calc(100% - 18px) -46px, rgba(255,126,31,.32), transparent 72%),
    var(--fondo);
  background-repeat:no-repeat;
}

/* Una colonna, larghezza da desktop attorno agli 880px. Sopra non si
   allarga e non si popola: una schermata di scelta larga si legge
   come una home vuota. */
.scelta{
  width:100%;
  max-width:880px;
  margin-inline:auto;
  padding:calc(12px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------------
   1 · Lockup marchio e payoff
   Logo piu' grande che sulle porte: e' la sola superficie dove il
   marchio si presenta a chi non lo conosce. Il limite e' l'altezza:
   se cresce e la seconda scheda esce dallo schermo, torna piccolo.
   ------------------------------------------------------------------ */

.marchio--scelta{
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.marchio--scelta .marchio__logo{ width:50px; height:50px; }

.marchio__blocco{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.marchio--scelta .marchio__nome{
  font-size:21px;
  line-height:1.1;
}

/* Payoff: didascalia del marchio, non secondo titolo. Inter, minuscolo
   con la sola iniziale maiuscola, bianco al 93%, un corpo sotto il
   corpo di lettura. Senza punto finale. Su una riga sola: se il corpo
   scende sotto i 15px o la riga va a capo, il payoff ha perso il suo
   lavoro e va accorciato a monte, non rimpicciolito qui. */
.marchio__payoff{
  font-family:var(--corpo);
  font-size:16px;
  font-weight:400;
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  color:var(--testo-93);
}

/* ------------------------------------------------------------------
   2 · Riga di categoria
   ------------------------------------------------------------------ */

.categoria{
  margin:0 0 12px;
  max-width:33ch;
  font-size:17px;
  line-height:1.45;
  text-wrap:pretty;
  color:var(--testo-93);
}

/* ------------------------------------------------------------------
   3 · La domanda
   Due terzi del corpo delle porte: la' 11vw o 13vw, qui attorno a
   7,8vw. Quel tanto che basta a leggersi prima delle schede senza
   schiacciarle. Due righe forzate, mai tre.
   ------------------------------------------------------------------ */

.domanda{
  margin:0 0 18px;
  font-family:var(--titoli);
  font-weight:400;
  font-size:clamp(1.5rem, 7.3vw, 2.05rem);
  line-height:.96;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--testo);
}

.domanda .riga{
  display:block;
  white-space:nowrap;
}

/* Da 376px in su la domanda sale a 8,2vw, che su 390 e' il corpo
   pieno dei due terzi. Sotto i 376 resta a 7,3vw: la' la piega e'
   640 e quei due punti in piu' spingono il titolo della seconda
   scheda sotto lo schermo, che e' l'unica cosa che questa pagina non
   si puo' permettere. Misurato a 320, 360, 375, 390 e 430. */
@media (min-width:376px){
  .domanda{ font-size:clamp(1.5rem, 8.2vw, 2.05rem); }
}

/* ------------------------------------------------------------------
   4 · Le due schede
   Peso visivo identico: stesso bordo, stesso fondo trasparente,
   stesso corpo in ogni riga. La simmetria non e' estetica. Se una
   scheda e' piena e l'altra vuota vince la piena qualunque cosa
   serva al lettore, e lo smistamento sbaglia in modo sistematico.
   Bordo card normale della palette: rgba(255,126,31,.55), 3px, 26px.
   ------------------------------------------------------------------ */

.schede{
  display:grid;
  gap:12px;
  /* Altezza identica anche in colonna singola: con tracce in 1fr
     dentro un contenitore ad altezza automatica le due righe si
     pareggiano sulla piu' alta. La riga di azione resta appoggiata
     al fondo in entrambe (margin-top auto), quindi il bordo e
     l'etichetta si allineano e nessuna delle due sembra la
     principale. */
  grid-auto-rows:1fr;
  align-items:stretch;
}

.scheda{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:14px 18px 16px;
  border:3px solid var(--bordo);
  border-radius:var(--raggio);
  background:transparent;
  transition:border-color .12s ease, background-color .12s ease;
}

/* Stato attivo al tocco, identico sulle due schede. E' l'unico
   effetto ammesso: nessuna animazione d'ingresso. */
.scheda:active{
  border-color:var(--accento);
  background:var(--fill);
}

@media (hover:hover){
  .scheda:hover{ border-color:var(--accento); }
}

.scheda__occhiello{
  margin:0 0 5px;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accento);
}

/* Titolo della scheda: H1 della porta copiato parola per parola, con
   lo stesso a capo. Ogni riga e' nowrap, quindi se il corpo e'
   troppo grande il difetto si vede subito invece di nascondersi in
   un a capo automatico. Verificato a 320, 360, 375, 390 e 430px con
   Anton e con il condensato di riserva. */
.scheda__titolo{
  margin:0 0 7px;
  font-family:var(--titoli);
  font-weight:400;
  font-size:clamp(1.5rem, 9vw, 2.2rem);
  line-height:.98;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--testo);
}

.scheda__titolo .riga{
  display:block;
  white-space:nowrap;
}

/* Tutta la scheda e' cliccabile: su 390px un bersaglio piccolo dentro
   una scheda grande produce click a vuoto sul bordo, che il lettore
   legge come pagina rotta. Il nome accessibile del link resta il solo
   titolo. */
.scheda__link{
  color:inherit;
  text-decoration:none;
}

.scheda__link::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:calc(var(--raggio) - 3px);
}

.scheda__link:focus-visible{ outline:none; }

.scheda__link:focus-visible::after{
  outline:3px solid var(--testo);
  outline-offset:5px;
}

.scheda__riga{
  margin:0 0 12px;
  font-size:15.5px;
  line-height:1.44;
  text-wrap:pretty;
  color:var(--testo-93);
}

/* Etichetta di azione identica sulle due schede. Non e' un bottone e
   non e' arancio pieno: il riempimento marcherebbe una preferenza.
   La differenza fra le schede la fanno titolo e occhiello. */
.scheda__azione{
  margin:auto 0 0;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:24px;
  font-size:17px;
  font-weight:700;
  line-height:1.2;
  color:var(--accento);
}

.scheda__freccia{
  font-family:var(--corpo);
  font-size:19px;
  line-height:1;
  transition:transform .12s ease;
}

@media (hover:hover){
  .scheda:hover .scheda__freccia{ transform:translateX(3px); }
}

/* ------------------------------------------------------------------
   5 · Riga per l'incerto
   Non e' una terza opzione: e' testo, e costa un click in meno di una
   terza scheda.
   ------------------------------------------------------------------ */

.incerto{
  margin:18px 0 0;
  max-width:52ch;
  font-size:15px;
  line-height:1.6;
  text-wrap:pretty;
  color:var(--testo-62);
}

.incerto .seg{ color:var(--testo-62); }

/* ------------------------------------------------------------------
   6 · Piede
   Solo il dominio. Il payoff sta in alto e qui non torna: ripetuto
   due volte in una schermata da 664px diventa una firma su una
   cartolina.
   ------------------------------------------------------------------ */

.piede--scelta{
  margin-top:26px;
  padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:14px;
}

.piede--scelta .piede__dominio{
  margin:0;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--testo-62);
}

/* ------------------------------------------------------------------
   Riquadro di bozza. Si toglie al go-live insieme al suo blocco HTML.
   ------------------------------------------------------------------ */

.bozza{ margin-top:30px; font-size:14px; }

.bozza__elenco{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:10px;
}

.bozza__elenco li{ line-height:1.5; }

.bozza code{
  font-size:.92em;
  color:var(--testo);
}

.bozza__valore{ font-weight:700; color:var(--testo); }

/* ==================================================================
   Schermata di scelta · adattamento desktop
   Da 768px le due schede stanno affiancate, che e' la disposizione
   dove il confronto e' immediato. La pagina resta centrata e non si
   popola.
   ================================================================== */

@media (min-width:768px){

  .corpo-scelta{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100vh;
    min-height:100svh;
    background:
      radial-gradient(560px 380px at calc(100% - 60px) -80px, rgba(255,126,31,.30), transparent 72%),
      var(--fondo);
  }

  .scelta{ padding-block:48px; }

  .marchio--scelta{ margin-bottom:26px; }
  .marchio--scelta .marchio__logo{ width:62px; height:62px; }
  .marchio--scelta .marchio__nome{ font-size:24px; }
  .marchio__payoff{ font-size:17px; }

  .categoria{ max-width:46ch; font-size:19px; margin-bottom:18px; }

  /* Sulle porte da 768px il titolo cresce. Qui la domanda resta
     ferma: deve continuare a stare sotto i titoli delle schede. */
  .domanda{ font-size:2.1rem; margin-bottom:26px; }

  .schede{ grid-template-columns:1fr 1fr; gap:20px; }

  .scheda{ padding:24px 24px 26px; }
  .scheda__occhiello{ margin-bottom:10px; }
  .scheda__titolo{ font-size:clamp(1.85rem, 4.4vw, 2.35rem); margin-bottom:12px; }
  .scheda__riga{ font-size:17px; line-height:1.5; margin-bottom:18px; }

  .incerto{ margin-top:24px; font-size:16px; }

  .piede--scelta{ margin-top:32px; padding-top:18px; font-size:15px; }
}