/* ═══════════════════════════════════════════════════════════════════════
   FUNNEL EVERGREEN · Gabriele Sartori — 4 serate in diretta
   Design system: "Langbase — Midnight aurora console" (design.md)

   Regola madre del sistema: canvas scuro, colore = aurora.
   · canvas  → Void Ink #09090b, con l'aurora flottante dietro (§04)
   · testo   → Bone White #fafafa (titoli, enfasi) / Off White #ebeced
               (corpo). Niente grigio nel testo: su questo fondo e con
               gli aloni che passano, il Mute Gray #a1a1aa non si legge.
               Il grigio resta solo nei bordi e negli stati disattivati.
   · bordi   → hairline 1px Wire Gray #5c5c61, divisori in aurora
   · azione  → pill piena con il gradiente aurora, testo Nav Ink
   · colore  → il gradiente aurora (pesca → rosa → viola → menta → cielo)
               su CTA, evidenziazioni, parole chiave, chip, icone,
               bordi attivi e divisori. Le 5 fermate si usano anche
               singole (--color-aurora-*) per icone e numeri.

   Struttura del file
   01 · Token
   02 · Reset e base
   03 · Layout, sezioni, divisori
   04 · Decorazioni (griglia blueprint + barre aurora)
   05 · Top bar
   06 · Hero + VSL
   07 · Bottoni e blocchi CTA
   08 · Titoli di sezione e prose
   09 · Alert box
   10 · Check list ("Cosa scoprirai")
   11 · Serate ("Cosa succederà, sera per sera")
   12 · Bonus (sorpresa + tutor)
   13 · FAQ
   14 · Footer
   15 · Modale + form
   16 · Sticky CTA (mobile)
   17 · Pagina grazie
   18 · Micro-animazioni e reduced motion
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 01 · TOKEN ══════════════════════════════════════════════════════ */

:root {
    /* Colori */
    --color-console-charcoal: #232324;
    --color-bone-white: #fafafa;
    --color-true-black: #000000;
    --color-off-white: #ebeced;
    --color-mute-gray: #a1a1aa;
    --color-wire-gray: #5c5c61;
    --color-recess-black: #181818;
    --color-nav-ink: #0e0e10;
    --color-void-ink: #09090b;
    --color-smoke: #454546;
    --color-ash: #696970;
    --gradient-aurora-spectrum: linear-gradient(to right, #f6d1ac, #f3b5d2, #c7b8f5, #a7eadc, #afcdf6);

    /* Variante per le headline: le stesse 5 fermate, ma a piena forza e
       in diagonale (100deg). Sulle lettere grandi il gradiente
       orizzontale piatto perdeva colore a metà parola; così ogni lettera
       attraversa due fermate e il colore gira. Barre, CTA e bordi
       restano sullo spettro originale: lì il gradiente è chrome, non
       materia.

       Le fermate sono più sature di quelle dello spettro perché qui
       sotto non c'è una superficie piena ma un glifo: la stessa tinta
       che sulla faccia della CTA legge come colore, dentro una lettera
       alta 60px e larga 6 legge come pastello slavato. Il gradiente
       della CTA e questo devono arrivare alla stessa resa, non avere le
       stesse coordinate. */
    --gradient-aurora-headline: linear-gradient(100deg,
            #ffc287 0%,
            #ff93c6 19%,
            #c48cff 41%,
            #5fe9c6 63%,
            #76b4ff 84%,
            #c4a4ff 100%);

    /* Le 5 fermate dell'aurora, usate anche da sole */
    --color-aurora-peach: #f6d1ac;
    --color-aurora-pink: #f3b5d2;
    --color-aurora-violet: #c7b8f5;
    --color-aurora-mint: #a7eadc;
    --color-aurora-sky: #afcdf6;

    /* Bordo in gradiente: due layer, superficie dentro e aurora sul bordo.
       Si usa con border: 1px solid transparent. */
    --border-aurora-recess: linear-gradient(var(--surface-recess-black), var(--surface-recess-black)) padding-box, var(--gradient-aurora-spectrum) border-box;
    --border-aurora-charcoal: linear-gradient(var(--surface-console-charcoal), var(--surface-console-charcoal)) padding-box, var(--gradient-aurora-spectrum) border-box;
    --border-aurora-ink: linear-gradient(var(--surface-nav-ink), var(--surface-nav-ink)) padding-box, var(--gradient-aurora-spectrum) border-box;

    /* Tipografia — famiglie */
    --font-geistsans: 'Geist', 'GeistSans', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-geistmono: 'Geist Mono', 'GeistMono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Tipografia — scala */
    --text-caption: 12px;
    --text-body-sm: 14px;
    --text-body: 16px;
    --text-subheading: 18px;
    --text-heading: 20px;

    /* Corpo di lettura — la misura unica di TUTTO il testo che si legge:
       paragrafi delle card, risposte FAQ, serate, box extra, prose, passi
       della pagina grazie. Nasce dalla lista "cosa imparerai", tarata sul
       telefono (20px) e in crescita fino a 23px sul desktop. Niente
       scalini: se e' testo da leggere, e' questa misura. */
    --text-read: clamp(20px, 1.2vw + 16px, 23px);
    --text-heading-lg: 48px;
    --text-display: 60px;
    --text-display-xl: 72px;

    /* Tipografia — scala display del funnel.
       Il design system misura il sito sorgente, dove l'hero era corto e
       48px bastavano. Qui l'headline è la leva di conversione e va letta
       da lontano: le sezioni "big" salgono fino a 72px, la misura che
       design.md riserva al display. Resta GeistSans con tracking
       -0.025em, perché GeistMono a -0.3em collassa le lettere e funziona
       su una cifra, non su una frase. */
    --text-hero-lead: clamp(18px, 3.4vw, 26px);
    --text-hero-mid: clamp(21px, 3.9vw, 34px);
    --text-hero-big: clamp(33px, 7.2vw, 72px);
    --text-section: clamp(26px, 4vw, 42px);
    --text-section-em: clamp(33px, 5.6vw, 60px);

    /* Tipografia — pesi */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spaziature — griglia 4px, nessuna eccezione */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-64: 64px;
    --spacing-80: 80px;
    --spacing-112: 112px;
    --spacing-160: 160px;

    /* Layout */
    --page-max-width: 1200px;
    --reading-max-width: 760px;
    --section-gap: 80px;
    --card-padding: 24px;
    --element-gap: 12px;

    /* Raggi — la scala è chiusa: 4, 12, 100, 9999 */
    --radius-md: 4px;
    --radius-xl: 12px;
    --radius-full: 100px;
    --radius-pill: 9999px;

    /* Ombre — una sola, solo sulla pill primaria */
    --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;

    /* Lo spessore della pill 3D: quattro gradini di aurora spenta, dal
       filo della faccia fino alla base appoggiata sul canvas. Il fianco
       è tutto sul viola — la fermata centrale dello spettro — perché un
       solo colore tiene insieme una faccia che va dal pesca al cielo:
       con il fianco a gradiente l'oggetto si sfalda. */
    --btn-edge-1: #b49ab6;
    --btn-edge-2: #8f74a2;
    --btn-edge-3: #6d5789;
    --btn-edge-4: #4a3a63;

    /* Lo stesso fianco, portato sulle headline (§02). I titoli sono
       oggetti solidi come la pill: faccia bombata e quattro gradini di
       estrusione sotto la lettera, nello stesso ramp viola — così la
       CTA non è l'unica cosa in rilievo della pagina.

       Il passo è in em, non in px: la scala dei titoli va da 26px
       (section su telefono) a 72px (display), e uno spessore fisso
       sarebbe un filo invisibile in alto e un blocco in basso. In em
       lo spessore resta la stessa frazione della lettera a ogni misura,
       e segue anche il font-size che data-fit scrive inline.

       Il max(0.55px, …) è il pavimento: sotto il mezzo pixel i gradini
       si antialiasano uno sull'altro e il fianco smette di leggere come
       spessore — diventa una frangia lilla sfocata. Ai titoli di
       sezione (42px) e sotto vince il pavimento, al display vince l'em.
       Il pavimento è sceso da 0.9px a 0.55px insieme all'aumento dei
       gradini (da 4 a 7): sui titoli piccoli il prodotto resta quello
       di prima — 7 × 0.55 ≈ 4 × 0.9 — mentre al display, dove comanda
       l'em, lo spessore passa da 5px a 8px. Cresce dove serviva, non
       dove andava già bene.

       Si compone con filter perché il testo è in gradiente clippato —
       fill trasparente — e un text-shadow si vedrebbe *dentro* il
       glifo. I drop-shadow si impilano: ogni passo sposta di --title-step
       la sagoma già estrusa, quindi edge-1 esce sotto la faccia e
       edge-7 appoggia a terra, nell'ordine della pill. */
    --title-step: max(0.55px, 0.016em);
    /* Il passo della banda del ramp bianco→grigio sui titoli bianchi:
       default 1.2em, la line-height dei titoli di sezione. Le classi
       con un'altra line-height lo riscrivono (vedi §02). Il testo in
       aurora non lo usa: lì il gradiente è diagonale e steso su tutto
       il box. Nota: riscrivere --title-step da solo su un elemento non
       sposta niente — var() dentro un custom property si risolve dove la
       property e' dichiarata, qui su :root, e --title-extrude arriva ai
       figli gia' sostituito. Per dare a una classe uno spessore suo va
       ridichiarato anche --title-extrude: lo fanno le righe in aurora
       (vedi §02), e sono le sole. */
    --title-band: 1.2em;
    /* Il fianco dei titoli: la rampa della pill, allungata da 4 a 7
       gradini. Sul bottone bastavano quattro perché il fianco è alto
       9px su una faccia di 79; sotto una lettera da 72px lo stesso
       salto in quattro passi usciva troppo corto e troppo chiaro, e su
       una faccia BIANCA — "LA MACCHINA PER GUADAGNARE DA CASA…" — non
       si leggeva più come spessore ma come un'ombra sfocata sotto le
       lettere. Sette gradini che scendono fino a quasi-nero danno un
       fianco continuo. Quanto sia alto quel fianco, pero', non lo
       decide la rampa ma --title-step, e li' c'e' lo scalino del
       pixel intero: vedi la nota sulle righe in aurora in §02. */
    --title-edge-1: #c3b2d2;
    --title-edge-2: #a890bd;
    --title-edge-3: #8d75a6;
    --title-edge-4: #73608c;
    --title-edge-5: #5a4a70;
    --title-edge-6: #423653;
    --title-edge-7: #2c2439;
    --title-extrude:
        drop-shadow(0 var(--title-step) 0 var(--title-edge-1)) drop-shadow(0 var(--title-step) 0 var(--title-edge-2)) drop-shadow(0 var(--title-step) 0 var(--title-edge-3)) drop-shadow(0 var(--title-step) 0 var(--title-edge-4)) drop-shadow(0 var(--title-step) 0 var(--title-edge-5)) drop-shadow(0 var(--title-step) 0 var(--title-edge-6)) drop-shadow(0 var(--title-step) 0 var(--title-edge-7));

    /* Qui stava --title-sheen, il velo di luce sulla metà alta del
       glifo in aurora — il gemello della lama di .btn--cta::after, ma
       come layer di background dentro al clip del testo. È stato tolto:
       sulla faccia piena della CTA il bianco in cima è un riflesso,
       dentro una lettera è colore tolto, e le frasi in evidenza
       uscivano slavate nella metà alta. Sui titoli bianchi la curva
       verticale resta (vedi §02): lì la faccia è già bianca e il ramp
       serve a darle spessore, non a toglierle tinta. */

    /* Superfici */
    --surface-true-black: #000000;
    --surface-nav-ink: #0e0e10;
    --surface-recess-black: #181818;
    --surface-console-charcoal: #232324;
    /* Canvas di pagina: il fondo più scuro di tutto il sistema, sotto
       anche a Nav Ink. Serviva un nero vero: a #1a1a1c gli aloni aurora
       lo tiravano su di parecchi punti e la pagina leggeva grigio-viola,
       non notturna. Qui gli aloni si accendono su niente, e le superfici
       — Nav Ink #0e0e10, Recess #181818, Charcoal #232324 — salgono
       tutte sopra il canvas invece di affondarci: le card si staccano
       da sole, senza bisogno di bordi più accesi. */
    --surface-page-void: #09090b;
}


/* ═══ 02 · RESET E BASE ═══════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Il fondo sta su html e non su body: così il layer degli aloni
       (.page-aurora, z-index -1) resta davanti al fondo e dietro a
       tutto il contenuto, senza toccare lo z-index delle sezioni. */
    background: var(--surface-page-void);
}

body {
    margin: 0;
    background: transparent;
    color: var(--color-bone-white);
    font-family: var(--font-geistsans);
    /* Il corpo di lettura della pagina: --text-read. Ogni <p> senza
       regola propria nasce gia' alla misura giusta. */
    font-size: var(--text-read);
    font-weight: var(--font-weight-regular);
    line-height: 1.55;
    letter-spacing: -0.025em;
    font-feature-settings: "ss01" on, "cv11" on;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-locked {
    overflow: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

strong,
b {
    font-weight: var(--font-weight-semibold);
    color: var(--color-bone-white);
}

button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

svg {
    display: block;
}

/* Sprite icone: fuori dal flusso, mai visibile */
.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--color-aurora-violet);
    outline-offset: 2px;
}

::selection {
    background: var(--color-aurora-violet);
    color: var(--color-nav-ink);
}

/* ─── Headline ────────────────────────────────────────────────────────
   Titoli solid, costruiti come la pill primaria (§07): una faccia
   bombata da un velo di luce sulla metà alta, quattro gradini di
   estrusione sotto la lettera nel ramp viola di --btn-edge-*, poi il
   contatto a terra e l'alone largo. Il titolo e la CTA sono lo stesso
   materiale a due scale, e la pagina non ha più un unico oggetto in
   rilievo in mezzo a tipografia piatta.

   Non è il letterpress a 2px: lo spessore è un ramp di quattro colori
   in em (vedi --title-step), quindi resta proporzionato dai 26px della
   section su telefono ai 72px del display, e segue il font-size che
   data-fit scrive inline.

   È un filter: drop-shadow() e non un text-shadow perché il testo è in
   gradiente clippato, quindi il fill è trasparente: un text-shadow si
   vedrebbe *dentro* la lettera. drop-shadow segue la sagoma reale. ── */

/* Titoli bianchi: la faccia va dal bianco pieno in alto a un grigio
   freddo sul filo basso. È la curva della pill — luce in cima, ombra
   propria al piede — non un semplice raffreddamento: senza, i gradini
   sotto leggono come un'ombra staccata invece che come lo spessore
   della lettera. */
.hero__title-lead,
.hero__title-mid,
.hero__title-big,
.section-title,
.signup__title,
.ty-alert__title,
.ty-step__title,
.title-line {
    background-image: linear-gradient(to bottom,
            #ffffff 0%,
            #fdfdff 30%,
            #eef0f6 72%,
            #d8dce8 100%);
    /* La curva vale per riga, non per titolo: su due righe un ramp
       steso sull'intero blocco lascerebbe la prima riga bianca e la
       seconda grigia. La banda è alta una riga (--title-band = la
       line-height della classe) e si ripete in verticale, così ogni
       riga ha la sua luce in cima e la sua ombra al piede. */
    background-size: 100% var(--title-band);
    background-repeat: repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Lo spessore sta sul titolo intero, anche su quelli che contengono una
   parola in aurora: il filter del genitore si applica già al figlio, e
   due estrusioni sovrapposte sfalsano i gradini e sfocano il bordo. È
   il genitore a dare il volume a tutta la riga, i figli danno solo il
   colore della faccia.

   Dopo i gradini: il contatto a terra — corto e stretto, è lui che fa
   appoggiare la lettera — e l'alone largo di sempre, che stacca il
   titolo dagli orb aurora che passano dietro. */
.hero__title-lead,
.hero__title-mid,
.hero__title-big,
.section-title,
.signup__title,
.ty-alert__title,
.ty-step__title,
.aurora-text,
.hero__sub-big,
.ty-cal__num {
    filter: var(--title-extrude) drop-shadow(0 0.07em 0.08em rgba(0, 0, 0, 0.45)) drop-shadow(0 0.16em 0.45em rgba(0, 0, 0, 0.42));
}

/* Il violetto dentro il raccordo ha un fill suo: senza, prenderebbe il
   gradiente del genitore (il clip del testo vale anche sui figli). */
.hero__title-mid strong {
    -webkit-text-fill-color: var(--color-aurora-violet);
}

/* Testo in gradiente aurora (parole chiave, cifre, numeri): un solo
   layer, l'aurora, dentro il clip del glifo. Deve stare DOPO i titoli
   bianchi: .hero__title-big--em è anche .hero__title-big, e a parità di
   specificità vince l'ultima.

   Niente velo di luce qui sopra. Sui titoli bianchi la curva verticale
   fa volume, ma su una lettera colorata il bianco in cima non è un
   riflesso: è colore tolto. La parte alta dei glifi usciva pastello e
   la frase leggeva sbiadita a metà. Il velo resta dov'è un riflesso
   vero — sulla faccia piena della CTA (.btn--cta::after) e sui titoli
   bianchi — e sparisce dove mangerebbe la materia. L'aurora arriva
   fino al bordo superiore della lettera, piena. */
.aurora-text,
.title-em,
.hero__title-big--em,
.hero__sub-big,
.ty-alert__kw,
.ty-cal__num {
    background-image: var(--gradient-aurora-headline);
    /* L'aurora resta stesa su tutto il box, non a bande: e' diagonale,
       e il taglio per riga le spezzerebbe la rotazione del colore. */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Su piu' righe ogni frammento inline prende il gradiente intero
       invece di una fetta di una striscia lunga quanto tutte le righe:
       ogni frase in evidenza fa il suo giro completo di colore. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Alla scala del display lo spessore cresce di un filo e l'alone si
   allarga con le lettere: a 72px quattro gradini proporzionali sono
   giusti, ma il distacco dal fondo va rinforzato. Qui l'alone prende
   anche una nota aurora, come l'alone colorato sotto la pill. */
.hero__title-big,
.hero__sub-big {
    filter: var(--title-extrude) drop-shadow(0 0.07em 0.08em rgba(0, 0, 0, 0.5)) drop-shadow(0 0.18em 0.5em rgba(0, 0, 0, 0.45)) drop-shadow(0 0.24em 0.66em rgba(199, 184, 245, 0.18));
}

/* Le righe in aurora hanno un passo loro, e non per gusto: il browser
   aggancia l'offset di ogni drop-shadow al pixel intero, verso il
   basso. Con --title-step a 0.016em il fianco non scala in modo
   continuo, scatta: a 126px (il corpo di "100% GRATIS!", la riga piu'
   grande della pagina) il passo vale 2.02px e il browser ne tiene 2 —
   sette gradini, quattordici pixel di spessore; a 92px ("REGALERÒ LA
   SUA") vale 1.47px e ne resta 1 — sette pixel, la meta', e su una
   faccia pastello sette pixel non sono uno spessore ma un contorno.
   Era questo, e non il colore, a far sembrare 3D solo l'ultima riga:
   due righe identiche nel CSS cadevano ai due lati dello stesso
   scalino. Lo stesso scalino spegneva "CREARTI UNA SECONDA ENTRATA"
   (47px) e "DA 50-100-150€ AL GIORNO" (56px).

   0.0235em porta tutte queste righe sopra lo scalino successivo invece
   che a cavallo: 2px di passo da 85px in su, 1px sotto — e il piano in
   px tiene vivo il fianco sul telefono, dove il corpo scende a 29px e
   il calcolo in em finirebbe sotto il mezzo pixel. "100% GRATIS!"
   resta dov'era (2px di passo, quattordici di spessore): e' il
   riferimento, sono le altre che lo raggiungono. */
.hero__title-big--em,
.hero__sub-big {
    --title-step: max(1px, 0.0235em);
    --title-extrude:
        drop-shadow(0 var(--title-step) 0 var(--title-edge-1)) drop-shadow(0 var(--title-step) 0 var(--title-edge-2)) drop-shadow(0 var(--title-step) 0 var(--title-edge-3)) drop-shadow(0 var(--title-step) 0 var(--title-edge-4)) drop-shadow(0 var(--title-step) 0 var(--title-edge-5)) drop-shadow(0 var(--title-step) 0 var(--title-edge-6)) drop-shadow(0 var(--title-step) 0 var(--title-edge-7));
}

/* L'altezza di riga di ogni titolo bianco, in em: e' il passo della
   banda del ramp bianco→grigio (vedi sopra). Va tenuta uguale alla
   line-height della classe, o la curva sfasa rispetto alle righe.
   Serve solo ai titoli bianchi: il testo in aurora non va a bande. */
.hero__title-lead,
.hero__title-mid {
    --title-band: 1.25em;
}

.hero__title-big {
    --title-band: 1.04em;
}

/* Evidenziazione inline: pill con il gradiente aurora e testo scuro,
   come le barre di riferimento. */
.hl {
    background: var(--gradient-aurora-spectrum);
    border-radius: var(--radius-md);
    padding: 0 var(--spacing-8);
    font-weight: var(--font-weight-semibold);
    color: var(--color-nav-ink);
    /* dentro un titolo clippato il fill trasparente si eredita: qui va
       riportato pieno, o la pill resterebbe vuota */
    -webkit-text-fill-color: var(--color-nav-ink);
    /* su più righe ogni frammento tiene raggio e padding */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Alla scala del titolo la pill prende il raggio grande */
.hero__title .hl {
    border-radius: var(--radius-xl);
    padding: 0 0.18em;
}

/* Etichetta mono (riferimenti tecnici, cue, metadati) */
.mono {
    font-family: var(--font-geistmono);
    font-size: 13px;
    letter-spacing: 0;
    color: var(--color-aurora-sky);
}

/* Segnaposto di copy da compilare (es. [MESTIERI DEGLI OSPITI]) */
.ph {
    border: 1px dashed var(--color-wire-gray);
    border-radius: var(--radius-md);
    padding: 0 var(--spacing-4);
    font-family: var(--font-geistmono);
    font-size: 0.86em;
    letter-spacing: 0;
    color: var(--color-off-white);
}


/* ═══ 03 · LAYOUT, SEZIONI, DIVISORI ═════════════════════════════════ */

.wrap {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-24);
}

.wrap--reading {
    max-width: 880px;
}

.section {
    position: relative;
    padding: var(--section-gap) 0;
}

/* Il ritmo fra le sezioni lo fa una hairline in gradiente aurora */
.section+.section {
    border-top: 0;
}

.section+.section::before,
.ty-main::before,
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-aurora-spectrum);
    opacity: 0.55;
    pointer-events: none;
}

/* Superficie incassata, per i blocchi che devono "premere" nel canvas */
.section--recess {
    background: var(--surface-recess-black);
}

/* Blocco incassato generico */
.recess {
    background: var(--surface-recess-black);
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-xl);
    padding: var(--card-padding);
}


/* ═══ 04 · DECORAZIONI ═══════════════════════════════════════════════ */

/* Griglia blueprint: hairline #232324 su canvas. Per restare visibile
   sul canvas dello stesso colore la si schiarisce con un bianco a bassa
   opacità (resta acromatica, nessun colore introdotto). */
.grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(250, 250, 250, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(250, 250, 250, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: center top;
    /* dissolvenza ai bordi: la griglia è texture, non cornice */
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%);
    mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%);
}

