/* ==========================================================================
   I moduli che si attraversano prima di avere un account.
   --------------------------------------------------------------------------
   Il modulo di pagamento (attiva.html) e quello della prova gratuita
   (prova.html) sono la stessa pagina con dentro domande diverse, e chi arriva
   sul secondo dopo aver visto il primo non deve avere l'impressione di aver
   cambiato sito.

   Sta fuori da main.css di proposito, come la presentazione: queste pagine
   vivono prima dell'applicazione, e non devono cambiare aspetto perche'
   qualcuno ha ritoccato il foglio dell'applicazione.
   ========================================================================== */
:root {
  --navy-950:#050B14; --navy-850:#0E1D30; --teal-400:#24C79E; --teal-600:#0A9873;
  --lime-400:#C9F24D; --bg:#F5F8FA; --surface:#FFFFFF; --ink:#0C1A2B;
  --ink-soft:#5A6B80; --line:#E2E9F0; --danger:#D92D20; --danger-bg:#FEF3F2;
}
* { margin:0; padding:0; box-sizing:border-box }
body { font-family:'Manrope',-apple-system,system-ui,sans-serif; background:var(--bg);
       color:var(--ink); line-height:1.6; font-size:16px }
header { background:linear-gradient(160deg,#0E1D30 0%,var(--navy-950) 100%); padding:26px 0 }
.wrap { max-width:620px; margin:0 auto; padding:0 20px }
.brand { display:inline-flex; align-items:baseline; text-decoration:none }
.brand img { height:22px; width:auto; margin-right:-4px }
.brand span { font-size:23px; font-weight:800; letter-spacing:-.5px; color:var(--teal-400) }
.brand .battle { color:var(--lime-400) }
main { padding:40px 0 70px }
h1 { font-size:30px; font-weight:800; letter-spacing:-.8px; margin-bottom:8px }
.piano { font-size:15px; font-weight:700; color:var(--teal-600); margin-bottom:26px }
label small { display:block; margin-top:5px; font-size:12.5px; font-weight:400; color:var(--ink-soft) }
fieldset { border:0; margin-bottom:26px }
legend { font-size:13px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
         color:var(--ink-soft); margin-bottom:12px }
.row { display:flex; gap:12px } .row > * { flex:1 }
.phone { display:flex; align-items:stretch } .phone .prefix { display:flex; align-items:center; padding:0 10px; border:1px solid var(--line); border-right:0; border-radius:10px 0 0 10px; background:var(--bg); color:var(--ink-soft); font-weight:700; font-size:14px } .phone input { border-radius:0 10px 10px 0; flex:1 }
[hidden] { display:none !important }
label { display:block; margin-bottom:12px; font-size:13px; font-weight:700; color:var(--ink-soft) }
input { width:100%; margin-top:5px; padding:12px 14px; font:inherit; font-size:15px;
        color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:11px }
input:focus, select:focus { outline:none; border-color:var(--teal-600); box-shadow:0 0 0 3px rgba(15,180,137,.12) }
select { width:100%; margin-top:5px; padding:12px 14px; font:inherit; font-size:15px; color:var(--ink);
         background:var(--surface); border:1px solid var(--line); border-radius:11px }
select:disabled, input:disabled { color:var(--ink-soft); background:#F2F5F8 }
/* Il campo sbagliato si vede appena si esce da lì, non al momento di pagare. */
input:not(:placeholder-shown):invalid, input.touched:invalid, select.touched:invalid { border-color:var(--danger) }
.hint.errore { color:var(--danger) }
.hint { font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:-6px 0 14px }
button { width:100%; padding:15px; font:inherit; font-size:16px; font-weight:800; color:#fff;
         background:var(--teal-600); border:0; border-radius:12px; cursor:pointer }
button:disabled { opacity:.6; cursor:default }
.error { background:var(--danger-bg); border:1px solid #F3C0BC; color:var(--danger);
         border-radius:11px; padding:14px 16px; margin-bottom:18px; font-size:14px; font-weight:600 }
.nota { margin-top:18px; font-size:13px; color:var(--ink-soft); text-align:center }
.nota a { color:var(--teal-600); font-weight:600 }
@media (max-width:520px) { .row { flex-direction:column; gap:0 } h1 { font-size:25px } }

/* Il logo porta alla home, ma e' un link che bisogna indovinare: chi arriva
   qui da un motore di ricerca o da un link incollato non ha un "indietro" del
   browser che porti da qualche parte. Una via d'uscita scritta serve. */
.back { display:inline-flex; align-items:center; gap:6px; margin-bottom:18px;
        color:var(--ink-soft); text-decoration:none; font-size:14px; font-weight:700 }
.back:hover { color:var(--teal-600) }
.back::before { content:"\2190"; font-size:16px; line-height:1 }

/* ------------------------------------------------------- la prova e' partita
   Il codice a schermo ha la stessa forma della pagina di ritorno da Stripe:
   chi ha visto una delle due riconosce l'altra, ed e' esattamente lo stesso
   gesto — copiare dodici caratteri e andare ad attivare. */
.fatto { text-align: center; padding: 6px 0 10px }
.fatto h1 { margin-bottom: 12px }
.fatto p { color: var(--ink-soft); margin-bottom: 14px }

.codice {
  display: inline-block; margin: 22px 0 8px; padding: 18px 26px; background: var(--surface);
  border: 2px dashed var(--teal-600); border-radius: 14px; font-size: 28px; font-weight: 800;
  letter-spacing: 3px; color: var(--ink);
}

.cta {
  display: inline-block; margin-top: 18px; padding: 14px 26px; background: var(--teal-600);
  color: #fff; text-decoration: none; font-weight: 800; border-radius: 12px;
}

.copia {
  width: auto; padding: 9px 18px; background: transparent; border: 1px solid var(--teal-600);
  color: var(--teal-600); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer;
}

.muted { font-size: 13px }

@media (max-width: 520px) { .codice { font-size: 22px; letter-spacing: 2px; padding: 16px 18px } }