/* =========================================================
   PROVA · LINEE GUIDA V2 (pagine pubbliche) — body.v2
   Solo per index-v2.html, file di confronto. Non tocca la
   landing né la versione V1 (body.fck).

   "Due strati, mai mescolati." Lo strato stampato: fondo
   bianco, serif, titoli forti condensati. Lo strato a mano:
   tutto viola. Il viola non è mai una superficie, tranne la
   fascia di apertura. Ritmo: apertura viola → contenuto su
   bianco → chiusura discreta.
   ========================================================= */
body.v2 {
  --viola: #4E3187;
  --viola-scuro: #3A2366;
  --inchiostro: #1C1B22;
  --testo: #34323B;
  --grigio2: #85818F;
  --evidenziatore: #DDD3EF;
  --lavanda2: #F1ECF9;
  --riga2: #ECE9F1;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Inter var", system-ui, sans-serif;
  --titolo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mano: "Caveat", cursive;

  /* i token del foglio, riempiti coi valori V2 */
  --violet: #4E3187; --violet-700: #3A2366; --violet-900: #3A2366;
  --violet-bright: #4E3187; --violet-tint: #DDD3EF; --violet-pale: #DDD3EF;
  --ink: #1C1B22; --charcoal: #34323B; --graphite: #85818F;
  --paper: #fff; --paper-2: #fff; --white: #fff;
  --line: #ECE9F1;
  --metallo: linear-gradient(#4E3187, #4E3187);
  --metallo-giu: linear-gradient(#4E3187, #4E3187);
  --metallo-cupo: linear-gradient(#4E3187, #4E3187);
  /* stondato, ma poco: bottoni e campi 10, schede 16, nessuna pillola */
  --r-default: 10px; --r-card: 16px; --r-pill: 10px;
  --maxw: 940px; --gutter: 26px; --section-pad: 68px;

  font-family: var(--serif); color: var(--testo); background: #fff;
}
@media (max-width: 640px) { body.v2 { --section-pad: 40px; } }

/* Sostituzioni meccaniche, generate leggendo styles.css: ogni
   selettore che dichiarava un font o un'ombra, ripetuto sotto
   body.v2. Vincono sull'originale, perdono contro le regole
   scritte a mano più sotto. */
body.v2 .lightbox__cap strong,
body.v2 .section-title,
body.v2 .wordmark,
body.v2 .hero__title,
body.v2 .hero__bonus-marchio,
body.v2 .hero__replay-title,
body.v2 .form-card__title,
body.v2 .gate__title,
body.v2 .quiz__q,
body.v2 .doc__title,
body.v2 .form-success__title,
body.v2 .flip-title,
body.v2 .night__title,
body.v2 .card__title,
body.v2 .edward__photo-ph,
body.v2 .proof__title,
body.v2 .final-cta__title,
body.v2 .sticky-cta__name,
body.v2 .prog__title,
body.v2 .ba__label,
body.v2 .rr__title,
body.v2 .legal h1,
body.v2 .legal h2,
body.v2 .ticket__title,
body.v2 .gifts__name,
body.v2 .og--libro .og__cop b,
body.v2 .sflix__marchio { font-family: var(--serif); }

body.v2 .mono,
body.v2 .jump-nav a,
body.v2 .hero__quando,
body.v2 .hero__attesa,
body.v2 .hero__eyebrow,
body.v2 .form-card__date,
body.v2 .gate__badge,
body.v2 .quiz .field label,
body.v2 .faq__num,
body.v2 .vt__ph-label,
body.v2 .prog__day,
body.v2 .prog__cap,
body.v2 .phases li::before,
body.v2 .night__day,
body.v2 .legal__back,
body.v2 .legal__updated,
body.v2 .vs__daylabel,
body.v2 .vs__tag,
body.v2 .vs__cd,
body.v2 .vs__lock__date,
body.v2 .rp__cd,
body.v2 .ticket__reward > p.ticket__deadline,
body.v2 .locked__cap,
body.v2 .og--serate .og__fr b,
body.v2 .og--call .og__rec,
body.v2 .og--call .og__tempo,
body.v2 .og--libro .og__cop i { font-family: var(--sans); }

body.v2,
body.v2 .btn,
body.v2 .hero__sub,
body.v2 .snode__name,
body.v2 .wa-sticky,
body.v2 .statement,
body.v2 .prose h3,
body.v2 .prose .pullquote,
body.v2 .night__more,
body.v2 .flow__num { font-family: var(--serif); }

body.v2 .section--invert .night:hover,
body.v2 .rr__zoom::after,
body.v2 .lightbox__close,
body.v2 .live-dot,
body.v2 .hero__excl,
body.v2 .hero__figure,
body.v2 .hero__bonus,
body.v2 .hero__player,
body.v2 .countdown--boxed .countdown__unit,
body.v2 .hero__media img,
body.v2 .modal__dialog,
body.v2 .modal__dialog .form-card,
body.v2 .modal__close,
body.v2 .form-card,
body.v2 .q-opt:hover,
body.v2 .snode__node,
body.v2 .snode.is-on .snode__node,
body.v2 .snode.is-on .snode__card,
body.v2 .faq__item[open],
body.v2 .night:hover,
body.v2 .card:hover,
body.v2 .proof__card:hover,
body.v2 .wa-sticky,
body.v2 .wa-sticky:hover,
body.v2 .cal__menu,
body.v2 .vt__ph-play,
body.v2 .vt__card,
body.v2 .ba__col--after,
body.v2 .rr__card,
body.v2 .rr__card:hover,
body.v2 .vs__card,
body.v2 .vs__play__ic,
body.v2 .ticket,
body.v2 .tf__choice:hover,
body.v2 .og__play,
body.v2 .og--serate .og__fr,
body.v2 .og--training .og__schermo,
body.v2 .og--call,
body.v2 .og--libro,
body.v2 .sflix { box-shadow: none; }


/* ---------- Tipografia ---------- */
/* Barlow solo nel titolo di apertura e nel nome. I titoli di
   sezione sono serif 500, 26–32px. */
body.v2 .section-title,
body.v2 .section-title--sm,
body.v2 .statement {
  font-family: var(--serif); font-weight: 500; text-transform: none;
  letter-spacing: -.005em; color: var(--inchiostro);
  font-size: clamp(26px, 2.6vw, 32px); line-height: 1.18;
}
body.v2 .section-title--sm::before { display: none; }
body.v2 .section-title .accent,
body.v2 .statement .accent { color: inherit; }
body.v2 .hero__title,
body.v2 .final-cta__title {
  font-family: var(--titolo); font-weight: 800; text-transform: uppercase;
  line-height: .92; letter-spacing: -.005em;
  font-size: clamp(52px, 7vw, 84px);
}
body.v2 .night__title,
body.v2 .ba__label,
body.v2 .rr__title,
body.v2 .faq__q,
body.v2 .edward__quote {
  font-family: var(--serif); font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--inchiostro);
}
body.v2 .night__title,
body.v2 .ba__label { font-size: 24px; line-height: 1.2; }
body.v2 .rr__title { font-size: 17px; line-height: 1.25; color: var(--inchiostro); }
body.v2 .wordmark,
body.v2 .sticky-cta__name,
body.v2 .hero__bonus-marchio,
body.v2 .sflix__marchio { font-family: var(--titolo); font-weight: 800; text-transform: uppercase; letter-spacing: 0; }

body.v2 p,
body.v2 li { font-family: var(--serif); }
body.v2 .prose p,
body.v2 .stat-line,
body.v2 .hero__sub p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.58; color: var(--testo); }
body.v2 .stat-line { text-align: center; margin-inline: auto; }

/* Etichette: Inter maiuscoletto, grigio. */
body.v2 .mono,
body.v2 .eyebrow,
body.v2 .hero__eyebrow,
body.v2 .hero__attesa,
body.v2 .night__day,
body.v2 .night__note,
body.v2 .forwho__head,
body.v2 .countdown__label,
body.v2 .sticky-cta__date,
body.v2 .sflix__occhiello,
body.v2 .hero__bonus-occhiello,
body.v2 .rr__sub,
body.v2 .faq__num,
body.v2 .vt__name,
body.v2 .btn__note {
  font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grigio2);
}

