/* ═══════════════════════════════════════════════════════════════════════
   FUNNEL EVERGREEN · TEMA CHIARO — "Daylight aurora console"
   Variante di css/style.css per index-light.html.

   Si carica DOPO style.css e non lo tocca: stessi selettori, stessa
   specificità, vince l'ultimo. Qui dentro c'è solo quello che dipende
   dal fondo: layout, tipografia, scale, animazioni e logica [data-fit]
   restano quelle del tema scuro.

   Regola madre, ribaltata: canvas di carta, colore = aurora.
   · canvas  → Paper #f5f5f7, con gli aloni aurora che lo tingono
   · testo   → Ink #111115 (titoli, enfasi) / Graphite #3d3d45 (corpo).
               Niente grigio chiaro nel testo: su carta è il nero a
               portare la lettura, il grigio resta nei bordi.
   · bordi   → hairline 1px Wire #dcdce2, divisori in aurora
   · azione  → la stessa pill estrusa, faccia in aurora e testo Ink
   · colore  → l'aurora, portata giù di luminosità: i pastelli del tema
               scuro sul bianco sparivano. Le 5 fermate restano le
               stesse tinte (pesca → rosa → viola → menta → cielo), ma
               sature: su carta il colore deve pesare, non velare.

   Le tre cose che NON sono una semplice inversione:
   1 · l'estrusione dei titoli — nel tema scuro la lettera è bianca e il
       fianco scende nel viola; qui la faccia è nera e il fianco SALE
       verso la carta, o sotto un glifo nero non si vedrebbe niente;
   2 · gli aloni (orb, glow, aloni delle CTA) — un pastello al 15% su
       carta è niente: alzano saturazione e scendono di alpha;
   3 · il vetro della modale — da lastra fumé a lastra di cristallo:
       stesso impianto a quattro strati, superficie bianca traslucida.

   Struttura: stessa numerazione di style.css.
   ═══════════════════════════════════════════════════════════════════════ */


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

