:root {
  --carta: #fbf8f3;
  --carta-2: #f3ede3;
  --bianco: #ffffff;
  --inchiostro: #1f2430;
  --grigio: #5b6170;
  --linea: #e2dbcf;
  --blu: #2b5797;
  --blu-chiaro: #e7eef8;
  --arancio: #d9481c;
  --arancio-scuro: #b93a12;
  --verde: #1f7a4d;
  --verde-chiaro: #e3f3ea;
  --rosso: #c0392b;
  --rosso-chiaro: #fbe5e1;
  --raggio: 14px;
  --ombra: 0 1px 2px rgba(31, 36, 48, .06), 0 6px 20px rgba(31, 36, 48, .06);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 19px;
  line-height: 1.55;
}

a { color: var(--blu); }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 680px; }
.centro { text-align: center; }
.muted { color: var(--grigio); }
.piccolo { font-size: 15px; }
[hidden] { display: none !important; }

/* Intestazione */
.top { padding: 18px 0; border-bottom: 1px solid var(--linea); background: var(--carta); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1; }
.logo-icona { display: block; width: 32px; height: 32px; flex: none; }

.step { padding: 48px 0 64px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 16px; }
h1 { font-size: clamp(32px, 5vw, 46px); }
h2 { font-size: clamp(26px, 4vw, 34px); }
h3 { font-size: 23px; margin-top: 36px; }

.kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blu-chiaro);
  color: var(--blu);
  font-weight: 700;
  font-size: 15px;
}

.lead { font-size: 21px; color: var(--grigio); margin: 0 0 28px; }

/* Pulsanti */
.btn {
  display: inline-block;
  border: 0;
  border-radius: 12px;
  padding: 14px 22px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--arancio); color: #fff; }
.btn-primary:hover { background: var(--arancio-scuro); }
.btn-primary:disabled { opacity: .6; cursor: wait; }
.btn-ghost { background: transparent; color: var(--inchiostro); border: 2px solid var(--linea); }
.btn-ghost:hover { border-color: var(--grigio); }
.btn-big { font-size: 22px; padding: 18px 34px; width: 100%; max-width: 420px; text-align: center; }

.link {
  background: none; border: 0; padding: 0; margin-top: 24px;
  font: inherit; color: var(--blu); text-decoration: underline; cursor: pointer;
}
.link-piccolo { margin: 0; font-size: inherit; }

/* Liste con spunta */
.checks { list-style: none; padding: 0; margin: 28px 0; }
.checks li { position: relative; padding-left: 34px; margin: 10px 0; }
.checks li::before {
  content: "✓";
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--verde-chiaro); color: var(--verde);
  font-weight: 700; font-size: 15px;
  display: grid; place-items: center;
}

.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.confronto div { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 18px; }
.confronto strong { display: block; font-size: 32px; color: var(--blu); }
.confronto span { color: var(--grigio); font-size: 16px; }

/* Test */
.test-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tempo { margin: 0; font-size: 22px; }
.tempo #tempo { font-size: 44px; font-weight: 700; color: var(--blu); font-variant-numeric: tabular-nums; }
.istruzioni { color: var(--grigio); margin: 0 0 18px; }

.testo-box {
  background: var(--bianco);
  border: 2px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 24px 28px;
  height: 260px;
  overflow: hidden;
  cursor: text;
  position: relative;
}
.testo-box.attivo { border-color: var(--blu); }
.testo {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 24px;
  line-height: 1.75;
  color: #9aa0ab;
  white-space: pre-wrap;
  word-break: break-word;
}
.testo span.ok { color: var(--inchiostro); }
.testo span.err { color: var(--rosso); background: var(--rosso-chiaro); border-radius: 3px; }
.testo span.cursore { box-shadow: inset 2px 0 0 var(--arancio); animation: lampeggia 1s steps(1) infinite; }
@keyframes lampeggia { 50% { box-shadow: none; } }

.input-nascosto {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; opacity: 0;
}

/* Opzioni e quiz */
.opzioni { display: grid; gap: 12px; }
.opzione {
  text-align: left;
  background: var(--bianco);
  border: 2px solid var(--linea);
  border-radius: var(--raggio);
  padding: 18px 20px;
  font: inherit;
  font-size: 20px;
  color: var(--inchiostro);
  cursor: pointer;
}
.opzione:hover, .opzione:focus-visible { border-color: var(--blu); background: var(--blu-chiaro); outline: none; }

.quiz-box { margin-top: 8px; }
.quiz-progresso { color: var(--grigio); font-size: 16px; margin-bottom: 8px; }
.quiz-domanda { font-size: 24px; font-weight: 700; margin: 0 0 18px; }

