/* ═════════════════════════════════════════════════════════════════════════════
   PROVA GRATUITA — il questionario e il pacchetto consigliato.

   Non un tema a parte: qui dentro non si definisce NESSUN colore nuovo. Tutto
   viene dai token di sito.css — stesso verde, stessa carta, stessi bordi,
   stesse ombre. Una pagina d'acquisto che cambia palette fa pensare di essere
   finiti da un'altra parte, ed e' il momento peggiore per pensarlo.

   Quello che cambia e' la DENSITA', non il vestito: niente sezioni, niente
   colonne, una cosa sola al centro e molto bianco intorno. Chi sta scegliendo
   un abbonamento deve avere una decisione davanti, non una pagina.
   ═════════════════════════════════════════════════════════════════════════════ */

.pagina-prova {
  /* Il velo verdino dell'apertura del sito, appena accennato: si riconosce la
     casa senza che la pagina diventi colorata. */
  background:
    radial-gradient(120% 60% at 50% -10%, var(--verde-nebbia) 0%, transparent 60%),
    var(--carta);
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* UNA LARGHEZZA SOLA PER PAGINA.
   Il questionario e' una colonna di lettura (880), il risultato e' una tabella
   di quattro colonne (1280). Fin qui giusto — ma intestazione e piede usavano
   sempre la misura stretta, e sul risultato il logo finiva incolonnato con
   niente: piu' a sinistra delle card, piu' a destra del bordo. Due contenitori
   centrati di larghezza diversa hanno lo stesso centro e sembrano comunque
   storti, perche' l'occhio segue i bordi (25/09/2026).
   Adesso la misura la decide la PAGINA, e tutto quello che c'e' dentro —
   testata, contenuto, piede — sta sulla stessa colonna. */
.pv-dentro { width: min(880px, 100% - 40px); margin-inline: auto; }
.pv-esteso .pv-dentro { width: min(1280px, 100% - 40px); }

/* ── La testata: il logo e una promessa ──────────────────────────────────── */
.pv-testa { padding: 22px 0; }
.pv-testa .pv-dentro { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pv-testa .marchio { display: block; }
.pv-rassicura {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--verde-scuro);
  background: var(--verde-velo); border-radius: 999px; padding: 7px 14px;
}
.pv-rassicura svg { flex: none; }

/* ── La barra che avanza ─────────────────────────────────────────────────── */
/* Non e' decorazione: e' la promessa che finisce presto, ed e' la ragione per
   cui si risponde alla settima domanda invece di chiudere alla terza. */
.pv-barra {
  height: 4px; background: var(--bordo); border-radius: 999px;
  width: min(880px, 100% - 40px); margin: 6px auto 0; overflow: hidden;
}
.pv-barra-piena {
  height: 100%; width: 0; background: var(--verde);
  border-radius: 999px; transition: width .35s cubic-bezier(.2,.7,.3,1);
}

.pv-corpo { flex: 1; padding: 40px 0 72px; }

.pv-apertura { text-align: center; margin-bottom: 36px; }
.pv-apertura h1 {
  font-size: clamp(28px, 4.2vw, 40px); line-height: 1.15; margin: 0 0 12px;
  text-wrap: balance;
}
.pv-apertura p { margin: 0 auto; max-width: 52ch; color: var(--inchiostro-2); }
/* "margin: 0 0 10px" spegneva il "margin-inline: auto" ereditato da
   .pv-apertura p, e con un max-width di 52ch il blocco si appoggiava al bordo
   sinistro: il testo restava centrato DENTRO un riquadro spostato, che e' il
   modo piu' sicuro di sembrare messo a caso. */
.pv-occhiello {
  font-family: var(--titolo); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--verde-cupo);
  margin: 0 auto 10px !important; max-width: none;
}

/* ── Una domanda ─────────────────────────────────────────────────────────── */
.pv-passo { border: 0; padding: 0; margin: 0 0 40px; min-width: 0; }
.pv-quanti {
  font-family: var(--titolo); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tenue);
  padding: 0; margin-bottom: 10px;
}
.pv-domanda { font-size: clamp(22px, 3.2vw, 30px); line-height: 1.25; margin: 0 0 8px; text-wrap: balance; }
.pv-sotto { margin: 0 0 24px; color: var(--tenue); max-width: 56ch; font-size: 16px; }