:root {
    /* I controlli nativi (scrollbar, autofill, date picker) seguono il
       tema: senza questo restano scuri in mezzo alla carta. */
    color-scheme: light;

    /* Colori — i ruoli non cambiano, cambiano i valori.
       --color-bone-white resta il token del "testo forte": qui è Ink.
       --color-nav-ink resta il token dell'"inchiostro sull'aurora"
       (testo della CTA, icone dentro le pastiglie piene): quello deve
       restare scuro in tutti e due i temi, o le pill si svuotano. */
    --color-bone-white: #111115;
    --color-off-white: #3d3d45;
    --color-mute-gray: #8b8b95;
    --color-wire-gray: #dcdce2;
    --color-smoke: #c8c8d0;
    --color-ash: #b4b4bf;
    --color-nav-ink: #16161a;
    --color-recess-black: #ffffff;
    --color-void-ink: #f5f5f7;
    --color-true-black: #ffffff;
    --color-console-charcoal: #ffffff;

    /* Le 5 fermate dell'aurora, portate sul bianco. Stesse tinte, un
       paio di gradini di luminosità in meno: queste si usano come
       colore di TESTO e di filo (occhiello, note, etichette serata,
       domande aperte, barre di stato), e lì il pastello del tema scuro
       dava un grigio colorato illeggibile. */
    --color-aurora-peach: #a9530f;
    --color-aurora-pink: #c2306e;
    --color-aurora-violet: #6d3ee0;
    --color-aurora-mint: #0f7a62;
    --color-aurora-sky: #2563c9;

    /* Lo spettro: è il chrome del sistema — facce delle pill, hairline
       fra le sezioni, barre, toggle. Tiene una via di mezzo fra i
       pastelli (sul bianco sparivano) e le fermate sature qui sopra
       (sotto l'inchiostro della CTA diventavano troppo buie): mid-tone
       pieni, con --color-nav-ink sopra che resta leggibile. */
    --gradient-aurora-spectrum: linear-gradient(to right, #f0a95f, #ef7aae, #9a7af0, #3fc2a7, #68a0f2);

    /* Le headline in aurora sono TESTO, e su carta devono stare al
       contrasto del testo: le stesse 6 fermate in diagonale del tema
       scuro, scese al livello delle fermate sature. */
    --gradient-aurora-headline: linear-gradient(100deg,
            #c2600f 0%,
            #cf2d73 19%,
            #6b35d6 41%,
            #0b7d63 63%,
            #1f5fd0 84%,
            #7c3fe0 100%);

    /* Superfici — la gerarchia del tema scuro, specchiata: il canvas è
       il tono più basso, le superfici salgono verso il bianco pieno.
       Recess è la carta delle card (serate, campi, liste), Nav Ink le
       bande che devono appena staccarsi dal canvas (striscia annuncio,
       footer, barra fissa, piastre bonus). */
    --surface-page-void: #f5f5f7;
    --surface-nav-ink: #fbfbfd;
    --surface-recess-black: #ffffff;
    --surface-console-charcoal: #ffffff;
    --surface-true-black: #ffffff;

    /* I bordi in gradiente vanno riscritti con le superfici chiare: il
       var() dentro una custom property si risolve dove la property è
       dichiarata, e queste in style.css sono dichiarate con i valori
       scuri. */
    --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;

    /* Il fianco della pill: resta il ramp viola — un solo colore tiene
       insieme una faccia che va dal pesca al cielo — ma parte più
       saturo. Sul nero i quattro gradini si leggevano per differenza di
       luce; sulla carta si leggono per differenza di tinta. */
    --btn-edge-1: #a98ed2;
    --btn-edge-2: #8b6cc0;
    --btn-edge-3: #6b4ca3;
    --btn-edge-4: #4a3277;

    /* ─── L'estrusione dei titoli, ribaltata ──────────────────────────
       Nel tema scuro la faccia è bianca e il fianco scende verso il
       nero: la lettera esce dal buio. Su carta quella rampa sarebbe
       invisibile — una lettera nera con sotto dei grigi scuri è solo
       una lettera sfocata. Qui la faccia è Ink e il fianco SALE: parte
       da un grigio-viola appena sotto il glifo e si schiarisce fino a
       sparire nella carta, come lo spessore di un carattere in rilievo
       visto in piena luce. L'ordine dei --title-edge-* resta quello: 1
       è il gradino attaccato alla lettera, 7 quello che appoggia a
       terra. Passo e numero di gradini non cambiano. */
    --title-edge-1: #4b4458;
    --title-edge-2: #6b6378;
    --title-edge-3: #8c8599;
    --title-edge-4: #aaa4b6;
    --title-edge-5: #c5c0ce;
    --title-edge-6: #dcd9e3;
    --title-edge-7: #edebf1;
    --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'unica ombra del sistema, su carta */
    --shadow-subtle: rgba(16, 16, 24, 0.08) 0px 1px 3px 0px, rgba(16, 16, 24, 0.06) 0px 1px 2px -1px;
}


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

/* La faccia dei titoli "bianchi": un ramp di inchiostro, chiaro in cima
   e pieno sul filo basso. Stessa curva del tema scuro — luce sopra,
   ombra propria al piede — solo che qui si muove dentro il nero. */
.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,
            #2b2b33 0%,
            #1e1e26 30%,
            #121218 72%,
            #06060b 100%);
}

/* Le frasi in evidenza tornano in aurora. In style.css il gruppo
   .aurora-text viene DOPO i titoli bianchi, e per questo
   .hero__title-big--em ("REGALERO' LA SUA / 100% GRATIS!") prende il
   gradiente invece del ramp. Qui sopra il ramp e' stato riscritto in
   inchiostro, e in coda al file vincerebbe su quel gruppo: la riga
   chiave dell'hero uscirebbe nera come le altre. L'ordine va rifatto
   anche qui. */
.aurora-text,
.title-em,
.hero__title-big--em,
.hero__sub-big,
.ty-alert__kw,
.ty-cal__num {
    background-image: var(--gradient-aurora-headline);
}

/* Il contatto a terra e l'alone: su carta un nero al 45% sotto ogni
   riga sarebbe fuliggine. Restano, ma come ombra di un oggetto appena
   sollevato dal foglio. */
.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.06em 0.07em rgba(24, 20, 44, 0.16)) drop-shadow(0 0.14em 0.4em rgba(24, 20, 44, 0.1));
}

/* Alla scala del display lo stacco si allunga e prende la sua nota di
   aurora, come nel tema scuro. */
