/* =========================================================
   FANCULO ALLE OBIEZIONI — Landing
   Design system + layout + motion
   ========================================================= */

/* ---------- TOKEN ---------- */
:root {
  /* Colore */
  --violet: #583C96;
  --violet-700: #432D75;
  --violet-900: #2A1D4A;
  --violet-bright: #7C5CCB;
  --violet-tint: #9B86D0;
  --violet-pale: #D2C6F0;
  /* Testi: un unico grigio per titoli e corpo, niente nero */
  --ink: #403E3D;
  --charcoal: #403E3D;
  --graphite: #6B6866;
  /* Fondi: bianco puro. Il secondario è un velo di viola, mai beige/grigio */
  --paper: #FFFFFF;
  --paper-2: #F5F1FC;
  --line: #E7E2F0;
  --line-dark: rgba(255, 255, 255, .12);
  --white: #FFFFFF;

  /* Spazi */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Layout */
  --maxw: 1120px;   /* era 1240: a 1440 la riga dei titoli arrivava a 1096px */
  --gutter: clamp(20px, 5vw, 80px);
  --section-pad: clamp(48px, 7vh, 100px);

  /* Raggi */
  --r-default: 2px;
  --r-card: 6px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --dur-fast: 160ms;
  --dur: 480ms;
  --dur-slow: 760ms;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
/* Fa rispettare l'attributo `hidden` anche quando un elemento ha un
   `display` esplicito (es. .form-success usa display:flex). Senza questo
   reset il pannello di successo coprirebbe il form fin dal caricamento. */
[hidden] { display: none !important; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- UTILITY ---------- */
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.center { text-align: center; }

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--violet);
  margin: 0 0 var(--s-5);
}
.section--dark .eyebrow, .section--violet .eyebrow, .section--ink .eyebrow { color: var(--violet); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--violet); color: #fff; padding: 12px 18px; border-radius: var(--r-default);
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible { outline: 3px solid var(--violet-bright); outline-offset: 3px; border-radius: 2px; }

/* ---------- SEZIONI / RITMO CHIARO-SCURO ---------- */
.section { padding-block: var(--section-pad); position: relative; }
/* Nessun fondo colorato: tutte le sezioni su bianco. La separazione è data
   dal filo sottile e dal marcatore viola sopra al titolo. */
.section--paper,
.section--paper-2,
.section--dark,
.section--violet,
.section--ink { background: var(--white); color: var(--charcoal); }

.section + .section { border-top: 1px solid var(--line); }
/* Metodo e Programma attaccano più in alto: arrivano dopo un blocco che
   chiude già con il suo respiro, e con lo stacco pieno sembravano staccate
   dal discorso. Selettore per id: vince sulla regola base ovunque stia. */
#metodo, #programma { padding-top: clamp(34px, 4.8vh, 68px); }
/* l'ancora non deve finire sotto la barra fissa (vale per i link diretti;
   quelli dell'indice usano lo scorrimento controllato via JS) */
section[id] { scroll-margin-top: 72px; }

/* ---------- Sezione in negativo ---------- */
.section--invert { background: var(--violet-900); color: #fff; }
.section--invert + .section,
.section + .section--invert { border-top: none; }
.section--invert .section-title { color: #fff; }
.section--invert .section-title--sm::before { background: #fff; }
.section--invert .stat-line { color: rgba(255, 255, 255, .82); }
.section--invert .stat-line strong { color: var(--violet-tint); }
/* card su fondo scuro: vetro, non bianco pieno */
.section--invert .night {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .16);
}
.section--invert .night__title { color: #fff; }
.section--invert .night p { color: rgba(255, 255, 255, .78); }
.section--invert .night__day { background: var(--violet-bright); }
.section--invert .night__note { color: var(--violet-tint); }
@media (hover: hover) {
  .section--invert .night:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
}
/* il bottone si inverte: bianco su viola scuro, massimo contrasto */
.section--invert .btn { --btn-bg: #fff; color: var(--violet-900); }
.section--invert .btn::after { background: var(--violet-pale); }

/* Titolo, riga introduttiva e card del Programma sono un blocco solo:
   stanno più stretti degli spazi standard, così si leggono insieme. */
#programma .section-title--sm { margin-bottom: 20px; }
#programma .stat-line { margin-bottom: 36px; }

/* ---------- Indice di navigazione ---------- */
.jump-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
/* Lo spazio sotto l'indice arriva dalla sezione seguente, non dalla barra */
.jump-nav + .section { padding-top: clamp(32px, 4.5vh, 60px); }
.jump-nav__inner {
  display: flex; gap: 10px; padding-block: 9px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.jump-nav__inner::-webkit-scrollbar { display: none; }
.jump-nav a {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 0 0 auto;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet); text-decoration: none;
  padding: 9px 16px;
  border: 1px solid var(--line); border-radius: var(--r-default);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
/* Il viola entra da sinistra, come sui bottoni: stesso gesto in tutta la pagina */
.jump-nav a::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--violet);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--ease-inout);
}
.jump-nav a span { position: relative; display: block; }
.jump-nav a:hover,
.jump-nav a:focus-visible { color: #fff; border-color: var(--violet); transform: translateY(-2px); }
.jump-nav a:hover::after,
.jump-nav a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .jump-nav a, .jump-nav a::after { transition: none; }
  .jump-nav a:hover { transform: none; }
}
@media (min-width: 760px) { .jump-nav__inner { justify-content: center; } }

/* ---------- Screenshot risultati + ingrandimento ---------- */
/* Gli screenshot sono messaggi lunghi: in griglia il testo non è leggibile,
   quindi ogni immagine si apre a schermo intero al click. */
.rr__zoom {
  position: relative;
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; border-radius: 4px; overflow: hidden;
}
/* Segnale che l'immagine si ingrandisce: sempre visibile, perché su touch
   non esiste il passaggio del mouse a suggerirlo. */
.rr__zoom::after {
  content: "";
  position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(22, 18, 30, .74) center / 15px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.8 4.8'/%3E%3C/svg%3E");
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .rr__zoom:hover::after { background-color: var(--violet); }
}
.rr__zoom img {
  width: 100%; height: auto; display: block;
  transition: transform var(--dur) var(--ease-out);
}
@media (hover: hover) { .rr__zoom:hover img { transform: scale(1.03); } }
.rr__zoom:focus-visible { outline: 3px solid var(--violet-bright); outline-offset: 3px; }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 4vw, 40px);
}
.lightbox[hidden] { display: none; }
/* Stato di riposo visibile, ingresso affidato a un'animazione: se le
   animazioni non vengono eseguite il pannello si vede comunque, invece di
   coprire la pagina restando trasparente. */
.lightbox__overlay {
  position: absolute; inset: 0;
  background: rgba(22, 18, 30, .84); backdrop-filter: blur(4px);
}
.lightbox.is-open .lightbox__overlay { animation: lb-fade var(--dur) var(--ease-out); }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__fig {
  position: relative; z-index: 1; margin: 0;
  width: 100%; max-width: 560px;
}
.lightbox.is-open .lightbox__fig { animation: lb-pop var(--dur) var(--ease-out); }
@keyframes lb-pop {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
.lightbox__fig img {
  width: 100%; height: auto; max-height: 76vh; object-fit: contain;
  border-radius: var(--r-card); display: block;
}
.lightbox__cap { text-align: center; margin-top: var(--s-4); color: #fff; }
.lightbox__cap strong {
  display: block;
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .02em;
}
.lightbox__cap span { font-size: 13px; color: rgba(255, 255, 255, .68); }
.lightbox__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.lightbox__close svg { width: 18px; height: 18px; }
body.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lightbox.is-open .lightbox__overlay,
  .lightbox.is-open .lightbox__fig { animation: none; }
  .rr__zoom img { transition: none; }
}

/* Grana film su fondi scuri */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  filter: url(#grainFilter); opacity: .04; mix-blend-mode: overlay;
}

/* ---------- TIPOGRAFIA TITOLI ---------- */
.section-title {
  font-family: "Anton", "Oswald", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(40px, 7vw, 92px);
  line-height: .92;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 var(--s-7);
}
.section-title--invert { color: var(--ink); }
.section--dark .section-title, .section--ink .section-title { color: var(--ink); }

/* Interlinea allineata a quella della subheadline (1.45) e paragrafi più
   ravvicinati: a parità di corpo il testo si legge più compatto e il blocco
   sembra meno lungo. */
.prose p { margin: 0 0 var(--s-4); max-width: 62ch; font-size: clamp(16px, 2.2vw, 21px); line-height: 1.48; }
.prose p:last-child { margin-bottom: 0; }
.prose em { font-style: normal; color: var(--violet); font-weight: 600; }
.prose--invert p { color: var(--charcoal); }
.prose--invert em { color: var(--violet); }

/* ---------- BARRATURA (firma) ---------- */
/* Le parole-accento restano in viola, senza barratura */
.strike { position: relative; display: inline-block; color: var(--violet); }
.section--dark .strike, .section--ink .strike, .section--violet .strike { color: var(--violet); }
.strike::after { display: none; }

/* ---------- BOTTONE CTA ---------- */
.btn {
  --btn-bg: var(--violet);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Geist", sans-serif; font-weight: 600;
  /* Tutti i bottoni d'azione in maiuscolo, deciso qui e non nei testi: così
     vale anche per le etichette che il JS scrive a runtime ("Continua",
     "Prendi il tuo posto"). Non tocca le risposte del quiz, i link alle
     informative e "più dettagli qui", che non sono .btn. */
  text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: none;
  background: transparent; color: var(--white);
  padding: 16px 30px; border-radius: var(--r-card); font-size: 16px;
  overflow: hidden; isolation: isolate; line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--violet-700);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease-inout);
}
.btn:hover::after { transform: scaleX(1); }
.btn:active { transform: scale(.98); }
.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn--lg { padding: 19px 38px; font-size: 18px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none; }
}

/* CTA ripetuta in ogni sezione */
.section-cta, .vt__cta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: clamp(10px, 3vw, 22px); }
.section-cta { margin-top: var(--s-7); }

/* ========================================================= */
/* HEADER STICKY                                             */
/* ========================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(251, 250, 248, .9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease-out);
}
.site-header.is-visible { transform: translateY(0); }
.site-header__inner {
  max-width: var(--maxw); margin-inline: auto; padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.site-header__right { display: flex; align-items: center; gap: var(--s-5); }
.header-date { font-size: 12px; letter-spacing: .14em; color: var(--violet); }
.wordmark {
  font-family: "Anton", sans-serif; font-size: 15px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink);
}
@media (max-width: 640px) {
  .header-date { display: none; }
  .wordmark { font-size: 13px; max-width: 48vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* ========================================================= */
/* HERO                                                      */
/* ========================================================= */
/* Padding-top ridotto: la sticky bar è sempre visibile in alto (desktop),
   quindi serve solo lo spazio per non finirci sotto, non un respiro ampio. */
/* Lo spazio in cima non serve più a far posto alla barra fissa, che ora
   compare solo dopo il primo bottone: resta solo l'aria che ci vuole. */
.hero { --hero-pt: clamp(40px, 5.5vh, 68px);
  position: relative; padding-block: var(--hero-pt) clamp(32px, 4.5vh, 56px); overflow: hidden;
  background: radial-gradient(85% 80% at 16% 14%, rgba(124, 92, 203, .10), transparent 60%), var(--white); }
@media (max-width: 640px) { .hero { --hero-pt: 40px; padding-bottom: 34px; } }
.hero__grid {
  /* niente z-index: creerebbe un contesto di impilamento e il multiply della
     grafica non vedrebbe più il bagliore sotto. Resta comunque sopra di lui
     perché viene dopo nel documento. */
  position: relative;
  display: grid; grid-template-columns: 1fr; justify-items: center;
}
.hero__content { text-align: center; width: 100%; max-width: 920px; margin-inline: auto; }
/* margin-top qui e non su .countdown--center: quella classe la usa anche il
   countdown della CTA finale, che deve restare com'è. */
.hero__content .countdown { justify-content: center; margin-top: var(--s-6); margin-bottom: var(--s-2); }

/* Luce atmosferica dietro il titolo (statica, segue il mouse via JS) */
.hero__glow {
  position: absolute; z-index: 0; top: 28%; left: 14%;
  width: min(70vw, 860px); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(124, 92, 203, .12), rgba(124, 92, 203, 0) 66%);
  filter: blur(22px);
  opacity: 0; transform: scale(.94);
  transition: opacity 1400ms var(--ease-out), transform 1800ms var(--ease-out);
  will-change: transform;
}
.hero.is-loaded .hero__glow { opacity: 1; transform: scale(1); }

/* Indicatore live — alone che pulsa, come una spia di diretta */
.live-dot {
  position: relative;
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet-bright); margin-right: 10px; vertical-align: 1px;
  box-shadow: 0 0 0 4px rgba(124, 92, 203, .16);
}
.live-dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--violet-bright);
  animation: live-pulse 2s var(--ease-out) infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; }
}

/* Scroll cue — minimale e tenue */
.hero__scroll { position: absolute; z-index: 2; left: 50%; bottom: 24px; transform: translateX(-50%); width: 1px; height: 46px; background: linear-gradient(rgba(88, 60, 150, .45), transparent); overflow: hidden; }
.hero__scroll span { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: var(--violet); animation: scroll-cue 3200ms var(--ease-inout) infinite; opacity: .7; }
@keyframes scroll-cue { 0% { transform: translateY(-110%); } 100% { transform: translateY(220%); } }
@media (max-width: 940px) { .hero__scroll { display: none; } }
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
}