.pv-opzioni { display: grid; gap: 12px; }
@media (min-width: 620px) {
  /* Le risposte corte stanno in due colonne: quattro righe alte su tutta la
     larghezza sembrano un modulo del catasto. Quelle con la nota restano una
     per riga, perche' li' c'e' da leggere. */
  .pv-opzioni:not(.pv-opzioni-piu) { grid-template-columns: 1fr 1fr; }
}

.pv-opzione {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; cursor: pointer;
  background: var(--carta); border: 1.5px solid var(--bordo); border-radius: 14px;
  transition: border-color .18s, box-shadow .18s, background .18s, transform .18s;
}
@media (hover: hover) {
  .pv-opzione:hover { border-color: #cfe9e2; box-shadow: var(--ombra); transform: translateY(-1px); }
}
.pv-opzione input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Il segno: cerchio per "una sola", quadrato stondato per "piu' di una". La
   forma dice da sola se si puo' scegliere piu' di una cosa, e chi la conosce
   non deve leggere il sottotitolo. */
.pv-segno {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid var(--bordo-grigio); border-radius: 50%;
  display: grid; place-items: center;
  transition: border-color .18s, background .18s;
}
.pv-opzioni-piu .pv-segno { border-radius: 7px; }
.pv-segno::after {
  content: ''; width: 10px; height: 10px; border-radius: inherit;
  background: var(--carta); transform: scale(0); transition: transform .18s cubic-bezier(.2,.9,.3,1.3);
}
.pv-opzione input:checked ~ .pv-segno { border-color: var(--verde-cupo); background: var(--verde-cupo); }
.pv-opzione input:checked ~ .pv-segno::after { transform: scale(1); }
.pv-opzione:has(input:checked) {
  border-color: var(--verde-cupo);
  background: var(--verde-nebbia);
  box-shadow: 0 0 0 1px var(--verde-cupo);
}
/* Chi si muove con la tastiera deve sapere dov'e': l'input e' invisibile, il
   contorno va messo sulla riga che lo contiene. */
.pv-opzione:has(input:focus-visible) { outline: 2px solid var(--verde-cupo); outline-offset: 3px; }

.pv-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-etichetta { font-weight: 600; font-size: 17px; line-height: 1.35; }
.pv-nota { font-size: 14.5px; line-height: 1.45; color: var(--tenue); }

.pv-errore { margin: 12px 0 0; font-size: 15px; font-weight: 600; color: #b3261e; }

/* ── I comandi ───────────────────────────────────────────────────────────── */
.pv-comandi {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 8px; flex-wrap: wrap;
}
.pv-indietro {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 10px 4px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--tenue);
  transition: color .18s;
}
.pv-indietro:hover { color: var(--inchiostro); }
/* Un elemento con display esplicito NON si nasconde con l'attributo hidden: la
   regola di base [hidden]{display:none} ha meno peso di una classe, e il
   pulsante restava li' anche alla prima domanda, dove indietro non si va.
   E' lo stesso inciampo gia' pagato nell'app: chi scrive "display" su una
   classe si prende anche il dovere di spegnerla. */
.pv-indietro[hidden] { display: none; }
/* Stesso inciampo per l'avanti: e' un .bottone, e i .bottone hanno un display
   esplicito. Senza questa riga il pulsante resterebbe li' anche sulle domande
   che si chiudono da sole. */
.pv-avanti[hidden] { display: none; }
/* Senza il pulsante indietro, l'avanti resta a destra dov'e' sempre stato. */
.pv-comandi .pv-avanti { margin-left: auto; }

/* ── Il risultato ────────────────────────────────────────────────────────── */
/* Quattro pacchetti da confrontare hanno bisogno di piu' spazio di una domanda
   da leggere: e' la stessa ragione per cui anche il sito allarga il contenitore
   sulla sezione dei pacchetti. La misura di lettura serve al testo, non alle
   colonne. La larghezza la porta .pv-esteso sul body, cosi' la prendono anche
   la testata e il piede. */

/* ── LE QUATTRO TAGLIE, IN FILA COME SUL SITO ────────────────────────────────
   Il consigliato era largo quanto tutta la riga, sopra le altre tre: risaltava,
   ma spezzava la scala. Quattro taglie si leggono perche' CRESCONO da sinistra
   a destra, e chi quella scala l'ha appena vista sul sito la ritrova qui.
   Adesso stanno tutte e quattro in linea, al loro posto, e il consigliato si fa
   riconoscere per com'e' fatto — il contrassegno, la tinta, le ragioni scritte
   dentro — non per dove sta (25/09/2026). */
.pv-piani { display: grid; gap: 16px; margin-bottom: 44px; }
@media (min-width: 760px)  { .pv-piani { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .pv-piani { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── SUL TELEFONO NON UNA COLONNA, UN CAROSELLO ───────────────────────────
   Uno sotto l'altro i quattro pacchetti si leggono in ordine di listino, e
   quello che si vede per primo e' il Lite: chi arriva qui dopo il questionario
   crede che il consiglio sia quello, e il verdetto — che sta piu' in basso —
   non lo legge nessuno. Sul computer non succede perche' i quattro stanno
   affiancati e il contrassegno si vede insieme agli altri.

   In fila laterale invece si parte GIA' fermi sul consigliato (ci pensa
   prova.js), e le carte accanto si intravedono: si capisce in un colpo sia
   qual e' il nostro consiglio, sia che ce ne sono altri da guardare.

   L'88% e non il 100%: e' lo spiraglio: una carta larga quanto lo schermo
   sembra l'unica che esiste, e nessuno prova a scorrere di lato (26/09/2026). */
@media (max-width: 759px) {
  .pv-piani {
    grid-auto-flow: column; grid-auto-columns: 88%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; gap: 12px;
    /* I margini della pagina diventano imbottitura del nastro, o la prima e
       l'ultima carta non possono mai arrivare al centro dello schermo. */
    margin-inline: -20px; padding: 18px 20px 10px; margin-top: -14px;
    scrollbar-width: none;
  }
  /* overflow-x: auto taglia ANCHE in verticale: il contrassegno
     "Consigliato per voi" sporge sopra la carta e veniva mozzato a meta'.
     I 18px di imbottitura in cima gli fanno posto, e il margine negativo
     rimette il nastro dov'era. */
  .pv-piani::-webkit-scrollbar { display: none; }
  .pv-piani .pv-piano { scroll-snap-align: center; }
}

/* Le stesse quattro tinte del sito, nello stesso ordine: qui pero' si usa la
   versione CUPA, perche' il fondo e' chiaro e quella accesa e' pensata per il
   nero della sezione pacchetti. Stessa famiglia, tono diverso — come il verde
   del marchio fra vetrina e interfaccia. */
.pv-piano:nth-child(1) { --tinta: #4E9C8C; }
.pv-piano:nth-child(2) { --tinta: #2A8F7C; }
.pv-piano:nth-child(3) { --tinta: #B07C22; }
.pv-piano:nth-child(4) { --tinta: #6F55C0; }

.pv-piano {
  background: var(--carta); border: 1.5px solid var(--bordo); border-radius: var(--raggio);
  padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
/* Il segno della taglia, nella tinta del pacchetto: e' il ponte con le card
   del sito, che hanno lo stesso segno e la stessa scala. */
.pv-segno-taglia {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; margin-bottom: 4px;
  background: color-mix(in srgb, var(--tinta) 12%, transparent);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 26%, transparent);
}
.pv-piano h2 { font-size: 22px; margin: 0; color: var(--tinta); }
.pv-chi { margin: 0; color: var(--tenue); font-size: 14px; line-height: 1.45; }

/* IL CONSIGLIATO NON E' PIU' GRANDE: e' piu' acceso. Ingrandirlo lo farebbe
   sembrare un'altra cosa; cosi' resta una delle quattro, ed e' evidente quale. */
.pv-piano-scelto {
  border-color: var(--tinta);
  box-shadow: 0 0 0 1.5px var(--tinta), var(--ombra-alta);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tinta) 8%, var(--carta)) 0%, var(--carta) 52%);
  padding-top: 32px;
}
.pv-etichetta-scelto {
  position: absolute; top: -13px; left: 22px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tinta); color: #fff;
  font-family: var(--titolo); font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
}

/* Le altre non sono spente: sono in secondo piano. Spegnerle vorrebbe dire
   "non puoi prenderle", e non e' vero — e chi ci prova e non riesce se ne va. */
.pv-piano-altro { background: var(--crema); }

.pv-prezzo { margin: 6px 0 0; font-family: var(--titolo); line-height: 1; }
.pv-prezzo b { font-size: 32px; font-weight: 700; letter-spacing: -.03em; }
.pv-val { font-size: 22px; font-weight: 600; }
.pv-quando { font-family: inherit; font-size: 15px; font-weight: 500; color: var(--tenue); margin-left: 6px; }
.pv-iva { font-size: 13px; }
.pv-anno { margin: 4px 0 0; font-size: 14.5px; color: var(--tenue); }
.pv-anno b { color: var(--verde-scuro); }

/* Le ragioni: e' la parte che fa dire "ha capito cosa faccio", e va vista. */
.pv-motivi { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.pv-motivi li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14.5px; font-weight: 600; line-height: 1.42;
}
.pv-motivo-segno { color: var(--tinta); display: inline-flex; margin-top: 2px; flex: none; }

.pv-perche-no {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--tenue);
  border-left: 2px solid var(--bordo-grigio); padding-left: 12px;
}

.pv-quanti-elenco { list-style: none; padding: 0; margin: 16px 0 auto; display: grid; gap: 7px; }
.pv-quanti-elenco li { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--inchiostro-2); }
.pv-q-segno { color: var(--verde-cupo); display: inline-flex; flex: none; }

.pv-scegli { margin-top: 20px; }
.pv-scegli .bottone { width: 100%; justify-content: center; }

/* ── Il patto ────────────────────────────────────────────────────────────── */
/* IL RIQUADRO SI STRINGE SUL TESTO.
   Le righe hanno un max-width di 64ch — giusto, sotto non si legge — ma il
   riquadro seguiva la colonna della pagina, che sul risultato e' larga 1280
   per far stare quattro pacchetti affiancati. Risultato: un rettangolo verde
   enorme con il testo ammucchiato in un angolo a sinistra. La misura di
   lettura vale per il testo, e quindi deve valere anche per la scatola che lo
   contiene (25/09/2026). */
.pv-patto {
  background: var(--verde-velo); border-radius: var(--raggio);
  padding: 30px 32px; margin: 0 auto 28px;
  max-width: 72ch;
}
.pv-patto h2 {
  display: flex; align-items: center; gap: 11px;
  font-size: 22px; margin: 0 0 12px; color: var(--verde-scuro);
}
.pv-patto p { margin: 0 0 8px; color: var(--inchiostro-2); max-width: 64ch; }
.pv-patto p:last-child { margin-bottom: 0; }
.pv-patto-riga { font-size: 15px; color: var(--tenue) !important; }

.pv-ripensaci { text-align: center; font-size: 15px; color: var(--tenue); }

/* ── Il piede ────────────────────────────────────────────────────────────── */
.pv-piede {
  border-top: 1px solid var(--bordo); padding: 22px 0 32px;
  font-size: 14.5px; color: var(--tenue);
}
.pv-piede .pv-dentro {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  /* Al centro come tutto il resto della pagina: allineato a sinistra sembrava
     l'unico pezzo rimasto indietro. */
  justify-content: center;
}
.pv-piede a { color: var(--tenue); text-decoration: none; }
.pv-piede a:hover { color: var(--verde-cupo); text-decoration: underline; }

/* ── Col JavaScript acceso ───────────────────────────────────────────────── */
/* Senza, restano tutte aperte una sotto l'altra e il modulo funziona lo stesso:
   e' la ragione per cui queste regole stanno QUI e non nel foglio di base. */
.pv-js .pv-passo { display: none; }
.pv-js .pv-passo.pv-passo-vivo { display: block; animation: pv-entra .32s cubic-bezier(.2,.7,.3,1); }
@keyframes pv-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-js .pv-passo.pv-passo-vivo { animation: none; }
  .pv-barra-piena { transition: none; }
}