.hero__title-big,
.hero__sub-big {
    filter: var(--title-extrude) drop-shadow(0 0.06em 0.07em rgba(24, 20, 44, 0.18)) drop-shadow(0 0.16em 0.44em rgba(24, 20, 44, 0.12)) drop-shadow(0 0.22em 0.6em rgba(109, 62, 224, 0.14));
}

/* La selezione: la fermata viola piena vuole testo bianco, non Ink */
::selection {
    background: var(--color-aurora-violet);
    color: #ffffff;
}


/* ═══ 03 · LAYOUT E DIVISORI ══════════════════════════════════════════ */

/* Le hairline fra le sezioni: lo spettro mid-tone su carta regge al
   55% come sul nero, ma di un filo più presente. */
.section+.section::before,
.ty-main::before,
.footer::before {
    opacity: 0.75;
}


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

/* Griglia blueprint: sul nero era un bianco a bassissima opacità, qui è
   inchiostro. Resta acromatica e resta texture. */
.grid-bg {
    background-image:
        linear-gradient(to right, rgba(16, 16, 24, 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 16, 24, 0.055) 1px, transparent 1px);
}

/* La macchina per guadagnare (canvas, js/hero-bg.js) è disegnata con
   l'aurora pastello a bassa opacità: nata per accendersi sul nero,
   sulla carta sarebbe un foglio bianco. Invece di duplicare il JS, il
   canvas viene ribaltato in composizione: invert() porta le hairline
   chiare a hairline scure tenendo l'alpha di ogni tratto, e
   hue-rotate(180deg) rimette a posto la tinta che l'inversione aveva
   girato — il disegno resta lo stesso, in negativo, nei colori
   dell'aurora. I pixel trasparenti restano trasparenti. */
.hero-machine {
    filter: invert(1) hue-rotate(180deg) saturate(1.25);
    opacity: 0.75;
}

@media (max-width: 767px) {
    .hero-machine {
        opacity: 0.45;
    }
}

/* Il velo sotto la colonna del testo: era nero, ora è carta. Serve allo
   stesso scopo — la macchina resta viva a destra, dietro al titolo si
   attenua. */
.hero::after {
    background: linear-gradient(to right, rgba(245, 245, 247, 0.78) 0%, rgba(245, 245, 247, 0.45) 45%, rgba(245, 245, 247, 0) 80%);
}

/* Aurora flottante: su carta un pastello al 15-20% non tinge niente.
   Stessa formula (la regola base di style.css legge questi due token),
   fermate più sature e nucleo più carico: gli aloni devono leggersi
   come colore steso sul foglio, non come una velatura. */
.page-aurora__orb--peach {
    --orb-rgb: 246, 168, 92;
    --orb-core: 0.26;
}

.page-aurora__orb--pink {
    --orb-rgb: 240, 130, 180;
    --orb-core: 0.22;
}

.page-aurora__orb--violet {
    --orb-rgb: 150, 115, 240;
    --orb-core: 0.2;
}

.page-aurora__orb--mint {
    --orb-rgb: 74, 202, 176;
    --orb-core: 0.2;
}

.page-aurora__orb--sky {
    --orb-rgb: 110, 165, 240;
    --orb-core: 0.2;
}


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

/* La banda è quasi bianca sul canvas: a staccarla ci pensano la
   hairline in aurora sotto (già nel sistema) e un filo d'ombra. */
.top-bar {
    box-shadow: 0 1px 2px rgba(16, 16, 24, 0.04);
}

/* Il pallino "in diretta": l'anello che gli sta attorno era un rosa
   pastello trasparente, qui prende la fermata satura. */
.live-dot {
    box-shadow: 0 0 0 3px rgba(194, 48, 110, 0.18);
}


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

/* Il riquadro del video: niente alone viola diffuso (su carta sarebbe
   una macchia), ma l'ombra portata di una lastra appoggiata al foglio. */
.vsl__frame {
    box-shadow:
        0 1px 2px rgba(16, 16, 24, 0.05),
        0 24px 56px -28px rgba(28, 22, 60, 0.35);
}

/* Il tasto play resta la pastiglia piena in aurora: l'alone rosa scende
   di opacità, o sulla carta bianca del placeholder fa aureola. */