.hero__title {
  font-family: "Anton", "Oswald", sans-serif; font-weight: 400;
  text-transform: uppercase; margin: 0 0 var(--s-6);
  font-size: clamp(56px, 12vw, 160px); line-height: .86; letter-spacing: -.02em;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line__inner { display: block; white-space: nowrap; will-change: transform; }
.hero__title .strike { color: var(--violet); }

/* headline "azione" lunga: misura normale, va a capo, niente nowrap/barrato */
.hero__title--action { font-size: clamp(56px, 9.15vw, 128px); line-height: 1.02; letter-spacing: -.01em; white-space: normal; text-wrap: balance; text-align: center; max-width: 100%; margin-inline: auto; overflow-wrap: break-word; }
.hero__title--action .accent { color: var(--violet); }

/* mobile: headline piu grande */
@media (max-width: 640px) { .hero__title--action { font-size: clamp(58px, 16.1vw, 82px); } }

/* "2ª edizione": firma corsiva sotto il titolo, si "scrive" al carico pagina.
   L'effetto è un pennello che scopre il testo da sinistra a destra: il testo
   è mascherato e la maschera si allarga, così sembra tracciato a mano. */
.hero__ed {
  display: block;
  width: fit-content;
  margin: .06em auto 0;
  line-height: 0;
}
.hero__ed svg {
  display: block;
  height: .46em;      /* scala insieme al titolo */
  width: auto;
  overflow: visible;
}
/* Tratto della penna: monolinea, punte arrotondate */
.hero__ed-ink path {
  fill: none;
  stroke: var(--violet);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Stato di riposo: tratto completo e visibile. L'animazione parte solo con
     .is-loaded, così se il JS non gira la scritta resta leggibile. */
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hero.is-loaded .hero__ed-ink path {
  animation: ed-stroke var(--dur, 200ms) cubic-bezier(.4, .05, .6, 1) var(--delay, 0ms) both;
  animation-delay: calc(var(--delay, 0ms) + 350ms);
}
@keyframes ed-stroke {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.is-loaded .hero__ed-ink path { animation: none; }
}

.hero__pre {
  font-size: clamp(16px, 2.2vw, 21px); font-weight: 600; color: var(--charcoal);
  /* interlinea più ariosa della 1.35 di prima: serve a non far toccare fra
     loro le pennellate quando la frase evidenziata va a capo */
  line-height: 1.6; max-width: 46ch; margin: 0 auto var(--s-5);
  text-transform: uppercase; letter-spacing: .015em;
}
/* niente accento viola: resta in grassetto nel colore del testo.
   nowrap perché "2-5K" andava a capo spezzandosi in "2-" e "5K" */
.hero__pre strong { color: inherit; white-space: nowrap; }
/* Chip data: squadrata come i bottoni, vuota, bordo viola fisso */
/* Riquadro sobrio: la data è un'informazione, non un richiamo. Bordo
   sottile e chiaro, corpo piccolo, sta su una riga sola anche sul telefono. */
.hero__date {
  display: inline-block;
  font-size: clamp(11.5px, 1.3vw, 13px); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet);
  background: transparent;
  /* contorno marcato: viola al 42% su bianco (era al 26%, e var(--line) al 14%).
     Angoli a 6px come i bottoni: squadrato, secondo la regola della casa. */
  border: 1px solid rgba(88, 60, 150, .42);
  border-radius: var(--r-card);
  padding: 7px 16px;
  margin: 0 0 var(--s-3);
}
/* Su desktop l'etichetta sta su una riga sola. Sul telefono non ci starebbe mai
   (servono 420px, ce ne sono 335): tenendo unita la parte con le date, l'a capo
   cade dopo "Live su Zoom ·" invece che in mezzo a una data. Due righe volute,
   non spezzate a caso. */
.hero__date-quando { white-space: nowrap; }
/* Stessa formula del gancio della thank you page (.ty-hero__hook), ingrandita due
   volte del 2% (totale x1.061208): 19->20.163, 14.8->15.7059, 1.13->1.1992,
   31->32.8974. Le due pagine non sono più identiche al pixel: questa è del 6%
   scarso più grande, voluto.
   Il grigio è #4A4847: è var(--ink) #403E3D schiarito tre volte di 2 punti di
   luminosità HSL (24.51% -> 28.47%). Vale solo qui: il token globale resta
   #403E3D e tutto il resto delle due pagine non si muove. */
.hero__sub { font-size: clamp(20.163px, 15.7059px + 1.1992vw, 32.8974px); line-height: 1.28; font-weight: 700; color: #4A4847; margin: var(--s-3) auto var(--s-5); max-width: 30ch; }
/* tre capoversi: la prima e l'ultima riga sono affermazioni secche, quella in
   mezzo spiega — stanno vicine ma separate */
/* Due trattini di pennarello, uno sopra e uno sotto: incorniciano la subheadline
   come una citazione, le fanno spazio attorno e dicono all'occhio dove fermarsi
   a leggere. È lo stesso segno di .mark — l'elemento del marchio — schiacciato a
   trattino, così non introduco un linguaggio grafico nuovo. Sono pseudo-elementi
   decorativi: non entrano nel testo letto dagli screen reader. */
.hero__sub::before,
.hero__sub::after {
  content: "";
  display: block;
  width: clamp(40px, 5.4vw, 56px);
  height: 7px;
  margin-inline: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 58' preserveAspectRatio='none'%3E%3Cpath fill='%23583C96' d='M3.4,15.6 C42,7.2 96,11.4 148,8.6 C199,5.9 246,10.8 293,7.4 C298.4,13.6 299.6,31 296.2,45.4 C249,53.4 196,48.2 145,51.2 C96,54 47,50.4 9.4,52.6 C2.6,45.8 0.8,25.4 3.4,15.6 Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.hero__sub::before { margin-bottom: var(--s-5); }
.hero__sub::after  { margin-top: var(--s-5); }

.hero__sub p { margin: 0 0 var(--s-4); }
.hero__sub p:last-child { margin-bottom: 0; }
.hero__sub strong { color: var(--violet); font-weight: 800; }
.hero__excl { display: block; width: fit-content; max-width: 100%; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--violet); margin: 0 auto var(--s-6); background: var(--white); padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--line); box-shadow: 0 6px 20px -8px rgba(88, 60, 150, .25); }
/* copertina sotto la sub-headline dell'hero */
.hero__cover { margin: 0 auto var(--s-5); max-width: 720px; width: 100%; }
.hero__cover img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px -24px rgba(42, 29, 74, .45);
}
@media (max-width: 640px) {
  .hero__cover { max-width: 100%; margin-bottom: var(--s-4); }
}

/* La grafica esce dalla colonna e tocca i bordi della finestra. Il calcolo: il
   contenitore è centrato sulla finestra, quindi margini negativi da metà
   contenitore a metà finestra la portano esattamente da bordo a bordo. .hero ha
   già overflow:hidden, così le 100vw non creano scorrimento laterale.
   DEVE stare dopo il @media qui sopra: .hero__cover ha la stessa specificità e
   se venisse dopo rimetterebbe max-width:100% azzerando lo sconfinamento.

   Via angoli tondi e ombra: erano loro a farla leggere come una scheda posata
   sopra la pagina invece che come parte della pagina.

   multiply: i margini del file sono bianco pieno (#FFFFFF), mentre il fondo
   della hero è velato di lilla. Appoggiata sopra si vedeva il rettangolo. Con
   multiply il bianco diventa trasparente e la velatura attraversa la grafica:
   il bordo sparisce. Perché funzioni il bagliore deve stare nello stesso
   contesto di impilamento, per questo .hero__grid non ha più z-index. */
/* Fascia viola della pre-headline: esce dalla colonna come la grafica e risale
   fino al bordo superiore annullando il padding della hero, così è una fascia
   piena e non un riquadro che galleggia. Il testo dentro resta incolonnato a
   46ch dalle regole di .hero__pre. */
.hero__preband {
  width: auto; max-width: none;
  margin-inline: calc(50% - 50vw);
  margin-top: calc(-1 * var(--hero-pt));
  /* un filo di stacco dalla grafica: la fascia respira senza staccarsene */
  margin-bottom: var(--s-2);
  /* Sfumatura sulla scala di viola già in palette: parte scura a sinistra e
     si schiarisce verso destra, con una leggera inclinazione così non sembra
     una banda piatta. Il var(--violet) sotto resta come ripiego pieno.
     Il testo sta incolonnato al centro: gli estremi chiari della sfumatura
     cadono dove non c'è testo, quindi il contrasto non ne risente. */
  background: var(--violet);
  background-image: linear-gradient(105deg,
    var(--violet-900) 0%,
    var(--violet-700) 26%,
    var(--violet) 52%,
    var(--violet-bright) 100%);
  /* sopra/sotto più stretti dei fianchi: la fascia resta bassa */
  padding: var(--s-2) var(--s-5);
}
.hero__preband .hero__pre { color: #fff; margin-bottom: 0; }

.hero__cover--bleed { width: auto; max-width: none; margin-inline: calc(50% - 50vw); }
.hero__cover--bleed img { border-radius: 0; box-shadow: none; mix-blend-mode: multiply; }

/* ---------- ESTRATTO 1ª EDIZIONE (dentro l'hero) ---------- */
.hero__replay { margin: var(--s-8) auto var(--s-7); max-width: 780px; width: 100%; }
.hero__replay-title {
  font-family: "Anton", "Oswald", sans-serif; font-weight: 400;
  text-transform: uppercase; color: var(--ink);
  font-size: clamp(30px, 5.2vw, 56px); line-height: .98; letter-spacing: -.01em;
  margin: 0 0 var(--s-3); text-wrap: balance;
}
.hero__replay-sub {
  font-size: clamp(15.5px, 1.9vw, 18px); line-height: 1.5; color: var(--graphite);
  max-width: 52ch; margin: 0 auto var(--s-5);
}
.hero__player {
  position: relative; width: 100%;
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(42, 29, 74, .45);
  background: #000;
}
@media (max-width: 640px) {
  .hero__replay { margin: var(--s-7) auto var(--s-6); }
}

.hero__cta { margin-top: var(--s-2); }
.hero__cta--top { margin-bottom: var(--s-2); }

/* ---------- COUNTDOWN ---------- */
.countdown { display: flex; align-items: flex-end; gap: var(--s-3); margin: 0 0 var(--s-7); }
.countdown--center { justify-content: center; margin-top: var(--s-7); }
.countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.countdown__num {
  font-size: clamp(28px, 5vw, 44px); font-weight: 500; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; perspective: 200px;
}
.section--paper .countdown__num, .section--paper-2 .countdown__num { color: var(--charcoal); }
.countdown__label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--violet); }
.countdown__sep { font-size: clamp(24px, 4vw, 38px); color: var(--violet); align-self: flex-start; line-height: 1.2; }
.countdown__num.is-tick { animation: tick 220ms var(--ease-out); }
@keyframes tick {
  0% { transform: rotateX(-90deg); opacity: .3; }
  100% { transform: rotateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .countdown__num.is-tick { animation: none; }
}

/* ---------- BANNER DI QUALIFICA (sotto il countdown) ---------- */
/* Tratto di pennarello dietro a una frase: stesso segno della grafica di
   copertina, riusabile ovunque serva evidenziare. */
.mark {
  color: #fff;
  font-weight: 700;
  padding: 1px 10px 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 58' preserveAspectRatio='none'%3E%3Cpath fill='%23583C96' d='M3.4,15.6 C42,7.2 96,11.4 148,8.6 C199,5.9 246,10.8 293,7.4 C298.4,13.6 299.6,31 296.2,45.4 C249,53.4 196,48.2 145,51.2 C96,54 47,50.4 9.4,52.6 C2.6,45.8 0.8,25.4 3.4,15.6 Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* se la frase va a capo, ogni riga riceve il proprio tratto */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Frase unica, senza riquadro: corpo e interlinea allineati alla subheadline */
.hero__note {
  max-width: 46ch; margin: var(--s-6) auto 0;
  text-align: center;
  font-size: clamp(16px, 2.2vw, 21px);
  line-height: 1.6;
  color: var(--charcoal);
}
@media (max-width: 640px) {
  .hero__note { margin-top: var(--s-5); }
}

/* ---------- COPERTINA HERO ---------- */
.hero__media { position: relative; z-index: 2; max-width: 640px; margin: var(--s-4) auto var(--s-7); }
.hero__media img {
  width: 100%; height: auto; display: block; border-radius: var(--r-card);
  box-shadow: 0 30px 64px -30px rgba(88, 60, 150, .55), 0 2px 12px rgba(0, 0, 0, .08);
}

/* ========================================================= */
/* POPUP / MODALE FORM                                       */
/* ========================================================= */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
/* Riposo visibile, ingresso affidato a un'animazione: se le animazioni non
   vengono eseguite il pannello si vede comunque, invece di coprire la pagina
   restando trasparente. */
.modal__overlay { position: absolute; inset: 0; background: rgba(22, 18, 30, .55); backdrop-filter: blur(4px); }
.modal.is-open .modal__overlay { animation: modal-fade var(--dur) var(--ease-out); }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px); /* su mobile 100vh esclude le barre del browser */
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--white); border: 2px solid var(--violet); border-radius: var(--r-card);
  box-shadow: 0 30px 80px -30px rgba(42, 29, 74, .55);
}
.modal.is-open .modal__dialog { animation: modal-pop var(--dur) var(--ease-out); }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal__dialog .form-card { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); }
.form-card--modal { padding: 0; overflow: hidden; border-top: none; }
.form-card--modal .form-card__inner { padding: clamp(16px, 3vw, 24px); }
/* Popup compatto: entra in una schermata, semplice da compilare */
.form-card--modal .form-card__ticket { max-width: 180px; margin: 0 auto var(--s-2); }
.form-card--modal .form-card__date { font-size: 11px; padding: 5px 12px; margin: 0 0 var(--s-2); }
.form-card--modal .form-card__title { font-size: clamp(21px, 3vw, 26px); margin-bottom: 4px; }
.form-card--modal .form-card__lead { font-size: 14px; margin-bottom: var(--s-3); }
.form-card--modal .form-card__excl { font-size: 10px; margin-bottom: var(--s-4); padding-left: 10px; }
.form-card--modal .field { margin-bottom: var(--s-3); }
.form-card--modal .field--float input,
.form-card--modal .field--float select { height: 50px; padding: 18px 14px 6px; }
.form-card--modal .field--float label { top: 15px; }
.form-card--modal .field__hint { margin-top: 3px; }
.form-card--modal .btn--lg { padding: 15px 30px; font-size: 16px; }
.form-card--modal .form-card__fine { margin-top: var(--s-3); }
.form-card__media { line-height: 0; background: var(--violet); }
.form-card__media img { width: 100%; height: auto; display: block; }
.form-card__ticket { max-width: 250px; margin: 0 auto var(--s-4); }
.form-card__ticket img { width: 100%; height: auto; display: block; }
.form-card__date { display: inline-block; font-family: "Geist Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--violet); border-radius: var(--r-pill); padding: 6px 14px; margin: 0 0 var(--s-3); }
.form-card__privacy { font-size: 11px; color: var(--graphite); text-align: center; margin: var(--s-3) 0 0; }
.form-card__privacy a { color: var(--violet); }
.form-card__excl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--violet); line-height: 1.5; margin: 0 0 var(--s-5); padding-left: 12px; border-left: 2px solid var(--violet); }
.modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--white); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.modal__close:hover { background: var(--paper-2); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .modal__overlay, .modal__dialog { transition: opacity 120ms linear; transform: none; }
}

/* ========================================================= */
/* FORM CARD                                                 */
/* ========================================================= */
.form-card {
  position: relative;
  background: var(--white); color: var(--charcoal);
  border-radius: var(--r-card); padding: clamp(24px, 3vw, 40px);
  border-top: 3px solid var(--violet);
  box-shadow: 0 26px 54px -26px rgba(88, 60, 150, .35), 0 2px 10px rgba(0, 0, 0, .06);
}
.form-card__title { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 3vw, 34px); line-height: .95; margin: 0 0 var(--s-3); color: var(--ink); }
.form-card__lead { font-size: 15px; color: var(--graphite); margin: 0 0 var(--s-6); }
.form-card__fine { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--graphite); text-align: center; margin: var(--s-4) 0 0; }

.field { margin-bottom: var(--s-5); }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--charcoal); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font-family: inherit; font-size: 16px;
  color: var(--ink); background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--r-default); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(88,60,150,.14); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5A5A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