@media (max-width: 560px) {
  .pv-rassicura { display: none; }   /* sotto c'e' la stessa promessa, piu' grande */
  .pv-piano { padding: 22px 20px; }
  .pv-patto { padding: 24px 22px; }
}

/* ── Mensile o annuale, sul risultato ───────────────────────────────────────
   Due voci dentro una pillola, come la stessa scelta nel sito: chi arriva qui
   dalla pagina dei pacchetti ritrova il comando dov'e' abituato. */
/* La domanda e la pillola sono una cosa sola: la domanda a sinistra e la
   risposta in mezzo alla pagina sembravano due elementi capitati vicini per
   caso. Stanno incolonnate al centro, come tutto quello che c'e' sopra. */
.pv-periodo-titolo {
  margin: 0 0 10px; text-align: center;
  font-size: 15px; font-weight: 600; color: var(--ink2, var(--inchiostro-2));
}
.pv-periodo {
  display: flex; width: fit-content; gap: 4px; padding: 4px; margin: 0 auto 26px;
  background: var(--grigio); border: 1px solid var(--bordo); border-radius: 999px;
}
.pv-periodo-voce { position: relative; cursor: pointer; }
.pv-periodo-voce input { position: absolute; opacity: 0; width: 0; height: 0; }
.pv-periodo-voce > span {
  display: block; padding: 9px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--tenue);
  transition: background .18s, color .18s, box-shadow .18s;
}
.pv-periodo-voce input:checked + span {
  background: var(--carta); color: var(--inchiostro); box-shadow: var(--ombra);
}
.pv-periodo-voce input:focus-visible + span { outline: 2px solid var(--verde-cupo); outline-offset: 2px; }
.pv-risparmio { color: var(--verde-cupo); font-weight: 700; font-size: 13px; }