.vsl__play {
    box-shadow: 0 10px 28px -10px rgba(194, 48, 110, 0.45);
}


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

/* La pill resta l'oggetto solido del sistema — faccia in aurora, lama
   di luce in cima, quattro gradini di fianco, contatto a terra, alone.
   Cambia solo quello che era tarato sul nero: l'ombra portata (un nero
   al 45% su carta è un buco) e l'alone colorato, che passa dal
   pastello alla fermata satura a bassa alpha. */
.btn--cta {
    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(40, 30, 70, 0.22),
        0 calc(var(--btn-depth) + 10px) 36px rgba(109, 62, 224, 0.2);
}

.btn--cta:hover,
.btn--cta:focus-visible {
    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(40, 30, 70, 0.26),
        0 calc(var(--btn-depth) + 14px) 48px rgba(194, 48, 110, 0.3);
}

.btn--cta:active {
    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(40, 30, 70, 0.22),
        0 4px 18px rgba(109, 62, 224, 0.18);
}

.btn--ghost:hover {
    box-shadow: 0 0 0 3px rgba(109, 62, 224, 0.14);
}

/* L'alone morbido dietro al blocco CTA: stesse tre sorgenti, tinte
   sature. Al 14% di pastello, su carta, non c'era niente. */
.cta-block::before {
    background:
        radial-gradient(50% 60% at 30% 40%, rgba(240, 150, 70, 0.18), transparent 70%),
        radial-gradient(50% 60% at 70% 40%, rgba(40, 180, 150, 0.16), transparent 70%),
        radial-gradient(40% 60% at 50% 40%, rgba(120, 80, 230, 0.16), transparent 70%);
}


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

/* L'alone aurora dietro la scena attiva: sulla carta lo stesso 60% di
   spettro mid-tone pesa di più, e la scena è opaca — di questo layer si
   vede solo quello che sborda. Un filo meno. */
.check-card--media.is-active::before {
    opacity: 0.45;
}

/* La scena appoggia sul foglio: hairline chiara e un'ombra corta. */
.check-card__media {
    box-shadow: 0 1px 2px rgba(16, 16, 24, 0.05), 0 16px 32px -26px rgba(16, 16, 24, 0.4);
}

/* Il cerchio del check era bianco osso con il segno scuro: ribaltato, o
   diventerebbe inchiostro su inchiostro (--color-bone-white qui è Ink). */
.check-card__ico {
    background: var(--color-nav-ink);
    color: #ffffff;
}


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

/* La piastra: superficie di carta bianca, smusso chiaro sul filo alto,
   barra di stato in aurora sul fianco e ombra portata. Le facce
   (--n-face-*) arrivano dalle fermate sature dei token, quindi barra,
   etichetta e sottolineatura si aggiornano da sole: qui si riscrivono
   solo l'alone (--n-glow, che era un pastello al 45%) e la velatura di
   superficie (--n-tint, che sul bianco non si vedeva). */