/* La macchina per guadagnare: ingranaggi, nastro e banconote animati
   (canvas, js/hero-bg.js). Sta sopra la griglia e sotto il contenuto; la
   maschera la fa svanire in basso e ai lati, così resta texture viva e
   non cornice. */
.hero-machine {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: block;
    opacity: 0.9;
    -webkit-mask-image: radial-gradient(130% 110% at 50% 10%, #000 35%, transparent 100%);
    mask-image: radial-gradient(130% 110% at 50% 10%, #000 35%, transparent 100%);
}

/* Sul telefono il testo della hero sta al centro e la macchina gli
   finisce sotto: resta, ma di un paio di toni più indietro. */
@media (max-width: 767px) {
    .hero-machine {
        opacity: 0.6;
    }
}

/* Velo scuro sotto la colonna del testo: la macchina resta viva a destra
   e in alto, dietro al titolo si attenua ancora per la leggibilità. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(9, 9, 11, 0.52) 0%, rgba(9, 9, 11, 0.3) 45%, rgba(9, 9, 11, 0) 80%);
}

/* Aurora flottante: gli aloni di colore non sono più fermi dietro la
   hero, girano lenti dietro tutta la pagina. Un alone per fermata
   dell'aurora, su un layer fisso a z-index -1 (il fondo scuro sta su
   html, vedi sopra). Niente blur: sono radial-gradient già morbidi e
   l'unica proprietà animata è transform — compositing, non repaint. */
.page-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.page-aurora__orb {
    position: absolute;
    width: var(--orb-size);
    height: var(--orb-size);
    margin-left: calc(var(--orb-size) / -2);
    margin-top: calc(var(--orb-size) / -2);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
            rgba(var(--orb-rgb), var(--orb-core)) 0%,
            rgba(var(--orb-rgb), calc(var(--orb-core) * 0.38)) 42%,
            rgba(var(--orb-rgb), 0) 72%);
    will-change: transform;
    animation: orb-drift-a 42s ease-in-out infinite alternate;
}

.page-aurora__orb--peach {
    --orb-rgb: 246, 209, 172;
    --orb-core: 0.20;
    --orb-size: 58vmax;
    left: 14%;
    top: 10%;
    animation-name: orb-drift-a;
    animation-duration: 38s;
}

.page-aurora__orb--pink {
    --orb-rgb: 243, 181, 210;
    --orb-core: 0.17;
    --orb-size: 48vmax;
    left: 78%;
    top: 4%;
    animation-name: orb-drift-b;
    animation-duration: 46s;
}

.page-aurora__orb--violet {
    --orb-rgb: 199, 184, 245;
    --orb-core: 0.19;
    --orb-size: 64vmax;
    left: 52%;
    top: 46%;
    animation-name: orb-drift-c;
    animation-duration: 54s;
}

.page-aurora__orb--mint {
    --orb-rgb: 167, 234, 220;
    --orb-core: 0.15;
    --orb-size: 46vmax;
    left: 8%;
    top: 78%;
    animation-name: orb-drift-d;
    animation-duration: 50s;
}

.page-aurora__orb--sky {
    --orb-rgb: 175, 205, 246;
    --orb-core: 0.16;
    --orb-size: 54vmax;
    left: 88%;
    top: 68%;
    animation-name: orb-drift-b;
    animation-duration: 58s;
    animation-direction: alternate-reverse;
}

@keyframes orb-drift-a {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(13vmax, 9vmax, 0) scale(1.14); }
    100% { transform: translate3d(-7vmax, 17vmax, 0) scale(0.94); }
}