/* Il prezzo mostrato segue la scelta. Di serie si vede il mensile: senza
   JavaScript resta quello, ed e' anche quello che il modulo manda. */
.v-anno { display: none; }
.pv-annuale .v-mese { display: none; }
.pv-annuale .v-anno { display: inline; }

/* ── Il patto, in cima alla cassa ───────────────────────────────────────────
   Sul telefono il riepilogo di fianco finisce SOTTO il modulo: chi sta per
   scrivere la partita IVA non l'ha ancora visto. La promessa va ripetuta qui,
   prima dei campi, o vale solo per chi sta al computer. */
.cassa-patto {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--verde-velo); border-radius: 14px;
  padding: 16px 18px; margin: 0 0 24px;
  font-size: 15.5px; line-height: 1.55; color: var(--inchiostro-2);
}
.cassa-patto svg { flex: none; color: var(--verde-cupo); margin-top: 2px; }
.cassa-patto b { color: var(--verde-scuro); }

/* Nella cassa i passi sono dei fieldset: via il bordo che il browser ci mette. */
.scheda-modulo .pv-passo { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }

/* ── Come si paga, nella cassa ──────────────────────────────────────────────
   Due link dentro una pillola, come il selettore del sito e quello del
   questionario: e' la stessa scelta, e cambiarle aspetto a ogni pagina
   costringe a impararla tre volte. */