/* voce "Seleziona…" in grigio finché non si sceglie */
.field--select select:invalid { color: var(--graphite); }
/* Selettore paese sul telefono (intl-tel-input) */
.field--phone .iti { display: block; width: 100%; }
.field--phone input { padding-left: 52px; }
.iti--container { z-index: 99999 !important; }
.field__hint { display: block; font-size: 11px; color: var(--graphite); margin-top: 5px; letter-spacing: .04em; }
.field__error { display: block; font-size: 13px; color: #B3261E; margin-top: 6px; min-height: 0; }
.field.is-invalid input, .field.is-invalid select { border-color: #B3261E; }

/* Checkbox custom */
.field--check { margin-top: var(--s-2); }
.checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--graphite); }
.checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkbox__box { flex: 0 0 22px; width: 22px; height: 22px; border: 1.5px solid #B8B2A8; border-radius: var(--r-default); background: var(--white); position: relative; transition: border-color var(--dur-fast), background var(--dur-fast); margin-top: 1px; }
.checkbox input:checked + .checkbox__box { background: var(--violet); border-color: var(--violet); }
.checkbox input:checked + .checkbox__box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox input:focus-visible + .checkbox__box { outline: 3px solid var(--violet-bright); outline-offset: 2px; }
.checkbox__text a { color: var(--violet); text-decoration: underline; }

/* Gate di qualifica (pre-pop-up)
   Il pannello parla la lingua della pagina: pillola con la data, titolo in
   Anton con il tratto di pennarello sulla frase che conta, elenco con le
   spunte viola. Niente riquadro beige: fuori palette e piatto. */
/* Il contenuto parte sotto al tasto di chiusura, che sta in alto a destra. */
.modal-gate { padding: 56px clamp(20px, 4vw, 32px) clamp(20px, 4vw, 32px); text-align: left; }
.gate__badge {
  display: inline-block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--violet);
  padding: 5px 12px; border-radius: var(--r-default); margin-bottom: var(--s-4);
}
.gate__title {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(27px, 4vw, 34px); line-height: 1.04; letter-spacing: .01em;
  color: var(--ink); margin: 0 0 var(--s-4);
}
/* il tratto di pennarello ha bisogno di respiro fra le righe */
.gate__title .mark { line-height: 1.3; }
.gate__lead { font-size: 15px; line-height: 1.5; color: var(--graphite); margin: 0 0 var(--s-4); }

.gate__list { display: grid; border-top: 1px solid var(--line); }
.gate__list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.45; color: var(--charcoal);
}
.gate__ic {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(88, 60, 150, .1); color: var(--violet);
  display: grid; place-items: center; margin-top: 1px;
}
.gate__ic svg { width: 13px; height: 13px; }
.gate__seal {
  margin: var(--s-5) 0; text-align: center;
  font-size: clamp(16px, 2vw, 18px); line-height: 1.5; color: var(--charcoal);
}
.gate__seal strong { color: var(--violet); font-weight: 700; }

.modal-gate__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); }
.modal-gate__actions .btn { width: 100%; }
.modal-gate__no { background: none; border: none; padding: 6px; font-size: 14px; color: var(--charcoal); opacity: .7; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.modal-gate__no:hover { opacity: 1; }

/* Messaggio per chi non è in target */
.modal-gate--reject { text-align: center; }
.modal-gate--reject .gate__title { text-align: center; }
.modal-gate--reject p { margin: 0 auto var(--s-5); max-width: 40ch; font-size: 15px; line-height: 1.55; color: var(--charcoal); }
.modal-gate--reject .btn { margin-top: var(--s-2); }

/* ---------- Questionario di iscrizione ---------- */
/* Lo spazio in alto tiene la domanda lontana dal tasto di chiusura, che sta
   sopra a destra; la barra di avanzamento passa sotto, sul bordo del pannello,
   dove il tasto non arriva. */
.quiz { position: relative; padding: 52px clamp(20px, 4vw, 30px) clamp(20px, 4vw, 30px); }
.quiz__bar { position: absolute; top: 0; left: 0; right: 0; display: block; height: 3px; background: var(--line); overflow: hidden; }
.quiz__fill { display: block; height: 100%; width: 0; background: var(--violet); transition: width var(--dur) var(--ease-out); }
.quiz__count { display: flex; align-items: center; margin: 0 0 var(--s-3); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
/* Il fieldset serve a legare la domanda alle sue risposte per chi usa uno
   screen reader; visivamente non deve portarsi dietro bordo e margini. */
.qstep { border: 0; margin: 0; padding: 0; min-width: 0; }
/* La domanda ha lo stesso carattere dei titoli della pagina: è quello che
   lega il pannello al resto, invece di sembrare un modulo qualsiasi. */
.quiz__q {
  display: block; width: 100%; float: none; padding: 0;
  margin: 0 0 var(--s-5);
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(22px, 3vw, 28px); line-height: 1.06; letter-spacing: .01em;
  color: var(--ink);
}
.quiz__q .mark { line-height: 1.3; }
.q-opts { display: grid; gap: 10px; }
.q-opt {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font-family: inherit; font-size: 15px; line-height: 1.3; color: var(--charcoal);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-card);
  padding: 14px 16px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* Pallino di scelta: da vuoto a viola pieno con la spunta, senza input
   nascosti da tenere allineati. */
.q-opt::before {
  content: ""; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #B8B2A8; background: var(--white);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.q-opt::after {
  content: ""; position: absolute; left: 24px; top: 50%;
  width: 5px; height: 10px; margin-top: -7px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.q-opt em { display: block; font-style: normal; font-size: 12.5px; color: var(--graphite); margin-top: 2px; }
@media (hover: hover) {
  .q-opt:hover { border-color: var(--violet); transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(88, 60, 150, .55); }
}
.q-opt.is-on { border-color: var(--violet); background: rgba(88, 60, 150, .06); }
.q-opt.is-on::before { border-color: var(--violet); background: var(--violet); }
.q-opt.is-on::after { opacity: 1; transform: rotate(45deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .q-opt, .q-opt::before, .q-opt::after { transition: none; }
  .q-opt:hover { transform: none; }
}
.q-altro { margin: var(--s-4) 0 0; }
/* etichette dei campi in mono maiuscolo, come le altre etichette della pagina */
.quiz .field label {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 8px;
}

.quiz__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); }
.quiz__actions .btn { margin-left: auto; }
.quiz__back {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--charcoal); opacity: .7;
  text-decoration: underline; text-underline-offset: 3px;
}
.quiz__back:hover { opacity: 1; }
#iscrErrore { text-align: center; }
/* Qui il pannello di successo non si sovrappone al form: il form sparisce e
   questo prende il suo posto, quindi sta nel flusso e regge lui l'altezza. */
#iscrSuccesso { position: static; min-height: 320px; border-radius: 0; }

/* ---------- Documenti legali nel pannello ----------
   Testo lungo: la colonna resta a misura di lettura anche se il pannello è
   largo, altrimenti le righe diventano illeggibili. */
/* lo spazio in cima tiene la data lontana dal tasto di chiusura: su telefono
   la riga è lunga e ci finiva sotto */
.doc { padding: 56px clamp(20px, 4vw, 44px) clamp(24px, 4vw, 44px); max-width: 72ch; }
.doc__date { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); margin: 0 0 var(--s-3); }
.doc__title {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 42px); line-height: 1; color: var(--ink);
  margin: 0 0 var(--s-5);
}
.doc h3 {
  font-size: clamp(16px, 2vw, 18px); font-weight: 700; color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
}
.doc h4 { font-size: 15px; font-weight: 700; color: var(--violet); margin: var(--s-5) 0 var(--s-2); }
.doc p { font-size: 14.5px; line-height: 1.65; color: var(--charcoal); margin: 0 0 var(--s-3); }
.doc ul { display: grid; gap: 10px; margin: 0 0 var(--s-3); }
.doc li {
  position: relative; padding-left: 20px;
  font-size: 14.5px; line-height: 1.6; color: var(--charcoal);
}
.doc li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--violet);
}
.doc a, .doc__link {
  color: var(--violet); text-decoration: underline; text-underline-offset: 2px;
}
/* il rimando alla privacy dentro la cookie policy è un bottone, ma deve
   leggersi come il testo che lo circonda */
.doc__link { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Pannello esclusione */
.exclude-panel { overflow: hidden; background: var(--paper-2); border-left: 3px solid var(--violet); border-radius: var(--r-default); margin-bottom: var(--s-5); }
.exclude-panel p { margin: 0; padding: 14px 16px; font-size: 14px; color: var(--charcoal); }

/* Stato successo */
.form-success { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(24px, 4vw, 48px); background: var(--white); border-radius: var(--r-card); }
.form-success__title { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 4vw, 44px); margin: var(--s-5) 0 var(--s-3); color: var(--ink); }
.form-success__text { color: var(--graphite); max-width: 34ch; margin: 0; }
.success-check { width: 64px; height: 64px; }
.success-check__circle { stroke: var(--violet); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; }
.success-check__path { stroke: var(--violet); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; }
.form-success.is-shown .success-check__circle { animation: draw 500ms var(--ease-out) forwards; }
.form-success.is-shown .success-check__path { animation: draw 400ms var(--ease-out) 350ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ========================================================= */
/* IL RIBALTAMENTO                                           */
/* ========================================================= */
.flip-title {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(36px, 6.5vw, 88px); line-height: .94; letter-spacing: -.01em;
  margin: 0 0 var(--s-7); color: var(--ink);
}
.flip-title > span { display: block; }
.flip-title__accent { color: var(--violet); }
.flip-title .strike { display: inline-block; color: var(--violet); }

/* ========================================================= */
/* LE DUE SERATE + 8 FASI                                    */
/* ========================================================= */
.nights { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-9); }
@media (max-width: 760px) { .nights { grid-template-columns: 1fr; } }
.night { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(24px, 3vw, 36px); }
.night__title { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 3vw, 34px); line-height: .95; margin: 0 0 var(--s-4); color: var(--ink); }
.night p { margin: 0 0 var(--s-3); }
.night__note { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--violet); margin-top: var(--s-4); }

/* ---- SNAKE MAP: serpentina con card in flusso (stabile) ---- */
.journey { margin-top: var(--s-9); }
.journey__eyebrow { text-align: center; margin-bottom: var(--s-8); }

.snake { position: relative; max-width: 720px; margin: 0 auto; }

/* strada serpentina (SVG dietro le card) */
.snake__road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.snake__path { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 11; }
.snake__path--fill { stroke: var(--violet); stroke-width: 3; stroke-dasharray: none; }

.snake__stops { position: relative; z-index: 1; }

.snode { position: relative; min-height: 116px; display: flex; align-items: center; }
.snode--left { justify-content: flex-start; }
.snode--right { justify-content: flex-end; }

/* nodo sulla strada, agganciato al bordo INTERNO reale della card */
.snode__node {
  position: absolute; top: 50%;
  width: 18px; height: 18px; border-radius: 50%; z-index: 2;
  background: var(--paper); border: 2px solid var(--line);
  box-shadow: 0 0 0 5px var(--paper);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.snode--left .snode__node { right: -9px; transform: translate(50%, -50%); }
.snode--right .snode__node { left: -9px; transform: translate(-50%, -50%); }
.snode.is-on .snode__node { background: var(--violet); border-color: var(--violet); box-shadow: 0 0 0 5px var(--paper), 0 0 0 8px rgba(88, 60, 150, .18); }
.snode--bonus .snode__node { border-style: dashed; }

/* card leggibile */
.snode__card {
  position: relative; min-width: 0; box-sizing: border-box;
  width: 40%; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px 20px;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.snode.is-on .snode__card { border-color: var(--violet); box-shadow: 0 14px 34px -16px rgba(88, 60, 150, .45); }
.snode__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.snode__num { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--violet); }
.snode__tag { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--violet); border: 1px solid var(--violet); border-radius: var(--r-pill); padding: 2px 9px; }
.snode__tag--end { color: #fff; background: var(--violet); }
.snode__name { font-family: "Geist", sans-serif; font-size: clamp(16px, 1.9vw, 21px); font-weight: 600; line-height: 1.2; color: var(--ink); margin: 4px 0 0; }
.snode--bonus .snode__card { border-style: dashed; }
.snode--bonus .snode__name { color: var(--violet-700); }
.snode--end .snode__name .strike { color: var(--ink); }
/* barratura che funziona anche su più righe (no nowrap, no linea singola disegnata) */
.snode__name .strike { white-space: normal; text-decoration: none; }
.snode__name .strike::after { display: none; }
.snode__note { font-size: 13px; color: var(--graphite); margin: 7px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .snake__path--fill { stroke-dashoffset: 0 !important; }
}

/* mobile: serpentina → binario verticale a sinistra, card piene */
@media (max-width: 620px) {
  .snode { justify-content: flex-start; min-height: 96px; }
  .snode__card { width: auto; flex: 1; margin-left: 52px; }
  .snode--left .snode__node, .snode--right .snode__node { left: -9px; right: auto; transform: translate(-50%, -50%); }
}

/* ========================================================= */
/* CARDS / TAKEAWAY                                          */
/* ========================================================= */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
@media (max-width: 760px) { .cards-2 { grid-template-columns: 1fr; } }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(28px, 3.5vw, 44px); }
.card__title { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 2.8vw, 30px); line-height: 1; margin: 0 0 var(--s-4); color: var(--ink); }
.card p { margin: 0; color: var(--graphite); }

/* ========================================================= */
/* A CHI È RISERVATO                                         */
/* ========================================================= */
.forwho { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-7); }
@media (max-width: 760px) { .forwho { grid-template-columns: 1fr; } }
.forwho__col { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-card); border: 1px solid var(--line); }
.forwho__col--yes { background: var(--white); border-left: 3px solid var(--violet); }
.forwho__col--no { background: var(--paper-2); }
.forwho__head { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 var(--s-5); }
.forwho__col--yes .forwho__head { color: var(--violet); }
.forwho__col--no .forwho__head { color: var(--graphite); }
.forwho__col li { position: relative; padding-left: 28px; margin-bottom: var(--s-4); font-size: 17px; }
.forwho__col li:last-child { margin-bottom: 0; }
.forwho__col--yes li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 11px; border: solid var(--violet); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.forwho__col--no li::before { content: "✕"; position: absolute; left: 2px; top: 0; color: var(--graphite); font-size: 15px; }
.forwho__col li strong { color: var(--violet); }

/* ========================================================= */
/* EDWARD                                                    */
/* ========================================================= */
.edward { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 760px) { .edward { grid-template-columns: 1fr; } }
.edward__photo-ph {
  aspect-ratio: 4 / 5; border-radius: var(--r-card); display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--line);
  font-family: "Anton", sans-serif; font-size: clamp(28px, 4vw, 48px); letter-spacing: .04em; color: var(--violet);
}
/* La foto è verticale 9:16 e va ritagliata in 4:5: si perde circa il 30%
   dell'altezza. L'8% dall'alto tiene il cappello staccato dal bordo e chiude
   il taglio all'altezza delle mani. Se la foto cambia, è questo il numero
   da ritoccare. */
.edward__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 8%; border-radius: var(--r-card); display: block; }
.edward__text p { color: var(--charcoal); margin: 0 0 var(--s-4); max-width: 52ch; }
.edward__text p:last-child { margin-bottom: 0; }
.edward__text strong { color: var(--violet); font-weight: 700; }
/* La riga che spezza il racconto: stesso trattamento delle frasi estratte
   nel testo lungo del metodo, in scala ridotta. */