@keyframes orb-drift-b {
    0% { transform: translate3d(0, 0, 0) scale(1.06); }
    50% { transform: translate3d(-15vmax, 12vmax, 0) scale(0.92); }
    100% { transform: translate3d(-4vmax, 24vmax, 0) scale(1.1); }
}

@keyframes orb-drift-c {
    0% { transform: translate3d(0, 0, 0) scale(0.96); }
    50% { transform: translate3d(11vmax, -13vmax, 0) scale(1.12); }
    100% { transform: translate3d(-12vmax, -6vmax, 0) scale(1); }
}

@keyframes orb-drift-d {
    0% { transform: translate3d(0, 0, 0) scale(1.02); }
    50% { transform: translate3d(17vmax, -11vmax, 0) scale(0.9); }
    100% { transform: translate3d(6vmax, -20vmax, 0) scale(1.08); }
}

/* Su schermi stretti due aloni in meno e raggi più larghi: lo stesso
   colore con un terzo dei pixel da comporre. */
@media (max-width: 767px) {

    .page-aurora__orb--pink,
    .page-aurora__orb--sky {
        display: none;
    }

    .page-aurora__orb {
        --orb-size: 92vmax;
    }
}

/* Le barre aurora frammentate sopra i titoli di sezione sono state
   tolte: sul titolo l'aurora resta, ma solo dentro le lettere di
   .title-em. Un accento per titolo, non due. */


/* ═══ 05 · TOP BAR ═══════════════════════════════════════════════════ */

/* Striscia annuncio: banda piena larghezza, 12px, mute gray, 8px di
   padding verticale. Un ticker silenzioso, non un banner. */
.top-bar {
    position: relative;
    background: var(--surface-nav-ink);
    padding: var(--spacing-8) var(--spacing-16);
}

.top-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gradient-aurora-spectrum);
    opacity: 0.7;
}

.top-bar__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    max-width: var(--page-max-width);
    margin: 0 auto;
    font-family: var(--font-geistmono);
    font-size: var(--text-body-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-off-white);
    text-align: center;
}

.top-bar__main {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    color: var(--color-bone-white);
}

.top-bar__sep {
    color: var(--color-off-white);
}

/* Pallino "in diretta": rosa aurora, l'urgenza la dà il battito */
.live-dot {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-aurora-pink);
    box-shadow: 0 0 0 3px rgba(243, 181, 210, 0.25);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Pill "diretta" inline nel testo */
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    vertical-align: baseline;
    background: var(--border-aurora-recess);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 2px var(--spacing-8);
    font-family: var(--font-geistmono);
    font-size: 0.68em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-bone-white);
}

.live-pill .live-dot {
    flex-basis: 5px;
    width: 5px;
    height: 5px;
    box-shadow: none;
}


/* ═══ 06 · HERO + VSL ════════════════════════════════════════════════ */

.hero {
    position: relative;
    /* L'occhiello deve stare attaccato alla striscia annuncio: insieme
       sono un unico blocco d'apertura, non due elementi separati. */
    padding: var(--spacing-32) 0 var(--section-gap);
    overflow: hidden;
}

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

/* Colonna unica: il titolo tiene tutta la larghezza.
   La VSL e la CTA scendono sotto. */
.hero__split {
    display: grid;
    gap: var(--spacing-40);
    align-items: start;
}

/* min-width: 0 non è un dettaglio.
   Un elemento di griglia nasce con min-width: auto, cioè si rifiuta di
   stringersi sotto il proprio contenuto. Con le righe [data-fit] in
   white-space: nowrap questo diventa un anello chiuso: il testo allarga
   la colonna, la colonna fa credere al calcolo di avere più spazio, il
   testo cresce ancora. Qui si taglia l'anello. */
.hero__copy {
    min-width: 0;
}

/* Occhiello: nel copy è una riga forte ("Per chi vuole guadagnare
   fino a 3.000€ in più al mese"), non una didascalia. */
.hero__kicker {
    font-size: var(--text-read);
    font-weight: var(--font-weight-semibold);
    line-height: 1.45;
    color: var(--color-aurora-peach);
    margin: 0 0 var(--spacing-24);
    max-width: var(--reading-max-width);
}

/* ─── Titolo hero ─────────────────────────────────────────────────────
   Regola presa dal funnel di riferimento: la domanda è composta a scale
   diverse e tutta in maiuscolo. Le frasi chiave (.hero__title-big)
   vanno a tutta larghezza, i raccordi (.hero__title-mid) stanno a metà
   scala, l'attacco (.hero__title-lead) è il più piccolo. La gerarchia
   la fanno dimensione, peso e rilievo — mai lo sbiadire il colore:
   tutte le righe sono bianche e tutte si leggono.
   ──────────────────────────────────────────────────────────────────── */
.hero__title {
    font-family: var(--font-geistsans);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: -0.015em;
    color: var(--color-bone-white);
    /* 24 e non 32: sotto l'ultima riga del titolo c'è già la discendente
       del font — a 126px sono una trentina di px di aria che nessuno ha
       chiesto — più i gradini dell'estrusione. Il margine va misurato
       da quello che si vede, non dal box. */
    margin: 0 0 var(--spacing-24);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.hero__title-lead,
.hero__title-mid,
.hero__title-big {
    display: block;
}

/* Attacco: il più piccolo. Prepara il colpo. */
.hero__title-lead {
    font-size: var(--text-hero-lead);
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    color: var(--color-bone-white);
}

/* Raccordi: metà scala. Portano da una frase chiave all'altra. */
.hero__title-mid {
    font-size: var(--text-hero-mid);
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    color: var(--color-bone-white);
}

.hero__title-mid strong {
    color: var(--color-aurora-violet);
    font-weight: var(--font-weight-semibold);
}

/* L'attacco: "DAVANTI AI TUOI OCCHI COSTRUIRÒ DA ZERO E IN DIRETTA,
   CON L'INTELLIGENZA ARTIFICIALE,". È una frase sola e sta in DUE
   righe a ogni larghezza — a cedere è il corpo, non il numero di
   righe.

   Per questo i limiti del fit, che per gli altri raccordi sono
   dichiarati solo nel breakpoint mobile, qui valgono sempre: senza,
   sopra i 767px js/main.js troverebbe --fit-max vuoto, uscirebbe, e la
   frase tornerebbe a spezzarsi dove capita — tre righe su una colonna
   stretta.

   34px è il tetto di --text-hero-mid: più su non sarebbe più un
   raccordo, comincerebbe a contendere la scala alle frasi chiave. */
.hero__title-mid--open {
    --fit-max: 34px;
    --fit-min: 13px;
}

/* Frasi chiave: a tutta larghezza, nel senso letterale.
   Non sono il carattere che si adatta alla riga, ma la riga che detta
   il carattere: [data-fit] + js/main.js misurano il testo e scelgono il
   corpo perché occupi esattamente la colonna. --fit-max è il tetto
   (oltre, su desktop, diventerebbe un manifesto), --fit-min il piano.
   Il valore in font-size qui sotto è solo il fallback senza JS. */
.hero__title-big {
    --fit-max: 72px;
    --fit-min: 28px;
    font-size: var(--text-hero-big);
    font-weight: var(--font-weight-semibold);
    line-height: 1.04;
    /* In maiuscolo il tracking si allenta: -0.035em è una misura da
       minuscole, sulle capitali chiuderebbe le lettere. */
    letter-spacing: -0.02em;
    color: var(--color-bone-white);
}

/* Perché la misura sia esatta la riga non deve andare a capo da sola:
   le interruzioni sono quelle scritte nell'HTML. */
[data-fit] {
    white-space: nowrap;
}

/* Chiusa: stessa misura, peso pieno. */
.hero__title-big--em {
    font-weight: var(--font-weight-bold);
}

/* ─── Sottotitolo hero ────────────────────────────────────────────────
   Stesso principio: le righe di testo restano a corpo, la cifra esce
   alla scala delle frasi chiave (nel riferimento era "FINO A 5.000€").
   ──────────────────────────────────────────────────────────────────── */
/* Il passo fra le righe è 4, non 8: le due righe in aurora — la
   promessa e la cifra — sono una frase sola spezzata in due, e a 8px
   con l'interlinea di una display leggevano come due blocchi distinti.
   Il poco spazio che resta fra loro lo riempie già l'estrusione. */
.hero__sub {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin: 0 0 var(--spacing-24);
    max-width: var(--reading-max-width);
}

/* In coda alla colonna il margine inferiore non separa da niente: si
   sommerebbe soltanto allo stacco della VSL. */
.hero__copy> :last-child {
    margin-bottom: 0;
}

/* Il tetto e' il corpo di lettura (23px, il massimo di --text-read):
   la riga di raccordo che va a [data-fit] si stende nella colonna ma
   non cresce oltre il corpo normale, o scavalcherebbe le due righe in
   aurora che deve introdurre. Da tablet in su vince il tetto e la riga
   resta identica a prima: e' solo sul telefono che il carattere scala
   per non spezzarsi in due. */
.hero__sub-line {
    --fit-max: 23px;
    --fit-min: 12px;
    display: block;
    font-size: var(--text-read);
    /* 1.3 invece di 1.45: qui le righe sono una o due, non un
       paragrafo, e la mezza interlinea sopra e sotto si somma ai gap
       del blocco. Il corpo di lettura lungo (.hero__desc) resta a
       1.55: lì l'aria serve davvero. */
    line-height: 1.3;
    color: var(--color-off-white);
}

.hero__sub-line strong {
    font-weight: var(--font-weight-semibold);
}

/* La cifra: fuori scala rispetto alla riga che la introduce, e anche
   lei a tutta larghezza (vedi [data-fit]). Maiuscola come il titolo:
   nel riferimento era "FINO A 5.000€ IN PIÙ AL MESE". */
.hero__sub-big {
    --fit-max: 52px;
    --fit-min: 24px;
    display: block;
    font-size: clamp(28px, 5.4vw, 52px);
    font-weight: var(--font-weight-bold);
    /* In maiuscolo non ci sono discendenti: 1.08 lasciava sotto ogni
       riga una fascia vuota alta quanto l'estrusione, e le due righe
       si staccavano. 1.02 le tiene insieme senza che i gradini della
       prima tocchino le maiuscole della seconda. */
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--color-bone-white);
}

.hero__sub--quiet {
    margin-bottom: var(--spacing-24);
}

.hero__sub--quiet .hero__sub-line {
    color: var(--color-off-white);
}

.hero__sub--quiet .hero__sub-line strong {
    color: var(--color-bone-white);
}

.hero__desc {
    font-size: var(--text-read);
    line-height: 1.55;
    color: var(--color-off-white);
    margin: 0;
    max-width: var(--reading-max-width);
}

.hero__desc strong {
    color: var(--color-bone-white);
}

/* ─── VSL ─────────────────────────────────────────────────────────────
   .vsl__frame non ha altezza propria:
   · il riquadro neutro tiene il 16:9 con aspect-ratio;
   · lo snippet Vidalytics porta il suo 16:9 (padding-top 56.25%).
   Due modi per inserire il video (README §VSL):
   A) compilare FUNNEL_CONFIG.vsl.optin → js/vsl.js;
   B) sostituire l'intero .vsl__placeholder con lo snippet.
   ──────────────────────────────────────────────────────────────────── */
/* Lo stacco fra il copy e il video sta tutto qui: l'ultimo blocco di
   .hero__copy rinuncia al suo margine di coda (vedi sotto), cosi' la
   distanza ha una sorgente sola invece di essere la somma di due.
   Il titolo porta alla VSL: il video va letto come la continuazione
   della frase, non come la sezione dopo. */
.vsl {
    margin: var(--spacing-32) auto 0;
    max-width: 960px;
}

.vsl__frame {
    position: relative;
    background: var(--border-aurora-recess);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 0 60px rgba(199, 184, 245, 0.18);
}

.vsl__placeholder {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vsl__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tasto play: pill piena aurora, icona scura */
.vsl__play {
    position: absolute;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-nav-ink);
    background: var(--gradient-aurora-spectrum);
    box-shadow: 0 0 32px rgba(243, 181, 210, 0.4);
}

.vsl__play svg {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}

.vsl__label {
    position: absolute;
    bottom: var(--spacing-16);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-geistmono);
    font-size: var(--text-caption);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-off-white);
}