.cassa-periodo {
  display: inline-flex; gap: 3px; padding: 3px; margin: 0 0 16px;
  background: var(--grigio); border: 1px solid var(--bordo); border-radius: 999px;
}
.cassa-periodo a {
  padding: 7px 16px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--tenue);
  transition: background .18s, color .18s, box-shadow .18s;
}
.cassa-periodo a.scelto { background: var(--carta); color: var(--inchiostro); box-shadow: var(--ombra); }
.cassa-periodo a:not(.scelto):hover { color: var(--inchiostro); }

/* Il canone al mese e' il numero grande anche sull'annuale. */
.cassa-mese { margin: 0 0 2px; font-family: var(--titolo); line-height: 1.05; }
.cassa-mese b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.cassa-mese span { font-family: inherit; font-size: 14px; font-weight: 500; color: var(--tenue); margin-left: 6px; }
.cassa-mese small { font-size: 12px; }
/* Il totale dell'anno: c'e', ma non annuncia niente. */
.cassa-totale { margin: 0 0 16px; font-size: 13px; color: var(--tenue); line-height: 1.5; }

/* ═══ IL MOVIMENTO ═══════════════════════════════════════════════════════════
   Poco, e tutto sullo stesso momento: quello in cui compare la risposta.
   Animare anche il resto — le domande, i pulsanti, il piede — farebbe sembrare
   la pagina impegnata invece che svelta, ed e' l'opposto di quello che si vuole
   far sentire.

   Il ritmo e' uno solo: una curva elastica leggera, 420ms, e uno sfasamento di
   70ms fra un elemento e il successivo. Sono gli stessi numeri del sito, dove
   il movimento c'e' gia' sulle schermate e sui pacchetti.

   Chi ha chiesto meno movimento non ne vede nessuno: in fondo al blocco tutto
   viene spento, e la pagina resta identica — solo ferma. */