/* Form */
.form { display: grid; gap: 18px; margin-top: 12px; }
.form label { display: grid; gap: 6px; font-weight: 700; }
.form input[type="text"], .form input[type="email"] {
  font: inherit;
  font-weight: 400;
  padding: 14px 16px;
  border: 2px solid var(--linea);
  border-radius: 12px;
  background: var(--bianco);
  color: var(--inchiostro);
}
.form input:focus { outline: none; border-color: var(--blu); }
.form .check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 17px; }
.form .check input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--blu); }
.errore { margin: 0; padding: 12px 16px; border-radius: 10px; background: var(--rosso-chiaro); color: var(--rosso); }
.ok { margin: 0; padding: 12px 16px; border-radius: 10px; background: var(--verde-chiaro); color: var(--verde); }
a.logo { color: inherit; text-decoration: none; }

/* Risultato */
.card {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 24px;
  margin: 24px 0;
}
.barre { display: grid; gap: 14px; }
.barra-riga { display: grid; grid-template-columns: 110px 1fr 48px; gap: 12px; align-items: center; }
.barra-nome { font-weight: 700; font-size: 17px; }
.barra { height: 22px; background: var(--carta-2); border-radius: 999px; overflow: hidden; }
.barra-pieno { height: 100%; background: #b8c3d6; border-radius: 999px; }
.barra-riga.tu .barra-pieno { background: var(--arancio); transition: width 1s ease-out; }
.barra-val { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.evidenza { background: var(--rosso-chiaro); border-color: #f2c7bf; }
.evidenza.positiva { background: var(--verde-chiaro); border-color: #bfe3cd; }
.numero-grande { margin: 0 0 6px; }
.numero-grande #ris-ore { font-size: 56px; font-weight: 700; line-height: 1; }
.numero-grande .unita { font-size: 24px; font-weight: 700; }
.evidenza p:last-child { margin-bottom: 0; }

.nota { background: var(--blu-chiaro); border-radius: var(--raggio); padding: 16px 20px; }

/* Offerta */
.offerta { background: var(--bianco); border-top: 1px solid var(--linea); padding: 56px 0 72px; }
.video-segnaposto {
  aspect-ratio: 16 / 9;
  border-radius: var(--raggio);
  background: var(--inchiostro);
  color: #fff;
  display: grid; place-items: center; align-content: center;
  text-align: center;
  margin: 28px 0;
}
.video-segnaposto span { font-size: 44px; }
.video-segnaposto p { margin: 4px 0 0; opacity: .7; font-size: 16px; }

.programma { display: grid; gap: 12px; margin: 28px 0; }
.programma div { border-left: 4px solid var(--blu); background: var(--carta); padding: 12px 16px; border-radius: 0 10px 10px 0; }
.programma strong { display: block; }
.programma span { color: var(--grigio); }

.prezzo-box {
  text-align: center;
  border: 2px solid var(--arancio);
  border-radius: var(--raggio);
  padding: 28px 20px;
  margin: 36px 0;
  background: #fff7f3;
}
.obiettivo { font-weight: 700; font-size: 21px; margin: 0 0 10px; }
.prezzo { margin: 0; font-size: 26px; }
.prezzo s { color: var(--grigio); }
.prezzo strong { font-size: 52px; color: var(--arancio); margin-left: 8px; }
.prezzo-box .btn-big { margin-top: 16px; }
.errore-pagamento { margin: 12px auto 0; max-width: 420px; font-size: 16px; }
.btn.in-corso { opacity: .75; cursor: progress; }

.garanzia { background: var(--verde-chiaro); border-radius: var(--raggio); padding: 4px 24px 12px; }
.garanzia h3 { margin-top: 20px; }

.faq details { border-bottom: 1px solid var(--linea); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 10px 0 0; color: var(--grigio); }
.faq + .centro { margin-top: 36px; }

/* Footer */
.footer { padding: 28px 0 100px; border-top: 1px solid var(--linea); font-size: 16px; color: var(--grigio); }
.footer p { margin: 4px 0; }

/* Banner cookie */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  max-width: 640px; margin: 0 auto;
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: 0 10px 40px rgba(31, 36, 48, .18);
  padding: 18px 20px;
  font-size: 16px;
  z-index: 10;
}
.cookie p { margin: 0 0 12px; }
.cookie-azioni { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 600px) {
  body { font-size: 18px; }
  .step { padding: 32px 0 48px; }
  .confronto { grid-template-columns: 1fr; }
  .barra-riga { grid-template-columns: 84px 1fr 40px; gap: 8px; }
  .barra-nome { font-size: 15px; }
  .testo { font-size: 19px; }
  .testo-box { padding: 18px; }
  .cookie-azioni .btn { flex: 1; }
}