.vsl__live {
    position: absolute;
    top: var(--spacing-12);
    left: var(--spacing-12);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    background: var(--border-aurora-ink);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--spacing-4) var(--spacing-8);
    font-family: var(--font-geistmono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-bone-white);
}


/* ═══ 07 · BOTTONI E BLOCCHI CTA ═════════════════════════════════════ */

/* Primary Pill CTA — pill piena con il gradiente aurora,
   testo Nav Ink, 9999px, alone colorato. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    border: 0;
    border-radius: var(--radius-pill);
    padding: var(--spacing-12) var(--spacing-24);
    font-family: var(--font-geistsans);
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.025em;
    cursor: pointer;
    text-align: center;
}

/* La pill primaria non è una superficie colorata: è un oggetto solido
   appoggiato sul canvas. La faccia porta il gradiente aurora, i quattro
   gradini di box-shadow sono il fianco estruso (--btn-edge-*), poi
   l'ombra portata a terra e l'alone aurora. Si preme davvero: :active
   affonda il bottone di tutto il suo spessore.

   Due manopole, ereditate dai figli:
   · --btn-depth-base → quanto è spesso (il .btn--block lo alza, la
     barra fissa lo abbassa: lì 8px di fianco mangerebbero la barra)
   · --bounce-lift    → quanto salta nel rimbalzo a riposo (§18) */
.btn--cta {
    --btn-depth-base: 6px;
    --btn-depth: var(--btn-depth-base);
    --bounce-lift: 10px;
    position: relative;
    isolation: isolate;
    background: var(--gradient-aurora-spectrum);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: var(--color-nav-ink);
    /* Il perno è la base dell'estrusione, non il centro: così quando il
       bottone si schiaccia resta appoggiato a terra invece di affondare
       nel canvas. È la differenza fra un oggetto e un rettangolo. */
    transform-origin: 50% calc(100% + var(--btn-depth));
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.55),
        inset 0 -3px 8px rgba(90, 72, 115, 0.28),
        0 calc(var(--btn-depth) * 0.25) 0 var(--btn-edge-1),
        0 calc(var(--btn-depth) * 0.5) 0 var(--btn-edge-2),
        0 calc(var(--btn-depth) * 0.75) 0 var(--btn-edge-3),
        0 var(--btn-depth) 0 var(--btn-edge-4),
        0 calc(var(--btn-depth) + 4px) 12px rgba(0, 0, 0, 0.45),
        0 calc(var(--btn-depth) + 10px) 36px rgba(199, 184, 245, 0.28);
    transition: background-position 0.6s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

/* La lama di luce sulla metà alta: è lei che fa leggere la faccia come
   bombata. Copre tutto il bottone e si spegne a metà altezza nel
   gradiente — non è alta mezza pill: un riquadro basso prenderebbe un
   raggio suo e spunterebbe fuori dalle due teste arrotondate.
   Assoluta, quindi non diventa un flex item del bottone. */
.btn--cta::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.1) 32%,
            rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

/* Testo e freccia stanno sopra la lama di luce */
.btn--cta>* {
    position: relative;
    z-index: 1;
}

/* Al hover il gradiente scorre, l'alone si accende e il bottone cresce:
   sale di 3px e il fianco si allunga di 3px, così la base non stacca da
   terra. Non è un oggetto che levita, è un oggetto che si gonfia. */
.btn--cta:hover,
.btn--cta:focus-visible {
    --btn-depth: calc(var(--btn-depth-base) + 3px);
    background-position: 100% 50%;
    transform: translate3d(0, -3px, 0);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.65),
        inset 0 -3px 8px rgba(90, 72, 115, 0.28),
        0 calc(var(--btn-depth) * 0.25) 0 var(--btn-edge-1),
        0 calc(var(--btn-depth) * 0.5) 0 var(--btn-edge-2),
        0 calc(var(--btn-depth) * 0.75) 0 var(--btn-edge-3),
        0 var(--btn-depth) 0 var(--btn-edge-4),
        0 calc(var(--btn-depth) + 6px) 18px rgba(0, 0, 0, 0.5),
        0 calc(var(--btn-depth) + 14px) 48px rgba(243, 181, 210, 0.42);
}

/* Premuto: affonda di tutto lo spessore e resta un filo di fianco, poi
   la freccia smette di sporgere. Il click si sente. */
.btn--cta:active {
    --btn-depth: 2px;
    transform: translate3d(0, calc(var(--btn-depth-base) - 2px), 0);
    transition-duration: 0.06s;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 3px 10px rgba(90, 72, 115, 0.4),
        0 1px 0 var(--btn-edge-3),
        0 2px 0 var(--btn-edge-4),
        0 3px 8px rgba(0, 0, 0, 0.4),
        0 4px 18px rgba(199, 184, 245, 0.22);
}

/* Ghost Outline Button — l'azione secondaria, bordo aurora */
.btn--ghost {
    background: var(--border-aurora-charcoal);
    border: 1px solid transparent;
    color: var(--color-bone-white);
}

.btn--ghost:hover {
    box-shadow: 0 0 24px rgba(199, 184, 245, 0.25);
}

/* Versione "large" per le CTA di conversione del funnel.
   Raggio 100px (scala chiusa), padding sulla griglia 4px. */
.btn--block {
    display: flex;
    width: 100%;
    border-radius: var(--radius-full);
    padding: var(--spacing-24) var(--spacing-32);
    /* Al corpo di lettura: l'etichetta del bottone non puo' risultare
       piu' piccola della riga di appoggio che gli sta sotto. */
    font-size: var(--text-read);
    font-weight: var(--font-weight-semibold);
    /* più grande è la pill, più spesso deve essere il fianco: a 6px un
       bottone a tutta larghezza sembrerebbe un adesivo */
    --btn-depth-base: 9px;
    --bounce-lift: 14px;
}

.btn__label {
    display: inline-block;
}

.btn__arrow,
.btn__ico {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.btn__arrow {
    transition: transform 0.25s cubic-bezier(0.3, 0.8, 0.4, 1);
}

.btn--cta:hover .btn__arrow {
    transform: translateX(4px);
}

.btn__spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radius-pill);
    animation: spin 0.7s linear infinite;
}

.btn.is-busy {
    pointer-events: none;
    opacity: 0.7;
    animation: none;
}

.btn.is-busy .btn__spinner {
    display: block;
}

.btn.is-busy .btn__arrow {
    display: none;
}

.btn.is-disabled {
    pointer-events: none;
}

/* In attesa dell'URL in config il bottone resta spento. Ma una pill
   aurora al 45% sembra rotta: meglio farlo scendere sulla ghost. */
.btn.is-disabled,
.btn--cta.is-disabled {
    background: transparent;
    border: 1px solid var(--color-wire-gray);
    color: var(--color-mute-gray);
    box-shadow: none;
    transform: none;
    /* spento vuol dire spento: via l'estrusione e via il rimbalzo */
    animation: none;
}

.btn--cta.is-disabled::after {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Chiusura del copy, sotto la VSL. Tiene la misura del video (960px) e
   non quella di lettura: così il bordo sinistro del testo cade esatto
   sul bordo del riquadro sopra, invece di rientrare di un centinaio di
   pixel da nessuna parte. L'ultimo margine lo azzera: a separarlo dalla
   CTA ci pensa il margine della CTA stessa. */
.hero__note {
    max-width: 960px;
    margin: var(--spacing-32) auto 0;
}

.hero__note .hero__sub,
.hero__note .hero__desc {
    max-width: none;
}

.hero__note .hero__desc {
    margin-bottom: 0;
}

/* Blocco CTA ripetuto: bottone + rassicurazione + nota di scarsità.
   Dietro al bottone un alone aurora morbido. */
.cta-block {
    position: relative;
    max-width: 620px;
    margin: var(--spacing-48) auto 0;
    text-align: center;
}

.cta-block::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -40px;
    /* mai più largo dello schermo: niente scroll orizzontale su mobile */
    width: min(140%, 100vw);
    height: 200px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(50% 60% at 30% 40%, rgba(246, 209, 172, 0.14), transparent 70%),
        radial-gradient(50% 60% at 70% 40%, rgba(167, 234, 220, 0.14), transparent 70%),
        radial-gradient(40% 60% at 50% 40%, rgba(199, 184, 245, 0.16), transparent 70%);
}

/* La riga di rassicurazione sotto il bottone: una riga sola, sempre.
   Spezzata in due ("…L'ISCRIZIONE È 100%" / "GRATUITA") perdeva il suo
   lavoro — è una frase che si legge in un colpo d'occhio, non un
   paragrafo — e lasciava "GRATUITA" orfana al centro, che e' proprio la
   parola che deve arrivare intera. Va a [data-fit] come la nota di
   scarsita' qui sotto: il tetto e' il corpo di lettura (23px, il
   massimo di --text-read), quindi da tablet in su la riga resta
   identica a prima; e' sul telefono che il carattere scala invece di
   mandare la frase a capo. --fit-max e --fit-min li legge parseFloat,
   quindi devono essere px secchi: una clamp() qui non si potrebbe
   leggere. */
.cta-sub {
    --fit-max: 23px;
    --fit-min: 10px;
    font-size: var(--text-read);
    color: var(--color-off-white);
    margin: var(--spacing-16) 0 0;
}

/* Orario e nota di scarsità: una riga sola, sempre. Vanno a [data-fit]
   come le righe chiave dell'hero, così il corpo scende quanto serve a
   far stare la frase nella colonna invece di spezzarla in due. Il tetto
   è il corpo normale (14px): da tablet in su la riga ci sta comoda e
   resta identica a prima, è solo sul telefono che il carattere scala. */
.cta-when {
    --fit-max: 14px;
    --fit-min: 8px;
    font-family: var(--font-geistmono);
    font-size: var(--text-body-sm);
    letter-spacing: 0;
    color: var(--color-aurora-mint);
    margin: var(--spacing-12) 0 0;
}

.cta-note {
    --fit-max: 14px;
    --fit-min: 8px;
    font-family: var(--font-geistmono);
    font-size: var(--text-body-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-aurora-peach);
    margin: var(--spacing-12) 0 0;
}


/* ═══ 08 · TITOLI DI SEZIONE E PROSE ═════════════════════════════════ */

.section-head {
    margin: 0 0 var(--spacing-40);
}

.section-head--center {
    text-align: center;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.section-eyebrow {
    display: block;
    font-family: var(--font-geistmono);
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-aurora-violet);
    margin: 0 0 var(--spacing-12);
}

/* ─── Titoli impilati ────────────────────────────────────────────────
   Dall'hero in giù vale una regola sola: un titolo non mette due scale
   sulla stessa riga. Il raccordo (.title-line) resta bianco e a corpo
   di lettura, la frase chiave (.title-em) sta su una riga tutta sua —
   più grande, in aurora e a tutta larghezza.

   "A tutta larghezza" nel senso letterale dell'hero: non è il
   carattere a decidere la riga, è la riga (la colonna) a decidere il
   carattere. [data-fit] su .title-em e [data-fit-lines] sui raccordi,
   js/main.js misura e scrive il corpo; --fit-max e --fit-min qui sotto
   sono i limiti. Su telefono la frase chiave arriva sempre al bordo,
   qualunque sia la larghezza dello schermo.

   L'ordine delle due parti non è fisso: dove è la frase chiave ad
   aprire il titolo ("DOMANDE / frequenti", "ATTENZIONE: / non chiudere
   questa pagina") sta sopra e il raccordo la chiude sotto.
   ──────────────────────────────────────────────────────────────────── */
.section-title {
    font-family: var(--font-geistsans);
    font-size: var(--text-section);
    font-weight: var(--font-weight-medium);
    line-height: 1.14;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    color: var(--color-bone-white);
    margin: 0;
}

/* Ogni parte del titolo è un blocco: è questo il "a capo", e vale
   anche senza JS.

   Il box si stringe sul testo (fit-content) perché il gradiente faccia
   il giro completo sulle lettere e non sull'intera colonna — con
   display:block e basta, "SERA PER SERA" si fermava al violetto senza
   arrivare mai al verde, e la fetta cambiava con la larghezza della
   finestra. max-width: 100% perché una frase lunga debba comunque
   poter andare a capo. */
.title-line,
.title-em {
    display: block;
    width: fit-content;
    max-width: 100%;
}

/* Il raccordo. Resta alla misura del titolo: è la parte che NON deve
   crescere, o il salto di scala con la frase chiave si chiude e il
   titolo torna piatto. --title-band segue la sua line-height, così il
   ramp bianco→grigio è alto una riga anche quando il raccordo ne
   occupa due o tre. */
.title-line {
    --title-band: 1.14em;
    line-height: 1.14;
}

/* La frase chiave: peso pieno, aurora, e il corpo che la colonna le
   consente. --fit-max è il tetto oltre il quale, su desktop, la riga
   diventerebbe un manifesto; il font-size è il fallback senza JS. */
.title-em {
    --fit-max: 76px;
    --fit-min: 16px;
    font-size: var(--text-section-em);
    font-weight: var(--font-weight-bold);
    line-height: 1.02;
    letter-spacing: -0.02em;
    /* un filo di padding: il clip del gradiente taglia le discendenti */
    padding-bottom: 0.06em;
}