/* due classi, per avere la meglio su `.edward__text p` senza !important */
.edward__text .edward__quote {
  margin: var(--s-5) 0;
  padding-left: clamp(14px, 2vw, 20px);
  border-left: 3px solid var(--violet);
  font-size: clamp(18px, 2.2vw, 22px); line-height: 1.3; font-weight: 700;
  color: var(--violet);
}

/* ========================================================= */
/* FAQ                                                       */
/* ========================================================= */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.faq__item[open] { border-color: var(--violet); box-shadow: 0 14px 34px -18px rgba(88, 60, 150, .35); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: clamp(18px, 2.4vw, 24px); font-size: clamp(17px, 2vw, 21px); font-weight: 600; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__num { font-family: "Geist Mono", monospace; font-size: 13px; color: var(--violet); flex: 0 0 auto; }
.faq__q { flex: 1; transition: color var(--dur) var(--ease-out); }
.faq__item[open] .faq__q { color: var(--violet); }
.faq__icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); position: relative;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 44%; width: 8px; height: 8px;
  border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet);
  transform: translate(-50%, -50%) rotate(45deg); transition: border-color var(--dur) var(--ease-out);
}
.faq__item[open] .faq__icon { background: var(--violet); border-color: var(--violet); transform: rotate(180deg); }
.faq__item[open] .faq__icon::after { border-color: #fff; }
.faq__body { overflow: hidden; padding: 0 clamp(18px, 2.4vw, 24px); }
.faq__body p { margin: 0 0 clamp(18px, 2.4vw, 24px); color: var(--graphite); max-width: 60ch; }
.faq__body strong { color: var(--violet); font-weight: 700; }

/* ========================================================= */
/* SOCIAL PROOF (trust band chiara, compatta)               */
/* ========================================================= */
.proof--band { background: var(--paper-2); padding-block: clamp(56px, 8vh, 96px); border-bottom: 1px solid var(--line); }
.proof__head { max-width: 760px; margin-bottom: var(--s-7); }
.proof__title {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 4vw, 48px); line-height: .98; letter-spacing: -.01em;
  color: var(--ink); margin: 0;
}
.proof__stat-num { color: var(--violet); }
.proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 880px) { .proof__grid { grid-template-columns: 1fr; max-width: 640px; } }
.proof__card {
  border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: var(--r-card); padding: clamp(22px, 2.6vw, 30px);
  background: var(--white);
}
.proof__card blockquote { margin: 0 0 var(--s-4); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.5; color: var(--charcoal); }
.proof__by { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--violet); }

/* ========================================================= */
/* CTA FINALE                                                */
/* ========================================================= */
/* Quanto costa in fatica: sta sopra alla rassicurazione, con più peso —
   è una promessa, non una postilla. */
.final-cta__effort {
  max-width: 46ch; margin: var(--s-7) auto 0; text-align: center;
  font-size: clamp(17px, 2.2vw, 21px); line-height: 1.6; color: var(--charcoal);
}
.risk-reversal {
  max-width: 52ch; margin: var(--s-5) auto var(--s-6); font-size: clamp(16px, 2vw, 19px);
  color: var(--graphite); line-height: 1.5;
}
.final-cta { text-align: center; background: var(--white); }
.final-cta__ticket { max-width: 600px; margin: var(--s-2) auto var(--s-8); }
.final-cta__ticket img { width: 100%; height: auto; display: block; }
.final-cta__title {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(44px, 10vw, 130px); line-height: .88; letter-spacing: -.02em;
  margin: 0; color: var(--ink);
}
.final-cta__title .strike { color: var(--violet); }

/* ========================================================= */
/* FOOTER                                                    */
/* ========================================================= */
.site-footer { background: var(--paper-2); color: var(--graphite); padding-block: var(--s-8); border-top: 1px solid var(--line); }
.site-footer__cta { text-align: center; padding-bottom: var(--s-8); margin-bottom: var(--s-7); border-bottom: 1px solid var(--line); }
.site-footer__cta-label { font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--violet); margin: 0 0 var(--s-4); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--s-6); }
.site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.site-footer .wordmark { color: var(--ink); }
.site-footer__links { display: flex; gap: var(--s-5); font-size: 13px; }
/* i due documenti si aprono in un pannello, quindi sono bottoni: devono però
   somigliare ai link, non ai bottoni della pagina */