.night {
    --n-glow: rgba(224, 126, 36, 0.3);
    --n-tint: rgba(246, 168, 92, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(16, 16, 24, 0.04),
        inset 12px 0 22px -18px var(--n-glow),
        0 1px 2px rgba(16, 16, 24, 0.04),
        0 20px 44px -34px rgba(16, 16, 24, 0.5);
}

/* Il reticolo inciso: da bianco a bassa opacità a inchiostro */
.night::before {
    background-image:
        linear-gradient(to right, rgba(16, 16, 24, 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 16, 24, 0.055) 1px, transparent 1px);
}

.night:not(.night--star):hover {
    border-color: var(--color-ash);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(16, 16, 24, 0.04),
        inset 16px 0 28px -18px var(--n-glow),
        0 2px 4px rgba(16, 16, 24, 0.05),
        0 28px 56px -34px rgba(16, 16, 24, 0.55),
        0 0 42px -22px var(--n-glow);
}

.night:nth-child(2) {
    --n-glow: rgba(214, 56, 124, 0.28);
    --n-tint: rgba(240, 130, 180, 0.1);
}

.night:nth-child(3) {
    --n-glow: rgba(123, 72, 232, 0.28);
    --n-tint: rgba(150, 115, 240, 0.1);
}

.night:nth-child(4) {
    --n-glow: rgba(23, 150, 122, 0.28);
    --n-tint: rgba(74, 202, 176, 0.1);
}

/* L'oggetto 3D della serata: la sua ombra portata sulla sagoma era
   tarata su una piastra nera. Su carta si alleggerisce, o il PNG
   sembra incollato su una macchia. */
.night__ico img {
    filter: drop-shadow(0 14px 16px rgba(16, 16, 24, 0.2));
}

.night:hover .night__ico img {
    filter: drop-shadow(0 22px 24px rgba(16, 16, 24, 0.24));
}

/* L'alone sotto l'icona: su carta lo stesso 55% con una tinta satura
   diventa una macchia. Scende, e con lui il passo del hover. */
.night__ico::before {
    opacity: 0.4;
}

.night:hover .night__ico::before {
    opacity: 0.7;
}

/* La serata chiave: il bordo in aurora resta il segnale, l'alone viola
   scende di alpha e prende l'ombra portata della carta. */
.night--star {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 44px -6px rgba(109, 62, 224, 0.14),
        0 1px 2px rgba(16, 16, 24, 0.04),
        0 20px 44px -34px rgba(16, 16, 24, 0.5);
}

.night--star:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 64px -4px rgba(109, 62, 224, 0.2),
        0 2px 4px rgba(16, 16, 24, 0.05),
        0 28px 56px -34px rgba(16, 16, 24, 0.55);
}

/* La frase chiave della card: l'alone del text-shadow su carta sporca
   le lettere invece di accenderle. Resta la sottolineatura in aurora,
   che è il legame col gettone. */
.night__key {
    text-shadow: none;
}


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

/* Le piastre bonus: un gradino sotto le serate anche su carta
   (superficie Nav Ink, qui #fbfbfd), barra in aurora in testa. */
.bonus-card {
    --b-glow: rgba(23, 150, 122, 0.28);
    --b-tint: rgba(74, 202, 176, 0.09);
    box-shadow:
        inset 0 -1px 0 rgba(16, 16, 24, 0.04),
        inset 0 16px 28px -24px var(--b-glow),
        0 1px 2px rgba(16, 16, 24, 0.04),
        0 20px 44px -34px rgba(16, 16, 24, 0.5);
}

.bonus-card::before {
    background-image:
        linear-gradient(to right, rgba(16, 16, 24, 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 16, 24, 0.055) 1px, transparent 1px);
}

.bonus-card:hover {
    border-color: var(--color-ash);
    box-shadow:
        inset 0 -1px 0 rgba(16, 16, 24, 0.04),
        inset 0 22px 34px -24px var(--b-glow),
        0 2px 4px rgba(16, 16, 24, 0.05),
        0 28px 56px -34px rgba(16, 16, 24, 0.55),
        0 0 42px -22px var(--b-glow);
}

.bonus-card:nth-child(2) {
    --b-glow: rgba(37, 99, 201, 0.26);
    --b-tint: rgba(110, 165, 240, 0.09);
}

/* Il medaglione: disco di carta col filo in aurora. Lo smusso bianco
   del tema scuro qui non serve — la faccia è già bianca — e l'ombra
   scende al peso della carta. */
.bonus-card__medal {
    background:
        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:
        0 0 20px -8px var(--b-glow),
        0 8px 16px -12px rgba(16, 16, 24, 0.4);
}

.bonus-card:hover .bonus-card__medal {
    box-shadow:
        0 0 28px -6px var(--b-glow),
        0 12px 20px -12px rgba(16, 16, 24, 0.45);
}


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

/* Il vetro, da fumé a cristallo. Restano i quattro strati del tema
   scuro — fondo sfocato, lastra, bordo in aurora, lama di luce — ma la
   superficie è bianca traslucida: sotto si vede la pagina chiara fuori
   fuoco, e il form sopra resta leggibile. */
.modal__backdrop {
    background:
        radial-gradient(130% 90% at 50% -10%, rgba(109, 62, 224, 0.12), transparent 62%),
        rgba(240, 240, 246, 0.6);
}