/* Lo stacco tra le righe: abbastanza da leggerle come due parti, non
   tanto da spezzare il titolo in due titoli. */
.title-line+.title-em,
.title-em+.title-line,
.title-line+.title-line {
    margin-top: var(--spacing-8);
}

/* Un box stretto dentro un titolo centrato va ricentrato a mano:
   text-align centra le righe di testo, non il box di un figlio a
   blocco. */
.section-head--center .title-line,
.section-head--center .title-em,
.ty-alert__title .title-line,
.ty-alert__title .title-em {
    margin-inline: auto;
}

/* Qui stava .title-em--solid, la variante a tinta piena che reggeva
   "DOMANDE" in violetto. È stata tolta: ogni frase in evidenza porta
   l'aurora, nessuna esclusa. Una sola frase a tinta piena in mezzo a
   tutte le altre in gradiente non leggeva come una scelta, leggeva
   come una dimenticanza. */

.section-kicker {
    font-size: var(--text-read);
    line-height: 1.45;
    color: var(--color-off-white);
    margin: var(--spacing-20) 0 0;
}

.section-kicker strong {
    color: var(--color-bone-white);
}

.prose {
    max-width: var(--reading-max-width);
    font-size: var(--text-read);
    line-height: 1.6;
    color: var(--color-off-white);
}

.prose--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.prose p+p {
    margin-top: var(--spacing-16);
}

.prose strong {
    color: var(--color-bone-white);
}


/* ═══ 09 · ALERT BOX ═════════════════════════════════════════════════ */

/* Avviso: blocco incassato con bordo aurora e icona pesca */
.alert-box {
    display: flex;
    gap: var(--spacing-16);
    align-items: flex-start;
    background: var(--border-aurora-recess);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    padding: var(--card-padding);
    max-width: 880px;
    margin: 0 auto var(--spacing-48);
}

.alert-box__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--color-aurora-peach);
    margin-top: 2px;
}

.alert-box__icon svg {
    width: 20px;
    height: 20px;
}

.alert-box__body {
    font-size: var(--text-read);
    line-height: 1.6;
    color: var(--color-off-white);
}

.alert-box__body p+p {
    margin-top: var(--spacing-12);
}


/* ═══ 10 · CHECK LIST ════════════════════════════════════════════════ */

.check-list {
    display: grid;
    gap: 0;
    max-width: 880px;
    margin: 0 auto;
}

/* Niente card galleggianti e niente hairline: a scandire la lista
   sono le scene stesse.
   Ogni voce si apre con la sua scena: immagine piena in cima, sotto
   la riga icona + testo. Il wrap serve proprio a quello. A separare le
   voci basta il salto fra una scena e l'altra: niente hairline. */
.check-card {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-16);
    align-items: flex-start;
    padding: 0 0 var(--spacing-48);
}

.check-card:last-child {
    padding-bottom: 0;
}

/* Dopo il wrap dell'immagine il testo deve restare in riga con l'icona:
   senza flex-basis 0 la sua misura naturale lo manderebbe a capo.
   Qui il corpo sale di uno scalino sopra --text-subheading: è la lista
   che fa il lavoro di convincimento, va letta senza sforzo anche da chi
   scorre col telefono in mano. Fluido, così cresce anche sul desktop. */
.check-card p {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--text-read);
    line-height: 1.6;
    color: var(--color-off-white);
}

/* Qui niente aurora: il colore lo portano le scene. Il grassetto resta
   in bianco osso, la lista è monocroma. */
.check-card strong {
    color: var(--color-bone-white);
    font-weight: var(--font-weight-semibold);
}

/* Icona check: cerchio pieno in bianco osso, segno scuro. */
.check-card__ico {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-top: 3px;
    border: 0;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-nav-ink);
    background: var(--color-bone-white);
}

.check-card__ico svg {
    width: 15px;
    height: 15px;
}

/* Variante con immagine: la scena occupa tutta la riga e spinge a capo
   icona e testo. */
/* La voce attiva (quella che il JS marca mentre scorri, §main.js) accende
   l'alone dietro la propria scena: non si sposta nulla, è solo la luce
   che la scena proietta sul canvas quando è il suo turno. */
.check-card--media {
    flex-wrap: wrap;
    position: relative;
    isolation: isolate;
}

/* L'alone è il gradiente aurora steso e sfocato dietro l'immagine, con
   lo stesso riquadro della scena: l'immagine è opaca, quindi di questo
   layer si vede solo quello che sborda dai bordi. È lo stesso alone
   colorato della pill CTA, qui a spettro intero invece che a un tono.

   Il riquadro ricalca la scena e poi si stringe in scala: così rientra
   dello stesso tanto su tutti e quattro i lati — un inset in pixel,
   con l'altezza legata al 16/9, lascerebbe il fondo più scoperto — e
   la sfocatura lo riporta fuori quel tanto che basta a leggerlo come
   bordo, non come secondo rettangolo. */
.check-card--media::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    background: var(--gradient-aurora-spectrum);
    filter: blur(26px);
    transform: scale(0.96);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.check-card--media.is-active::before {
    opacity: 0.6;
}

.check-card__media {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-xl);
    margin: 0 0 var(--spacing-8);
}


/* ═══ 11 · SERATE ════════════════════════════════════════════════════ */

/* Una prospettiva sola per tutte e 4 le card: i gettoni ruotano dentro
   la stessa stanza, così le inclinazioni non si contraddicono tra una
   serata e l'altra. */
.nights {
    display: grid;
    gap: var(--spacing-16);
    max-width: 920px;
    margin: 0 auto;
}

/* Ogni card porta con sé la sua fermata dell'aurora: due stop adiacenti
   dello spettro per la faccia del gettone, un tono chiaro per il riflesso,
   uno profondo per lo spessore estruso e un rgba per l'alone. Le 4 sere
   scorrono il gradiente da pesca a cielo, nell'ordine del sistema.

   La card è una piastra: smusso chiaro sul filo alto, taglio nero sul
   filo basso, barra di stato in aurora sul fianco sinistro e ombra
   portata sotto. Non è più un rettangolo disegnato sul canvas, è un
   pezzo appoggiato sopra. */
.night {
    --n-lite: #fde7cf;
    --n-face-1: var(--color-aurora-peach);
    --n-face-2: var(--color-aurora-pink);
    --n-mid: #c9939a;
    --n-deep: #78505a;
    --n-glow: rgba(246, 209, 172, 0.45);
    --n-tint: rgba(246, 209, 172, 0.055);

    position: relative;
    isolation: isolate;
    display: flex;
    gap: var(--spacing-32);
    align-items: flex-start;
    background:
        /* barra di stato: sfuma prima degli angoli, così il raggio non la taglia */
        linear-gradient(to bottom, transparent 0%, var(--n-face-1) 14%, var(--n-face-2) 68%, transparent 100%) 0 0 / 3px 100% no-repeat,
        radial-gradient(120% 170% at 0% 0%, var(--n-tint), transparent 56%),
        radial-gradient(130% 150% at 0% 0%, rgba(255, 255, 255, 0.045), transparent 58%),
        var(--surface-recess-black);
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-xl);
    padding: var(--spacing-32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        inset 12px 0 22px -18px var(--n-glow),
        0 18px 40px -30px rgba(0, 0, 0, 0.95);
    transition:
        transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Reticolo tecnico inciso sulla piastra: hairline acromatiche che
   nascono dall'angolo del gettone e si dissolvono verso il testo —
   texture di superficie, non cornice. */
.night::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(250, 250, 250, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(250, 250, 250, 0.05) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(85% 130% at 0% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(85% 130% at 0% 0%, #000 0%, transparent 70%);
    opacity: 0.6;
    transition: opacity 0.35s ease;
}

.night:hover::before {
    opacity: 1;
}

/* Al passaggio la piastra si stacca dal canvas: sale di 3px, l'ombra
   portata si allunga e il fianco in aurora accende l'alone. */
.night:hover {
    transform: translateY(-3px);
}

/* La card chiave ha il bordo in aurora: lì il hover alza l'alone, non
   il colore del filo, altrimenti il gradiente verrebbe coperto. */
.night:not(.night--star):hover {
    border-color: var(--color-ash);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        inset 16px 0 28px -18px var(--n-glow),
        0 26px 56px -28px rgba(0, 0, 0, 1),
        0 0 42px -22px var(--n-glow);
}

.night:nth-child(2) {
    --n-lite: #fbd9ea;
    --n-face-1: var(--color-aurora-pink);
    --n-face-2: var(--color-aurora-violet);
    --n-mid: #ad8ec6;
    --n-deep: #5d4478;
    --n-glow: rgba(243, 181, 210, 0.45);
    --n-tint: rgba(243, 181, 210, 0.055);
}

.night:nth-child(3) {
    --n-lite: #e2dafa;
    --n-face-1: var(--color-aurora-violet);
    --n-face-2: var(--color-aurora-mint);
    --n-mid: #8bb0bd;
    --n-deep: #456072;
    --n-glow: rgba(199, 184, 245, 0.5);
    --n-tint: rgba(199, 184, 245, 0.06);
}

.night:nth-child(4) {
    --n-lite: #cdf3ea;
    --n-face-1: var(--color-aurora-mint);
    --n-face-2: var(--color-aurora-sky);
    --n-mid: #83adc2;
    --n-deep: #3f5f73;
    --n-glow: rgba(167, 234, 220, 0.45);
    --n-tint: rgba(175, 205, 246, 0.055);
}

/* L'icona della serata: un oggetto 3D in aurora appoggiato sulla
   piastra. Ha preso il posto del gettone "1ª SERA" — il numero lo dava
   già l'ordine della lista, e a parità di spazio un'immagine dice il
   contenuto della serata, non la sua posizione.
   Lo span è lo stage: tiene l'alone e la misura. Il PNG dentro ha la
   sua luce e il suo volume, quindi qui non si aggiunge materia: solo
   l'alone del colore della serata sotto e l'ombra portata. */
.night__ico {
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    position: relative;
    z-index: 1;
    display: block;
    /* Scende al centro della colonna di testo invece di appoggiarsi al
       filo alto: in cima sembrava un bollino di intestazione, a metà
       diventa l'oggetto di cui parla la card. Vale anche sulla card
       lunga della 2ª sera — lì il testo è alto il doppio e l'icona
       resta comunque il baricentro. */
    align-self: center;
}

/* Alone: il colore della serata che si scarica sulla piastra sotto
   l'icona. È quello che fa leggere lo stacco tra i due piani. */
.night__ico::before {
    content: "";
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 50% 52%, var(--n-glow), transparent 66%);
    filter: blur(18px);
    opacity: 0.55;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.night__ico img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* ombra portata sulla sagoma, non sul riquadro: l'oggetto appoggia
       sulla piastra invece di galleggiare su un quadrato */
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.55));
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease;
}

/* Al passaggio l'oggetto si solleva dalla piastra e l'alone si allarga:
   lo stesso gesto della card, mezzo passo più avanti. */
.night:hover .night__ico::before {
    opacity: 0.9;
    transform: scale(1.12);
}

.night:hover .night__ico img {
    transform: translateY(-6px) scale(1.05);
    filter: drop-shadow(0 26px 26px rgba(0, 0, 0, 0.6));
}

/* Colonna di testo: etichetta della serata in testa, copy sotto.
   Serve un contenitore perché la card è una riga flex a due colonne —
   senza, l'etichetta diventerebbe una terza colonna di fianco al testo. */
.night__body {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* L'immagine dice DI COSA parla la serata, questa riga dice QUALE
   serata è: le due informazioni non si sovrappongono. Mono in maiuscolo
   e larga di tracking come le altre etichette del sistema
   (.section-eyebrow, .bonus__label), e nel colore della serata — così
   etichetta, barra sul fianco e alone dell'icona sono lo stesso segnale.
   Il filo che la prolunga verso destra le dà il peso di una riga di
   capitolo invece che di una didascalia. */
.night__tag {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    margin: 0 0 var(--spacing-12);
    font-family: var(--font-geistmono);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--n-face-1);
}

.night__tag::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: linear-gradient(to right, var(--n-face-1), transparent);
    opacity: 0.45;
}

.night p {
    position: relative;
    z-index: 1;
    font-size: var(--text-read);
    line-height: 1.68;
    letter-spacing: -0.015em;
    color: var(--color-off-white);
}

/* Enfasi: le parole che reggono la promessa salgono di peso e di bianco.
   Il corpo resta regular, così il grassetto si vede davvero. */
.night strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-bone-white);
}

/* Una frase chiave per card: oltre al peso prende la sottolineatura
   nel colore della serata e un alone dello stesso colore. È il filo
   che lega la frase al gettone — un'enfasi per card, non di più,
   altrimenti non è più un'enfasi. */