.site-footer__links a,
.site-footer__links button {
  font-family: inherit; font-size: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--violet); text-decoration: none;
}
.site-footer__links a:hover,
.site-footer__links button:hover { text-decoration: underline; }
.site-footer__legal { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.site-footer__company { font-size: 13px; color: var(--charcoal); margin: 0 0 var(--s-3); }
.site-footer__company strong { color: var(--ink); }
.site-footer__disc { font-size: 11px; line-height: 1.6; color: var(--graphite); margin: 0; max-width: 90ch; }

/* ========================================================= */
/* STICKY CTA BAR                                            */
/* ========================================================= */
/* Barra sempre in alto, anche su mobile — in negativo sul viola del marchio */
.sticky-cta {
  position: fixed; left: 0; right: 0; top: 0; bottom: auto; z-index: 90;
  background: var(--violet);
  border-bottom: 1px solid var(--violet-700);
  transform: translateY(-100%); transition: transform var(--dur) var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .sticky-cta__name { color: #fff; }
.sticky-cta .sticky-cta__date,
.sticky-cta .sticky-cta__cdlabel { color: var(--violet-pale); }
.sticky-cta .sticky-cta__cd .countdown__num { color: #fff; }
.sticky-cta .sticky-cd__u i { color: var(--violet-pale); }
/* il bottone si inverte: bianco su viola */
.sticky-cta .btn { --btn-bg: #fff; color: var(--violet); }
.sticky-cta .btn::after { background: var(--violet-pale); }
.sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: 12px; }
.sticky-cta__info { display: flex; flex-direction: column; line-height: 1.2; }
.sticky-cta__name { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 15px; color: var(--ink); white-space: nowrap; }
.sticky-cta__date { font-size: 11px; letter-spacing: .12em; color: var(--violet); }
/* mini countdown nella sticky bar (riusa il componente .countdown) */
.sticky-cta__cdwrap { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
/* L'etichetta del countdown serve solo su mobile, dove sparisce il blocco
   con nome ed edizione e il countdown resterebbe senza contesto. */
.sticky-cta__cdlabel { display: none; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--violet); line-height: 1; }
.sticky-cta__cd { margin: 0; gap: 9px; align-items: center; }
.sticky-cta__cd .countdown__num { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1; }
.sticky-cta__cd .countdown__num.is-tick { animation: none; }
.sticky-cd__u { display: inline-flex; align-items: baseline; gap: 1px; }
.sticky-cd__u i { font-size: 10px; font-style: normal; text-transform: uppercase; color: var(--violet); }
@media (max-width: 640px) {
  .sticky-cta__name { display: none; }
  .sticky-cta__inner { justify-content: space-between; gap: 14px; }
  .sticky-cta__cd { gap: 7px; }
  .sticky-cta .btn { width: auto; flex: 1 1 auto; }
}

/* Integrazione header: countdown + CTA raggruppati a destra (.site-header__right
   riusato dentro .sticky-cta). Su mobile il gruppo va a capo su righe proprie
   invece di forzare il testo del bottone a spezzarsi su più righe. */
.sticky-cta .site-header__right { gap: var(--s-4); }
/* Mobile: stando in alto la barra deve restare bassa. `display:contents`
   scioglie il contenitore di destra così data, countdown e bottone diventano
   figli diretti e possono disporsi su due sole righe. */
@media (max-width: 640px) {
  .sticky-cta__inner { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; padding-block: 8px; }
  .sticky-cta .site-header__right { display: contents; }
  .sticky-cta__info { display: none; }          /* nome ed edizione: già nella hero */
  .sticky-cta__cdlabel { display: block; }
  .sticky-cta__cdwrap { flex: 0 1 auto; min-width: 0; gap: 4px; }
  .sticky-cta__cd { gap: 6px; }
  .sticky-cta__cd .countdown__num { font-size: 15px; }
  .sticky-cta .btn { flex: 0 0 auto; white-space: nowrap; padding: 11px 16px; font-size: 13px; }
  /* i margini laterali stretti lasciano più spazio a countdown e bottone */
  .sticky-cta .container { padding-inline: 14px; }
}

/* ========================================================= */
/* MICRO-INTERAZIONI                                         */
/* ========================================================= */
/* Hover lift sulle card */
.night, .card, .proof__card, .forwho__col { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
@media (hover: hover) {
  .night:hover, .card:hover, .proof__card:hover {
    transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.07);
  }
}

/* ---- FLOATING LABELS ---- */
.field--float { position: relative; }
.field--float input,
.field--float select { height: 56px; padding: 23px 14px 8px; }
.field--float select { padding-right: 38px; }
.field--float label {
  position: absolute; left: 15px; top: 17px; margin: 0;
  font-size: 16px; font-weight: 500; color: var(--graphite);
  pointer-events: none; transform-origin: left top;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.field--float input:focus ~ label,
.field--float input:not(:placeholder-shown) ~ label,
.field--float.is-filled label,
.field--float select:focus ~ label {
  transform: translateY(-11px) scale(.72);
  color: var(--violet);
}
.field.is-invalid.field--float label { color: #B3261E; }

/* ---- SHAKE sugli errori ---- */
.field.is-invalid input, .field.is-invalid select { animation: shake 360ms var(--ease-inout); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ---- BOTTONE: stato di caricamento ---- */
.btn__spinner { display: none; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: 0; }
.btn.is-loading .btn__spinner { display: block; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hero__scroll span,
  .field.is-invalid input, .field.is-invalid select { animation: none; }
  .night:hover, .card:hover, .proof__card:hover { transform: none; }
}

/* ========================================================= */
/* MOTION — reveal allo scroll                               */
/* ========================================================= */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* Hero title in carico (clip mask) */
.hero__title .line__inner { transform: translateY(110%); }
.hero.is-loaded .line__inner { transform: translateY(0); transition: transform var(--dur-slow) var(--ease-out); }
.hero.is-loaded .line:nth-child(1) .line__inner { transition-delay: 0ms; }
.hero.is-loaded .line:nth-child(2) .line__inner { transition-delay: 90ms; }
.hero.is-loaded .line:nth-child(3) .line__inner { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: opacity 180ms linear; }
  .hero__title .line__inner { transform: none !important; transition: none !important; }
  .form-success.is-shown .success-check__circle,
  .form-success.is-shown .success-check__path { animation: none; stroke-dashoffset: 0; }
  .site-header, .sticky-cta { transition: none; }
}

/* Niente fade-in su mobile: tutto visibile subito */
@media (max-width: 640px) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__title .line__inner { transform: none !important; transition: none !important; }
}

/* ========================================================= */
/* THANK YOU PAGE                                            */
/* ========================================================= */
.ty__hero { padding-block: clamp(44px, 7vh, 80px); text-align: center; }
.ty__inner { max-width: 720px; margin: 0 auto; }
.ty__check { width: 88px; height: 88px; margin: 0 auto var(--s-6); }
.ty__check svg { width: 100%; height: 100%; }
.ty__check .success-check__circle { stroke: var(--violet); animation: draw 640ms var(--ease-out) forwards; }
.ty__check .success-check__path { stroke: var(--violet); animation: draw 460ms var(--ease-out) 420ms forwards; }
.ty__title {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(48px, 11vw, 132px); line-height: .9; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 var(--s-5);
}
.ty__title span { color: var(--violet); }
.ty__lead { font-size: clamp(17px, 2.2vw, 21px); color: var(--graphite); max-width: 52ch; margin: 0 auto var(--s-4); line-height: 1.5; }
.ty__media { max-width: 480px; margin: 0 auto var(--s-7); }
.ty__media img { width: 100%; height: auto; display: block; border-radius: var(--r-card); box-shadow: 0 24px 56px -28px rgba(88, 60, 150, .5); }

/* Player VTurb (VSL verticale) */
.ty__video { margin: 0 auto var(--s-7); }
.ty__hero .ty__video__label {
  display: inline-block; margin-bottom: var(--s-4);
  background: var(--violet); color: #fff;
  padding: 8px 18px; border-radius: var(--r-pill);
  box-shadow: 0 8px 20px -8px rgba(88, 60, 150, .55);
}
.ty__video vturb-smartplayer { border-radius: var(--r-card); overflow: hidden; box-shadow: 0 24px 56px -28px rgba(88, 60, 150, .5); }

.ty__steps { display: flex; flex-direction: column; gap: var(--s-4); margin: var(--s-9) auto; max-width: 760px; text-align: left; }
.ty__step { display: flex; align-items: center; gap: var(--s-6); border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: var(--r-card); padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.8vw, 30px); background: var(--white); }
.ty__step__body { flex: 1; min-width: 0; }
.ty__step__action { flex: 0 0 auto; }
.ty__step__action .cal summary { white-space: nowrap; }
@media (max-width: 620px) {
  .ty__step { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .ty__step__action, .ty__step__action .cal, .ty__step__action .btn, .ty__step__action summary { width: 100%; }
}
/* Bottone community (WhatsApp green) */
.btn--wa { --btn-bg: #25D366; }
.btn--wa::after { background: #1ebe57; }
.ty__step-num { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--violet); display: block; margin-bottom: var(--s-3); }
.ty__step h3 { font-family: "Geist", sans-serif; font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.ty__step p { font-size: 14px; color: var(--graphite); margin: 0; line-height: 1.5; }
.ty__step p a { color: var(--violet); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ty__step p a:hover { text-decoration: underline; }

/* Pillolo WhatsApp community (sticky bottom-right) */
.wa-sticky { position: fixed; bottom: 22px; right: 22px; z-index: 9990; display: inline-flex; align-items: center; gap: 10px; background: var(--violet); color: #fff; font-family: "Geist", sans-serif; font-weight: 600; font-size: 14px; padding: 12px 20px 12px 13px; border-radius: var(--r-pill); text-decoration: none; box-shadow: 0 10px 28px rgba(88, 60, 150, .4); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.wa-sticky:hover { transform: translateY(-2px); background: var(--violet-700); box-shadow: 0 14px 32px rgba(88, 60, 150, .5); }
.wa-sticky__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #25D366; border-radius: 50%; flex: 0 0 auto; }
.wa-sticky__icon svg { width: 17px; height: 17px; fill: #fff; }
@media (max-width: 480px) { .wa-sticky { bottom: 16px; right: 16px; padding: 11px 16px 11px 11px; font-size: 13px; } }

.ty__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4); }
/* Pulsante unico "Aggiungi al calendario" con menu Google/Outlook/Apple */
.cal { position: relative; display: inline-block; }
.cal > summary { list-style: none; cursor: pointer; }
.cal > summary::-webkit-details-marker { display: none; }
.cal__menu {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 10px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .3); padding: 6px; min-width: 230px; z-index: 5;
}
.cal__menu a { display: block; padding: 12px 14px; border-radius: var(--r-default); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.cal__menu a:hover { background: var(--paper-2); color: var(--violet); }
.ty__back { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--violet); text-decoration: none; }
.ty__back:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .ty__check .success-check__circle, .ty__check .success-check__path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Titolo di paragrafo (più contenuto della headline) ---------- */
.section-title--sm {
  font-size: clamp(36px, 5.4vw, 66px);
  line-height: 1.0;
  margin-bottom: var(--s-6);
  text-align: left;
  text-wrap: balance;
}
.section-title--sm .accent { color: var(--violet); }
/* Marcatore di sezione: sostituisce i fondi colorati nel segnalare
   l'inizio di un blocco. */
.section-title--sm::before {
  content: "";
  display: block;
  width: 56px; height: 5px;
  background: var(--violet);
  border-radius: 2px;
  margin-bottom: var(--s-5);
}

/* ---------- Anteprima video ----------
   Riquadro viola che riempie la card finché VTurb non ha disegnato la sua
   miniatura, così durante il caricamento non si vede un buco nero. Poi prende
   `is-gone` e sparisce: quello che si vede è l'anteprima vera del video, e un
   solo click lo fa partire. Sta DIETRO al player (`.vt__card .vt__ph`), non
   davanti: davanti intercettava lui il click e ne serviva un secondo sul play
   di VTurb. Sui due riquadri senza player resta un `div` qualsiasi. */
.vt__ph {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: #fff; text-align: center; padding: var(--s-4);
  border: 0; font-family: inherit;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(124, 92, 203, .34), rgba(124, 92, 203, 0) 62%),
    linear-gradient(180deg, #2A1D4A 0%, #161418 100%);
  transition: opacity var(--dur) var(--ease-out);
}
button.vt__ph { cursor: pointer; }
@media (hover: hover) {
  button.vt__ph:hover .vt__ph-play { background: rgba(255, 255, 255, .26); transform: scale(1.08); }
}
/* il player ha disegnato: l'anteprima si toglie di mezzo */
.vt__ph.is-gone { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .vt__ph { transition: none; }
  button.vt__ph:hover .vt__ph-play { transform: none; }
}
.vt__ph-play {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .6);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.vt__ph-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.vt__ph-label {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .75;
}

/* ---------- Blocco misto: 2 orizzontali + 1 verticale ---------- */
.vt-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s-6); align-items: start; }
.vt-split__stack { display: grid; gap: var(--s-6); }
.vt-split__solo { width: 100%; max-width: 330px; justify-self: center; }
@media (max-width: 900px) {
  .vt-split { grid-template-columns: 1fr; }
  .vt-split__solo { max-width: 330px; margin-inline: auto; }
}

/* ========================================================= */
/* VIDEO TESTIMONIANZE                                       */
/* ========================================================= */
.vt__sub { color: var(--graphite); font-size: clamp(16px, 1.9vw, 19px); max-width: 60ch; margin: 0 0 var(--s-8); line-height: 1.5; }
.vt__sub strong { color: var(--violet); font-weight: 600; }
.vt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.vt__card { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-card); overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: 0 14px 38px -22px rgba(88,60,150,.4); margin-bottom: var(--s-4); }
/* Immagine a tutta larghezza dentro una sezione. Stessa tecnica della grafica
   della hero: il contenitore è centrato sulla finestra, quindi margini negativi
   da metà contenitore a metà finestra la portano da bordo a bordo. body ha già
   overflow-x:hidden, quindi le 100vw non creano scorrimento laterale.
   multiply come per la hero: il bianco del file diventa trasparente, così
   l'immagine si appoggia al fondo della pagina invece di stamparci sopra un
   rettangolo. */
/* Titolo che sta dentro un blocco, non lo apre: niente Anton e niente barretta
   viola, ma la stessa voce della subheadline della hero — Geist, stessa clamp e
   stessa interlinea, solo allineato a sinistra come il resto della sezione.
   Resta un <h2> perché nella struttura è un titolo: cambia il tono, non il
   ruolo. */
.statement {
  /* stessa pila del body, non solo "Geist": se il font non carica il ripiego
     dev'essere lo stesso del resto del testo */
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-size: clamp(20.163px, 15.7059px + 1.1992vw, 32.8974px);
  line-height: 1.28; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.statement .accent { color: var(--violet); }

.bleed { width: auto; max-width: none; margin-inline: calc(50% - 50vw); }
.bleed img { width: 100%; height: auto; mix-blend-mode: multiply; }

.vt__card--h { aspect-ratio: 16 / 9; }
/* Il player VTurb riempie la card, che detta già la proporzione, e sta sopra
   al segnaposto disegnato. Il segnaposto resta visibile finché il player non
   dipinge: se lo script è lento o bloccato si vede una grafica, non un
   rettangolo nero. */
/* Il player NON va stirato all'altezza della card. VTurb disegna dentro una
   shadow root chiusa e si dimensiona da solo, dal segnaposto che porta la
   proporzione del singolo video (179% per i verticali, 62% per gli
   orizzontali). Forzandogli height:100% la composizione interna collassa e il
   video non parte: restava solo l'anteprima, e nel DOM il contenitore risultava
   0x0 con offsetParent nullo. Qui tiene la sua altezza e si centra. */
.vt__card vturb-smartplayer {
  position: absolute; left: 0; right: 0; top: 50%; bottom: auto;
  transform: translateY(-50%);
  z-index: 1;
  display: block; width: 100%; height: auto; max-width: none; margin: 0;
}
.vt__card .vturb-player-placeholder {
  position: absolute; inset: 0; padding: 0; background: transparent;
}
.vt__card .vt__ph { z-index: 0; }
.vt__card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt__name { color: var(--ink); font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.vt__quote { color: var(--graphite); font-size: 14px; line-height: 1.5; font-style: italic; border-left: 2px solid var(--violet); padding-left: 12px; margin: 0; }
.vt__cta { text-align: center; margin-top: var(--s-9); }
@media (max-width: 1024px) { .vt__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vt__grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }

/* Griglia da 5 verticali */
.vt__grid--5 { grid-template-columns: repeat(5, 1fr); }
/* Griglia da 3: stesso identico comportamento, carosello compreso. Invece di
   duplicare il blocco l'ho aggiunta agli stessi selettori qui sotto, così se
   un giorno si cambia il carosello si cambia in un punto solo. */
.vt__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .vt__grid--5 { grid-template-columns: repeat(3, 1fr); } }
/* Su telefono i 5 verticali diventano una fila che si scorre col dito: in
   colonna occupavano quasi 5 schermate. La card è al 72% così si intravede
   la successiva — è quello che segnala che ce n'è dell'altro, senza frecce. */
@media (max-width: 720px) {
  .vt__grid--5,
  .vt__grid--3 {
    display: flex;
    grid-template-columns: none;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .vt__grid--5::-webkit-scrollbar,
  .vt__grid--3::-webkit-scrollbar { display: none; }
  /* La fila resta dentro il margine della pagina: il taglio della card
     successiva cade sulla stessa linea di tutti gli altri contenuti, così
     legge come "continua" e non come qualcosa che la copre. */
  .vt__grid--5 > .vt-item,
  .vt__grid--3 > .vt-item { flex: 0 0 78%; scroll-snap-align: start; }
}

/* La didascalia sta sotto al video: <figure> non deve aggiungere margini */
.vt-item { margin: 0; }
.vt-item figcaption { margin: 0; }

/* ---------- Riga statistiche sotto un titolo ---------- */
.stat-line {
  font-size: clamp(17px, 2.1vw, 21px); line-height: 1.5; color: var(--charcoal);
  max-width: 60ch; margin: 0 0 var(--s-8);
}
.stat-line strong { color: var(--violet); font-weight: 700; }

/* Testo in evidenza dentro .prose */
.prose strong { color: var(--violet); font-weight: 700; }

/* Sotto-titoli che spezzano i blocchi di copy lunghi */
.prose h3 {
  font-family: "Geist", sans-serif;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700; color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
  max-width: 40ch;
}
.prose h3:first-child { margin-top: 0; }

/* Frase estratta: dà respiro e un appiglio visivo nella lettura.
   Selettore a doppia classe: deve avere la meglio su `.prose p`. */
.prose .pullquote {
  margin: var(--s-6) 0;
  padding-left: clamp(16px, 3vw, 28px);
  border-left: 3px solid var(--violet);
  font-family: "Geist", sans-serif;
  font-size: clamp(20px, 2.7vw, 30px);
  line-height: 1.25; font-weight: 700;
  color: var(--violet);
  max-width: 30ch;
}
/* Versione ridotta: le stesse misure della citazione nella bio del relatore
   (.edward__quote), così le due frasi estratte della pagina si somigliano.
   Deve stare dopo `.prose .pullquote`: stessa specificità, vince chi viene
   dopo. Non tocco quella regola perché la usa anche la thank you page. */
.prose .pullquote--sm {
  margin: var(--s-5) 0;
  padding-left: clamp(14px, 2vw, 20px);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.3;
  max-width: none;
}
/* la coda non è una delle obiezioni: torna al colore del testo corrente */
.pullquote__soft { color: var(--ink); }

/* ---------- Approfondimento serata ---------- */
.night__more {
  margin-top: var(--s-5);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Geist", sans-serif; font-size: 14px; font-weight: 600;
  color: #fff; background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.night__more::after {
  content: ""; width: 7px; height: 7px;
  border: solid currentColor; border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg) translateY(-2px);
}
.night__more:hover { color: var(--violet-pale); border-color: var(--violet-pale); }

/* Pannello: largo, per far respirare schemi e animazioni */
.modal--wide .modal__dialog { max-width: 880px; }
.prog { padding: clamp(26px, 4vw, 48px); }
.prog__day {
  display: inline-block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--violet);
  padding: 5px 12px; border-radius: var(--r-default); margin-bottom: var(--s-4);
}
.prog__title {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1; color: var(--ink);
  margin: 0 0 var(--s-4);
}
/* I capoversi introduttivi stanno vicini: sono un unico pensiero, non due
   blocchi separati. Lo spazio prima dello schema torna dal margine di
   .flow / .phases (i margini adiacenti collassano, vince il maggiore). */
.prog__lead { font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--charcoal); margin: 0 0 var(--s-3); max-width: 60ch; }
.prog__lead strong { color: var(--violet); font-weight: 700; }
.prog .flow, .prog .phases { margin-top: var(--s-7); }
.prog__cap {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--graphite); margin: var(--s-5) 0 0; text-align: center;
}

/* --- Schema 1: il meccanismo percettivo reattivo ---
   È un ciclo, e si vede: le quattro fasi stanno lungo un anello che si disegna
   in senso orario partendo dalla percezione, ognuna compare quando la linea la
   raggiunge, e la freccia finale rientra nella prima. Le tinte vanno dal viola
   chiaro allo scuro: la progressione si legge anche senza leggere le parole.

   L'anello vale a tutte le larghezze. Il contenitore è un quadrato e ogni
   posizione è una percentuale del suo lato, quindi basta cambiare le quattro
   misure qui sotto per riadattare tutto lo schema:

     --R    raggio dell'anello — 30%, lo stesso raggio del tracciato SVG:
            cambiandolo i cerchi si staccano dalla linea
     --Lv   distanza delle etichette in cima e in basso (fasi 1 e 3)
     --Lh   distanza delle etichette di lato (fasi 2 e 4)

   Le etichette laterali sporgono di proposito fuori dal quadrato: il quadrato
   è tenuto stretto apposta per lasciargliene lo spazio ai lati. */

.flow { position: relative; margin: 0 auto; }
.flow__row {
  --R: 30%;
  --Lv: 58%;
  --Lh: 70%;
  --sq: min(160px, 48%);
  position: relative; display: block;
  width: var(--sq); aspect-ratio: 1;
  /* l'etichetta della fase in basso sporge fuori dal quadrato: senza questo
     margine la pillola del feedback ci finirebbe sopra */
  margin: 0 auto calc(var(--sq) * .3);
}
/* la cella non fa da contenitore: cerchio ed etichetta si posizionano
   ognuno per conto proprio lungo l'anello */
.flow__cell { display: contents; }

/* ---- L'anello: si disegna da solo, in senso orario ---- */
.flow__line { position: absolute; inset: 0; }
.flow__line svg { display: block; width: 100%; height: 100%; }
.flow__ring {
  fill: none; stroke: var(--violet-tint); stroke-width: .5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.is-open .flow__ring { animation: fl-ring 1500ms var(--ease-inout) 150ms forwards; }
@keyframes fl-ring { to { stroke-dashoffset: 0; } }
/* la freccia arriva quando l'anello ha finito il giro */
.flow__arrow { fill: var(--violet-tint); opacity: 0; }
.is-open .flow__arrow { animation: fl-fade 360ms var(--ease-out) 1600ms forwards; }
@keyframes fl-fade { to { opacity: 1; } }

/* ---- Le quattro fasi ----
   Il centraggio sta dentro le animazioni, non in una regola a parte: `fl-in`
   e `fl-pop` finiscono impostando `transform` e cancellerebbero una
   traslazione dichiarata altrove. */
.flow__step, .flow__circle {
  position: absolute; margin: 0;
  transform: translate(-50%, -50%);
}
.flow__circle {
  z-index: 1;
  width: 22%; aspect-ratio: 1;
  border: 2px solid var(--c); border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center;
  opacity: 0;
}
/* ogni fase compare quando la linea la raggiunge: l'anello impiega 1500ms a
   fare il giro e le fasi sono quattro, quindi una ogni 400ms circa */
.is-open .flow__circle { animation: fl-pop 420ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 400ms + 150ms); }
@keyframes fl-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.flow__circle svg { width: 52%; height: 52%; stroke: var(--c); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.flow__step { width: 50%; text-align: center; opacity: 0; }
.is-open .flow__step { animation: fl-in 420ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 400ms + 280ms); }
@keyframes fl-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.flow__num {
  width: 20px; height: 20px; margin: 0 auto 4px;
  border: 2px solid var(--c); border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Geist", sans-serif; font-size: 11px; font-weight: 700; color: var(--c);
}
.flow__name {
  margin: 0; color: var(--c);
  font-size: 10px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1.2;
  /* rete di sicurezza sui telefoni piccoli: un nome più largo dell'etichetta
     è meglio spezzato che sbordante */
  hyphens: auto;
}
/* Sotto i 721px la riga di spiegazione non ci sta in modo leggibile:
   resta il numero e il nome della fase. */
.flow__desc { display: none; margin: 4px 0 0; font-size: clamp(11px, 1.25vw, 13.5px); color: var(--graphite); line-height: 1.3; }

/* Posizioni: quattro fasi ai quattro punti cardinali, la prima in cima e poi
   in senso orario. Ogni etichetta sta più fuori del proprio cerchio, sulla
   stessa direzione, così nessuna entra dentro l'anello. */
.flow__cell:nth-child(2) .flow__circle { left: 50%;                  top: calc(50% - var(--R)); }
.flow__cell:nth-child(2) .flow__step   { left: 50%;                  top: calc(50% - var(--Lv)); }
.flow__cell:nth-child(3) .flow__circle { left: calc(50% + var(--R));  top: 50%; }
.flow__cell:nth-child(3) .flow__step   { left: calc(50% + var(--Lh)); top: 50%; }
.flow__cell:nth-child(4) .flow__circle { left: 50%;                  top: calc(50% + var(--R)); }
.flow__cell:nth-child(4) .flow__step   { left: 50%;                  top: calc(50% + var(--Lv)); }
.flow__cell:nth-child(5) .flow__circle { left: calc(50% - var(--R));  top: 50%; }
.flow__cell:nth-child(5) .flow__step   { left: calc(50% - var(--Lh)); top: 50%; }

/* ---- Da 721px in su: stesso schema, in grande ---- */
@media (min-width: 721px) {
  .flow__row {
    --sq: min(460px, 73%);
    --Lv: 47%;
    --Lh: 54.5%;
    /* l'etichetta della fase in basso sporge di ~26px dal quadrato: senza
       questo margine la didascalia sotto la tocca */
    margin-bottom: calc(var(--sq) * .09);
  }
  .flow__circle { width: 15%; }
  .flow__step { width: 30%; }
  .flow__num { width: 30px; height: 30px; margin: 0 auto 8px; font-size: 14px; }
  .flow__name { font-size: clamp(11px, 1.35vw, 14px); letter-spacing: .04em; hyphens: manual; }
  .flow__desc { display: block; }
}

/* Senza movimento lo schema deve comunque vedersi: al riposo le fasi sono
   trasparenti e senza animazione resterebbero invisibili. */
@media (prefers-reduced-motion: reduce) {
  .is-open .flow__step, .is-open .flow__circle,
  .is-open .flow__ring, .is-open .flow__arrow { animation: none; }
  .flow__step, .flow__circle, .flow__arrow { opacity: 1; }
  .flow__ring { stroke-dashoffset: 0; }
}

/* --- Schema 2: le fasi della call --- */
.phases { position: relative; padding-left: 42px; display: grid; gap: var(--s-4); }
.phases li { position: relative; opacity: 0; }
/* La linea la disegnano le voci stesse, un segmento ciascuna verso quella
   dopo: una linea sola sull'elenco resterebbe appesa sotto l'ultima, che è
   più alta delle altre. Il segmento compare insieme alla sua voce, quindi la
   linea si costruisce verso il basso mentre l'elenco entra. */
.phases li:not(:last-child)::after {
  content: ""; position: absolute; left: -29px; top: 26px;
  width: 2px; height: calc(100% - 26px + var(--s-4));
  background: var(--violet-tint);
}
.is-open .phases li { animation: ph-in 420ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms + 420ms); }
@keyframes ph-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.phases li::before {
  content: attr(data-n);
  position: absolute; left: -42px; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--violet); color: #fff;
  font-family: "Geist Mono", monospace; font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
}
.phases li[data-n="+1"]::before { background: var(--ink); }
/* Nel pannello largo l'elenco resterebbe una colonnina appoggiata al bordo
   sinistro: lo teniamo a misura di lettura e centrato. */