/* L'evidenziatore: un tratto di pennarello dai bordi irregolari,
   2–4 parole, una volta per blocco. Mai il viola come testo. */
body.v2 .sottolinea,
body.v2 p .mark,
body.v2 .stat-line strong,
body.v2 .prose em,
body.v2 .edward__text strong,
body.v2 .statement .accent,
body.v2 .hero__domanda .accent {
  background: var(--evidenziatore); color: inherit; font-style: normal;
  padding: 0 .14em; border-radius: 3px 9px 4px 11px / 9px 3px 11px 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: none; text-decoration: none;
}
body.v2 .sottolinea::after { display: none; }
body.v2 p .mark { display: inline; font-weight: 600; }
body.v2 .hero__sub strong { color: inherit; font-weight: 600; }
body.v2 .pullquote { border-left: 2px solid var(--evidenziatore); color: var(--inchiostro); font-style: italic; }
body.v2 .accent { color: inherit; }

/* ---------- Apertura viola: l'unica superficie colorata ---------- */
body.v2 .hero { background: var(--viola); color: #fff; overflow: hidden; }
body.v2 .hero__glow { display: none; }
body.v2 .hero :is(.hero__title, .hero__riga, .hero__riga--viola, .hero__domanda, .hero__sub p, .hero__sub strong) { color: #fff; }
body.v2 .hero :is(.hero__eyebrow, .hero__attesa, .countdown__label, .mono) { color: rgba(255,255,255,.72); }
body.v2 .hero__riga--viola { color: #fff; }
/* sul viola l'evidenziatore diventa un velo bianco al 20% */
body.v2 .hero :is(.sottolinea, .hero__domanda .accent) { background: rgba(255,255,255,.2); color: #fff; }
body.v2 .hero__domanda { font-family: var(--serif); font-weight: 400; font-style: italic; border: 0; }
body.v2 .hero__domanda .accent { display: table; margin: 4px auto 0; font-style: normal; }
body.v2 .hero__quando {
  font-family: var(--sans); font-weight: 600; letter-spacing: .08em;
  background: rgba(255,255,255,.14); color: #fff; border-radius: 10px;
}
body.v2 .hero__bonus { background: #fff; border: 0; border-radius: 16px; color: var(--testo); }
body.v2 .hero__bonus-marchio { color: var(--inchiostro); }
body.v2 .hero__bonus-flix { color: var(--viola); }
body.v2 .hero__bonus-testo { color: var(--testo); font-family: var(--serif); }
body.v2 .hero__bonus .mono,
body.v2 .hero__bonus-occhiello { color: var(--grigio2); }
/* la foto sul viola: angoli a 4px e un'ombra morbida per staccarla */
body.v2 .hero__figure img { border-radius: 4px; box-shadow: 0 24px 60px -24px rgba(20, 10, 40, .55); }
/* Il marchio in filigrana: bianco all'8%, tagliato dal bordo.
   Prende la versione con la micro-elica ritagliata al centro, che
   è il marchio vero: senza, in filigrana si leggeva come un
   asterisco pieno e non come il monogramma. */
body.v2 .hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 520px; height: 520px; right: -220px; bottom: -120px;
  background: #fff; opacity: .08;
  -webkit-mask: url("../img/marchio-elica.png") center / contain no-repeat;
          mask: url("../img/marchio-elica.png") center / contain no-repeat;
}
body.v2 .hero > .container { position: relative; z-index: 1; }
body.v2 .hero .countdown--boxed .countdown__unit { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 10px; }
body.v2 .hero .countdown__num,
body.v2 .hero .countdown__sep { color: #fff; }
body.v2 .hero .live-dot,
body.v2 .hero .live-dot::after { background: #fff; }
/* nel viola il bottone è bianco col testo viola */
body.v2 .hero .btn { --btn-bg: #fff; color: var(--viola); }
body.v2 .hero .btn__note { color: var(--grigio2); }
body.v2 .hero .ast { color: #fff; }

/* ---------- Tutto il resto su bianco ---------- */
body.v2 .section,
body.v2 .section--invert,
body.v2 #iscriviti { background: #fff; color: var(--testo); }
body.v2 .section + .section { border-top: 1px solid var(--riga2); }
body.v2 .section--invert :is(.section-title, .stat-line, p, li) { color: var(--testo); }
body.v2 .section--invert .section-title { color: var(--inchiostro); }
body.v2 .section--invert .btn { --btn-bg: var(--viola); color: #fff; }

/* le schede: bianche, riga chiara, raggio 16 */
body.v2 :is(.night, .ba__col, .forwho__col, .rr__card, .faq__item) {
  background: #fff; border: 1px solid var(--riga2); border-radius: 16px; box-shadow: none; color: var(--testo);
}
body.v2 .night__day { background: var(--lavanda2); color: var(--viola); padding: 5px 10px; border-radius: 6px; }
body.v2 .ba__col--after { background: var(--lavanda2); border-color: var(--lavanda2); color: var(--testo); }
body.v2 .ba__col--after :is(li, p, .ba__label) { color: var(--inchiostro); }
body.v2 .ba__col--after li::before { border-color: var(--viola); }
body.v2 .ba__col--before li::before,
body.v2 .ba__col--before li::after { background: #C9C5D1; }
body.v2 .ba__arrow { color: var(--grigio2); }
body.v2 .forwho__col--yes { border-left: 1px solid var(--riga2); }
body.v2 .forwho__col--yes li::before { border-color: var(--viola); }
body.v2 .forwho strong { color: inherit; font-weight: 600; }
body.v2 .vt__card { border-radius: 4px; border: 0; }
body.v2 .vt__quote { font-family: var(--serif); font-style: italic; color: var(--testo); border-left: 2px solid var(--evidenziatore); }
body.v2 .rr__img, body.v2 .rr__card img { border-radius: 4px; }
body.v2 .faq__item { border-radius: 12px; }
body.v2 .faq__q { font-size: 18px; }
body.v2 .faq__icon { border-color: var(--riga2); }

/* Edward: il ritratto in bianco e nero, contrasto +10%, 4px */
body.v2 .edward__img { filter: grayscale(1) contrast(1.1); border-radius: 4px; }
body.v2 .edward__quote { border-left: 2px solid var(--evidenziatore); font-style: italic; font-size: 22px; line-height: 1.35; }

/* Le grafiche "obiezioni. / Tu." nascono su bianco: vanno bene così. */

/* ---------- Bottoni ---------- */
body.v2 .btn {
  --btn-bg: var(--viola);
  font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.2;
  text-transform: none; letter-spacing: 0;
  padding: 16px 22px; border-radius: 10px; overflow: hidden; color: #fff;
}
body.v2 .btn::before,
body.v2 .btn::after { border-radius: inherit; }
body.v2 .btn::after { background: var(--viola-scuro); }
body.v2 .btn--lg { font-size: 17px; padding: 17px 26px; }
body.v2 .btn--sm { font-size: 14.5px; padding: 11px 16px; }
body.v2 .btn__note { display: block; margin-top: 4px; color: rgba(255,255,255,.8); text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* ---------- Chiusura discreta ---------- */
body.v2 #iscriviti :is(.final-cta__title) { color: var(--inchiostro); }
body.v2 #iscriviti .final-cta__title .strike { color: var(--viola); }
body.v2 #iscriviti .marchio--cta { display: none; }
body.v2 #iscriviti .countdown__num { color: var(--inchiostro); }
body.v2 .countdown__num { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }
body.v2 .countdown--boxed .countdown__unit { border-radius: 10px; }
body.v2 .live-dot, body.v2 .live-dot::after { background: var(--viola); box-shadow: none; }

body.v2 .site-footer { background: #fff; color: var(--grigio2); border-top: 1px solid var(--riga2); }
body.v2 .site-footer .wordmark { color: var(--inchiostro); font-size: 18px; }
body.v2 .marchio--sm {
  display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px;
  background: var(--viola);
  -webkit-mask: url("../img/marchio.png") center / contain no-repeat;
          mask: url("../img/marchio.png") center / contain no-repeat;
}
body.v2 .site-footer__links :is(a, button) { font-family: var(--sans); color: var(--grigio2); }

body.v2 .sticky-cta { background: #fff; border-bottom: 1px solid var(--riga2); }
body.v2 .sticky-cta__name { color: var(--inchiostro); }
body.v2 .sticky-cta .btn { --btn-bg: var(--viola); color: #fff; }

/* ---------- Pop-up ---------- */
body.v2 .modal__dialog { border-radius: 16px; }
body.v2 .gate__title,
body.v2 .quiz__q { font-family: var(--serif); font-weight: 500; text-transform: none; color: var(--inchiostro); }
body.v2 .gate__title .mark { background: var(--evidenziatore); color: inherit; border-radius: 3px 9px 4px 11px / 9px 3px 11px 4px; background-image: none; padding: 0 .14em; }
body.v2 .gate__badge { background: var(--lavanda2); color: var(--viola); font-family: var(--sans); border-radius: 6px; }
body.v2 .q-opt { border: 1px solid var(--riga2); border-radius: 12px; font-family: var(--serif); }
body.v2 .q-opt.is-on { background: var(--lavanda2); border-color: var(--viola); }
body.v2 :is(.field input, .field textarea, .field select) { border-radius: 10px; font-family: var(--sans); font-size: 16px; }

/* ---------- Correzioni dopo il primo controllo ---------- */
/* I bottoni a due righe hanno il maiuscolo in una regola a parte. */
body.v2 .btn--stack .btn__main { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* Nell'apertura ogni paragrafo è bianco: la qualificazione sotto il
   bottone restava scura sul viola. */
body.v2 .hero p { color: #fff; }
body.v2 .hero p .mark { background: rgba(255,255,255,.2); color: #fff; }
/* SALESFLIX: il viola è superficie solo nell'apertura. Qui diventa
   un riquadro lavanda, come i riquadri di servizio. */
body.v2 .sflix { background: var(--lavanda2); border-radius: 16px; }
body.v2 .sflix__marchio { color: var(--inchiostro); }
body.v2 .sflix__flix { color: var(--viola); }
body.v2 .sflix__occhiello { color: var(--grigio2); }
body.v2 .sflix__testo { color: var(--testo); }
/* Il titolo di chiusura resta in inchiostro: il viola è per i segni. */
body.v2 #iscriviti .final-cta__title .strike { color: var(--inchiostro); }
/* ...tranne dentro il riquadro bianco di SALESFLIX, dove la regola
   qui sopra rendeva il testo bianco su bianco. */
body.v2 .hero .hero__bonus .hero__bonus-marchio { color: var(--inchiostro); }
body.v2 .hero .hero__bonus .hero__bonus-flix { color: var(--viola); }
body.v2 .hero .hero__bonus .hero__bonus-testo { color: var(--testo); }
body.v2 .hero .hero__bonus .hero__bonus-occhiello { color: var(--grigio2); }

/* ---------------------------------------------------------------
   LA RIGA SOPRA IL NOME
   Due informazioni e basta, quelle che servono nei primi secondi:
   che non si paga e che è dal vivo. Niente riquadro attorno: a
   incorniciare metà riga, l'altra metà sembrava un'aggiunta. Resta
   il pallino che pulsa, che da solo dice "dal vivo" meglio di una
   cornice.
   Tutta turchese, il terzo colore del marchio: in tutta la testata
   è l'unica cosa accesa insieme al bottone, quindi è lì che va
   l'occhio prima di salire al nome. Contrasto sul viola 6,35.
   --------------------------------------------------------------- */
/* il selettore è lungo apposta: `body.v2 .hero p` qui sotto impone
   il bianco a tutti i paragrafi della testata, e per il turchese
   serve pesare di più, non arrivare dopo. */
body.v2 .hero .hero__live {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-weight: 700;
  /* A 320 pixel con la misura di prima la riga ne voleva 279 contro
     i 268 della colonna, e "ZOOM" finiva su una riga sua. Qui ne
     vuole 260: sta su una riga sola anche sullo schermo più stretto
     in circolazione. */
  font-size: clamp(10px, 1vw + 7px, 14px);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #6DE2CE;
}
/* Il pallino sta in mezzo alle due metà, al posto del punto che le
   separava: fa da separatore e da segnale insieme, e al centro della
   riga la pulsazione si vede meglio che in testa.
   Lo spazio ai suoi fianchi è in em, così resta proporzionato al
   testo a qualunque larghezza. È quello del punto che ha sostituito
   più l'aria della spaziatura fra le lettere, che qui è larga.
   Il pallino è quello che la pagina usa già nella chiusura: cambia
   colore e basta, l'animazione è la sua. */
body.v2 .hero__live .live-dot,
body.v2 .hero__live .live-dot::after {
  background: #6DE2CE;
  border-radius: 2px;
}
body.v2 .hero__live .live-dot {
  width: 7px; height: 7px; margin: 0 .42em; vertical-align: 1px;
  box-shadow: 0 0 0 4px rgba(109, 226, 206, .16);
}

/* ---------------------------------------------------------------
   L'ASTERISCO DEL NOME È IL MONOGRAMMA
   Resta un asterisco: prende la misura e il posto del glifo vero,
   non diventa una lettera. Misurato sull'asterisco di Barlow
   Condensed ExtraBold, che è il carattere del titolo: largo
   0,338em, alto 0,349em, e sta fra 0,396em e 0,745em sopra la
   linea di base. `vertical-align` con una misura alza il fondo
   del riquadro di quella quantità sopra la linea di base.
   L'asterisco vero resta nel testo, invisibile: così il nome si
   copia e lo leggono gli screen reader.
   --------------------------------------------------------------- */
body.v2 .ast {
  display: inline-block;
  width: .35em; height: .35em;
  margin: 0 .015em;
  vertical-align: .396em;
  overflow: hidden;
  /* Il glifo dell'asterisco va spinto fuori dal riquadro invece che
     reso trasparente: `color: transparent` spegnerebbe anche
     `currentColor`, e il monogramma qui sotto si dipinge proprio
     con quello. Così prende da solo il colore del testo che lo
     circonda — bianco sul viola, viola sul bianco, turchese dove il
     testo è turchese — e non va più impostato pagina per pagina.
     Resta nel testo per chi copia il nome e per gli screen reader. */
  text-indent: -100em;
  background-color: currentColor;
  /* la versione con la micro-elica ritagliata al centro */
  -webkit-mask: url("../img/marchio-elica.png") center / contain no-repeat;
          mask: url("../img/marchio-elica.png") center / contain no-repeat;
}

/* ---------------------------------------------------------------
   IL NOME PIÙ GRANDE, MISURATO SULLA COLONNA
   Prima era clamp(52px, 7vw, 84px): sul telefono si fermava sempre
   al minimo di 52 e riempiva l'84% della colonna, con cinquanta
   pixel di aria buttata ai lati. Adesso sono tre misure e vince la
   più piccola:
     19.1vw - 10px   quanto serve perché la riga lunga ("FANCUL*
                     ALLE", che è larga 5,184em in questo carattere)
                     riempia la colonna, che è 100vw meno i 52px di
                     margine. Comanda sul telefono.
     10.88vw+20.7px  la salita normale. Comanda da circa 380px in su,
                     dove la prima lascerebbe il nome a tutta pagina.
     160px           il tetto, se no sul monitor grande diventa un
                     manifesto.
   Sul telefono non si può crescere quasi più: a 375 pixel il nome
   riempie già la colonna, e il tetto vero è la prima misura. Da lì
   in su invece c'era molto da prendere, e la salita è più ripida di
   prima.
   A 320px viene 51px e la riga sta in 265 su 268 disponibili: non
   straborda nemmeno sugli schermi più stretti in circolazione.
   --------------------------------------------------------------- */
body.v2 .hero__title,
body.v2 .final-cta__title {
  font-size: min(calc(19.1vw - 10px), calc(10.88vw + 20.7px), 160px);
  line-height: .89;
}

/* ---------------------------------------------------------------
   IL BOTTONE DELLA TESTATA È TURCHESE
   Lo stesso turchese della pastiglia "Live su Zoom": in una testata
   viola sono le due uniche cose accese, e si rispondono — una dice
   cos'è, l'altra dice cosa fare.
   Scritta viola sul turchese: contrasto 6.35, come la pastiglia sul
   viola. La riga del regalo sta a 90 invece che a 82 di opacità,
   perché è piccola e sotto si leggeva meno del dovuto.
   --------------------------------------------------------------- */
body.v2 .hero .btn {
  --btn-bg: #6DE2CE;
  color: var(--viola);
}
/* La postilla sta a piena opacità invece che all'82 di prima: resta
   comunque la riga minore perché è più piccola e meno grassa, ma
   sbiadita sul turchese scendeva sotto il contrasto minimo quando il
   bottone si scurisce al passaggio del mouse. */
body.v2 .hero .btn .btn__note {
  color: var(--viola);
  opacity: 1;
}
/* Al passaggio del mouse il bottone si ricopre di un pannello che il
   foglio base fa viola scuro: sopra il turchese, con la scritta viola,
   diventerebbe illeggibile. Qui il pannello è un turchese più cupo:
   si vede che il bottone reagisce e la scritta resta a contrasto 5.04. */
body.v2 .hero .btn::after { background: #45CDB4; }
/* fra le due righe del bottone ci stava troppa aria: sono una frase
   e la sua postilla, non due voci separate. */
body.v2 .hero .btn--stack { gap: 3px; }
@media (max-width: 640px) {
  body.v2 .hero .btn--stack { gap: 1px; }
}

/* ---------------------------------------------------------------
   IL BOTTONE: BASSO E LARGO
   Era alto 73px e largo 277 su una colonna di 323: una pastiglia
   tozza in mezzo all'aria. Adesso prende tutta la colonna, con un
   tetto perché sul monitor grande una colonna da 834 ne farebbe uno
   striscione, e si abbassa togliendo imbottitura sopra e sotto.
   Le due righe si toccano: niente spazio fra loro, le tiene
   separate l'interlinea e basta.
   --------------------------------------------------------------- */
body.v2 .hero__cta { display: flex; justify-content: center; }
body.v2 .hero__cta .btn {
  width: 100%;
  max-width: 460px;
  padding-block: 11px;
}
body.v2 .hero .btn--stack,
body.v2 .hero .btn--stack:is(:hover, :focus) { gap: 0; }
@media (max-width: 640px) {
  body.v2 .hero__cta .btn { padding-block: 10px; }
}

/* ---------------------------------------------------------------
   IL CONTO ALLA ROVESCIA SENZA RIQUADRI
   Quattro scatole bianche in fila pesavano quanto il bottone, e
   nella testata ci può essere una cosa sola che pesa. Via il fondo,
   il bordo e l'ombra: restano i numeri, che è l'unica cosa che
   quella riga deve dire. Senza le scatole lo spazio fra i gruppi
   deve crescere, se no "18" e "07" si leggono come "1807".
   I selettori sono lunghi apposta: il foglio base ridefinisce
   queste stesse misure dentro una @media per il telefono, e per
   scavalcarla serve più specificità, non arrivare dopo.
   --------------------------------------------------------------- */
body.v2 .hero .countdown--boxed .countdown__unit {
  min-width: 0;
  padding: 0;
  gap: 2px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.v2 .hero .countdown--boxed { gap: clamp(15px, 4.6vw, 28px); margin-top: 14px; }
body.v2 .hero .countdown--boxed .countdown__num { font-size: clamp(19px, 4.2vw, 28px); }
body.v2 .hero .countdown--boxed .countdown__label {
  font-size: clamp(8px, 1.4vw, 9.5px);
  letter-spacing: .12em;
}
body.v2 .hero .countdown--boxed .countdown__sep {
  align-self: flex-start;
  font-size: clamp(14px, 3vw, 20px);
  line-height: 1.35;
  color: rgba(255, 255, 255, .45);
}
body.v2 .hero .hero__attesa {
  font-size: clamp(9px, 1.1vw, 11.5px);
  margin-top: 16px;
}

/* ---------------------------------------------------------------
   LA SOTTOTESTATA TORNA AL SUO CARATTERE
   Le linee guida V2 mettono tutto il testo lungo in Source Serif, e
   l'avevano preso anche queste tre righe. Qui torna Geist, il senza
   grazie della landing: è il carattere con cui la frase è stata
   scritta, e con le grazie si leggeva come una citazione invece che
   come la promessa dell'evento.
   Il selettore nomina anche il paragrafo dentro perché la regola V2
   veste il contenitore e il corpo del testo sta sul figlio.
   --------------------------------------------------------------- */
body.v2 .hero .hero__sub,
body.v2 .hero .hero__sub p,
body.v2 .hero .hero__sub strong {
  font-family: "Geist", system-ui, sans-serif;
}

/* ---------------------------------------------------------------
   I BOTTONI TORNANO IN MAIUSCOLO
   È una convenzione della pagina, non una scelta del singolo
   bottone: il foglio base la decide una volta per tutti i bottoni
   d'azione, comprese le etichette che il JS scrive da solo nel
   modulo ("Continua", "Indietro"). Le linee guida V2 l'avevano
   spenta; qui torna.
   Con le maiuscole serve un filo di spaziatura fra le lettere, se
   no si impastano: due centesimi di em sulla riga principale.
   La postilla sta più larga, 4 centesimi, perché è piccola e in
   maiuscolo stretta diventerebbe un blocco.
   --------------------------------------------------------------- */
body.v2 .btn,
body.v2 .btn--stack .btn__main {
  text-transform: uppercase;
  letter-spacing: .02em;
}
body.v2 .btn__note {
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* In maiuscolo "RISERVA IL TUO POSTO GRATUITO" è più larga che in
   minuscolo, e dentro il bottone del telefono non ci stava più: a
   375 pixel ne voleva 271 contro i 271 netti disponibili, e andava
   a capo portando il bottone da 58 pixel di altezza a 78.
   L'imbottitura ai lati serviva a un bottone su misura; questo è a
   tutta colonna, quindi può stringersi. Il corpo scende con lo
   schermo di un filo più in fretta. */
body.v2 .hero__cta .btn--lg {
  padding-inline: 14px;
  font-size: clamp(13.5px, 3.9vw, 17px);
}

/* ---------------------------------------------------------------
   LA BARRA FISSA: IL CONTO ALLA ROVESCIA SI VEDEVA PIÙ
   Il foglio base disegna la barra in negativo, sul viola del
   marchio, e lì dentro mette tutto bianco. Le linee guida V2 la
   fanno bianca e ricoloravano il nome e il bottone, ma non il
   conto alla rovescia: i numeri restavano bianchi su bianco,
   quindi invisibili, e l'etichetta e le lettere g/h/m erano in
   lavanda chiarissima, che su bianco è appena un'ombra.
   È la cosa che resta in alto per tutta la pagina, quindi vale la
   pena che si legga.
   --------------------------------------------------------------- */
body.v2 .sticky-cta .sticky-cta__cd .countdown__num { color: var(--inchiostro); }
body.v2 .sticky-cta .sticky-cta__cdlabel,
body.v2 .sticky-cta .sticky-cd__u i { color: var(--viola); }

/* Sul telefono nella barra non c'è posto per quattro gruppi: la
   fila ne vuole 130 pixel e ne ha 98, e i secondi finivano sotto
   il bottone. Finché erano bianchi su bianco non si vedeva.
   Via i secondi: in una barra che resta in alto tutto il tempo
   contano i giorni e le ore, e un numero che cambia ogni secondo
   accanto al bottone è solo rumore. Da 560 pixel in su tornano. */
@media (max-width: 559px) {
  body.v2 .sticky-cta__cd .sticky-cd__u:last-child { display: none; }
}
/* Sotto i 360 pixel non basta togliere i secondi: lì il bottone si
   prende 239 pixel su 320 e al conto alla rovescia ne restano 43
   contro i 98 che gli servono, quindi finisce sotto il bottone e
   l'etichetta va a capo tre volte. Su quegli schermi la barra fa
   una cosa sola, che è il bottone. */
@media (max-width: 359px) {
  body.v2 .sticky-cta__cdwrap { display: none; }
}

/* ---------------------------------------------------------------
   LA POSTILLA DEL BOTTONE SU UNA RIGA SOLA
   "+ accesso alla piattaforma di streaming sulla vendita." è lunga
   il doppio di quella di prima: a 11 pixel voleva 295 di larghezza
   e ne aveva 295, quindi andava a capo e il bottone tornava alto 68.
   Il corpo qui è calcolato, non scelto: la frase occupa 33 volte il
   suo corpo, e lo spazio netto dentro il bottone è la larghezza
   dello schermo meno 80 pixel fra margini della pagina e
   imbottitura. Da lì esce 2,9vw meno 2,5 pixel, con un tetto a 12
   perché sul computer il bottone smette di allargarsi.
   `nowrap` è la garanzia: se un giorno il testo si allunga, esce
   dal bottone invece di andare a capo in silenzio, e si vede
   subito che la misura va rifatta.
   --------------------------------------------------------------- */
body.v2 .hero__cta .btn .btn__note {
  white-space: nowrap;
  letter-spacing: .02em;
  font-size: min(calc(2.9vw - 2.5px), 12px);
}

/* ---------------------------------------------------------------
   IL BOTTONE RESPIRA
   Lo stesso battito del pallino del dal vivo, due secondi, così i
   due si muovono insieme invece di accavallarsi: un alone turchese
   che si allarga e sfuma. Non muove il bottone di un pixel — è
   solo ombra — quindi non sposta niente di quello che ha intorno.
   Si spegne per chi ha chiesto meno animazioni nel sistema, come
   fa il resto della pagina.
   --------------------------------------------------------------- */
@keyframes respiro-bottone {
  0%   { box-shadow: 0 0 0 0 rgba(109, 226, 206, .5); }
  70%  { box-shadow: 0 0 0 14px rgba(109, 226, 206, 0); }
  100% { box-shadow: 0 0 0 0 rgba(109, 226, 206, 0); }
}
body.v2 .hero__cta .btn {
  animation: respiro-bottone 2s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.v2 .hero__cta .btn { animation: none; }
}

/* La stessa postilla sta anche nel bottone della chiusura, e lì
   andava a capo. Stesso trattamento: imbottitura stretta, niente a
   capo, corpo calcolato. Con la frase su una riga il bottone viene
   largo quanto la colonna, come quello della testata: i due ora si
   somigliano invece di essere uno a tutta larghezza e uno no. */
body.v2 #iscriviti .btn--stack {
  width: 100%;
  max-width: 460px;
  padding-inline: 14px;
}
body.v2 #iscriviti .btn--stack .btn__note {
  white-space: nowrap;
  letter-spacing: .02em;
  font-size: min(calc(2.9vw - 2.5px), 12px);
}

/* La scritta del bottone un filo più piccola e in neretto: perde in
   misura quello che guadagna in peso, e il bottone resta basso. */
body.v2 .hero__cta .btn--lg { font-size: clamp(12.5px, 3.6vw, 16px); }
body.v2 .btn--stack .btn__main { font-weight: 700; }

/* ---------------------------------------------------------------
   IL NOME TIRATO IN ALTEZZA
   In larghezza non si può crescere: sul telefono riempie già la
   colonna. Allora si cresce nell'altra direzione, stirando i
   caratteri in verticale del 14 per cento. È quello che si fa sui
   manifesti quando la colonna è stretta: le lettere si allungano,
   la riga resta lunga uguale.
   Si usa la proprietà `scale` e non `transform`, perché
   `.reveal.is-in` mette `transform: none` e lo stiramento
   sparirebbe appena il titolo compare.
   Lo stiramento non cambia lo spazio che il titolo occupa nella
   pagina, solo come si vede: sborda di un ottavo di riga sopra e
   sotto, e il margine qui sotto glielo restituisce.
   --------------------------------------------------------------- */
body.v2 .hero__title,
body.v2 .final-cta__title {
  scale: 1 1.14;
  margin-block: .13em;
}
/* Il monogramma e la firma a mano stanno dentro il titolo e si
   stirerebbero con lui: il marchio diventerebbe ovale e la nota
   schiacciata in verticale. Qui tornano alle loro proporzioni. */
body.v2 .hero__title .ast,
body.v2 .final-cta__title .ast {
  scale: 1 calc(1 / 1.14);
}

/* ---------------------------------------------------------------
   IL RIQUADRO DI SALESFLIX
   Il foglio base lo vuole scuro, e il commento nel codice spiega
   perché: la sezione resta bianca e il buio si concentra nel
   riquadro, dove diventa uno schermo acceso invece che un fondo.
   Le linee guida V2 l'avevano appiattito in lavanda chiara, e così
   sembrava un riquadro vuoto grande il doppio del suo contenuto.
   Qui torna scuro, nel viola della testata, e prende il linguaggio
   che abbiamo costruito lassù:
   - turchese sull'occhiello e su "flix", perché il turchese in
     questa pagina vuol dire "questo è incluso e non si paga";
   - raggio 10, lo stesso dei bottoni e della riga del dal vivo;
   - il marchio tirato del 14 per cento come il nome dell'evento,
     che è quello che li fa leggere come la stessa famiglia;
   - imbottitura più stretta, perché il riquadro di prima era aria
     per due terzi.
   --------------------------------------------------------------- */
body.v2 .sflix {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding: clamp(24px, 4.2vw, 42px) clamp(18px, 4vw, 40px);
  /* Il bordo è un filo di luce, non una riga: due fondi sovrapposti,
     il viola pieno dentro e un gradiente che vive solo nello spessore
     del bordo. Parte turchese dall'angolo in alto a sinistra e si
     spegne scendendo, come il riflesso sulla cornice di uno schermo
     acceso. Non si muove: è un'inclinazione della luce, non un
     battito. */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--viola), var(--viola)) padding-box,
    linear-gradient(140deg,
      rgba(109, 226, 206, .85) 0%,
      rgba(109, 226, 206, .25) 35%,
      rgba(255, 255, 255, .14) 65%,
      rgba(255, 255, 255, .04) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 24px 60px -30px rgba(20, 10, 40, .55);
}
/* Il monogramma in filigrana dentro la card, in basso a destra e
   tagliato dal bordo: la stessa firma che chiude la testata, qui
   dentro riempie l'angolo vuoto a destra della scritta. Bianco al
   7 per cento, perché deve farsi notare solo al secondo sguardo. */
body.v2 .sflix::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: clamp(130px, 26vw, 230px);
  aspect-ratio: 1;
  right: -4%;
  bottom: -22%;
  background: #fff;
  opacity: .07;
  -webkit-mask: url("../img/marchio-elica.png") center / contain no-repeat;
          mask: url("../img/marchio-elica.png") center / contain no-repeat;
}
/* Il testo sopra la filigrana. `:not(.sr-only)` non è un dettaglio:
   la riga nascosta per gli screen reader si nasconde proprio con
   `position: absolute`, e senza questa esclusione la regola gliela
   portava via e la scritta ricompariva sotto il marchio. */
body.v2 .sflix > :not(.sr-only) { position: relative; z-index: 1; }
body.v2 .sflix__occhiello {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(10px, 1vw + 7px, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6DE2CE;
}
/* La scritta alla maniera di Netflix: lettere altissime e
   attaccate. Il carattere è già stretto, quindi la differenza la
   fanno le due cose che quel logotipo ha e un titolo normale no —
   lo stiramento spinto, 28 per cento contro il 14 del nome
   dell'evento, e la spaziatura in negativo, che fa toccare le
   lettere fra loro. L'ombra sotto le stacca dal fondo come una
   scritta illuminata. */
body.v2 .sflix__marchio {
  color: #fff;
  letter-spacing: -.035em;
  margin-block: .16em;
  text-shadow: 0 .06em .14em rgba(10, 4, 24, .45);
}
/* ---------------------------------------------------------------
   LA CONCA DELLA SCRITTA
   Come il logotipo di Netflix: le lettere esterne sono le più
   alte e si abbassano scendendo verso il centro. La parola
   sembra avvolta dall'interno di un cilindro.
   Non si può fare su tutta la parola insieme, perché a ogni
   lettera serve la sua altezza — da qui gli span.
   L'altezza segue una curva: 1,32 alle estremità e 1,12 in mezzo.
   Lo stiramento parte dal centro e non dal basso, perché in quel
   logotipo le lettere crescono in tutte e due le direzioni: anche
   la riga di base si incurva, e le esterne scendono più in basso
   delle centrali. Con l'origine in basso si sarebbe mossa solo la
   cima, e la conca si sarebbe vista a metà.
   --------------------------------------------------------------- */
body.v2 .sflix__l {
  display: inline-block;
  transform-origin: center;
}
body.v2 .sflix__l:nth-child(1) { scale: 1 1.32; }
body.v2 .sflix__l:nth-child(2) { scale: 1 1.233; }
body.v2 .sflix__l:nth-child(3) { scale: 1 1.17; }
body.v2 .sflix__l:nth-child(4) { scale: 1 1.133; }
body.v2 .sflix__l:nth-child(5) { scale: 1 1.12; }
body.v2 .sflix__l:nth-child(6) { scale: 1 1.133; }
body.v2 .sflix__l:nth-child(7) { scale: 1 1.17; }
body.v2 .sflix__l:nth-child(8) { scale: 1 1.233; }
body.v2 .sflix__l:nth-child(9) { scale: 1 1.32; }

/* I due colori della card. Erano già scritti più su nel foglio, ma
   con i valori di quando la card era lavanda chiara: lì "flix" è
   viola e la riga sotto grigia, e su fondo scuro sparivano. */
body.v2 .sflix .sflix__flix { color: #6DE2CE; }
body.v2 .sflix .sflix__testo {
  font-family: var(--sans);
  color: rgba(255, 255, 255, .86);
}

/* ---------------------------------------------------------------
   LA RIGA DELL'EDIZIONE
   Il gradino fra la riga del dal vivo e il nome. Dice che edizione
   è senza alzare la voce: bianco a mezza forza, corpo piccolo e
   lettere molto distanziate — è la spaziatura, non la misura, a
   darle importanza, come faceva "Partecipa a" nella pagina di
   partenza.
   In Lora, che è un carattere con le grazie: fra la riga turchese
   tutta in maiuscolo secco e il nome a caratteri cubitali ci
   voleva qualcosa di diverso da entrambi, se no diventavano tre
   righe dello stesso tipo una sopra l'altra.
   L'ultima lettera porta con sé la spaziatura che la segue, e la
   riga centrata risulterebbe spostata a sinistra della metà di
   quel valore: il rientro a sinistra glielo restituisce.
   --------------------------------------------------------------- */
body.v2 .hero .hero__edizione {
  margin: 0 0 .7em;
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  font-size: clamp(11px, 1vw + 7.5px, 14px);
  letter-spacing: .42em;
  padding-left: .42em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(255, 255, 255, .78);
}

/* Il numero e la sua "ª" restano attaccati: con la spaziatura larga
   di tutta la riga si staccavano, e "3 ª" si leggeva come due segni
   separati invece che come un ordinale. */
body.v2 .hero .hero__edizione-n {
  letter-spacing: 0;
  margin-right: .14em;
}

/* Due paragrafi di fila dove prima ce n'era uno: il secondo gli sta
   sotto, non in un'altra parte di pagina, quindi fra i due ci va
   l'aria di una riga.
   Il selettore porta l'id perché nel foglio base c'è
   `#salesflix .stat-line { margin: var(--s-7) 0 0 }`, che dà a ogni
   riga di questa sezione 48 pixel sopra e zero sotto: con un
   selettore di sole classi quella vinceva, e i due paragrafi
   restavano lontani come se parlassero di cose diverse. */
body.v2 #salesflix .stat-line--seguita { margin-bottom: 1.1em; }
body.v2 #salesflix .stat-line--seguita + .stat-line { margin-top: 0; }

/* =================================================================
   LE PAGINE DOPO L'ISCRIZIONE  (pass.html, ci-vediamo.html)
   Hanno il loro impianto, la thank-you page, che questo foglio non
   conosceva: prendevano il corpo del testo dalle regole generali e
   restavano con i caratteri di prima su tutto il resto. Qui i loro
   pezzi vengono ricondotti ai due caratteri del sistema.
   Non si tocca l'impaginazione: solo chi scrive cosa.
   ================================================================= */

/* I titoli: da Anton a Barlow Condensed, come il nome dell'evento. */
body.v2 .ty-hero__title,
body.v2 .ty-kicker,
body.v2 .ty-appuntamento__riga,
body.v2 .pass__kind,
body.v2 .bonus__title,
body.v2 .passo__titolo,
body.v2 .passo__n,
body.v2 .biglietto__titolo {
  font-family: var(--titolo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
}

/* Le etichette: da Geist Mono a Inter, come le etichette della
   landing. Il monospaziato era il segno della versione di prima;
   qui il segno è la spaziatura fra le lettere. */
body.v2 .bonus__n,
body.v2 .pass__price,
body.v2 .pass__code,
body.v2 .tally__label,
body.v2 .tally__of,
/* La tabella del confronto e la barra in cima danno il carattere
   monospaziato per eredità, dall'elemento padre: nominare le celle
   una per una non serviva a niente, perché su di loro non c'è
   nessuna regola da scavalcare. */
body.v2 .confronto__tab,
body.v2 .ty-bar,
body.v2 .biglietto__occhiello,
body.v2 .biglietto__ammetti,
body.v2 .biglietto__stato,
body.v2.ty dt {
  font-family: var(--sans);
  font-weight: 600;
}

/* Il titolo grande prende anche la tirata del nome dell'evento: è
   quello che fa sembrare le due pagine parenti invece che vicine. */
body.v2 .ty-hero__title {
  scale: 1 1.14;
  margin-block: .13em;
}

/* Gli ultimi due monospaziati stanno su selettori più lunghi dei
   miei — `.ty-bar .container` e `.ty .confronto__tab thead th` —
   quindi vincevano loro. Qui i selettori sono altrettanto lunghi
   più la classe del corpo. */
body.v2 .ty-bar .container,
body.v2.ty .confronto__tab thead th {
  font-family: var(--sans);
  font-weight: 600;
}

/* =================================================================
   LA PELLE SCURA  (classe `scuro`, oggi solo su pass.html)
   La pagina del pass non deve leggersi come la ricevuta
   dell'iscrizione ma come una cosa nuova che chiede attenzione: il
   fondo scuro è quello che fa alzare lo sguardo dopo tre schermate
   di bianco.
   Non cambia un pezzo di impaginazione: cambia la tavolozza. Il
   viola, che su bianco era l'accento, qui sparirebbe nel fondo —
   quindi l'accento diventa il turchese, che è già il terzo colore
   del marchio e sul nero è la cosa che si vede per prima.
   I token del foglio base sono riempiti con i valori scuri, così
   tutto quello che li usa segue da solo.
   ================================================================= */
body.v2.scuro {
  --inchiostro: #FFFFFF;
  --testo: #C9C7D0;
  --grigio2: #8E8C97;
  --viola: #6DE2CE;
  --viola-scuro: #4FD0B8;
  --evidenziatore: rgba(109, 226, 206, .22);
  --lavanda2: #202024;
  --riga2: #2F2F36;

  --violet: #6DE2CE; --violet-700: #4FD0B8; --violet-900: #4FD0B8;
  --violet-bright: #6DE2CE;
  --violet-tint: rgba(109, 226, 206, .22);
  --violet-pale: rgba(109, 226, 206, .34);
  --ink: #FFFFFF; --charcoal: #C9C7D0; --graphite: #8E8C97;
  --paper: #141416; --paper-2: #141416;
  --line: #2F2F36;

  background: #141416;
  color: #C9C7D0;
}

/* I fondi bianchi scritti a mano nello strato V2: qui vanno al buio.
   Le schede stanno un gradino sopra il fondo della pagina, non allo
   stesso livello, se no spariscono. */
body.v2.scuro .section,
body.v2.scuro .section--invert { background: #141416; }
body.v2.scuro :is(.modal__dialog, .confronto__si, .confronto__con, .modal__close, .og, .vt__card, .faq__item) {
  background: #1C1C20;
  color: var(--testo);
}
body.v2.scuro .section + .section { border-top: 1px solid var(--riga2); }

/* Il buco del biglietto fa il suo mestiere solo se è del colore
   della pagina: è un foro, non un cerchio bianco. */
body.v2.scuro .pass__hole { background: #141416; }

/* I titoli e il testo forte vanno al bianco pieno. */
body.v2.scuro :is(h1, h2, h3, .ty-hero__title, .ty-kicker, .passo__titolo,
                  .bonus__title, .pass__kind, .section-title, .statement, strong, b) {
  color: var(--inchiostro);
}

/* La barra in cima e la testata del pass: erano viola pieno, qui
   sarebbero due macchie spente. Diventano turchese con la scritta
   scura, che è il contrasto più forte che questa tavolozza ha. */
body.v2.scuro :is(.ty-bar, .pass__head) {
  background: #6DE2CE;
  color: #141416;
}
body.v2.scuro :is(.ty-bar, .pass__head) :is(*, .live-dot) { color: #141416; }
body.v2.scuro .ty-bar .live-dot,
body.v2.scuro .ty-bar .live-dot::after { background: #141416; }
body.v2.scuro .ty-bar__ok { background: rgba(20, 20, 22, .14); }

/* Il bottone: turchese pieno, scritta scura. */
body.v2.scuro .btn { --btn-bg: #6DE2CE; color: #141416; }
body.v2.scuro .btn::after { background: #4FD0B8; }
body.v2.scuro .btn__note { color: #141416; opacity: 1; }

/* Il piede resta l'ultima cosa bianca della pagina: va al buio con
   tutto il resto. */
body.v2.scuro .site-footer { background: #141416; border-top: 1px solid var(--riga2); }

/* Il tratto di pennarello dietro alle parole in evidenza è un
   disegno dentro il foglio base, con il viola scritto nel disegno
   stesso: su fondo scuro restava una macchia spenta. Qui è lo
   stesso tratto, identico nella forma, col turchese al posto del
   viola e la scritta scura sopra. */
body.v2.scuro .mark {
  color: #141416;
  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='%236DE2CE' 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");
}

/* I pannelli che non hanno un colore di fondo ma due fondi
   sovrapposti — bianco dentro e un gradiente nello spessore del
   bordo. È lo stesso trucco della card di Salesflix, e siccome il
   bianco è un'immagine e non un colore, sulla pelle scura non lo
   toccava nessuna delle regole di prima: restavano gli unici
   rettangoli bianchi della pagina.
   Dentro vanno al buio, e il filo del bordo diventa turchese. */
body.v2.scuro :is(.confronto, .pass, .og__fr, .og__schermo) {
  background:
    linear-gradient(#1C1C20, #1C1C20) padding-box,
    linear-gradient(140deg, rgba(109, 226, 206, .8), rgba(109, 226, 206, .18)) border-box;
}
/* La colonna "con il pass" deve staccarsi dal pannello, non
   confondersi: un velo di turchese sopra il fondo scuro. */
body.v2.scuro :is(.confronto__si, .confronto__con) {
  background: rgba(109, 226, 206, .09);
  color: var(--inchiostro);
}
/* La colonna "senza pass" resta la più spenta delle due, ma non
   fino a sparire: il grigio del foglio su questo fondo stava a 4,3
   di contrasto, sotto il minimo. */
body.v2.scuro :is(.confronto__no, .confronto__senza) { color: #A6A4AE; }