.night__key {
    font-weight: var(--font-weight-semibold);
    color: var(--color-bone-white);
    padding-bottom: 3px;
    background-image: linear-gradient(to right, var(--n-face-1), var(--n-face-2));
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    text-shadow: 0 0 18px var(--n-glow);
    /* su più righe ogni frammento tiene la sua riga sotto */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Serata chiave (l'estrazione): la distinzione la fanno il bordo in
   aurora e l'alone colorato — niente barra in testa, il bordo basta a
   staccarla dalle altre tre. */
.night--star {
    background:
        linear-gradient(to bottom, transparent 0%, var(--n-face-1) 14%, var(--n-face-2) 68%, transparent 100%) 0 0 / 3px 100% no-repeat padding-box,
        var(--border-aurora-recess);
    border: 1px solid transparent;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 48px rgba(199, 184, 245, 0.2),
        0 18px 40px -30px rgba(0, 0, 0, 0.95);
}

.night--star:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 72px rgba(199, 184, 245, 0.3),
        0 26px 56px -28px rgba(0, 0, 0, 1);
}

.night--star p {
    color: var(--color-bone-white);
}


/* ═══ 12 · BONUS ═════════════════════════════════════════════════════ */

/* I due bonus non sono serate, e non devono leggersi come la quinta.
   Stanno fuori dalla lista, dietro una riga di capitolo, e prendono un
   materiale loro: stessa famiglia delle piastre — filo chiaro sopra,
   taglio nero sotto, ombra portata — ma la superficie è Nav Ink, un
   gradino sotto il Recess delle serate, e la barra in aurora corre in
   testa invece che sul fianco. Due segnali bastano: più in basso nella
   gerarchia delle superfici, e orientati per il verso opposto. */
.bonus {
    /* La stessa misura di .nights, non quella delle prose: il blocco
       deve incolonnarsi con le piastre sopra. A 880 contro 920 lo
       scarto è di 20px per lato — troppo poco per leggersi come un
       rientro voluto, abbastanza per leggersi come un errore. */
    max-width: 920px;
    margin: var(--spacing-64) auto 0;
}

/* La riga di capitolo: l'etichetta mono in mezzo a due hairline in
   aurora che corrono verso il centro. È un filo, non un titolo: se
   salisse di corpo competerebbe con "sera per sera", e il capitolo
   verrebbe prima delle serate invece che dopo. */
.bonus__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    margin: 0 0 var(--spacing-24);
    font-family: var(--font-geistmono);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
    /* Non 1: il box del gradiente è alto quanto il line box, e con
       line-height 1 l'accento di PIÙ — che sale sopra la maiuscola —
       finiva fuori dal clip e spariva. */
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.bonus__label::before,
.bonus__label::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--gradient-aurora-spectrum);
    opacity: 0.42;
}

/* Lo spettro parte dai due bordi e va verso l'etichetta: specchiando il
   filo di sinistra la riga è simmetrica, invece di ripetere due volte
   la stessa sequenza di colori nello stesso verso. */
.bonus__label::before {
    transform: scaleX(-1);
}

/* Il testo in aurora, ma senza l'estrusione di .aurora-text: a 12px i
   quattro gradini del fianco varrebbero quanto l'asta della lettera e
   l'etichetta uscirebbe impastata. Qui serve solo il colore. */
.bonus__label span {
    flex: 0 0 auto;
    background-image: var(--gradient-aurora-headline);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bonus__grid {
    display: grid;
    gap: var(--spacing-20);
}

.bonus-card {
    --b-1: var(--color-aurora-mint);
    --b-2: var(--color-aurora-sky);
    --b-glow: rgba(167, 234, 220, 0.45);
    --b-tint: rgba(167, 234, 220, 0.05);

    position: relative;
    isolation: isolate;
    /* La barra sta sul filo alto del box, quindi in cima il padding è
       più largo degli altri: il medaglione deve staccarsene, non
       appoggiarcisi sopra. */
    padding: var(--spacing-32) var(--spacing-24) var(--spacing-24);
    background:
        /* barra di stato in testa: si spegne prima degli angoli, così il
           raggio non la taglia di netto */
        linear-gradient(to right, transparent 0%, var(--b-1) 13%, var(--b-2) 87%, transparent 100%) 0 0 / 100% 3px no-repeat,
        radial-gradient(130% 150% at 50% 0%, var(--b-tint), transparent 62%),
        radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 60%),
        var(--surface-nav-ink);
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-xl);
    font-size: var(--text-read);
    line-height: 1.65;
    color: var(--color-off-white);
    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        inset 0 16px 28px -24px var(--b-glow),
        0 18px 40px -30px rgba(0, 0, 0, 0.95);
    transition:
        transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Lo stesso reticolo inciso delle serate, ma appeso in alto al centro
   invece che all'angolo: segue la barra, come lì seguiva il fianco. */
.bonus-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(250, 250, 250, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(250, 250, 250, 0.05) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(72% 100% at 50% 0%, #000 0%, transparent 72%);
    mask-image: radial-gradient(72% 100% at 50% 0%, #000 0%, transparent 72%);
    opacity: 0.55;
    transition: opacity 0.35s ease;
}

/* Il contenuto sta sopra il reticolo: senza, i paragrafi finirebbero
   sotto la texture insieme al fondo. */
.bonus-card>* {
    position: relative;
    z-index: 1;
}

.bonus-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-ash);
    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        inset 0 22px 34px -24px var(--b-glow),
        0 26px 56px -28px rgba(0, 0, 0, 1),
        0 0 42px -22px var(--b-glow);
}

.bonus-card:hover::before {
    opacity: 1;
}

/* Il secondo bonus prende la coppia di fermate successiva: le serate
   percorrono lo spettro dal pesca al cielo, i bonus lo chiudono e
   tornano verso il viola. */
.bonus-card:nth-child(2) {
    --b-1: var(--color-aurora-sky);
    --b-2: var(--color-aurora-violet);
    --b-glow: rgba(175, 205, 246, 0.45);
    --b-tint: rgba(175, 205, 246, 0.05);
}

.bonus-card__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    margin: 0 0 var(--spacing-16);
}

/* Il medaglione: un disco incassato col filo in aurora, al posto
   dell'icona nuda appoggiata al titolo. L'alone esce dal bordo come
   box-shadow — un figlio in z-index negativo si fermerebbe sopra la
   faccia del disco, non sotto, e non si vedrebbe. */
.bonus-card__medal {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background:
        radial-gradient(90% 90% at 50% 16%, rgba(255, 255, 255, 0.08), transparent 68%) padding-box,
        linear-gradient(var(--surface-recess-black), var(--surface-recess-black)) padding-box,
        linear-gradient(145deg, var(--b-1), var(--b-2)) border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 22px -6px var(--b-glow),
        0 8px 18px -12px rgba(0, 0, 0, 0.9);
    color: var(--b-1);
    transition: box-shadow 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bonus-card:hover .bonus-card__medal {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 30px -4px var(--b-glow),
        0 12px 22px -12px rgba(0, 0, 0, 0.95);
}

.bonus-card__medal svg {
    width: 20px;
    height: 20px;
}

/* Il titolo prende le due fermate della barra: è il filo che lega la
   riga in testa al medaglione e alla barra sopra. */
.bonus-card__title {
    font-family: var(--font-geistmono);
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background-image: linear-gradient(100deg, var(--b-1), var(--b-2));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bonus-card p+p {
    margin-top: var(--spacing-12);
}

.bonus-card strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-bone-white);
}


/* ═══ 13 · FAQ ═══════════════════════════════════════════════════════ */

.faq {
    max-width: 880px;
    margin: 0 auto;
    border-top: 1px solid var(--color-wire-gray);
}

/* Le domande aperte prendono colore, a rotazione sulle 5 fermate,
   e il peso grosso: aperta e' lo stato che comanda la sezione. */
.faq__item[open] .faq__q { font-weight: var(--font-weight-bold); }
.faq__item[open] .faq__q { color: var(--color-aurora-peach); }
.faq__item:nth-child(5n+2)[open] .faq__q { color: var(--color-aurora-pink); }
.faq__item:nth-child(5n+3)[open] .faq__q { color: var(--color-aurora-violet); }
.faq__item:nth-child(5n+4)[open] .faq__q { color: var(--color-aurora-mint); }
.faq__item:nth-child(5n+5)[open] .faq__q { color: var(--color-aurora-sky); }

.faq__item {
    position: relative;
    border-bottom: 1px solid var(--color-wire-gray);
}

/* La riga che chiude la domanda aperta si accende e scorre:
   un filo d'aurora che cammina da sinistra a destra, posato
   esattamente sopra il tratto grigio che gia' c'era. */
.faq__item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-image: repeating-linear-gradient(90deg,
            var(--color-aurora-peach) 0,
            var(--color-aurora-pink) 60px,
            var(--color-aurora-violet) 120px,
            var(--color-aurora-mint) 180px,
            var(--color-aurora-sky) 240px,
            var(--color-aurora-peach) 300px);
}

.faq__item[open]::before {
    opacity: 1;
    animation: faq-wire-flow 4s linear infinite;
}

@keyframes faq-wire-flow {
    from { background-position: 0 0; }
    to   { background-position: 300px 0; }
}

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    padding: var(--spacing-20) 0;
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__q {
    /* Mai piu' piccola della sua risposta: stessa misura, a distinguerla
       bastano il peso medium e il bianco osso. */
    font-size: var(--text-read);
    font-weight: var(--font-weight-medium);
    color: var(--color-bone-white);
}

.faq__toggle {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-off-white);
}

.faq__toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.faq__item[open] .faq__toggle svg {
    transform: rotate(45deg);
}

.faq__item summary:hover .faq__toggle {
    border-color: var(--color-aurora-violet);
    color: var(--color-aurora-violet);
}

.faq__item[open] .faq__toggle {
    border: 0;
    background: var(--gradient-aurora-spectrum);
    color: var(--color-nav-ink);
}

.faq__a {
    padding: 0 0 var(--spacing-24);
    max-width: var(--reading-max-width);
}

.faq__a p {
    /* Stessa misura del corpo pagina (--text-read): le risposte si
       leggono come il resto del testo, non come una nota. */
    font-size: var(--text-read);
    line-height: 1.65;
    color: var(--color-off-white);
}

.faq__a p+p {
    margin-top: var(--spacing-12);
}

.faq__a strong {
    color: var(--color-bone-white);
}


/* ═══ 14 · FOOTER ════════════════════════════════════════════════════ */

.footer {
    position: relative;
    background: var(--surface-nav-ink);
    padding: var(--spacing-40) 0;
}

.footer__disclaimer {
    max-width: 880px;
    margin: 0 auto;
    font-size: var(--text-body-sm);
    line-height: 1.6;
    /* Ash e non Smoke: sul fondo Nav Ink #454546 scende sotto il
       contrasto leggibile, e questo è testo legale. */
    color: var(--color-off-white);
    text-align: center;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-16);
    margin: var(--spacing-20) 0 0;
    font-family: var(--font-geistmono);
    font-size: var(--text-caption);
    letter-spacing: 0;
    color: var(--color-off-white);
}

.footer__link {
    color: var(--color-off-white);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.footer__link:hover {
    color: var(--color-aurora-violet);
}


/* ═══ 15 · MODALE + FORM ═════════════════════════════════════════════ */

.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16);
}

/* La modale non e' un pannello appoggiato sul buio: e' una lastra di
   vetro posata sopra la pagina. Quattro strati, nell'ordine in cui si
   leggono:

   1 · il fondo sfocato (.modal__backdrop) — la pagina resta li' sotto,
       fuori fuoco e un filo piu' satura, invece di sparire sotto un velo
       nero. E' quello che fa capire che sopra c'e' del vetro, e non una
       finestra ritagliata nel nero.
   2 · il vetro (.modal__dialog) — superficie quasi trasparente con un
       gradiente bianco obliquo: in alto a sinistra la luce entra, al
       centro il vetro e' pulito, in basso a destra raccoglie il
       riflesso. Sotto, due bave di aurora che filtrano da dentro.
   3 · il bordo (::before) — lo spettro aurora su un anello di 1px,
       ritagliato in maschera. Il doppio background padding-box /
       border-box del resto del sistema qui non si puo' usare: la
       superficie e' traslucida e il gradiente del bordo si vedrebbe
       anche in mezzo alla lastra.
   4 · la lama di luce (::after) — la stessa della pill primaria, qui
       sulla meta' alta: e' lei che fa leggere il vetro come spesso
       invece che come un rettangolo colorato.

   Lo scroll e' passato alla sezione dentro (.signup--modal): con
   overflow sulla lastra, bordo e lama scorrerebbero via insieme al
   contenuto. */
.modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(130% 90% at 50% -10%, rgba(199, 184, 245, 0.16), transparent 62%),
        rgba(9, 9, 11, 0.58);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    animation: modal-veil 0.32s ease-out both;
}

.modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Il bottone della CTA sta in nowrap: senza min-width la sua
       larghezza minima diventa quella della lastra e il max-width non
       la tiene piu'. */
    min-width: 0;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 70% at 12% 0%, rgba(199, 184, 245, 0.16), transparent 58%),
        radial-gradient(100% 60% at 92% 104%, rgba(243, 181, 210, 0.13), transparent 60%),
        linear-gradient(152deg,
            rgba(255, 255, 255, 0.11) 0%,
            rgba(255, 255, 255, 0.035) 34%,
            rgba(255, 255, 255, 0.02) 64%,
            rgba(255, 255, 255, 0.08) 100%),
        rgba(24, 24, 27, 0.52);
    backdrop-filter: blur(34px) saturate(190%);
    -webkit-backdrop-filter: blur(34px) saturate(190%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 80px rgba(199, 184, 245, 0.06),
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(199, 184, 245, 0.22);
    animation: modal-rise 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

/* Il bordo in aurora: un riquadro pieno meno il suo interno, cosi'
   resta 1px su tutti i lati, raggio compreso. */
.modal__dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    padding: 1px;
    background: var(--gradient-aurora-spectrum);
    opacity: 0.55;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* La lama di luce si spegne a meta' altezza, come sulla pill: tirata
   piu' in basso diventerebbe una patina lattiginosa sui campi. */
.modal__dialog::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.05) 26%,
            rgba(255, 255, 255, 0) 48%);
    pointer-events: none;
}

/* Senza backdrop-filter il vetro non e' vetro: e' una superficie
   semitrasparente con sotto il testo della pagina, e il form diventa
   illeggibile. Li' si torna alle superfici piene del sistema. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal__backdrop {
        background: rgba(0, 0, 0, 0.82);
    }

    .modal__dialog {
        background: var(--surface-console-charcoal);
    }
}

/* Il contenuto sta sopra bordo e lama, e si porta dietro lo scroll e il
   padding che prima erano della lastra. */
.signup--modal {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-32) var(--spacing-24) var(--spacing-24);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.signup--modal::-webkit-scrollbar {
    width: 6px;
}

.signup--modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
}

/* Il tasto di chiusura e' fatto della stessa materia della lastra: una
   pastiglia di vetro, non un contorno grigio appoggiato sopra. */
.modal__close {
    position: absolute;
    top: var(--spacing-12);
    right: var(--spacing-12);
    z-index: 3;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-off-white);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.modal__close:hover {
    background: rgba(243, 181, 210, 0.16);
    border-color: var(--color-aurora-pink);
    color: var(--color-aurora-pink);
}

.modal__close svg {
    width: 14px;
    height: 14px;
}

/* La lastra entra: sale di poco e si apre di un soffio, mentre il fondo
   va in dissolvenza. Insieme fanno la posa del vetro sulla pagina. */
@keyframes modal-veil {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 16px, 0) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.signup__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    font-family: var(--font-geistmono);
    font-size: var(--text-body-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-aurora-pink);
    margin: 0 0 var(--spacing-12);
}

/* Due scale e maiuscolo anche qui, nella misura della modale: la
   domanda resta di raccordo, .title-em è la parte che chiude. */
.signup__title {
    font-size: clamp(20px, 3.6vw, 28px);
    font-weight: var(--font-weight-medium);
    line-height: 1.14;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    color: var(--color-bone-white);
    margin: 0 0 var(--spacing-24);
}

/* Dentro la modale la colonna è corta: il tetto scende, o la frase
   chiave sfonderebbe la lastra. Il font-size relativo resta il
   fallback senza JS. */
.signup__title .title-em {
    --fit-max: 44px;
    --fit-min: 14px;
    font-size: 1.35em;
    line-height: 1.04;
}

/* La colonna e' minmax(0, 1fr) e non auto: il bottone in nowrap e le
   righe [data-fit] (anch'esse nowrap) avrebbero una larghezza minima
   pari al loro testo, e allargherebbero la griglia — e con lei la
   lastra — oltre il suo max-width. Con la colonna bloccata la misura
   la detta il contenitore, come deve essere. */
.optin-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-16);
}

.field label {
    display: block;
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-off-white);
    margin: 0 0 var(--spacing-8);
}

/* Input / Code Field — superficie incassata #181818, mai "sollevata" */
.field__box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface-recess-black);
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-md);
}

.field__box:focus-within {
    border-color: transparent;
    background: var(--border-aurora-recess);
    box-shadow: 0 0 20px rgba(199, 184, 245, 0.2);
}

.field__box:focus-within .field__icon {
    color: var(--color-aurora-violet);
}

.field__icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-left: var(--spacing-16);
    color: var(--color-off-white);
}

.field__icon svg {
    width: 16px;
    height: 16px;
}

.field input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    padding: var(--spacing-16);
    font-family: var(--font-geistsans);
    font-size: var(--text-body);
    letter-spacing: -0.025em;
    color: var(--color-bone-white);
}

.field input::placeholder {
    color: var(--color-off-white);
}

.field__error {
    display: none;
    font-family: var(--font-geistmono);
    font-size: 13px;
    letter-spacing: 0;
    color: var(--color-aurora-peach);
    margin: var(--spacing-8) 0 0;
}

.field.has-error .field__box {
    border-color: var(--color-aurora-peach);
    box-shadow: 0 0 0 1px var(--color-aurora-peach) inset;
}

.field.has-error .field__error {
    display: block;
}

/* Dentro la lastra i campi sono fatti della stessa materia: un incavo
   nel vetro, non un rettangolo nero incollato sopra. Il Recess Black
   pieno del design system resta valido ovunque fuori dalla modale. */
.signup--modal .field__box {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 2px 10px rgba(0, 0, 0, 0.35);
}

.signup--modal .field__box:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-aurora-violet);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 3px rgba(199, 184, 245, 0.18),
        0 0 24px rgba(199, 184, 245, 0.22);
}

/* La CTA della modale sta su una riga sola e senza freccia. Dentro la
   lastra lo spazio e' quello che e': l'etichetta andava a capo e la
   freccia a destra spingeva le due righe fuori centro. Via la freccia
   (il bottone e' gia' l'unica azione del form, non deve indicare dove
   si va) e corpo fluido, che scende quanto basta perche' la riga entri
   anche sul telefono — non di piu'. */
.signup--modal .btn--block {
    --btn-depth-base: 7px;
    white-space: nowrap;
    /* Il tetto resta il corpo di lettura: dentro la lastra l'etichetta
       non deve mai farsi piu' grande della riga che le sta sotto. Il
       4.4vw e' il corpo che tiene la riga intera dentro il bottone fino
       al telefono stretto (320px); da li' in su vince il tetto. */
    font-size: clamp(14px, 4.4vw, var(--text-read));
    padding: var(--spacing-20) var(--spacing-24);
}

/* Le due righe di chiusura della modale — la rassicurazione e la nota
   di scarsita' — sono una cosa sola, non due righe del form: si leggono
   di fila, in un respiro.

   Qui il distacco non lo faceva il margine ma il grid. .optin-form e'
   display:grid con gap 16px, e ogni <p> e' una riga sua: fra le due
   passavano 16px di gap PIU' i 12px di margine di .cta-note, 28px in
   tutto — e dentro la lastra le due righe vanno a [data-fit] e scendono
   di corpo, mentre quello spazio restava fermo: pesava quanto una riga
   intera. Il margine negativo annulla il gap e riscrive il distacco
   voluto, 4px. Resta scritto con lo stesso token del gap, cosi' se
   cambia il ritmo del form questo lo segue invece di sfasarsi.

   In pagina (.cta-block, che e' un blocco normale) il margine resta
   quello: li' sotto la CTA c'e' aria, e spesso in mezzo passa anche
   .cta-when. */
.signup--modal .cta-note {
    margin-top: calc(var(--spacing-4) - var(--spacing-16));
}

.form-status {
    font-size: var(--text-body);
    color: var(--color-off-white);
    margin: var(--spacing-12) 0 0;
    text-align: center;
}

.form-status[hidden] {
    display: none;
}

.form-success[hidden] {
    display: none;
}

.form-success {
    text-align: center;
    padding: var(--spacing-24) 0 0;
}

.form-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--gradient-aurora-spectrum);
    color: var(--color-nav-ink);
    margin: 0 0 var(--spacing-12);
}

.form-success__icon svg {
    width: 18px;
    height: 18px;
}

.form-success__title {
    font-size: var(--text-subheading);
    font-weight: var(--font-weight-medium);
}

/* intl-tel-input — riallineato sulla superficie incassata */
.field--phone .field__box {
    padding-left: var(--spacing-8);
}

.iti {
    width: 100%;
}

.iti__flag-container {
    border: 0;
}

.iti__selected-flag {
    background: transparent !important;
    border-radius: var(--radius-md);
}

.iti__country-list {
    background: var(--surface-recess-black);
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-md);
    color: var(--color-bone-white);
    font-family: var(--font-geistsans);
    font-size: var(--text-body-sm);
}

.iti__country.iti__highlight {
    background: var(--surface-nav-ink);
}

.iti__dial-code {
    color: var(--color-off-white);
}


/* ═══ 16 · STICKY CTA (mobile) ═══════════════════════════════════════ */

.sticky-cta[hidden] {
    display: none;
}

.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--surface-nav-ink);
    border-top: 1px solid transparent;
    border-image: var(--gradient-aurora-spectrum) 1;
    padding: var(--spacing-12) var(--spacing-16);
    padding-bottom: calc(var(--spacing-12) + env(safe-area-inset-bottom, 0px));
}

.sticky-cta .btn--block {
    padding: var(--spacing-16) var(--spacing-24);
    font-size: var(--text-subheading);
    /* nella barra ci sono 12px di padding: con il fianco e il salto
       delle CTA di pagina il bottone uscirebbe dalla sua barra */
    --btn-depth-base: 5px;
    --bounce-lift: 6px;
}

@media (min-width: 768px) {
    .sticky-cta {
        display: none;
    }
}


/* ═══ 17 · PAGINA GRAZIE ═════════════════════════════════════════════ */

.top-bar--warn .top-bar__line {
    color: var(--color-aurora-peach);
    letter-spacing: 0.06em;
}

.ty-alert {
    position: relative;
    padding: var(--spacing-64) 0 var(--spacing-48);
    overflow: hidden;
    text-align: center;
}

/* Stessa composizione a due scale, e in maiuscolo, del resto del
   funnel: la parola d'allarme esce di misura, il resto resta sotto. */
.ty-alert__title {
    position: relative;
    font-size: var(--text-section);
    font-weight: var(--font-weight-medium);
    line-height: 1.14;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    color: var(--color-bone-white);
    margin: 0 auto var(--spacing-24);
    max-width: 920px;
}

/* Qui la parola d'allarme apre il titolo, quindi .title-em sta sopra e
   il resto la chiude: il raccordo è lungo tre righe, e a quella misura
   deve restare leggibile — ha un tetto suo, più basso del titolo di
   sezione. */
.ty-alert__title .title-line {
    font-size: clamp(20px, 3.6vw, 30px);
}

.ty-alert__sub {
    position: relative;
    font-size: var(--text-read);
    line-height: 1.5;
    color: var(--color-off-white);
    margin: 0 auto;
    max-width: var(--reading-max-width);
}

.ty-main {
    position: relative;
    padding: var(--spacing-48) 0 var(--section-gap);
}

.ty-steps {
    display: grid;
    gap: var(--spacing-48);
    max-width: 880px;
    margin: 0 auto;
    counter-reset: step;
}

.ty-step {
    padding: var(--spacing-32) 0 0;
    border-top: 1px solid var(--color-wire-gray);
}

.ty-steps>.ty-step:first-child {
    border-top: 0;
    padding-top: 0;
}

.ty-step__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    margin: 0 0 var(--spacing-16);
}

.ty-step__n {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-aurora-peach);
    border: 0;
    border-radius: var(--radius-xl);
    font-family: var(--font-geistmono);
    font-size: var(--text-heading);
    color: var(--color-nav-ink);
}

.ty-step:nth-child(2) .ty-step__n { background: var(--color-aurora-pink); }
.ty-step:nth-child(3) .ty-step__n { background: var(--color-aurora-violet); }
.ty-step:nth-child(4) .ty-step__n { background: var(--color-aurora-mint); }

/* Il titolo del passo sta di fianco al numero: è un figlio flex, e
   deve poter stringersi (min-width: 0) o la riga in nowrap della frase
   chiave allargherebbe la card. Serve anche al calcolo del corpo —
   js/main.js misura il genitore della riga, e il genitore dev'essere
   lo spazio accanto al numero, non la card intera. */
.ty-step__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: var(--font-weight-medium);
    line-height: 1.14;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    color: var(--color-bone-white);
}

/* .title-em vale anche qui: la parte forte del passo sale di scala */
/* La colonna del passo è più stretta di quella di una sezione (il
   numero si prende 52px più il gap): il tetto scende, o la frase
   chiave arriverebbe al bordo prima di aver preso il suo corpo. */
.ty-step__title .title-em {
    --fit-max: 46px;
    --fit-min: 14px;
    font-size: 1.3em;
    line-height: 1.04;
}

.ty-step p {
    font-size: var(--text-read);
    line-height: 1.6;
    color: var(--color-off-white);
    max-width: var(--reading-max-width);
}

.ty-step p+p {
    margin-top: var(--spacing-12);
}

.ty-step strong {
    color: var(--color-bone-white);
}

.ty-note {
    background: var(--border-aurora-recess);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    padding: var(--spacing-20);
    font-size: var(--text-read) !important;
    margin-top: var(--spacing-16) !important;
}

.ty-media {
    width: 100%;
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-xl);
    margin: var(--spacing-20) 0 0;
}