@media (min-width: 721px) {
  .phases { max-width: 540px; margin-inline: auto; }
  .phases b { font-size: 18px; }
  .phases span { font-size: 15px; }
}
.phases b { display: block; font-size: 16px; color: var(--ink); font-weight: 700; }
/* a blocco, come nella pillola del feedback: da riga di testo l'interlinea la
   detterebbe il contenitore (17px × 1.6) e le righe resterebbero larghe */
.phases span { display: block; font-size: 14px; color: var(--graphite); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .is-open .dirs .d-line, .is-open .dirs .d-node,
  .is-open .phases li { animation: none; }
  .dirs .d-line { stroke-dashoffset: 0; }
  .dirs .d-node { opacity: 1; }
  .phases li { opacity: 1; }
}

/* ---------- Le tre serate ---------- */
.nights--3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
@media (max-width: 900px) { .nights--3 { grid-template-columns: 1fr; } }
.night__day {
  display: inline-block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--violet);
  padding: 5px 12px; border-radius: var(--r-default);
  margin-bottom: var(--s-4);
}

/* ========================================================= */
/* PRIMA / DOPO                                              */
/* ========================================================= */
/* Il contrasto fa il lavoro: lo stato di partenza è spento e su fondo
   chiaro, quello di arrivo è viola pieno. Si legge la trasformazione
   ancora prima di leggere le parole. */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-5); align-items: stretch; }
@media (max-width: 880px) { .ba { grid-template-columns: 1fr; gap: var(--s-4); } }

.ba__col { border-radius: var(--r-card); padding: clamp(24px, 3.2vw, 38px); }
/* Il "prima" è provvisorio: bordo tratteggiato, come qualcosa di non finito.
   Il "dopo" è solido e in rilievo. L'asimmetria è la personalità del blocco. */
.ba__col--before { background: var(--white); border: 2px dashed #DAD5CE; }
.ba__col--after  {
  background: var(--violet); color: #fff; border: 2px solid var(--violet);
  box-shadow: 0 22px 48px -22px rgba(88, 60, 150, .55);
}

.ba__label {
  font-family: "Anton", sans-serif; font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px); letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 var(--s-5);
}
/* niente barratura: su Anton, condensato e pesante, la riga taglia le lettere
   e le rende illeggibili. Il senso di "stato superato" lo danno già il bordo
   tratteggiato, il grigio e le × */
.ba__col--before .ba__label { color: #A9A39C; }
.ba__col--after .ba__label { color: #fff; }

.ba__col ul { display: grid; gap: var(--s-4); }
.ba__col li {
  position: relative; padding-left: 30px;
  font-size: clamp(15px, 1.8vw, 17px); line-height: 1.45;
}
.ba__col--before li { color: var(--graphite); }
.ba__col--after  li { color: #fff; }
/* × per il prima, spunta per il dopo */
.ba__col--before li::before,
.ba__col--before li::after {
  content: ""; position: absolute; left: 3px; top: .68em;
  width: 14px; height: 2px; border-radius: 1px; background: #B9B3AC;
}
.ba__col--before li::before { transform: rotate(45deg); }
.ba__col--before li::after  { transform: rotate(-45deg); }
.ba__col--after li::before {
  content: ""; position: absolute; left: 5px; top: .3em;
  width: 7px; height: 13px;
  border: solid var(--violet-pale); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.ba__arrow { display: grid; place-items: center; color: var(--violet); }
.ba__arrow svg { width: 32px; height: 32px; }
@media (max-width: 880px) {
  .ba__arrow { padding: var(--s-2) 0; }
  .ba__arrow svg { transform: rotate(90deg); }
}

/* Stesso trattamento della frase sotto il countdown della hero: stessa
   misura di riga, stesso corpo, stessa interlinea. */
.ba__closing {
  max-width: 46ch; margin: var(--s-6) auto 0; text-align: center;
  font-size: clamp(16px, 2.2vw, 21px); line-height: 1.6; color: var(--charcoal);
}
.ba__closing strong { color: var(--violet); font-weight: 700; }
/* la frase chiude la sezione: sotto basta meno aria dello stacco pieno */
#prima-dopo { padding-bottom: clamp(30px, 4.2vh, 60px); }

/* La colonna "non fa per te" resta bianca: niente fondi grigi */
.forwho__col--no { background: var(--white); }

/* Footer su bianco, separato solo da un filo */
.site-footer { background: var(--white); border-top: 1px solid var(--line); }

/* Segnaposto foto relatore */
.edward__photo-ph { text-align: center; line-height: 1.1; }

/* ========================================================= */
/* RISULTATI (immagini)                                     */
/* ========================================================= */
.rr__lead { font-size: clamp(16px, 2vw, 20px); color: var(--graphite); max-width: 64ch; margin: 0 0 var(--s-8); }
.rr__lead strong { color: var(--violet); font-weight: 600; }
.rr__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.rr__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 4px 18px rgba(88,60,150,.07); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.rr__head { padding: 16px 16px 10px; }
.rr__title { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 17px; letter-spacing: .02em; color: var(--violet); margin: 0 0 3px; line-height: 1.05; }
.rr__sub { font-size: 11px; color: var(--graphite); font-weight: 500; }
.rr__img { padding: 0 12px 12px; }
.rr__img img { width: 100%; height: auto; border-radius: 4px; display: block; }
@media (hover: hover) { .rr__card:hover { transform: translateY(-4px); border-color: var(--violet); box-shadow: 0 16px 40px -16px rgba(88,60,150,.3); } }
@media (max-width: 1024px) { .rr__grid { grid-template-columns: repeat(3, 1fr); } }
/* Anche su telefono restano due colonne: con gli screenshot la quantità è il
   messaggio, e in colonna singola la sezione occupava oltre 5 schermate. */
@media (max-width: 768px) { .rr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .rr__grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .rr__head { padding: 12px 12px 8px; }
  .rr__title { font-size: 14px; }
  .rr__sub { font-size: 10.5px; }
  .rr__img { padding: 0 8px 8px; }
  .rr__zoom::after { width: 24px; height: 24px; right: 6px; bottom: 6px; background-size: 12px; }
}

/* ========================================================= */
/* PAGINE LEGALI (privacy / cookie)                          */
/* ========================================================= */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(90px, 13vh, 150px) var(--gutter) var(--s-9); }
.legal__back { display: inline-block; margin-bottom: var(--s-6); font-family: "Geist Mono", monospace; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--violet); text-decoration: none; }
.legal__back:hover { text-decoration: underline; }
.legal h1 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 6vw, 64px); line-height: 1; color: var(--ink); margin: 0 0 var(--s-3); }
.legal__updated { font-family: "Geist Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--graphite); margin: 0 0 var(--s-8); }
.legal h2 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(20px, 3vw, 28px); color: var(--ink); margin: var(--s-8) 0 var(--s-3); }
.legal h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin: var(--s-6) 0 var(--s-2); }
.legal p { font-size: 16px; line-height: 1.7; color: var(--charcoal); margin: 0 0 var(--s-4); }
.legal ul { margin: 0 0 var(--s-4); padding-left: 22px; list-style: disc; }
.legal li { font-size: 16px; line-height: 1.7; color: var(--charcoal); margin-bottom: 8px; }
.legal a { color: var(--violet); }
.legal strong { color: var(--ink); }
.legal__box { background: var(--paper-2); border-left: 3px solid var(--violet); border-radius: var(--r-card); padding: clamp(18px, 2.4vw, 26px); margin: 0 0 var(--s-6); }
.legal__box p:last-child { margin-bottom: 0; }

/* ============================================================
   VIDEO SERIES (pagina /video) — un video per giorno
   ============================================================ */
.vs__head { max-width: 64ch; text-align: center; margin-inline: auto; }
.vs__sub { color: var(--graphite); font-size: clamp(16px, 1.9vw, 19px); max-width: 52ch; margin: 0 auto; line-height: 1.5; }
.vs__sub strong { color: var(--violet); font-weight: 600; }

.vs__list { display: flex; flex-direction: column; gap: clamp(56px, 9vh, 108px); margin-top: clamp(48px, 7vh, 84px); }

.vs__ep { width: 100%; max-width: 880px; margin-inline: auto; }

/* Testo episodio */
.vs__ep__body { text-align: center; margin: 0 0 var(--s-5); }
.vs__daylabel { font-family: "Geist Mono", ui-monospace, monospace; color: var(--violet); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s-3); }
.vs__ep__title { color: var(--ink); font-weight: 700; font-size: clamp(22px, 3vw, 32px); line-height: 1.12; margin: 0 0 var(--s-3); }
.vs__ep__desc { color: var(--graphite); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.6; max-width: 52ch; margin: 0 auto; }
.vs__tag { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s-4); font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.vs__tag--live { color: var(--violet); }
.vs__tag--live .live-dot { margin-right: 0; }
.vs__tag--soon { color: var(--graphite); }
.vs__ep:not(.is-locked) .vs__tag--soon { display: none; }
.vs__ep.is-locked .vs__tag--live { display: none; }

/* Card video orizzontale (16:9) */
.vs__card { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: 0 24px 64px -32px rgba(88, 60, 150, .5); }
.vs__card .vs__media, .vs__card .vs__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs__card vturb-smartplayer { display: block; width: 100%; }
.vs__media { transition: filter var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
/* Bloccato: contenuto totalmente nascosto (sfocatura + overlay opaco) */
.vs__ep.is-locked .vs__media { filter: blur(34px) saturate(1.1) brightness(.7); transform: scale(1.35); pointer-events: none; }

/* Overlay lucchetto + countdown — completamente opaco, non si vede nulla */
.vs__lock { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--s-3); text-align: center; padding: var(--s-5); color: #fff;
  background:
    radial-gradient(120% 100% at 50% 12%, rgba(124, 92, 203, .30), rgba(124, 92, 203, 0) 62%),
    linear-gradient(180deg, #2A1D4A 0%, #161418 100%);
}
.vs__ep:not(.is-locked) .vs__lock { display: none; }
.vs__lock__ic { width: 36px; height: 36px; opacity: .95; }
.vs__lock__lead { font-size: 14px; line-height: 1.35; letter-spacing: .01em; margin: 0; opacity: .9; }
.vs__cd { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: clamp(24px, 4.6vw, 34px); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.vs__lock__date { margin: 4px 0 0; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; opacity: .72; }

/* Pulsante play — episodi sbloccati che partono al click (non il video di oggi) */
.vs__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; color: #fff;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(124, 92, 203, .18), rgba(0, 0, 0, 0) 62%),
    rgba(0, 0, 0, .42);
  transition: background var(--dur) var(--ease-out);
}
.vs__play:hover { background: rgba(0, 0, 0, .30); }
.vs__play__ic { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: 0 8px 30px -10px rgba(0, 0, 0, .6); transition: transform var(--dur) var(--ease-out); }
.vs__play:hover .vs__play__ic { transform: scale(1.07); }
.vs__play__ic svg { width: 28px; height: 28px; fill: #fff; margin-left: 3px; }

@media (max-width: 640px) {
  .vs__cd { font-size: clamp(22px, 7.5vw, 30px); }
}

/* ============ REPLAY (/replay) ============ */
.rp__urgency { display: flex; width: fit-content; align-items: center; gap: 10px; margin: clamp(28px, 5vh, 44px) auto clamp(32px, 5vh, 48px); padding: 11px 20px; border-radius: var(--r-pill); background: rgba(88, 60, 150, .08); border: 1px solid var(--line); }
.rp__urgency__lead { color: var(--graphite); font-size: 14px; font-weight: 500; letter-spacing: .01em; }
.rp__cd { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: clamp(16px, 2.4vw, 19px); letter-spacing: .05em; font-variant-numeric: tabular-nums; color: var(--violet); }
.rp .vs__ep + .vs__ep { margin-top: clamp(40px, 7vh, 72px); }
.rp__cta { text-align: center; margin-top: clamp(36px, 6vh, 56px); }
.rp__expired { text-align: center; padding: clamp(20px, 6vh, 56px) 0; }

/* ---------- BIGLIETTI GRATTA E VINCI (bonus thank you) ---------- */
.scratch__hint { text-align: center; color: var(--graphite); margin: 0 auto var(--s-7); font-size: 15px; max-width: 46ch; }
.scratch__hint strong { color: var(--violet); }

.tickets { display: grid; gap: var(--s-6); max-width: 540px; margin-inline: auto; }

.ticket {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 10px 30px -22px rgba(42, 29, 74, .35);
}
.ticket__head {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 16px 20px;
  border-bottom: 1px dashed var(--line);
}
.ticket__step { display: inline-block; background: var(--violet); color: #fff; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 15px; padding: 6px 16px; border-radius: var(--r-pill); }
.ticket__label { color: var(--graphite); letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }

/* finestra da grattare */
.scratch { position: relative; overflow: hidden; isolation: isolate; }
.ticket__window { min-height: 260px; }
.scratch__prize { position: relative; z-index: 1; }
.ticket__reward {
  min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3);
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
}
.ticket__title { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 3vw, 30px); line-height: 1; color: var(--ink); margin: 0; }
.ticket__reward > p { color: var(--graphite); margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.55; }
.ticket__reward .btn { margin-top: var(--s-3); }

/* lista dei due regali (step 2) */
.gifts { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 380px; text-align: left; }
.gifts li { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.gifts li:first-child { border-top: 0; }
.gifts__tag { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); margin-bottom: 4px; }
.gifts__name { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(17px, 2.4vw, 20px); line-height: 1.05; color: var(--ink); }
.gifts li p { margin: 4px 0 0; font-size: 13px; color: var(--graphite); }

/* foil */
.scratch__foil {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  cursor: grab;
  touch-action: none;
  transition: opacity var(--dur) var(--ease-out);
}
.scratch__foil:active { cursor: grabbing; }
.scratch.is-revealed .scratch__foil { opacity: 0; pointer-events: none; }
.scratch.is-revealed .scratch__prize { animation: scratchPop var(--dur) var(--ease-out) both; }
@keyframes scratchPop { 0% { transform: scale(.985); } 60% { transform: scale(1.008); } 100% { transform: scale(1); } }

/* riflesso di luce che scorre sul foil (effetto metallico) */
.scratch__shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.scratch__shine::before {
  content: ""; position: absolute; top: -60%; left: -75%;
  width: 45%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform: rotate(20deg);
  animation: scratchShine 2.8s ease-in-out infinite;
}
@keyframes scratchShine { 0% { left: -75%; } 55%, 100% { left: 130%; } }
.scratch.is-revealed .scratch__shine { display: none; }
@media (prefers-reduced-motion: reduce) { .scratch__shine::before { animation: none; opacity: 0; } }

/* anteprima "gratta": manina che gratta davvero il foil (posizione guidata da JS) */
.scratch__cue {
  position: absolute; z-index: 3;
  left: 6%; top: 10%;
  pointer-events: none;
  font-size: 34px; line-height: 1;
  /* la punta del dito coincide con il punto grattato */
  transform: translate(-50%, -10%);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));
  transition: opacity var(--dur) var(--ease-out);
}
.scratch.is-scratching .scratch__cue,
.scratch.is-revealed .scratch__cue { opacity: 0; }