@keyframes pv-sale {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pv-pop {
  0%   { opacity: 0; transform: scale(.7); }
  60%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pv-riga {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Le quattro taglie salgono una dopo l'altra, da sinistra: e' l'ordine in cui
   si leggono, e lo sfasamento le fa sembrare disposte invece che apparse. */
.pv-piani .pv-piano {
  animation: pv-sale .42s cubic-bezier(.2,.7,.3,1) both;
}
.pv-piani .pv-piano:nth-child(1) { animation-delay: .04s; }
.pv-piani .pv-piano:nth-child(2) { animation-delay: .11s; }
.pv-piani .pv-piano:nth-child(3) { animation-delay: .18s; }
.pv-piani .pv-piano:nth-child(4) { animation-delay: .25s; }

/* Il contrassegno del consigliato arriva DOPO le card: e' il verdetto, e un
   verdetto che compare insieme a tutto il resto non si nota. */
.pv-etichetta-scelto { animation: pv-pop .38s cubic-bezier(.2,.9,.3,1.25) .42s both; }

/* Le ragioni si scrivono una per volta. E' la parte che fa dire "ha capito
   cosa faccio", e vederle arrivare una dopo l'altra e' esattamente il gesto di
   qualcuno che sta contando sulle dita. */
.pv-motivi li { animation: pv-riga .34s cubic-bezier(.2,.7,.3,1) both; }
.pv-motivi li:nth-child(1) { animation-delay: .52s; }
.pv-motivi li:nth-child(2) { animation-delay: .60s; }
.pv-motivi li:nth-child(3) { animation-delay: .68s; }
.pv-motivi li:nth-child(4) { animation-delay: .76s; }
.pv-motivi li:nth-child(5) { animation-delay: .84s; }
.pv-motivi li:nth-child(6) { animation-delay: .92s; }

/* Il patto chiude la scena. */
.pv-patto { animation: pv-sale .42s cubic-bezier(.2,.7,.3,1) .5s both; }

/* Cambiando periodo il prezzo non salta: si scambia. Senza questo, i numeri
   sembrano sbagliarsi da soli. */
.pv-prezzo .v-mese, .pv-prezzo .v-anno,
.pv-anno .v-mese,  .pv-anno .v-anno { animation: pv-riga .26s ease-out both; }

/* La riga che avanza: un velo che scorre dentro, appena percettibile. Dice che
   qualcosa sta lavorando senza mettere in mezzo una rotella. */
.pv-barra-piena { position: relative; overflow: hidden; }
.pv-barra-piena::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: pv-scorre 1.8s ease-in-out infinite;
}
@keyframes pv-scorre { to { transform: translateX(100%); } }

/* Le risposte: un sollevamento appena accennato, che dice "si tocca". */
.pv-opzione { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .pv-piani .pv-piano, .pv-etichetta-scelto, .pv-motivi li, .pv-patto,
  .pv-prezzo .v-mese, .pv-prezzo .v-anno, .pv-anno .v-mese, .pv-anno .v-anno {
    animation: none;
  }
  .pv-barra-piena::after { animation: none; display: none; }
}

/* ── IL RITMO DELLA CASSA ────────────────────────────────────────────────────
   Tolta la barra che sbucava da dietro le schede, gli spazi verticali si
   rimettono in fila. Uno solo, ripetuto: 14 fra un'etichetta e il suo campo,
   28 fra un blocco e il successivo, 40 prima di un cambio di scena. Tre misure
   e basta — quando ce ne sono sette nessuno si accorge che sono diverse, ma la
   pagina sembra scritta a mano. */
.pagina-prova h1 { margin-bottom: 8px; }
.cassa-patto { margin: 22px 0 28px; }

/* Le due schede partono dalla stessa riga e respirano uguale. */
.cassa-griglia { margin-top: 0; }
.scheda-modulo { padding: 28px 30px 26px; }
.riepilogo { padding: 26px 26px 24px; }

/* Ogni passo: l'occhiello, il titolo, la spiegazione, i campi. */
.scheda-modulo .pv-passo > .pv-quanti { margin: 0 0 6px; }
.scheda-modulo .pv-passo h3 { margin: 0 0 4px; }
.scheda-modulo .pv-passo > p { margin: 0 0 22px; }
.scheda-modulo .campo { margin-bottom: 18px; }
.scheda-modulo .campo:last-child { margin-bottom: 0; }

/* I comandi si staccano dai campi, non ci si appoggiano sopra. */
.scheda-modulo .pv-comandi { margin-top: 28px; }
.scheda-modulo .sicuro { margin: 16px 0 0; }

/* Nel riepilogo, le voci sono un elenco: stesso passo fra tutte. */
.riepilogo .voce { padding: 11px 0; }
/* L'ATTRIBUTO hidden DA SOLO NON BASTA, MAI.
   La riga ha un display: flex, e fra quello e il display: none che hidden
   porta dal foglio del browser vince il nostro — cosi' la voce dell'avvio
   guidato restava scritta nel riepilogo al primo passo anche con hidden
   messo, e solo il totale era giusto. E' la terza volta oggi che questa
   trappola morde in questo progetto: ogni volta che si nasconde qualcosa con
   hidden, va scritta anche la regola (25/09/2026). */
.riepilogo .voce[hidden] { display: none; }

/* ── L'INDIRIZZO CHE SI SCEGLIE IN CASSA ──────────────────────────────────────
   Il campo e il suffisso fisso stanno nello stesso riquadro: scrivendo dentro
   un campo normale con ".orthosuite.app" scritto accanto, meta' delle persone
   scrive anche quello. Cosi' invece si vede che la coda non la si tocca. */
.campo-dominio {
  display: flex; align-items: stretch;
  border: 1px solid var(--bordo-campo); border-radius: 12px; overflow: hidden;
  background: var(--fondo-campo, #fff);
}
.campo-dominio input { border: 0 !important; border-radius: 0 !important; flex: 1; min-width: 0; }
.campo-dominio input:focus { outline: none; box-shadow: none; }
.campo-dominio:focus-within { border-color: var(--verde); }
.campo-dominio-coda {
  display: flex; align-items: center; padding: 0 14px;
  background: var(--velo, #f2f4f3); color: var(--tenue);
  font-size: 15px; white-space: nowrap; border-left: 1px solid var(--bordo);
}
/* L'esito del controllo: verde quando e' libero, rosso quando non lo e'.
   Il colore non basta da solo — la frase dice sempre cosa succede. */
.campo-aiuto { display: block; margin-top: 6px; font-size: 13px; color: var(--tenue); }
.campo-aiuto.bene { color: var(--verde-cupo); font-weight: 600; }
.campo-aiuto.male { color: var(--rosso, #b3261e); font-weight: 600; }

/* ── L'AVVIO GUIDATO IN CASSA ─────────────────────────────────────────────────
   Arriva già spuntato a chi sta pagando oggi, e questo obbliga a due cose:
   deve VEDERSI che è stato scelto — bordo acceso, fondo diverso, non una
   spunta piccola in mezzo al modulo — e deve vedersi che si toglie. Una cosa
   preselezionata che non si nota è la definizione di fregatura, e la prima
   volta che qualcuno se ne accorge dalla fattura è anche l'ultima che compra
   qualcosa da noi (25/09/2026). */
.cassa-avvio {
  margin: 26px 0 0; padding: 20px;
  border: 1px solid var(--bordo); border-radius: 16px;
  background: var(--velo, #f7f8f7);
  transition: border-color .18s, background .18s;
}
.cassa-avvio.scelto {
  border-color: var(--verde);
  background: color-mix(in srgb, var(--verde) 7%, transparent);
}
.cassa-avvio h4 {
  margin: 0 0 6px; font-family: var(--titolo); font-size: 19px; font-weight: 700;
  letter-spacing: -.01em;
}
.cassa-avvio .avvio-intro { font-size: 14.5px; line-height: 1.55; color: var(--inchiostro-2); }

/* Tutta la scheda è l'etichetta della spunta: il bersaglio è grande quanto il
   riquadro, non quanto un quadratino di 16 pixel. */
.avvio-scelta { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
/* LA CASELLA E' GRANDE. Ventidue pixel invece dei sedici di sistema: arriva
   gia' spuntata, quindi deve vedersi da lontano che c'e' e che e' messa — una
   spunta che si nota solo cercandola, su una cosa preselezionata, e' la
   definizione di fregatura (25/09/2026). */
.avvio-scelta input {
  margin: 1px 0 0; width: 22px; height: 22px; flex: none;
  accent-color: var(--verde); cursor: pointer;
}
.avvio-corpo { display: block; flex: 1; min-width: 0; }
.avvio-testa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.avvio-nome { font-weight: 700; font-size: 16.5px; }
.avvio-prezzo { font-weight: 700; font-size: 20px; white-space: nowrap; letter-spacing: -.02em; }
.avvio-prezzo small { display: block; font-size: 12px; font-weight: 400; color: var(--tenue); letter-spacing: 0; }
.avvio-ore { display: block; margin-top: 4px; font-size: 14.5px; color: var(--verde-cupo); font-weight: 600; }

.avvio-elenco { display: grid; gap: 9px; margin-top: 14px; }
.avvio-riga { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.avvio-riga svg { flex: none; margin-top: 2px; color: var(--verde-cupo); }

/* DUE CLASSI, NON UNA, e non e' un vezzo: `.gruppo p` (una classe + un
   elemento) batte `.avvio-nota` (una classe sola) per specificita', e vinceva
   lei col suo `margin: 0 0 16px`. Il margine da venti pixel che avevo scritto
   qui non e' mai stato applicato: la riga di separazione finiva appiccicata
   all'ultima voce dell'elenco. E' la stessa trappola gia' pagata altrove in
   questo progetto — una classe semplice che perde contro un selettore
   discendente (25/09/2026).

   E via la riga: dentro una scheda che ha gia' il suo bordo, una seconda
   riga e' rumore. Basta lo spazio. */
.cassa-avvio .avvio-nota {
  margin: 22px 0 0; padding-top: 0; border-top: 0;
  font-size: 13px; line-height: 1.55; color: var(--tenue);
}
/* Stessa ragione: senza la seconda classe vincerebbe `.gruppo p`. Oggi il
   valore coincide, quindi non si vedrebbe — che e' il modo in cui questa cosa
   torna a mordere fra sei mesi, quando uno dei due cambia. */
.cassa-avvio .avvio-intro { margin: 0 0 16px; }

@media (max-width: 560px) {
  .avvio-testa { flex-direction: column; gap: 2px; }
  .avvio-prezzo small { display: inline; }
}

/* La garanzia in fondo al riepilogo. Ripetuta rispetto a quella in cima e non
   e' una svista: sul telefono il riepilogo sta SOTTO il modulo, ed e' l'ultima
   cosa che si legge prima di toccare il pulsante che porta i soldi — cioe'
   esattamente dove torna il dubbio (25/09/2026). */
.cassa-garanzia {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 14px 0 0; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--verde) 9%, transparent);
  font-size: 13px; line-height: 1.5;
}
.cassa-garanzia svg { flex: none; margin-top: 1px; color: var(--verde-cupo); }

/* La garanzia in cima al questionario: chi ci arriva ha cliccato "Provalo 30
   giorni" e sta gia' pensando "gratis". Scoprirlo alla cassa sarebbe una
   fregatura, quindi si dice qui, subito (25/09/2026). */
.pv-garanzia {
  display: inline-flex; gap: 9px; align-items: flex-start; text-align: left;
  margin: 18px auto 0 !important; max-width: 46ch;
  padding: 11px 15px; border-radius: 13px;
  background: color-mix(in srgb, var(--verde) 9%, transparent);
  font-size: 14px; line-height: 1.5; color: var(--inchiostro);
}
.pv-garanzia svg { flex: none; margin-top: 2px; color: var(--verde-cupo); }
.pv-garanzia strong { color: var(--verde-cupo); }