.modal__dialog {
    background:
        radial-gradient(120% 70% at 12% 0%, rgba(109, 62, 224, 0.12), transparent 58%),
        radial-gradient(100% 60% at 92% 104%, rgba(194, 48, 110, 0.1), transparent 60%),
        linear-gradient(152deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.7) 34%,
            rgba(255, 255, 255, 0.66) 64%,
            rgba(255, 255, 255, 0.84) 100%),
        rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(16, 16, 24, 0.05),
        inset 0 0 80px rgba(109, 62, 224, 0.04),
        0 28px 64px -24px rgba(24, 18, 48, 0.28),
        0 0 100px rgba(109, 62, 224, 0.1);
}

.modal__dialog::before {
    opacity: 0.8;
}

/* La lama di luce sul cristallo: sulla lastra bianca un bianco al 16%
   non si vede. Lavora al contrario — un velo di luce più pieno in cima
   che si spegne a metà altezza. */
.modal__dialog::after {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.18) 26%,
            rgba(255, 255, 255, 0) 48%);
}

/* Senza backdrop-filter si torna alle superfici piene del sistema */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal__backdrop {
        background: rgba(236, 236, 242, 0.94);
    }

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

.signup--modal {
    scrollbar-color: rgba(16, 16, 24, 0.22) transparent;
}

.signup--modal::-webkit-scrollbar-thumb {
    background: rgba(16, 16, 24, 0.22);
}

/* La pastiglia di chiusura: stessa materia della lastra, in negativo */
.modal__close {
    background: rgba(16, 16, 24, 0.05);
    border: 1px solid rgba(16, 16, 24, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.modal__close:hover {
    background: rgba(194, 48, 110, 0.1);
    border-color: var(--color-aurora-pink);
    color: var(--color-aurora-pink);
}

/* Campi fuori dalla modale: l'incavo su carta è un bianco pieno dentro
   un filo chiaro, e il fuoco accende il bordo in aurora. */
.field__box:focus-within {
    box-shadow: 0 0 0 3px rgba(109, 62, 224, 0.14);
}

/* Il placeholder non può stare al colore del corpo: lì dentro
   leggerebbe come testo già scritto. */
.field input::placeholder {
    color: var(--color-mute-gray);
}

/* Dentro la lastra i campi sono un incavo nel cristallo: bianco pieno,
   filo d'inchiostro a bassa alpha, un velo d'ombra in testa. */
.signup--modal .field__box {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(16, 16, 24, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 2px 8px rgba(16, 16, 24, 0.05);
}

.signup--modal .field__box:focus-within {
    background: #ffffff;
    border-color: var(--color-aurora-violet);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 3px rgba(109, 62, 224, 0.16),
        0 0 24px -6px rgba(109, 62, 224, 0.3);
}

/* intl-tel-input: la tendina dei paesi è una superficie del sistema */
.iti__country.iti__highlight {
    background: #f1f1f5;
}

.iti__country-list {
    box-shadow: 0 18px 40px -24px rgba(16, 16, 24, 0.35);
}

.iti__dial-code {
    color: var(--color-mute-gray);
}


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

/* La barra fissa è quasi bianca come il canvas: a staccarla dal
   contenuto che le scorre sotto ci vuole un'ombra, non solo il filo in
   aurora che già c'è. */
.sticky-cta {
    box-shadow: 0 -10px 28px -18px rgba(16, 16, 24, 0.4);
}


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

/* Il blocco vale solo se si porta questo tema anche su grazie.html:
   il numero del passo è una pastiglia piena in aurora e, con le
   fermate sature, l'inchiostro sopra non si leggerebbe più. */
.ty-step__n {
    color: #ffffff;
}

.ty-step:nth-child(2) .ty-step__n,
.ty-step:nth-child(3) .ty-step__n,
.ty-step:nth-child(4) .ty-step__n {
    color: #ffffff;
}

.btn--wa {
    color: #ffffff;
    box-shadow: var(--shadow-subtle), 0 10px 28px -12px rgba(15, 122, 98, 0.45);
}

.btn--wa:hover {
    box-shadow: var(--shadow-subtle), 0 14px 34px -12px rgba(15, 122, 98, 0.55);
}

.ty-media {
    box-shadow: 0 1px 2px rgba(16, 16, 24, 0.05), 0 16px 32px -26px rgba(16, 16, 24, 0.4);
}