.ty-cta {
    margin: var(--spacing-24) 0 0;
    max-width: 560px;
}

.ty-step .vsl {
    margin-top: var(--spacing-20);
}

.ty-date {
    display: flex;
    align-items: center;
    gap: var(--spacing-20);
    background: var(--border-aurora-recess);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    padding: var(--spacing-16);
    margin: var(--spacing-20) 0 0;
    max-width: 480px;
}

.ty-cal {
    flex: 0 0 68px;
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-nav-ink);
    border: 1px solid var(--color-wire-gray);
    border-radius: var(--radius-md);
    font-family: var(--font-geistmono);
    line-height: 1;
}

.ty-cal__month {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-aurora-mint);
    margin-bottom: var(--spacing-4);
}

.ty-cal__num {
    font-size: 26px;
    padding-bottom: 2px;
}

.ty-date__title {
    font-size: var(--text-heading) !important;
    font-weight: var(--font-weight-medium);
    color: var(--color-bone-white) !important;
}

.ty-date__sub {
    font-size: var(--text-read) !important;
    margin-top: var(--spacing-4) !important;
}

/* WhatsApp: il bottone del tutor è la pill menta, piena */
.btn--wa {
    background: var(--color-aurora-mint);
    border: 0;
    color: var(--color-nav-ink);
    box-shadow: var(--shadow-subtle), 0 8px 32px rgba(167, 234, 220, 0.28);
}

.btn--wa:hover {
    box-shadow: var(--shadow-subtle), 0 10px 40px rgba(167, 234, 220, 0.42);
    transform: translateY(-1px);
}


/* ═══ 18 · MICRO-ANIMAZIONI ══════════════════════════════════════════ */

/* ─── Il rimbalzo della CTA ──────────────────────────────────────────
   Squash & stretch da cartone animato, con il perno sulla base della
   pill (vedi transform-origin in §07): si carica schiacciandosi, stacca
   allungandosi, atterra schiacciando di nuovo e si assesta con un
   secondo rimbalzo corto. Fra un salto e l'altro ci sono ~2,5s di
   fermo: è un richiamo periferico, non un elemento che vibra.
   L'altezza arriva da --bounce-lift, così lo stesso salto scala fra la
   CTA a tutta larghezza e il bottone della barra fissa. */
@keyframes cta-bounce {

    0%,
    54% {
        transform: translate3d(0, 0, 0) scale(1, 1);
        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }

    59% {
        /* si carica */
        transform: translate3d(0, 0, 0) scale(1.045, 0.9);
        animation-timing-function: cubic-bezier(0.1, 0.9, 0.35, 1);
    }

    68% {
        /* stacco: in aria si allunga */
        transform: translate3d(0, calc(var(--bounce-lift) * -1), 0) scale(0.975, 1.06);
        animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4);
    }

    77% {
        /* atterraggio */
        transform: translate3d(0, 0, 0) scale(1.04, 0.92);
        animation-timing-function: cubic-bezier(0.1, 0.9, 0.35, 1);
    }

    85% {
        /* secondo rimbalzo, un terzo del primo */
        transform: translate3d(0, calc(var(--bounce-lift) * -0.3), 0) scale(0.99, 1.025);
        animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4);
    }

    91% {
        transform: translate3d(0, 0, 0) scale(1.02, 0.97);
        animation-timing-function: ease-out;
    }

    96%,
    100% {
        transform: translate3d(0, 0, 0) scale(1, 1);
    }
}

/* Rimbalzano solo le CTA di conversione: i 4 blocchi di pagina e la
   barra fissa. Il bottone del form resta fermo — uno che sta compilando
   i campi non va distratto, lì bastano il 3D e la pressione. */
.cta-block .btn--cta,
.sticky-cta .btn--cta {
    animation: cta-bounce 4.4s linear infinite;
}

/* Sfasate: la barra fissa e la CTA sotto non devono saltare all'unisono */
.sticky-cta .btn--cta {
    animation-duration: 5.6s;
    animation-delay: 1.3s;
}

/* Appena il dito o il mouse arriva, il rimbalzo si ferma: da lì in poi
   comanda la mano (hover che gonfia, :active che affonda). Un bottone
   spento o in attesa non rimbalza affatto. Queste regole stanno dopo
   quelle qui sopra per vincere a parità di specificità. */
.btn--cta:hover,
.btn--cta:focus-visible,
.btn--cta:active,
.btn--cta.is-busy,
.btn--cta.is-disabled {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .live-dot,
    .faq__item[open]::before,
    .btn__spinner,
    .page-aurora__orb,
    .modal__backdrop,
    .modal__dialog {
        animation: none;
    }

    /* L'icona resta l'oggetto che è — volume e ombra sono forma, non
       movimento — ma smette di sollevarsi, e la piastra con lei. */
    .night,
    .night__ico::before,
    .night__ico img,
    .bonus-card,
    .bonus-card__medal,
    .check-card--media::before {
        transition: none;
    }

    .night:hover,
    .bonus-card:hover {
        transform: none;
    }

    .night:hover .night__ico::before,
    .night:hover .night__ico img,
    .bonus-card:hover .bonus-card__medal {
        transform: none;
    }

    .btn--cta,
    .btn--wa {
        transition: none;
    }

    /* La pill resta un oggetto solido — l'estrusione è forma, non
       movimento — ma smette di saltare e di affondare. */
    .cta-block .btn--cta,
    .sticky-cta .btn--cta {
        animation: none;
    }

    .btn--cta:hover,
    .btn--cta:focus-visible,
    .btn--cta:active {
        transform: none;
    }
}


/* ═══ RESPONSIVE ═════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    :root {
        --section-gap: 56px;
        --card-padding: 20px;
    }

    .wrap {
        padding: 0 var(--spacing-16);
    }

    .hero {
        padding-top: var(--spacing-16);
    }

    .hero__title {
        gap: var(--spacing-4);
    }

    /* Sul telefono la colonna è stretta: senza alzare il tetto le righe
       chiave si fermerebbero prima del bordo. */
    .hero__title-big {
        --fit-max: 64px;
        --fit-min: 24px;
    }

    /* In maiuscolo la riga è più larga: senza abbassare il piano, su
       320px il calcolo si fermerebbe al minimo e sborderebbe. */
    .hero__sub-big {
        --fit-min: 18px;
    }

    /* I raccordi hanno un tetto di righe (data-fit-lines nell'HTML): il
       primo sta in due righe, il secondo in una sola. Qui sotto i due
       limiti entro cui js/main.js cerca il corpo più grande che ci sta.
       Esistono solo sul telefono: sopra i 767px la dichiarazione non
       c'è, il JS esce e i raccordi tornano al clamp della classe.

       Il piano è basso apposta: "e la terza sera a un fortunato
       vincitore" su una riga sola, a 320px, chiede un corpo piccolo —
       ed è quello il patto, una riga prima di tutto. */
    .hero__title-mid {
        --fit-max: 30px;
        --fit-min: 12px;
    }

    /* L'attacco accorpato porta una frase intera (85 caratteri contro i
       62 del raccordo da solo): in due righe, su una colonna da
       telefono, chiede un corpo più piccolo. Il piano scende con lui —
       se restasse a 13 il calcolo si fermerebbe prima del dovuto e la
       frase uscirebbe in tre righe, che è proprio quello che qui non
       deve succedere. Deve stare DOPO .hero__title-mid: stessa
       specificità, vince l'ultima. */
    .hero__title-mid--open {
        --fit-max: 30px;
        --fit-min: 11px;
    }

    /* ─── Titoli impilati sul telefono ───────────────────────────────
       È qui che la regola vale davvero: la frase chiave arriva al bordo
       della colonna a ogni larghezza di schermo, 320 come 767, e il
       corpo lo calcola js/main.js. Il tetto è alto apposta — su un
       telefono largo una parola corta come "SCOPRIRAI" ci arriva da
       sola, e non deve fermarsi a metà.

       Il raccordo, invece, ha un tetto basso: è la parte che non deve
       crescere. Va a [data-fit-lines], quindi non si stende sulla riga
       — cerca solo il corpo più grande che sta nelle righe dichiarate
       nell'HTML, e sotto quel tetto non supera mai la frase chiave.
       I limiti esistono solo qui: sopra i 767px la dichiarazione non
       c'è, il JS esce e il raccordo torna al clamp della classe. */
    .title-em {
        --fit-max: 72px;
        --fit-min: 15px;
    }

    .title-line {
        --fit-max: 26px;
        --fit-min: 11px;
    }

    .ty-alert__title .title-line {
        --fit-max: 24px;
        --fit-min: 11px;
    }

    /* Modale e passi: colonne corte, tetti corti. */
    .signup__title .title-em,
    .ty-step__title .title-em {
        --fit-max: 42px;
        --fit-min: 13px;
    }

    .signup__title .title-line,
    .ty-step__title .title-line {
        --fit-max: 20px;
        --fit-min: 10px;
    }

    /* Il numero del passo passa sopra al titolo. Di fianco, su un
       telefono, lascia una colonna di 220px: troppo corta perché la
       frase chiave arrivi al bordo, e il titolo finiva alla stessa
       misura del raccordo che doveva introdurre. Sopra, il titolo ha
       tutta la larghezza della card — che è poi la regola. */
    .ty-step__head {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--spacing-12);
    }

    .ty-step__title {
        flex: 1 1 100%;
    }

    /* Senza la colonna decorativa a fianco, sul telefono il blocco di
       testo dell'hero sta al centro: le righe a scale diverse restano
       in asse invece di sfilacciarsi a destra. */
    .hero__copy {
        text-align: center;
    }

    .hero__kicker,
    .hero__sub,
    .hero__desc {
        margin-left: auto;
        margin-right: auto;
    }

    /* Sta fuori da .hero__copy, quindi il centraggio se lo porta da sé. */
    .hero__note {
        text-align: center;
    }

    .vsl {
        margin-top: var(--spacing-24);
    }

    .night {
        flex-direction: column;
        gap: var(--spacing-20);
        padding: var(--spacing-24);
    }

    /* In colonna la flex-basis diventa altezza: l'icona va rimisurata.
       Qui sta sopra al testo, non di fianco, quindi non ha più niente
       da cui scendere — e torna a sinistra, allineata al filo del
       testo: centrata galleggerebbe in mezzo alla card. */
    .night__ico {
        flex: 0 0 auto;
        width: 120px;
        height: 120px;
        align-self: flex-start;
    }

    /* Sul telefono il capitolo si stringe: con i bonus in colonna sotto
       le serate, 64px di stacco diventavano un buco di schermo. */
    .bonus {
        margin-top: var(--spacing-40);
    }

    .bonus__label {
        gap: var(--spacing-12);
        letter-spacing: 0.14em;
    }

    .bonus-card {
        padding: var(--spacing-24) var(--spacing-20) var(--spacing-20);
    }

    .bonus-card__medal {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    /* Striscia annuncio: resta su UNA riga sola anche sui telefoni.
       Niente a capo, e il corpo scala con la larghezza dello schermo
       (min() contro i 14px di base): gap e spaziatura lettere stretti
       per guadagnare i caratteri che servono alla riga intera. */
    .top-bar {
        padding-left: var(--spacing-12);
        padding-right: var(--spacing-12);
    }

    .top-bar:not(.top-bar--warn) .top-bar__line {
        flex-wrap: nowrap;
        white-space: nowrap;
        gap: 5px;
        letter-spacing: 0.01em;
        font-size: min(var(--text-body-sm), 2.4vw);
    }

    .top-bar:not(.top-bar--warn) .top-bar__main {
        gap: 5px;
    }

    /* La barra d'allarme della pagina grazie è corta: resta a 14px e
       il separatore, orfano a fine riga, sparisce come prima. */
    .top-bar--warn .top-bar__sep {
        display: none;
    }

    /* spazio per la barra CTA fissa */
    .footer {
        padding-bottom: var(--spacing-80);
    }
}

/* Da tablet in su la colonna del titolo si ferma a una misura sua.
   Senza, le righe chiave dovrebbero riempire tutta la pagina e il
   tetto --fit-max le bloccherebbe a metà strada: riempimento mancato e
   bordo destro sfilacciato. Con una misura dichiarata, invece, il
   calcolo arriva al bordo a ogni larghezza. */
@media (min-width: 768px) {
    .hero__title {
        max-width: 820px;
    }

    .hero__title-big {
        --fit-max: 128px;
    }

    .hero__sub-big {
        --fit-max: 72px;
    }
}

@media (min-width: 1024px) {
    .hero__split {
        gap: var(--spacing-48);
    }

    .bonus__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* intl-tel-input senza bandiere: il contenitore resta, ma deve smettere
   di riservare lo spazio dell'icona. */
.iti--separate-dial-code .iti__selected-flag {
    padding-left: var(--spacing-12);
    border-right: 1px solid var(--color-wire-gray);
}

.iti__selected-dial-code {
    font-family: var(--font-geistmono);
    font-size: var(--text-body-sm);
    color: var(--color-bone-white);
}

.iti__arrow {
    border-top-color: var(--color-mute-gray);
}

.iti__arrow--up {
    border-bottom-color: var(--color-mute-gray);
}