/* coriandoli sopra il premio appena si gratta */
.scratch__confetti { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* scadenza del bonus, ben visibile */
.ticket__reward > p.ticket__deadline {
  display: inline-block;
  margin: 0 0 var(--s-3);
  max-width: none;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--violet-pale);
  color: var(--violet-900);
  border: 1px solid var(--violet-tint);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}

.ticket__foot { text-align: center; padding: 0 20px 16px; }
.scratch__skip {
  background: none; border: 0;
  color: var(--graphite);
  font: inherit; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.scratch__skip:hover { color: var(--violet); }
@media (prefers-reduced-motion: reduce) {
  .scratch.is-revealed .scratch__prize { animation: none; }
}

/* riga email compatta sotto l'hero conferma */
.ty__confirm { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-4); padding: 11px 20px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--charcoal); font-size: 14px; font-weight: 500; }
.ty__confirm svg { flex: 0 0 auto; color: var(--violet); }
.ty__confirm strong { color: var(--ink); font-weight: 700; }

/* ---------- Thank you: due step (community + bonus) ---------- */
.section--tight { padding-block: clamp(28px, 4vh, 52px); }
.ty-step { text-align: center; }
.ty-step + .ty-step { margin-top: clamp(36px, 5vh, 60px); padding-top: clamp(36px, 5vh, 60px); border-top: 1px solid var(--line); }
.ty-step__label { display: inline-block; background: var(--violet); color: #fff; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; padding: 7px 18px; border-radius: var(--r-pill); margin: 0 0 var(--s-4); }
.ty-step__title { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 8.5vw, 56px); line-height: .98; color: var(--ink); margin: 0 0 var(--s-5); }

/* mobile: meno aria fra la conferma e i bonus */
@media (max-width: 640px) {
  .ty__hero { padding-block: 36px 26px; }
  .section--tight { padding-block: 24px; }
  .scratch__hint { margin-bottom: var(--s-5); }
}

/* freccia che indica lo step */
.ty-arrow { display: flex; justify-content: center; margin: 0 0 var(--s-4); color: var(--violet); }
.ty-arrow svg { width: 36px; height: 36px; animation: tyArrowBounce 1.4s var(--ease-inout) infinite; }
@keyframes tyArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) { .ty-arrow svg { animation: none; } }
.ty__community { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.ty__community__note { font-size: 12px; color: var(--graphite); letter-spacing: .04em; text-transform: uppercase; }

.tickets--2 { grid-template-columns: 1fr; max-width: 520px; gap: var(--s-5); }
.tickets--2 .ticket__window, .tickets--2 .ticket__reward { min-height: 200px; }

/* ---------- Utility: solo screen reader ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- accenti viola + sticky waitlist ---------- */
.accent { color: var(--violet); }
.section-title--accent { color: var(--violet); }
.sticky-cta__inner--stack { flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding-block: 9px; text-align: center; }
.sticky-cta__inner--stack .btn { width: 100%; max-width: 520px; }
.sticky-cta__bonus { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }

/* ---------- Bonus teaser "bloccato" (curiosità sulla landing) ---------- */
.card--locked { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.card--locked .locked { position: relative; margin-top: var(--s-3); flex: 1; display: flex; align-items: center; }
.card--locked .locked > .locked__content { width: 100%; }
.card--locked .locked__content { filter: blur(8px); opacity: .45; user-select: none; pointer-events: none; }
.card--locked .locked__content .card__title { color: var(--ink); }
.card--locked .locked__veil {
  position: absolute; inset: -8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 12px;
}
.locked__lock { width: 34px; height: 34px; color: var(--violet); }
.locked__cap { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--violet); }

/* =========================================================
   TYPEFORM — form waiting list a step (full-screen takeover)
   ========================================================= */
/* Popup ampio (non a schermo intero) quando è attivo lo step form */
.modal.is-tf { padding: 24px; }
.modal.is-tf .modal__dialog {
  max-width: 600px; width: 100%; height: auto;
  max-height: calc(100vh - 48px); overflow: hidden;
  border: 2px solid var(--violet); border-radius: var(--r-card);
}
.modal.is-tf .form-card--modal { height: 100%; }
.modal.is-tf .form-card--modal .form-card__inner { padding: 0; }

.tf { display: flex; flex-direction: column; min-height: 380px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); background: var(--paper); }

/* Top: progress + titolo fisso + saluto */
.tf__top { padding: 26px 30px 0; }
.tf__bar { height: 6px; background: var(--paper-2); border-radius: var(--r-pill); overflow: hidden; }
.tf__bar-fill { display: block; height: 100%; width: 20%; background: var(--violet); border-radius: var(--r-pill); transition: width 420ms var(--ease-out); }
.tf__meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.tf__brand { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--violet); line-height: 1.4; }
.tf__count { flex: none; font-size: 12px; color: var(--graphite); }
.tf__greet { margin: 12px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); }

/* Viewport centrale: una domanda per volta, centrata */
.tf__viewport { flex: 1; display: flex; align-items: center; justify-content: center; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 28px 30px; }
/* mobile: il popup deve poter scorrere fino al bottone di invio */
@media (max-width: 640px) {
  .modal { padding: 10px; }
  .modal__dialog { max-height: calc(100dvh - 20px); }
  .tf { min-height: 0; max-height: calc(100dvh - 28px); }
  /* con contenuti alti il centraggio verticale nasconde la parte alta */
  .tf__viewport { align-items: flex-start; padding: 20px 18px 24px; }
}
.tf__step { width: 100%; max-width: 640px; margin: 0 auto; }
.tf__step[hidden] { display: none; }
.tf__step.is-active { animation: tfStepIn 380ms var(--ease-out); }
@keyframes tfStepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.tf__q { font-size: clamp(22px, 3vw, 28px); line-height: 1.18; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 0 0 18px; }
.tf__hint { font-size: 15px; line-height: 1.5; color: var(--graphite); margin: 0 0 26px; }

.tf__choices { display: flex; flex-direction: column; gap: 12px; }
.tf__choices--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 620px) { .tf__choices--grid { grid-template-columns: 1fr; } }

.tf__choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  width: 100%; text-align: left; padding: 22px; cursor: pointer;
  font-family: inherit; color: var(--ink);
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-card);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tf__choice:hover { border-color: var(--violet); transform: translateY(-2px); box-shadow: 0 14px 34px -18px rgba(42, 29, 74, .5); }
.tf__choice:focus-visible { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(88, 60, 150, .16); }
.tf__choice.is-selected { border-color: var(--violet); background: #F4F0FB; }
.tf__choice-ico { font-size: 30px; line-height: 1; color: var(--violet); }
.tf__choice-ico svg { display: block; width: 34px; height: 34px; }
.tf__choice-txt { font-size: 18px; font-weight: 700; }
.tf__choice-sub { font-size: 12.5px; font-weight: 500; color: var(--graphite); letter-spacing: 0; }
.tf__choice--row { flex-direction: row; align-items: center; font-size: 18px; font-weight: 700; padding: 18px 22px; }
/* Ruolo: card pulite solo testo, centrato */
.tf__choice--plain { align-items: center; justify-content: center; text-align: center; padding: 26px 18px; }
.tf__choice--plain .tf__choice-txt { font-size: 19px; }

/* "Altro": card a tutta riga sotto le opzioni + campo libero */
.tf__choice--full { grid-column: 1 / -1; padding: 18px; }
.tf__choice--full .tf__choice-txt { font-size: 17px; }
.tf__other { margin-top: 14px; }
.tf__other .tf__actions { margin-top: 14px; }
.tf__input {
  width: 100%; padding: 16px; font-family: inherit; font-size: 17px; line-height: 1.4; color: var(--ink);
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-card);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tf__input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(88, 60, 150, .12); }

.tf__textarea {
  width: 100%; padding: 16px; font-family: inherit; font-size: 17px; line-height: 1.5; color: var(--ink);
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-card);
  resize: vertical; min-height: 130px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tf__textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(88, 60, 150, .12); }
.tf__actions { margin-top: 22px; }
.tf__err { display: block; min-height: 1.1em; margin-top: 12px; font-size: 13px; color: #C0392B; }

/* Step contatti: campi un po' più ariosi */
.tf__step[data-step="contact"] .field { margin-bottom: var(--s-4); }
.tf__step[data-step="contact"] .btn--block { margin-top: var(--s-2); }

/* Footer: tasto indietro */
.tf__foot { padding: 0 30px 24px; display: flex; align-items: center; min-height: 20px; }
.tf__back { background: none; border: none; padding: 8px 4px; font-family: inherit; font-size: 14px; color: var(--graphite); cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.tf__back:hover { color: var(--violet); }
.tf__back[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tf__step.is-active { animation: none; }
  .tf__bar-fill { transition: none; }
}

/* ========================================================= */
/* THANK YOU PAGE (grazie.html)                              */
/* ========================================================= */
/* Riusa tutto quello che c'è: titoli, bottoni, prose, card.
   Qui stanno solo i pezzi che nella landing non esistono. */

.ty-bar { background: var(--violet); color: #fff; padding: 12px 0; }
.ty-bar .container {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.ty-bar__ok {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
  background: rgba(255, 255, 255, .18); color: #fff;
  display: grid; place-items: center;
}
.ty-bar__ok svg { width: 11px; height: 11px; }

.ty-hero { text-align: center; padding-top: clamp(36px, 5vh, 64px); }
.ty-hero__title {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(38px, 7vw, 82px); line-height: 1.02; letter-spacing: .01em;
  color: var(--ink); margin: 0 0 var(--s-5);
}
.ty-hero__title .mark { line-height: 1.28; }
.ty-hero__lead {
  max-width: 52ch; margin: 0 auto var(--s-4);
  font-size: clamp(16px, 2.2vw, 21px); line-height: 1.55; color: var(--charcoal);
}
.ty-hero__lead strong { color: var(--violet); font-weight: 700; }
.ty-video { max-width: 620px; margin: var(--s-7) auto 0; }
.ty-price { font-size: 14px; color: var(--graphite); margin: var(--s-3) 0 0; text-align: center; }
/* sta attaccato al bottone: è la seconda opzione della stessa scelta */
.ty-decline { margin: var(--s-4) 0 0; text-align: center; }
.ty-decline a { font-size: 14px; color: var(--charcoal); opacity: .7; text-underline-offset: 3px; }
.ty-decline a:hover { opacity: 1; }

/* La sezione attacca più in alto: arriva dopo un blocco che chiude già con
   il suo respiro. */
.ty #due-modi { padding-top: clamp(34px, 4.8vh, 68px); }

/* ---- I due profili a confronto ----
   Tutto il copy allo stesso corpo e allo stesso colore: l'unico segnale è la
   barretta viola sul secondo. Prima c'erano tre corpi, tre colori e due
   grassetti in sei righe, e la sezione sembrava disordinata. */
.ty .versus { display: grid; gap: var(--s-4); margin: 0; }
.ty .versus__a,
.ty .versus__b,
.ty .versus__seal {
  margin: 0;
  font-size: clamp(16px, 14.9px + 0.28vw, 19px); line-height: 1.62;
  color: var(--charcoal); font-weight: 400;
}
/* il secondo profilo: solo la barretta, niente altro */
.ty .versus__b { border-left: 3px solid var(--violet); padding-left: clamp(14px, 2vw, 20px); }
.ty .versus__seal { margin-top: var(--s-4); }
/* sul telefono la battuta finale va a capo, ma senza cambiare voce */
@media (max-width: 720px) { .ty .versus__seal span { display: block; margin-top: 4px; } }

/* ---- Il Backstage pass ----
   Disegnato come un pass da concerto: foro per il cordino in cima, fascia
   col nome, strappo perforato e codice in fondo. Serve a far sentire che è
   un oggetto che si porta al collo, non una riga di carrello. */
/* fa da etichetta alla card: sta attaccata a lei, non a mezz'aria */
.ty .ty-kicker {
  margin: var(--s-7) 0 var(--s-4); text-align: center;
  font-family: "Anton", sans-serif; text-transform: uppercase;
  font-size: clamp(20px, 17.2px + 0.75vw, 28px); letter-spacing: .02em;
  /* grigio chiaro: è un rilancio, non un titolo — deve accompagnare, non gridare */
  color: #A9A39C;
}

.ty .pass {
  position: relative; max-width: 420px; margin: 0 auto;
  background: var(--white);
  border: 2px solid var(--violet); border-radius: 14px;
  box-shadow: 0 26px 54px -26px rgba(88, 60, 150, .45);
  overflow: hidden;
}
/* il foro per il cordino */
.ty .pass__hole {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 9px; border-radius: 999px;
  background: var(--white); box-shadow: inset 0 1px 3px rgba(42, 29, 74, .45);
  z-index: 2;
}
.ty .pass__head {
  background: var(--violet); color: #fff;
  padding: 34px 20px 16px; text-align: center;
  /* lo strappo: dentini bianchi lungo il bordo basso della fascia */
  border-bottom: 2px dashed rgba(255, 255, 255, .45);
}
.ty .pass__kind {
  margin: 0; font-family: "Anton", sans-serif; text-transform: uppercase;
  font-size: clamp(26px, 21px + 1.3vw, 38px); line-height: 1; letter-spacing: .02em;
}
.ty .pass__price {
  margin: 6px 0 0; font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: .16em; color: var(--violet-pale);
}
.ty .pass__body { padding: clamp(20px, 4vw, 28px); }
.ty .pass__list { display: grid; gap: var(--s-4); margin: 0 0 var(--s-6); }
.ty .pass__list li {
  position: relative; padding-left: 30px;
  /* maiuscolo, come le diciture stampate su un pass vero: corpo un filo più
     piccolo e lettere più larghe, o in maiuscolo diventa un muro */
  text-transform: uppercase; letter-spacing: .045em; font-weight: 600;
  font-size: clamp(13px, 12.4px + 0.16vw, 15px); line-height: 1.5; color: var(--charcoal);
}
.ty .pass__list li::before {
  content: ""; position: absolute; left: 5px; top: 5px;
  width: 6px; height: 11px; border: solid var(--violet); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ty .pass__list strong { color: var(--violet); font-weight: 700; }
.ty .pass__list em { font-style: normal; color: var(--violet); }
.ty .pass .btn { width: 100%; }
.ty .pass .tally { margin-top: var(--s-5); }

/* codice e codice a barre, come su un pass vero */
.ty .pass__code {
  display: flex; align-items: center; gap: 10px;
  margin: var(--s-5) 0 0; padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .18em; color: var(--graphite);
}
.ty .pass__bars {
  flex: 1 1 auto; height: 22px; opacity: .5;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px,
    var(--ink) 5px 6px, transparent 6px 10px,
    var(--ink) 10px 13px, transparent 13px 15px);
}

/* ---- I bonus ----
   L'analisi è il motivo per cui si compra, i bonus sono il contorno. Erano
   tre riquadri identici da listino: adesso sono tre tagliandi, con il numero
   grande sul talloncino e lo strappo perforato — stessa famiglia del pass,
   e la gerarchia resta (schede più piccole della sezione dell'analisi). */
.ty .bonuses { display: grid; gap: var(--s-5); }
.ty .bonus {
  position: relative; display: grid; grid-template-columns: clamp(52px, 8vw, 68px) 1fr;
  background: var(--white);
  border: 1.5px solid var(--violet); border-radius: var(--r-card);
  overflow: hidden;
}
/* il talloncino con il numero, separato dallo strappo */
.ty .bonus__n {
  display: grid; place-items: center;
  background: rgba(88, 60, 150, .07);
  border-right: 2px dashed var(--violet-pale);
  font-family: "Anton", sans-serif; font-weight: 400;
  font-size: clamp(30px, 24px + 1.6vw, 44px); line-height: 1;
  color: var(--violet); opacity: .55;
}
/* le due tacche dello strappo, come su un biglietto staccato */
.ty .bonus::before, .ty .bonus::after {
  content: ""; position: absolute; left: clamp(52px, 8vw, 68px);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); transform: translateX(-50%);
  border: 1.5px solid var(--violet);
}
.ty .bonus::before { top: -8px; }
.ty .bonus::after { bottom: -8px; }

.ty .bonus__body { padding: clamp(18px, 3vw, 26px); }
.ty .bonus__kind {
  margin: 0 0 5px; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--violet);
}
.ty .bonus__title {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(17px, 15.6px + 0.38vw, 21px); line-height: 1.1; color: var(--ink);
  margin: 0 0 var(--s-3);
}
.ty .bonus p { color: var(--charcoal); margin: 0 0 var(--s-3); font-size: clamp(14.5px, 14px + 0.14vw, 16px); line-height: 1.55; }
.ty .bonus p:last-child { margin-bottom: 0; }

/* L'indicatore sul fondo scuro: stessi segni, colori invertiti perché il
   viola pieno su viola scuro non si vedrebbe. */
.ty .section--invert .tick { background: var(--violet-tint); }
.ty .section--invert .tick.is-taken {
  background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
}
.ty .section--invert .tick.is-taken::after { background: #fff; }
.ty .section--invert .tally { margin-top: var(--s-6); }
.ty .section--invert .tally__label { color: rgba(255, 255, 255, .88); }
.ty .section--invert .tally__label strong { color: #fff; }
.ty .section--invert .tally__of { color: var(--violet-tint); }

/* Le tre esclusioni della sezione scura: × invece di spunte, perché elencano
   quello che NON c'è. Attaccate alla frase che le introduce e staccate da
   quella dopo: completano il periodo sopra, non quello sotto. */
.ty #scarsita .stat-line { margin-bottom: var(--s-4); }
.ty .nolist { display: grid; gap: 10px; margin: var(--s-3) 0 var(--s-5); max-width: 46ch; }
.ty .nolist li {
  position: relative; padding-left: 32px;
  font-size: clamp(16px, 14.9px + 0.28vw, 19px); line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}
.ty .nolist li::before, .ty .nolist li::after {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 15px; height: 2px; border-radius: 1px; background: var(--violet-tint);
}
.ty .nolist li::before { transform: rotate(45deg); }
.ty .nolist li::after { transform: rotate(-45deg); }

/* ---- Chiusura ---- */
/* la prima delle due frasi è quella "spenta": stesso grigio del rilancio
   sopra la card, così il contrasto fra i due profili resta lo stesso in
   tutta la pagina */
.ty .pullquote__off { color: #A9A39C; }
.ty #chiusura .section-cta { margin-top: var(--s-7); }
.ty #chiusura .tally { margin-top: var(--s-5); }
.ty-center { text-align: center; }
.ty-center::before { margin-inline: auto; }
.ty-center-prose { text-align: center; }
.ty-center-prose .pullquote {
  margin-inline: auto; border-left: 0; padding-left: 0;
  border-top: 3px solid var(--violet); padding-top: var(--s-4);
  max-width: 32ch;
}
.ty-recap { display: grid; gap: var(--s-3); max-width: 44ch; margin: var(--s-7) auto 0; text-align: left; }
.ty-recap li { position: relative; padding-left: 30px; font-size: clamp(15px, 1.8vw, 17px); }
.ty-recap li::before {
  content: ""; position: absolute; left: 5px; top: 5px;
  width: 6px; height: 11px; border: solid var(--violet); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ty-fine { font-size: 13px; color: var(--graphite); margin: var(--s-3) 0 0; text-align: center; }

/* Bottone a due righe: l'invito in maiuscolo, il prezzo sotto nello stesso
   bottone. La riga piccola non è un'etichetta a parte, fa parte del click. */
.btn--stack {
  flex-direction: column; gap: 6px;
  padding-block: 14px; line-height: 1.15;
  /* in colonna le due righe occupano tutta la larghezza: senza questo, quando
     l'etichetta va a capo il testo resta appoggiato a sinistra */
  text-align: center;
}
.btn--stack .btn__main { text-transform: uppercase; letter-spacing: .02em; font-weight: 700; }
.btn--stack .btn__note { font-size: 12.5px; font-weight: 400; opacity: .82; }

/* ---- Scala tipografica della thank you page ----
   Ricalcata su quella della pagina di riferimento: gerarchia più stretta e
   testo più contenuto della landing. I valori interpolano fra 375px e 1440px
   di larghezza, cioè fra telefono e desktop.
   Attenzione: sono le misure loro adattate ai nostri caratteri. Anton è più
   pesante di Manrope, quindi i titoli stanno qualche punto sotto ai loro
   numeri per rendere lo stesso peso otticamente. Tutto è agganciato a
   `body.ty`: la landing non vede niente di tutto questo. */

/* titolo grande: 32px sul telefono → 54px sul desktop (loro: 32 → 58) */
.ty .ty-hero__title { font-size: clamp(32px, 24.25px + 2.07vw, 54px); line-height: 1.08; }

/* titoli di sezione: 22 → 40 (loro: 21 → 40) */
.ty .section-title--sm { font-size: clamp(22px, 15.7px + 1.69vw, 40px); line-height: 1.18; margin-bottom: var(--s-5); }
.ty .section-title--sm::before { width: 44px; height: 4px; margin-bottom: var(--s-4); }

/* nomi dei piani e titoli dei bonus: 19 → 26 (loro: 19 → 27) */
.ty .plan__name { font-size: clamp(19px, 16.5px + 0.66vw, 26px); line-height: 1.12; }
.ty .bonus__title { font-size: clamp(19px, 16.9px + 0.56vw, 25px); line-height: 1.15; }

/* tutto il testo che si legge di seguito: 16 → 19, interlinea larga come loro */
.ty .ty-hero__lead,
.ty .stat-line,
.ty .prose p { font-size: clamp(16px, 14.9px + 0.28vw, 19px); line-height: 1.62; }

/* elenchi: misura fissa, come nella pagina di riferimento */
.ty .plan li,
.ty .ty-recap li { font-size: clamp(16px, 14.9px + 0.28vw, 19px); line-height: 1.5; }

/* bottoni: 14,5 sul telefono → 17 sul desktop */
.ty .btn { font-size: clamp(14.5px, 13.6px + 0.23vw, 17px); }
.ty .btn--lg { padding: 17px 32px; }
.ty .btn--stack .btn__note { font-size: clamp(10.5px, 10.3px + 0.05vw, 11px); }

/* la frase estratta e il numero delle analisi seguono la stessa riduzione */
.ty .ty-center-prose .pullquote { font-size: clamp(19px, 15.5px + 0.94vw, 29px); line-height: 1.25; }

/* ---- Le due strade della hero ----
   Il copy è un "puoi fare così, oppure così": se le due frasi hanno lo stesso
   peso il bivio non si vede e non si legge nessuna delle due. La prima resta
   piccola e grigia, la seconda prende il corpo della frase-gancio. */
.ty .ty-hero__alt {
  max-width: 46ch; margin: 0 auto;
  font-size: clamp(14.5px, 13.9px + 0.16vw, 16px); line-height: 1.5;
  color: var(--graphite);
}
.ty .ty-hero__hook {
  max-width: 30ch; margin: var(--s-3) auto 0;
  font-size: clamp(19px, 14.8px + 1.13vw, 31px); line-height: 1.28;
  font-weight: 700; color: var(--ink);
}
.ty .ty-hero__hook strong { color: var(--violet); font-weight: 800; }
.ty .ty-hero__plus { color: var(--violet); white-space: nowrap; }

/* Disponibilità delle analisi: trenta caselle in fila, tutte uguali e
   allineate. L'unica cosa fatta a mano è il tratto che cancella quelle già
   prese — il gesto sta lì, non nella griglia. */
.ty .tally { max-width: 340px; margin: var(--s-5) auto 0; }
.ty .tally__row { display: flex; align-items: stretch; gap: 3px; height: 13px; }
.ty .tick {
  position: relative; flex: 1 1 0;
  background: var(--violet); border-radius: 3px;
}
/* le prese restano in traccia, e sopra ci va la cancellatura */
.ty .tick.is-taken { background: transparent; box-shadow: inset 0 0 0 1.5px var(--violet-pale); }
.ty .tick.is-taken::after {
  content: ""; position: absolute; left: -28%; right: -28%; top: 50%;
  height: 2.2px; margin-top: -1.1px; border-radius: 2px;
  background: var(--violet);
  transform: rotate(-40deg);
}

.ty .tally.is-in .tick {
  animation: tick-in 260ms var(--ease-out);
  animation-delay: calc(var(--i) * 26ms + 120ms);
}
@keyframes tick-in { from { opacity: 0; transform: scaleY(.2); } }
.ty .tally.is-low .tick:not(.is-taken) { animation: tick-low 1.8s var(--ease-out) infinite; }
@keyframes tick-low { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.ty .tally__label {
  margin: var(--s-3) 0 0; text-align: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--charcoal);
}
.ty .tally__label strong { color: var(--violet); font-weight: 700; font-size: 14px; }
.ty .tally__of { color: var(--graphite); }

@media (prefers-reduced-motion: reduce) {
  .ty .tick { animation: none !important; }
}

.ty .section-cta { margin-top: var(--s-4); }

/* =========================================================
   IMPAGINAZIONE DA COMPUTER
   Sul telefono la pagina funziona già e qui non viene toccata.
   Da 940px in su il problema erano due cose, misurate a 1440:
   la colonna restava larga 1240px e tutto era allineato a sinistra,
   con i titoli in Anton che arrivavano a 1096px di riga — mentre la
   hero è centrata. La pagina partiva centrata e poi saltava a sinistra.
   Qui la colonna si stringe e il contenuto si centra, così l'occhio
   scende dritto invece di rimbalzare da un bordo all'altro.
   In fondo al foglio di proposito: queste regole devono scavalcare
   quelle di base, che hanno la stessa specificità.
   ========================================================= */
@media (min-width: 940px) {
  .section-title--sm { text-align: center; }
  .section-title--sm::before { margin-inline: auto; }

  .prose { text-align: center; }
  .prose p { margin-inline: auto; }

  /* Anche l'enunciato sotto l'immagine: non è un titolo di sezione, ha una
     classe sua, e senza questa riga restava l'unica cosa allineata a
     sinistra in mezzo a tutto il resto centrato. */
  .statement { text-align: center; margin-inline: auto; }

  /* Le immagini rientrano nella colonna invece di andare da bordo a bordo.
     Da bordo a bordo crescevano con la finestra: a 1440 erano alte 810px, il
     90% dello schermo, e la sola hero occupava 182% di schermata. Sul telefono
     lo stesso file è il 26%, per questo il problema non si vedeva.
     Lo sconfinamento resta sotto i 940px, dove è quello che le fa funzionare. */
  .hero__cover--bleed,
  .bleed {
    margin-inline: 0;
    max-width: 100%;
  }

  /* La hero ha una colonna sua, più stretta di quella delle sezioni (920 contro
     976 a 1440): l'immagine risultava 28px più stretta per lato di tutto il
     resto. Qui la colonna della hero si allarga a quella del contenitore, così
     immagine, titoli, testo e card delle serate stanno tutti sulla stessa
     verticale. Il testo non si allarga: sottotitolo e qualificazione hanno un
     tetto in caratteri tutto loro. */
  .hero__content { max-width: none; }

  /* La frase estratta ha una barra verticale a sinistra: il testo resta
     appoggiato a lei, si centra il blocco. Centrare anche il testo la
     farebbe sembrare storta. Serve una misura, altrimenti riempie tutta la
     colonna e la barra finisce contro il bordo, molto più a sinistra del
     testo centrato che le sta sopra e sotto. */
  .prose .pullquote { text-align: left; margin-inline: auto; max-width: 44ch; }
}