/* ==========================================================================
   SUBITO RENDITA DIGITALE — Sales Page Q3 2026
   Foglio di stile unico, mobile-first.

   IDENTITÀ
   La pagina appartiene al funnel Q3 2026 Subito: stessi token, stesso font
   e stessa regola dei colori della landing opt-in.

     · ROSSO SUBITO   marchio, titoli, fasce, urgenza, countdown
     · BLU NOTTE      testo forte, titoli medi
     · VERDE WHATSAPP l'UNICO colore cliccabile della pagina

   Quest'ultima è la regola che tiene su tutto: se una cosa è verde si
   clicca, se è rossa si legge. Non si introducono altri colori d'azione.

   Niente gradienti sui testi e sui bottoni: la landing opt-in li ha già
   dismessi in favore di tinte piatte, e le due pagine devono somigliarsi.

   RITMO
   Le sezioni si alternano bianco → grigio chiaro → fascia rossa, così una
   sales molto lunga resta leggibile. Su mobile le sezioni tintate vanno da
   bordo a bordo (margin negativo pari al padding del container).

   INDICE
   01. Token
   02. Reset e base
   03. Scala tipografica
   04. Layout: container, sezioni, fasce
   05. Top bar e countdown
   06. Hero
   07. VSL
   08. CTA
   09. Card: feature, deliverable, garanzie
   10. Long-form: blocchi di testo e respiri
   11. Checklist e riga di esclusione
   12. FAQ
   13. Placeholder tecnici (mockup, VSL)
   14. Sezioni prove (predisposte, nascoste)
   15. Modale e form candidatura
   16. Barra CTA fissa su mobile
   17. Footer
   18. Microanimazioni
   19. Breakpoint tablet e desktop
   ========================================================================== */


/* ── 01. TOKEN ─────────────────────────────────────────────────────────── */
:root {

    /* Rampa del rosso Subito — stessa tinta, tre luminosità.
       Servono tutte e tre: con il solo #F5333F il testo piccolo non
       sarebbe leggibile a norma su fondo chiaro.
         #F5333F  marchio, titoli grandi, fasce      → 3,9:1 su bianco (ok testo grande)
         #D42430  bordi, stati premuti               → 5,1:1
         #C81E28  testo rosso piccolo su fondo chiaro → 5,7:1 */
    --red: #F5333F;
    --red-dark: #D42430;
    --red-ink: #C81E28;
    --red-soft: #FFF1F2;
    --red-line: #F8CDD0;

    /* Verde WhatsApp — colore delle azioni.
         #25D366  alone e microaccenti (troppo chiaro per il testo bianco)
         #12A150  faccia del bottone → 3,4:1 col bianco (ok testo grande)
         #0B7A3B  bordo inferiore e stati premuti → 5,4:1 */
    --wa: #12A150;
    --wa-hi: #16B25B;
    --wa-edge: #0B7A3B;
    --wa-deep: #075E2D;
    --wa-glow: 37, 211, 102;
    /* Le due tinte tenui del verde, gemelle di --red-soft e --red-line.
       Servono ai blocchi che devono leggersi come positivi senza per
       questo sembrare cliccabili: niente ombra verde, niente rilievo. */
    --wa-soft: #F0FBF4;
    --wa-line: #BFE8CE;

    /* Blu notte e neutri */
    --ink: #16192C;
    --ink-soft: #2A2E45;
    --body: #334155;
    --muted: #64748B;
    /* Per i testi piccoli: #64748B sul fondo pagina si ferma a 4,47:1,
       appena sotto il minimo. Questo arriva a 5,5:1. */
    --muted-ink: #5B6577;
    --line: #E3E6EC;
    --tint: #EFF1F6;
    --tint-2: #E9EBF0;
    --white: #FFFFFF;

    /* Fondo pagina: off-white, come sulla landing opt-in. Serve al ritmo:
       le card bianche si staccano invece di sparire nel fondo. */
    --page: #FAFAFC;

    /* Giallo — solo come piccolo accento: marker sulle parole chiave */
    --gold: #FFD43B;
    --gold-soft: #FFF3C4;

    /* Raggi */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 9999px;

    /* Ombre */
    --sh-1: 0 4px 20px rgba(15, 16, 32, .05);
    --sh-2: 0 8px 30px rgba(15, 16, 32, .09);
    --sh-3: 0 14px 44px rgba(15, 16, 32, .14);
    --sh-cta: 0 10px 26px rgba(11, 122, 59, .30), 0 2px 6px rgba(7, 94, 45, .22);
    --sh-cta-hi: 0 16px 38px rgba(11, 122, 59, .40), 0 3px 8px rgba(7, 94, 45, .26);

    /* Layout — stessa larghezza di contenuto della landing opt-in */
    --w: 800px;
    --pad-x: 16px;

    /* Altezza reale della top bar: la misura js/main.js e la riscrive qui.
       Serve allo scroll-margin delle ancore, perché la barra è sticky e
       altrimenti coprirebbe il titolo di destinazione. */
    --topbar-h: 56px;

    /* Transizioni */
    --t-fast: .15s cubic-bezier(.4, 0, .2, 1);
    --t: .28s cubic-bezier(.4, 0, .2, 1);
}


/* ── 02. RESET E BASE ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* `clip`, non `hidden`: `overflow-x: hidden` forza overflow-y a `auto`
       e trasforma la radice in un contenitore di scorrimento, il che
       ANNULLA position:sticky sulla top bar. `clip` taglia allo stesso
       modo un eventuale sbordo laterale senza creare quel contenitore. */
    overflow-x: clip;
}

body {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Helvetica, Arial, sans-serif;
    /* Gli stessi 19,2px della landing opt-in a 390, 20,5px a 1440. */
    font-size: clamp(1.2rem, 4.93vw, 1.28rem);
    line-height: 1.68;
    color: var(--body);
    background: var(--page);
    /* Come su html: `clip` e non `hidden`, per non spezzare lo sticky. */
    overflow-x: clip;
    /* Evita che iOS ingrandisca il testo ruotando il telefono */
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

strong,
b {
    font-weight: 800;
    color: var(--ink);
}

/* Elementi nascosti: [hidden] deve vincere su qualsiasi display impostato
   più sotto, altrimenti le sezioni prove resterebbero visibili. */
[hidden] {
    display: none !important;
}

/* Testo riservato ai lettori di schermo */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Anello di focus visibile e coerente ovunque */
:focus-visible {
    outline: 3px solid var(--wa);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ── 03. SCALA TIPOGRAFICA ─────────────────────────────────────────────── */
/* Cinque gradini, corrispondenti ai corpi usati nel DOCX ufficiale:
     68 → .display        nome del programma, una volta sola
     40 → .claim          headline della hero
     38 → .section-title  titoli di sezione, in rosso
     32/30 → .section-sub sottotitoli narrativi, in blu notte
     26 → .card-title     titoli delle card
     24 → body */

.display {
    font-size: clamp(3.05rem, 12.5vw, 4.6rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.035em;
    color: var(--red);
    text-align: center;
    text-wrap: balance;
}

.claim {
    font-size: clamp(1.6rem, 6.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--ink);
    text-align: center;
    text-wrap: balance;
}

.claim-sub {
    font-size: clamp(1.3rem, 5.3vw, 1.6rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--body);
    text-align: center;
    text-wrap: pretty;
}

.section-title {
    font-size: clamp(2.55rem, 10.5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--red);
    text-align: center;
    text-wrap: balance;
}

/* Variante per i titoli molto lunghi (oltre una decina di parole):
   stesso trattamento, un gradino più piccolo, altrimenti su mobile
   si prendono mezzo schermo. */
.section-title--long {
    font-size: clamp(1.95rem, 8vw, 2.75rem);
    line-height: 1.12;
}

.section-sub {
    font-size: clamp(1.73rem, 7.1vw, 2.48rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--ink);
    text-align: center;
    text-wrap: balance;
}

.section-sub--long {
    font-size: clamp(1.4rem, 5.75vw, 1.88rem);
    line-height: 1.2;
}

.card-title {
    font-size: clamp(1.31rem, 5.36vw, 1.55rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--red-ink);
    text-transform: uppercase;
}

/* Il logo Subito usato come parola dentro a un titolo o a una riga di testo.
   Il reset rende ogni img display:block: senza inline-block il logo si
   prenderebbe una riga tutta sua spezzando la frase. L'altezza è in em,
   così segue il corpo del testo che lo contiene. */
.inline-logo {
    display: inline-block;
    height: .78em;
    width: auto;
    /* Il tracciato del marchio riempie tutta l'altezza del viewBox, quindi
       va abbassato per sedersi sulla linea di base del testo che lo
       contiene invece di galleggiarci sopra. */
    vertical-align: -.14em;
    /* Il marchio non deve mai finire spezzato dal ritorno a capo */
    margin-right: .06em;
}

.claim .inline-logo,
.claim-sub .inline-logo,
.callout .inline-logo,
.text-block .inline-logo {
    height: .92em;
    vertical-align: -.18em;
}

.display .inline-logo {
    height: .8em;
    vertical-align: -.1em;
    margin-right: .12em;
}

/* Evidenziatore giallo sulle parole chiave. Il gradiente qui è voluto:
   simula un tratto di evidenziatore che copre solo la metà bassa. */
.mark {
    background: linear-gradient(180deg, transparent 58%, var(--gold-soft) 58%);
    padding: 0 .12em;
    font-weight: 800;
    color: var(--ink);
}

/* Numeri e cifre dentro al testo corrente */
.num {
    color: var(--red-ink);
    font-weight: 800;
}

/* ── Emoji del DOCX come icone ──────────────────────────────────────────
   Il documento ufficiale usa delle emoji come segnabullet: 📚 🎁 🚀 🎓 💬
   sui deliverable, 🛡️ sulle garanzie, ✅ e ❌ nella sezione "è adatto a te".
   Fanno parte del testo consegnato, quindi restano: vengono solo isolate
   in uno span e trattate come icone, invece di essere lasciate a filo del
   testo come in un documento Word.
   Dove il DOCX NON ha un'emoji (le card di S3) l'icona è disegnata in CSS.
   ────────────────────────────────────────────────────────────────────── */
.card-ico {
    display: inline-block;
    margin-right: .45em;
    font-size: 1.15em;
    line-height: 1;
    vertical-align: -.08em;
    /* Le emoji non devono ereditare il colore né lo spessore del titolo */
    font-weight: 400;
    -webkit-text-fill-color: initial;
}

.li-ico {
    flex: 0 0 auto;
    font-size: 1.4rem;
    line-height: 1.3;
}


/* ── 04. LAYOUT: CONTAINER, SEZIONI, FASCE ─────────────────────────────── */
.container {
    width: 100%;
    /* --w e' la larghezza del CONTENUTO, non della scatola: il padding va
       aggiunto fuori. Cosi' la misura di riga coincide con quella della
       landing opt-in e le due pagine si leggono allo stesso modo. */
    max-width: calc(var(--w) + var(--pad-x) * 2);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

.section {
    padding: 34px 0;
}

.section--tight {
    padding: 24px 0;
}

/* Le ancore non devono finire sotto la top bar sticky */
.section,
[id] {
    scroll-margin-top: calc(var(--topbar-h) + 12px);
}

/* Fascia grigio chiaro. Su mobile esce dal container e va da bordo a bordo:
   il margin negativo annulla esattamente il padding orizzontale. */
.section--tint {
    background: var(--tint);
    margin: 26px calc(var(--pad-x) * -1);
    padding: 30px var(--pad-x);
}

/* Fascia rossa piena — usata per i momenti di svolta del racconto.
   Il fondo è --red-dark, non --red: dentro la fascia ci sono paragrafi di
   testo corrente, e il bianco sul rosso di marchio si ferma a 3,9:1, sotto
   il minimo per il testo normale. Con --red-dark si arriva a 5,1:1.
   Il rosso pieno resta dov'è leggibile: titoli grandi, countdown, filetti. */
.section--red {
    background: var(--red-dark);
    color: var(--white);
    margin: 26px calc(var(--pad-x) * -1);
    padding: 30px var(--pad-x);
}

/* Quando la fascia rossa è la prima cosa della sezione non serve anche
   il margine superiore: la sezione ha già il suo padding. */
.section--red-open {
    margin-top: 0;
}

.section--red .section-title,
.section--red .section-sub,
.section--red strong,
.section--red b,
.section--red .num {
    color: var(--white);
}

.section--red .mark {
    background: linear-gradient(180deg, transparent 58%, rgba(255, 212, 59, .45) 58%);
    color: var(--white);
}

/* Filetto divisore: un tratto rosso corto e centrato, non una linea piena.
   Separa i blocchi senza pesare come una fascia. */
.rule {
    width: 68px;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--red);
    margin: 18px auto;
}

.rule--sm {
    width: 40px;
    height: 3px;
    margin: 13px auto;
}

.section--red .rule {
    background: rgba(255, 255, 255, .55);
}

/* Occhiello sopra i titoli: etichetta piccola, maiuscola, rossa */
.eyebrow {
    display: block;
    font-size: clamp(.92rem, 3.78vw, 1.05rem);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--red-ink);
    text-align: center;
    margin-bottom: 10px;
}

.section--red .eyebrow {
    color: var(--white);
}

/* Pila di intestazione: occhiello + titolo + sottotitolo, con le distanze
   già calibrate. Evita di ripetere i margini su ogni sezione. */
.head {
    margin-bottom: 20px;
}

.head > * + * {
    margin-top: 12px;
}


/* ── 05. TOP BAR E COUNTDOWN ───────────────────────────────────────────── */
/* Sticky: su una pagina lunga come questa la scadenza deve restare in
   vista. Su mobile la riga dell'offerta va sopra e il countdown sotto;
   da tablet in su stanno affiancati. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    /* Rossa come la fascia evento della landing opt-in: e' la firma del
       funnel. --red-dark e non --red perche' la riga dell'offerta e' testo
       piccolo e sul rosso pieno non arriverebbe a contrasto. */
    background: var(--red-dark);
    color: var(--white);
    padding: 8px var(--pad-x);
    box-shadow: 0 2px 14px rgba(15, 16, 32, .22);
}

/* Una riga sola a qualsiasi larghezza: l'offerta a sinistra, il conto
   alla rovescia a destra. Prima su mobile erano incolonnati e la barra
   si prendeva 91px di schermo. */
.topbar__inner {
    max-width: var(--w);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px;
}

.topbar__label {
    /* min-width:0 serve o il testo non si lascia stringere e spinge fuori
       il countdown. */
    flex: 0 1 auto;
    min-width: 0;
    font-size: clamp(.7rem, 2.7vw, .86rem);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.22;
    /* Bianco pieno: a 0,62rem su fondo rosso il rosato non arrivava a
       contrasto (4,27:1 contro i 4,5:1 richiesti per il testo piccolo). */
    color: var(--white);
}

/* La data e' la parte che conta, ma il colore non e' il modo giusto per
   staccarla: l'oro su rosso si ferma a 3,6:1, sotto la soglia per un testo
   di questa taglia. Si distingue col peso, restando bianca. */
.topbar__label strong {
    color: var(--white);
    font-weight: 900;
}

/* Pallino rosso pulsante: segnala che l'offerta è viva adesso */
.topbar__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    /* Bianco: da quando la barra e' rossa, un pallino rosso non si vedrebbe */
    background: var(--white);
    margin-right: 6px;
    vertical-align: middle;
    animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    50%      { opacity: .65; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

.countdown {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.countdown__block {
    background: var(--ink);
    border-radius: 8px;
    padding: 4px 4px;
    min-width: 31px;
    text-align: center;
    line-height: 1;
}

.countdown__num {
    display: block;
    font-size: clamp(.98rem, 4vw, 1.24rem);
    font-weight: 900;
    color: var(--white);
    /* Cifre a larghezza fissa: senza questo i secondi fanno "ballare"
       la barra a ogni tick. */
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.countdown__label {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--white);
    margin-top: 3px;
}

/* Stato "offerta scaduta": il countdown sparisce e resta la sola riga */
.topbar--expired .countdown {
    display: none;
}


/* ── 06. HERO ──────────────────────────────────────────────────────────── */
.hero {
    padding: 26px 0 8px;
    text-align: center;
}

.hero .display {
    margin-bottom: 14px;
}

.hero .claim {
    margin-bottom: 14px;
}

.hero .claim-sub {
    max-width: 620px;
    margin: 0 auto;
}

/* Riga "Clicca su Play": invito diretto sopra al video */
.hero__play-cue {
    font-size: clamp(1.25rem, 5.13vw, 1.4rem);
    font-weight: 800;
    color: var(--ink);
    margin-top: 24px;
    margin-bottom: 12px;
}

.hero__play-cue::before {
    content: '▶';
    color: var(--red);
    margin-right: 8px;
    font-size: .85em;
}


/* ── 07. VSL ───────────────────────────────────────────────────────────── */
/* Il frame tiene il rapporto 16:9 da CSS. Quando il video verrà collegato
   entra dentro uno spazio che esiste già: nessun salto di layout. */
.vsl {
    margin: 0 auto 26px;
    max-width: 720px;
}

.vsl__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ink);
    box-shadow: var(--sh-3);
}

.vsl__frame > iframe,
.vsl__frame > div,
.vsl__frame > img,
.vsl__frame > button,
.vsl__frame > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Copertina della VSL ────────────────────────────────────────────────
   `contain` e non `cover`: la copertina porta testo fino ai bordi e non
   va mai ritagliata. Il riquadro è già 16:9 come il file, quindi in
   pratica riempie tutto senza bande; `contain` è la rete di sicurezza se
   un domani arrivasse un file con proporzioni leggermente diverse.
   Angoli e ombra restano quelli del riquadro, che ha overflow: hidden. */
.vsl__cover {
    object-fit: contain;
    /* Se mai avanzasse un filo ai lati, è dello stesso blu del riquadro */
    background: var(--ink);
}

/* Coperchio cliccabile: compare solo quando il player è configurato.
   È volutamente trasparente e senza icona — il pulsante play è già
   disegnato dentro la copertina e non va raddoppiato. */
.vsl__facade {
    background: transparent;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.vsl__facade:focus-visible {
    outline: 3px solid var(--wa);
    outline-offset: -5px;
    border-radius: var(--r-lg);
}


/* ── 08. CTA ───────────────────────────────────────────────────────────── */
/* Il blocco completo è: bottone → "SOLO 30 POSTI" → nota sullo sconto.
   È l'ordine del DOCX e si ripete identico in tutta la pagina. */
.cta-block {
    text-align: center;
    padding: 22px 0;
}

/* Il bottone è l'unico elemento della pagina che si può premere: il
   rilievo è quello che lo dice. Niente gradienti (l'opt-in li ha
   dismessi): la profondità viene da un filo di luce interno in alto, dal
   bordo scuro in basso e da due ombre sovrapposte. */
.btn-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: var(--wa);
    color: var(--white);
    font-family: inherit;
        /* A 390px il tetto è 18,9px: sopra, l'etichetta va a capo e il bottone
       diventa alto il doppio. Su desktop può crescere fino a 27px. */
    font-size: clamp(1.18rem, 4.8vw, 1.7rem);
    font-weight: 900;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: clamp(19px, 4.6vw, 26px) 20px;
    border: none;
    border-bottom: 6px solid var(--wa-edge);
    border-radius: var(--r-pill);
    cursor: pointer;
    box-shadow: var(--sh-cta), inset 0 1px 0 rgba(255, 255, 255, .26);
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                background-color var(--t-fast), border-color var(--t-fast);
    -webkit-tap-highlight-color: transparent;
    /* Il testo non deve mai andare a tre righe: a 320px "INVIA LA TUA"
       e "CANDIDATURA" stanno su due righe e basta. */
    text-wrap: balance;
    /* Un solo respiro dell'alone ogni 6 secondi: si fa notare senza
       diventare un lampeggiante. */
    animation: cta-breathe 6s ease-in-out infinite;
}

/* Freccia disegnata in CSS e non scritta nel testo: l'etichetta del
   bottone resta esattamente quella del documento ufficiale. */
.btn-cta::after {
    content: '';
    flex: 0 0 auto;
    width: .74em;
    height: .74em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--t-fast);
    animation: cta-arrow 6s ease-in-out infinite;
}

/* Hover solo dove esiste davvero un puntatore: sul telefono l'hover
   resta "appiccicato" dopo il tap. */
@media (hover: hover) and (pointer: fine) {
    .btn-cta:hover {
        background: var(--wa-hi);
        border-bottom-color: var(--wa-deep);
        transform: translateY(-2px);
        box-shadow: var(--sh-cta-hi), inset 0 1px 0 rgba(255, 255, 255, .3);
    }

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

/* Pressione: il bottone scende verso la sua ombra. Solo transform, così
   non muove di un pixel il resto della pagina. */
.btn-cta:active {
    background: #0E8E46;
    transform: translateY(4px);
    box-shadow: 0 2px 8px rgba(11, 122, 59, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
    animation: none;
}

.btn-cta:active::after {
    animation: none;
    transform: none;
}

/* Variante per la prima e l'ultima CTA: stesso movimento, ciclo più corto */
.btn-cta--pulse {
    animation-duration: 4s;
}

.btn-cta--pulse::after {
    animation-duration: 4s;
}

@keyframes cta-breathe {
    0%, 86%, 100% {
        box-shadow: var(--sh-cta), inset 0 1px 0 rgba(255, 255, 255, .26),
                    0 0 0 0 rgba(var(--wa-glow), .45);
    }
    93% {
        box-shadow: var(--sh-cta), inset 0 1px 0 rgba(255, 255, 255, .26),
                    0 0 0 13px rgba(var(--wa-glow), 0);
    }
}

@keyframes cta-arrow {
    0%, 84%, 100% { transform: translateX(0); }
    91%           { transform: translateX(4px); }
}

/* ── "SOLO 30 POSTI DISPONIBILI" ────────────────────────────────────────
   Era una riga di testo rosso persa tra il bottone e la nota dello
   sconto. È l'unico elemento di scarsità della pagina: diventa un badge
   pieno, staccato dal resto, che si legge in un colpo d'occhio.
   Fondo --red-dark e non --red: il bianco sul rosso di marchio non
   arriva a contrasto su un testo di questa taglia. */
.cta-block__spots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    max-width: 100%;
    margin-top: 18px;
    padding: 10px 20px 10px 16px;
    background: var(--red-dark);
    color: var(--white);
    border-radius: var(--r-pill);
        font-size: clamp(1.1rem, 4.5vw, 1.25rem);
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: left;
    box-shadow: 0 6px 18px rgba(212, 36, 48, .28);
}

.spots__ico {
    flex: 0 0 auto;
    display: block;
    width: 1.15em;
    height: 1.15em;
}

.spots__ico svg {
    width: 100%;
    height: 100%;
}

.cta-block__note {
    font-size: clamp(1.02rem, 4.2vw, 1.12rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--muted-ink);
    margin-top: 12px;
    max-width: 540px;
    margin-inline: auto;
    text-wrap: pretty;
}

/* Dentro una fascia rossa il badge si inverte: fondo bianco, testo rosso.
   Il verde del bottone invece resta verde, perché è l'azione. */
.section--red .cta-block__spots {
    background: var(--white);
    color: var(--red-ink);
    box-shadow: 0 6px 18px rgba(15, 16, 32, .18);
}

.section--red .cta-block__note {
    color: rgba(255, 255, 255, .94);
}

/* Dentro una fascia grigia la nota va un gradino più scura per il contrasto */
.section--tint .cta-block__note {
    color: #545E70;
}


/* ── 09. CARD: FEATURE, DELIVERABLE, GARANZIE ──────────────────────────── */
/* Base comune alle tre famiglie di card: fondo bianco, bordo sottile,
   angolo arrotondato. Cambiano solo l'accento e la disposizione. */
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 20px;
    box-shadow: var(--sh-1);
}

.card__body > * + * {
    margin-top: 10px;
}

.card__body p {
    font-size: clamp(1.39rem, 5.7vw, 1.52rem);
    line-height: 1.6;
    color: var(--body);
}

/* — 09a. Feature card (S3: i 6 motivi) ——————————————————————————————
   Titolo rosso maiuscolo, spunta a sinistra, corpo sotto. Una colonna su
   mobile, due da tablet in su. */
.feature-grid {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.feature-card .card-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

/* Foto della card. Apre la card, sopra al titolo rosso, e le appartiene:
   stesso angolo arrotondato della famiglia, nessuna ombra propria, niente
   margini laterali. Il file è già 8:5 come il riquadro, quindi `cover` non
   ritaglia nulla — è lì come rete di sicurezza se un domani arrivasse un
   asset con proporzioni leggermente diverse.
   L'aspect-ratio dichiarato qui tiene lo spazio prima che l'immagine
   arrivi: con sei foto in lazy loading, senza non si guarderebbe la
   pagina saltare. */
.feature-card__shot {
    margin: 0 0 15px;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--tint);
}

.feature-card__shot img {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

.feature-card .card-title::before {
    content: '';
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6 10 17.5 19.2 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* — 09b. Deliverable card (S8: cosa comprende) ——————————————————————
   Testo lungo: sempre a piena larghezza, mai in griglia a due colonne.
   Numero grande sullo sfondo per dare sequenza. */
.deliverable-list {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.deliverable {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 5px solid var(--red);
    border-radius: var(--r-lg);
    padding: 22px 20px;
    box-shadow: var(--sh-1);
    overflow: hidden;
}

/* Numero grande in filigrana nell'angolo. Sta dietro al testo, ma il
   titolo gli lascia comunque spazio con un padding a destra: sovrapposto
   a due righe di maiuscole diventerebbe illeggibile anche al 7% di
   opacità. Il `top` positivo evita che overflow:hidden tagli la cifra. */
.deliverable__num {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 36px;
    padding: 0 12px;
    border-radius: 0 0 0 14px;
    background: var(--red);
    color: var(--white);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.deliverable .card-title,
.guarantee .card-title {
    display: block;
    margin-bottom: 13px;
    position: relative;
    padding-right: 0;
}

/* L'emoji del documento diventa una pastiglia, su una riga sua sopra al
   titolo: stesso segno, ma smette di sembrare un elenco puntato di Word.
   Di fianco al titolo gli rubava metà larghezza. */
.deliverable .card-ico,
.guarantee .card-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 0 12px;
    border-radius: 13px;
    background: var(--red-soft);
    font-size: 1.35rem;
    line-height: 1;
}

.deliverable__body > * + * {
    margin-top: 10px;
}

.deliverable__body p {
    font-size: clamp(1.39rem, 5.7vw, 1.52rem);
    line-height: 1.6;
    position: relative;
}

/* — 09c. Garanzia (S9) ————————————————————————————————————————————
   Riquadro col fondo appena rosato e il bordo rosso: si distingue dalle
   card normali senza urlare. */
.guarantee-list {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.guarantee {
    background: var(--red-soft);
    border: 2px solid var(--red-line);
    border-radius: var(--r-lg);
    padding: 24px 20px;
}

.guarantee .card-title {
    margin-bottom: 12px;
    color: var(--red-ink);
}

.guarantee__body > * + * {
    margin-top: 10px;
}

.guarantee__body p {
    font-size: clamp(1.39rem, 5.7vw, 1.52rem);
    line-height: 1.6;
    color: var(--ink-soft);
}


/* ── 10. LONG-FORM: BLOCCHI DI TESTO E RESPIRI ─────────────────────────── */
/* La sezione narrativa è la parte più lunga della pagina: un centinaio di
   paragrafi brevi, uno per riga. Restano allineati a sinistra e con molto
   interlinea, altrimenti diventano illeggibili. */
.text-block {
    /* Con un corpo da 22,7px una colonna da 640px lascia righe troppo
       corte: la misura di riga sale insieme al carattere. */
    max-width: 690px;
    margin: 0 auto;
}

.text-block p {
    font-size: clamp(1.42rem, 5.83vw, 1.48rem);
    line-height: 1.68;
    color: var(--body);
}

.text-block p + p {
    margin-top: 18px;
}

/* Riga di stacco: più grande, in blu notte. Serve a spezzare il muro di
   testo nei punti in cui il copy alza la voce. */
.text-block .lead {
    font-size: clamp(1.57rem, 6.45vw, 1.88rem);
    font-weight: 800;
    line-height: 1.34;
    color: var(--ink);
    margin-top: 22px;
}

.text-block .lead + p {
    margin-top: 14px;
}

/* Riga isolata e centrata: il copy la usa come "colpo di scena" */
.text-block .beat {
    font-size: clamp(1.49rem, 6.1vw, 1.8rem);
    font-weight: 900;
    line-height: 1.3;
    color: var(--red-ink);
    text-align: center;
    margin: 22px auto;
    max-width: 560px;
}

.section--red .text-block p {
    color: var(--white);
}

.section--red .text-block .lead,
.section--red .text-block .beat {
    color: var(--white);
}

/* Elenco delle 5 caratteristiche e simili: numeri rossi allineati */
.ol-plain {
    list-style: none;
    counter-reset: n;
    max-width: 640px;
    margin: 20px auto 0;
    display: grid;
    gap: 12px;
}

.ol-plain li {
    counter-increment: n;
    position: relative;
    padding-left: 46px;
    font-size: clamp(1.29rem, 5.3vw, 1.5rem);
    line-height: 1.6;
}

.ol-plain li::before {
    content: counter(n);
    position: absolute;
    left: 0;
    top: -1px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
    font-size: .95rem;
    font-weight: 900;
}

/* Elenco dei "Per…" (S7) e degli "SENZA…" (S6): trattino rosso, niente
   pallini. Il copy è già in forma di elenco, la grafica lo asseconda. */
.list-dash {
    list-style: none;
    max-width: 680px;
    margin: 20px auto 0;
    display: grid;
    gap: 11px;
}

.list-dash li {
    position: relative;
    padding-left: 30px;
    font-size: clamp(1.29rem, 5.3vw, 1.5rem);
    line-height: 1.5;
}

.list-dash li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--red);
}

/* Immagine di sezione: respiro visivo dentro al long-form. */
.section-shot {
    margin: 24px auto;
    max-width: 620px;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-2);
    background: var(--tint);
}

.section-shot img {
    width: 100%;
    display: block;
}

.section-shot--wide {
    max-width: 100%;
}

/* ── 10bis. COMPONENTI DI RITMO DEL LONG-FORM ─────────────────────────── */
/* Tre blocchi visuali che spezzano la parte narrativa senza toccare una
   parola del copy. Ognuno riassume un concetto GIA' scritto nei paragrafi
   che lo circondano: il testo originale resta sempre in pagina, sopra o
   sotto. Non aggiungono promesse, non aggiungono dati.

   Sono volutamente TRE soli, riusati sempre uguali: con un layout diverso
   a ogni paragrafo la pagina sembrerebbe un carnevale invece di una sales
   premium. */


/* — 10bis-a. SPEC · le 5 caratteristiche ————————————————————————
   Nella prima versione erano quattro righe di elenco puntato dentro una
   fascia grigia. Adesso sono card vere: numero, icona, titolo breve e una
   riga di spiegazione. La quinta sta da sola e ha un trattamento diverso,
   perché nel copy è quella su cui gira tutto il ragionamento.
   Su mobile la card è orizzontale (icona a sinistra, testo a destra): in
   due colonne il microtesto starebbe su nove righe. */
.spec-grid {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 24px auto 0;
    max-width: 700px;
}

.spec {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 15px;
    align-items: start;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    box-shadow: var(--sh-1);
}

.spec__head {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.spec__num {
    font-size: 1.14rem;
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1;
    color: var(--red-ink);
    font-variant-numeric: tabular-nums;
}

.spec__ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--red-soft);
    color: var(--red-ink);
}

.spec__ico svg {
    width: 23px;
    height: 23px;
}

.spec__title {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(1.22rem, 5vw, 1.4rem);
    font-weight: 900;
    line-height: 1.24;
    letter-spacing: -.01em;
    color: var(--ink);
}

.spec__text {
    grid-column: 2;
    grid-row: 2;
    margin-top: 7px;
    font-size: clamp(1.19rem, 4.9vw, 1.32rem);
    line-height: 1.45;
    color: var(--body);
}

/* La quinta: fondo blu notte, come il pannello premium della landing
   opt-in. Si stacca sia dalle altre quattro sia dalle fasce rosse. */
.spec-grid--solo {
    max-width: 700px;
}

.spec--key {
    background: var(--ink);
    border-color: var(--ink);
    padding: 22px 20px 24px;
    box-shadow: var(--sh-3);
}

.spec--key .spec__num {
    color: #FF7A82;
}

.spec--key .spec__ico {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: rgba(245, 51, 63, .2);
    color: #FF8A91;
}

.spec--key .spec__ico svg {
    width: 27px;
    height: 27px;
}

.spec--key .spec__title {
    color: var(--white);
    font-size: clamp(1.46rem, 6vw, 1.8rem);
    line-height: 1.2;
}

.spec--key .spec__text {
    color: #C7CBDC;
    font-size: clamp(1.27rem, 5.2vw, 1.4rem);
    line-height: 1.5;
}

/* Come per .exclusion: su fondo blu notte il grassetto va schiarito, non
   scurito. Senza questa riga un <strong> prenderebbe il colore di default
   (--ink) e sparirebbe dentro lo sfondo, che è lo stesso colore. */
.spec--key strong,
.spec--key b {
    color: var(--white);
}


/* — 10bis-b. FLOW · lo schema di TuttoSubito ——————————————————————
   Il copy spiega a parole cosa succede quando qualcuno compra: qui
   diventa un diagramma in quattro passaggi, disegnato in HTML/CSS/SVG.
   Nessuna fotografia: è un meccanismo, non una scena. */
.flow {
    list-style: none;
    display: grid;
    gap: 30px;
    margin: 28px auto;
    max-width: 540px;
}

.flow__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--red);
    border-radius: var(--r-md);
    padding: 16px 18px;
    box-shadow: var(--sh-1);
}

.flow__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--red-soft);
    color: var(--red-ink);
}

.flow__ico svg {
    width: 24px;
    height: 24px;
}

.flow__n {
    display: block;
    font-size: .88rem;
    font-weight: 900;
    letter-spacing: .16em;
    color: var(--red-ink);
    font-variant-numeric: tabular-nums;
}

.flow__title {
    display: block;
    margin-top: 2px;
    font-size: clamp(1.22rem, 5vw, 1.4rem);
    font-weight: 900;
    line-height: 1.24;
    color: var(--ink);
}

.flow__text {
    display: block;
    margin-top: 6px;
    font-size: clamp(1.19rem, 4.9vw, 1.32rem);
    line-height: 1.45;
    color: var(--body);
}

/* Freccia fra un passaggio e il successivo, disegnata dentro al gap */
.flow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -27px;
    transform: translateX(-50%);
    width: 19px;
    height: 19px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5333F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M5.5 12.5 12 19l6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* L'ultimo passaggio è l'incasso: chiude il giro e va marcato */
.flow__step--end {
    background: var(--red-soft);
    border-color: var(--red-line);
    border-left-color: var(--red);
}

.flow__step--end .flow__ico {
    background: var(--red);
    color: var(--white);
}

.flow__step--end .flow__title {
    color: var(--red-ink);
}


/* — 10bis-c. STAT · i numeri di mercato ——————————————————————————
   Cifra grande e spiegazione breve. Tutte le cifre sono già scritte nel
   copy e nessuna è stata modificata: qui vengono tirate fuori dal
   paragrafo perché si vedano.
   Su mobile la card è una riga — cifra a sinistra, frase a destra —
   perché tre card centrate in colonna diventerebbero mezzo schermo di
   aria. Da tablet in su tornano tre colonne centrate. */
.stat-grid {
    display: grid;
    gap: 10px;
    margin: 24px auto 0;
    max-width: 700px;
}

.stat {
    display: grid;
    grid-template-columns: 98px 1fr;
    column-gap: 16px;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    box-shadow: var(--sh-1);
    text-align: left;
}

.stat__num {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(2.2rem, 9vw, 2.9rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}

.stat__unit {
    margin-top: 5px;
    font-size: .44em;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--red-ink);
}

.stat__label {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(1.18rem, 4.85vw, 1.3rem);
    line-height: 1.42;
    color: var(--body);
}

/* Chi pubblica il dato: è l'argomento stesso del copy ("non sono numeri
   miei"), quindi la fonte va mostrata — ma solo dove c'è una prova che la
   sostiene. Sopra ogni griglia sta lo screenshot della pagina che pubblica
   quei dati, e l'etichetta non fa che ripetere quella fonte.
   Dove la prova manca, l'etichetta non va messa: promettere una verifica
   che il lettore non può fare vale meno del silenzio. È il motivo per cui
   le card "66 miliardi" e "7 milioni all'ora" non ne hanno una. */
.stat__src {
    grid-column: 2;
    grid-row: 2;
    margin-top: 9px;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted-ink);
}


/* — 10bis-d. CALLOUT · la frase che vale da sola ————————————————
   Non è un titolo: è una riga del copy tirata fuori dal paragrafo. Serve
   dove il testo alza la voce e la pagina ha bisogno di un appiglio. */
.callout {
    max-width: 700px;
    margin: 26px auto;
    padding: 24px 24px 24px 28px;
    background: var(--white);
    border: 1px solid var(--red-line);
    border-left: 6px solid var(--red);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
        font-size: clamp(1.5rem, 6.15vw, 1.85rem);
    font-weight: 900;
    line-height: 1.26;
    letter-spacing: -.015em;
    color: var(--ink);
    text-wrap: balance;
}

.section--red .callout {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .32);
    border-left-color: var(--white);
    color: var(--white);
    box-shadow: none;
}


/* — 10bis-e. SHIFT · prima → adesso ————————————————————————————
   Le due colonne sono il titolo della sezione spacchettato: a sinistra
   com'era, a destra com'è. Solo parole già presenti nel copy. */
.shift {
    display: grid;
    gap: 12px;
    margin: 24px auto;
    max-width: 680px;
}

.shift__side {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--white);
    padding: 18px 18px 20px;
    box-shadow: var(--sh-1);
}

.shift__side--past {
    background: var(--tint);
    border-color: var(--tint-2);
    box-shadow: none;
}

/* ADESSO è il lato positivo del confronto: il rosso lì dentro leggeva
   come allarme mentre il copy dice sollievo. Verde, ma piatto — la tinta
   è tenue e l'ombra resta quella comune a tutte le card della pagina
   (--sh-1), non l'alone verde del bottone: deve dire "questa è la cosa
   buona", non "cliccami". */
.shift__side--now {
    background: var(--wa-soft);
    border-color: var(--wa-line);
}

.shift__label {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.shift__side--past .shift__label {
    background: #D5DAE3;
    color: #454F61;
}

/* Verde scuro, non --wa: l'etichetta è di 15,2px e il bianco su #12A150
   si fermerebbe a 3,4:1. Su --wa-edge arriva a 5,4:1. */
.shift__side--now .shift__label {
    background: var(--wa-edge);
    color: var(--white);
}

.shift__list {
    list-style: none;
    display: grid;
    gap: 10px;
}

.shift__list li {
    position: relative;
    padding-left: 26px;
    font-size: clamp(1.22rem, 5vw, 1.34rem);
    font-weight: 700;
    line-height: 1.3;
}

.shift__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .42em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.shift__side--past .shift__list li {
    color: #545E70;
}

.shift__side--past .shift__list li::before {
    background: #B4BCCA;
}

.shift__side--now .shift__list li {
    color: var(--ink);
}

.shift__side--now .shift__list li::before {
    background: var(--wa);
}

/* La freccia porta da PRIMA ad ADESSO: prende il colore della sua
   destinazione. Le frecce dello schema TuttoSubito restano rosse: lì
   non c'è nessun "prima e dopo", è una sequenza sola. */
.shift__arrow {
    justify-self: center;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312A150' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M5.5 12.5 12 19l6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* — 10bis-f. SLOT IMMAGINE ——————————————————————————————————————
   Riquadri predisposti per gli asset della Sales Subito che devono ancora
   essere prodotti. Restano nascosti finché il file non viene indicato in
   js/config.js → sectionImages: online non compare nessun buco. */
/* `contain` per tutti: questi slot ospitano mockup, interfacce, schemi e
   documenti — roba che perde senso se la si taglia. Il riquadro tiene le
   proporzioni dichiarate in data-ratio, l'immagine ci entra intera e il
   grigio del contenitore riempie quello che avanza. Vale anche per i file
   che arriveranno domani con proporzioni diverse: nessuno dovrà tornare
   qui a cambiare la regola. */
.section-shot[data-shot] img {
    aspect-ratio: var(--shot-ratio, 16 / 9);
    object-fit: contain;
}

/* — 10bis-g. IMMAGINE DEL DELIVERABLE ——————————————————————————————
   Un riquadro per ognuno dei cinque, fra il titolo e il testo.

   L'immagine tiene le SUE proporzioni: `aspect-ratio: auto` più i
   width/height veri dichiarati nel config. Prima qui c'era un riquadro
   16/10 fisso con `contain`: non tagliava, ma i mockup definitivi sono
   quadrati (1254x1254) e dentro un 16/10 avrebbero occupato il 62% della
   larghezza, con due bande grigie ai lati e l'immagine rimpicciolita di
   un terzo. Meglio nessuna banda che una banda grande.

   Così vale per qualsiasi proporzione arrivi domani: l'immagine si vede
   intera, alla sua taglia piena, senza tagli e senza deformazioni, e
   nessuno deve tornare qui a cambiare la regola. Il ritmo della sezione
   resta uniforme finché i cinque file condividono un formato — oggi lo
   condividono. */
.deliverable .section-shot--deliverable {
    margin: 0 0 16px;
    max-width: none;
    border-radius: var(--r-md);
    background: var(--tint);
    box-shadow: none;
}

.section-shot--deliverable[data-shot] img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    border-radius: var(--r-md);
}


/* — 10bis-g-bis. MOCKUP DELL'OFFERTA ——————————————————————————————
   Apre S8 subito dopo il titolo «Cosa comprende?»: mostra tutto l'insieme
   prima che il testo lo smonti nei cinque pezzi. È l'unico punto della
   pagina in cui compare.

   Stesso principio dei deliverable — rapporto naturale, nessun taglio —
   ma a piena larghezza della colonna invece dei 620px di default: dentro
   ci sono cinque riquadri numerati con testo piccolo, e a 620px le
   etichette diventerebbero illeggibili. */
.section-shot--offer {
    max-width: 100%;
    background: transparent;
}

.section-shot--offer[data-shot] img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
}


/* — 10bis-h. PROVE DELLE FONTI ————————————————————————————————————
   Screenshot delle pagine che pubblicano i dati citati dal copy. Devono
   leggersi come documentazione a corredo del testo, non come immagini
   promozionali: nessuna ombra marcata, nessun angolo vistoso, nessuna
   animazione propria. Il bordo sottile e il fondo tenue dicono
   "ritaglio di schermo", che è esattamente quello che sono.

   Uno screenshot ritagliato non prova più niente — basta perdere il
   dominio, la testata o il dato. Quindi niente aspect-ratio imposto e
   niente `cover`: l'immagine tiene le SUE proporzioni, dichiarate dagli
   attributi width/height, e si vede per intero.

   Impilate anche da desktop. Affiancate non reggono: la colonna di
   testo è 720px, due immagini in fila starebbero a 352px l'una, e il
   corpo del testo dentro lo screenshot scenderebbe sotto i 7px. Una
   prova che non si riesce a leggere non è una prova. */
.section-shot--proof {
    display: grid;
    gap: 10px;
    max-width: 720px;
    margin-inline: auto;
    /* Il contenitore sparisce: niente fondo tintato, niente ombra e
       niente angolo suoi. Lo stacco lo danno le singole schermate, che
       hanno il loro bordo. Così due prove impilate non sembrano un unico
       riquadro grafico. */
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.section-shot--proof[data-shot] img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
}

/* Didascalia: dice solo da dove viene la pagina. Piccola e grigia di
   proposito — è una nota a piè di immagine, non un titolo. */
.section-shot__src {
    margin-top: 2px;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--muted-ink);
    text-align: center;
    text-wrap: pretty;
}


/* ── 11. CHECKLIST E RIGA DI ESCLUSIONE ────────────────────────────────── */
/* S10: sette righe con la spunta e una riga finale di esclusione.
   Il DOCX tratta quest'ultima in modo diverso (unico paragrafo non in
   grassetto, e centrato): qui diventa un blocco a sé, non l'ottava voce. */
.checklist {
    list-style: none;
    display: grid;
    gap: 12px;
    max-width: 660px;
    margin: 24px auto 0;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 20px;
    font-size: clamp(1.29rem, 5.3vw, 1.5rem);
    line-height: 1.45;
    box-shadow: var(--sh-1);
}

/* Nessuna icona in ::before qui: la spunta ✅ arriva dal testo del DOCX
   ed è resa da .li-ico. Aggiungerne una seconda in CSS la duplicherebbe. */

.exclusion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 660px;
    margin: 20px auto 0;
    background: var(--ink);
    color: #E6E8F0;
    border-radius: var(--r-md);
    padding: 22px 20px;
    font-size: clamp(1.29rem, 5.3vw, 1.5rem);
    line-height: 1.45;
}

/* Come sopra: la ❌ è testo del DOCX, resa da .li-ico. */
.exclusion strong,
.exclusion b {
    color: var(--white);
}


/* ── 12. FAQ ───────────────────────────────────────────────────────────── */
.faq {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.faq details {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.faq details[open] {
    border-color: var(--red-line);
    box-shadow: var(--sh-2);
}

.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
        padding: 19px 18px;
    font-size: clamp(1.34rem, 5.5vw, 1.52rem);
    font-weight: 800;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

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

/* Il "+" che diventa "−". Due tratti sovrapposti: quello verticale
   ruota e sparisce all'apertura. */
.faq summary::after {
    content: '';
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C81E28' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E") center / 14px no-repeat;
    transition: transform var(--t), background-color var(--t-fast);
}

.faq details[open] summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    background-color: var(--red);
    transform: rotate(180deg);
}

.faq__answer {
    padding: 0 18px 20px;
    font-size: clamp(1.32rem, 5.4vw, 1.45rem);
    line-height: 1.6;
    color: var(--body);
}


/* ── 13. PLACEHOLDER TECNICI ───────────────────────────────────────────── */
/* Riquadri neutri che tengono lo spazio degli asset non ancora forniti.
   Non sono decorazioni: sono segnaposto dichiarati, con le proporzioni
   dell'asset definitivo, così quando l'immagine arriva non c'è salto di
   layout. Il tratteggio e il grigio li rendono riconoscibili come
   "lavori in corso" anche a colpo d'occhio in staging. */
.placeholder {
    display: grid;
    /* align-content, non place-items: le due righe devono stare vicine e
       al centro del riquadro. Con place-items da solo, su un frame 16:9
       alto si allontanano fino ai bordi. */
    align-content: center;
    justify-items: center;
    gap: 8px;
    background:
        repeating-linear-gradient(-45deg,
            var(--tint) 0 12px,
            var(--tint-2) 12px 24px);
    border: 2px dashed #C3C8D4;
    border-radius: var(--r-lg);
    color: var(--muted);
    text-align: center;
    padding: 22px 18px;
}

.placeholder__label {
    font-size: clamp(.97rem, 4vw, 1.05rem);
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5B6577;
}

.placeholder__hint {
    font-size: clamp(.96rem, 3.9vw, 1.02rem);
    line-height: 1.5;
    max-width: 380px;
    color: #5F6879;
}

/* Mockup del prodotto: 3 occorrenze in pagina (S3, S7, S12).
   Il rapporto viene da config.mockup.ratio e lo scrive js/main.js. */
.mockup {
    margin: 26px auto;
    max-width: 620px;
}

.mockup__slot {
    aspect-ratio: var(--mockup-ratio, 16 / 9);
    width: 100%;
}

.mockup img {
    width: 100%;
    border-radius: var(--r-lg);
}

/* Placeholder della VSL: riempie il frame 16:9 già dimensionato */
.vsl .placeholder {
    position: absolute;
    inset: 0;
    border: none;
    border-radius: 0;
    background:
        repeating-linear-gradient(-45deg,
            #22263D 0 14px,
            #1B1F33 14px 28px);
    color: #9098AE;
}

.vsl .placeholder__label {
    color: #B9C0D2;
}

.vsl .placeholder__hint {
    color: #838BA1;
}


/* ── 14. SEZIONI PROVE (PREDISPOSTE, NASCOSTE) ─────────────────────────── */
/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  DUE SEZIONI PRONTE MA SPENTE                                        ║
   ║                                                                      ║
   ║  Il DOCX prevede gli screenshot dei risultati economici in due       ║
   ║  punti (S2 e S5). Gli screenshot autentici Subito.it non sono        ║
   ║  ancora stati forniti, e quelli esistenti in altri progetti          ║
   ║  (ROAS / Vinted) NON vanno usati: non riguardano Subito.it.          ║
   ║                                                                      ║
   ║  Le sezioni esistono nel markup con l'attributo hidden. CSS e        ║
   ║  slider sono completi e collaudati. Per accenderle basta             ║
   ║  compilare `proofs` in js/config.js: nessuna modifica a HTML o CSS.  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.proofs {
    text-align: center;
}

/* Il binario scorre in loop. Le immagini vengono duplicate da JS, quindi
   l'animazione può scorrere di metà larghezza e ripartire senza stacco. */
.proofs__viewport {
    overflow: hidden;
    position: relative;
    margin: 24px calc(var(--pad-x) * -1) 0;
    /* Le maschere laterali sfumano le immagini ai bordi invece di
       tagliarle di netto. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.proofs__track {
    display: flex;
    gap: 12px;
    width: max-content;
    padding: 0 var(--pad-x);
}

.proofs__track img {
    height: 320px;
    width: auto;
    border-radius: var(--r-md);
    flex-shrink: 0;
    box-shadow: var(--sh-2);
}

.proofs__track--a {
    animation: proof-scroll-left 42s linear infinite;
}

.proofs__track--b {
    animation: proof-scroll-right 42s linear infinite;
    margin-top: 12px;
}

@keyframes proof-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes proof-scroll-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Fermare lo scorrimento al passaggio del mouse: le prove vanno lette */
.proofs__viewport:hover .proofs__track {
    animation-play-state: paused;
}


/* ── 15. MODALE E FORM CANDIDATURA ─────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(22, 25, 44, .72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: fade-in .2s ease;
}

.modal__dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: var(--r-xl);
    padding: 30px 22px 24px;
    box-shadow: 0 25px 70px rgba(22, 25, 44, .4);
    animation: slide-up .26s ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--tint);
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.modal__close:hover {
    background: var(--tint-2);
    color: var(--ink);
}

.modal__title {
    font-size: clamp(1.5rem, 6.2vw, 1.85rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--ink);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-right: 28px;
}

.modal__sub {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--muted);
    text-align: center;
    margin-bottom: 22px;
}

.modal__sub strong {
    color: var(--red-ink);
}

.field + .field {
    margin-top: 14px;
}

.field label {
    display: block;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.field input {
    width: 100%;
    padding: 13px 15px;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
        background: #FAFBFD;
    font-size: 1.16rem;
    font-weight: 600;
    color: var(--ink);
    outline: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}

.field input::placeholder {
    color: #A2A9B8;
    font-weight: 500;
}

.field input:focus {
    border-color: var(--wa);
    background: var(--white);
}

.field input[aria-invalid="true"] {
    border-color: var(--red);
    background: var(--red-soft);
}

.field__row {
    display: flex;
    gap: 8px;
}

.field__row select {
    flex: 0 0 auto;
    width: 104px;
    padding: 13px 6px;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    background: #FAFBFD;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    outline: none;
    cursor: pointer;
    transition: border-color var(--t-fast);
}

.field__row select:focus {
    border-color: var(--wa);
}

.field__row input {
    flex: 1 1 auto;
    min-width: 0;
}

.field__error {
    display: none;
    font-size: .92rem;
    font-weight: 700;
    color: var(--red-ink);
    margin-top: 5px;
}

.field__error.is-visible {
    display: block;
}

.modal .btn-cta {
    margin-top: 20px;
    font-size: clamp(1.18rem, 4.8vw, 1.45rem);
    padding: 17px 14px;
}

.modal__privacy {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
    margin-top: 14px;
}

/* Messaggio di conferma che sostituisce il form dopo l'invio */
.form-done {
    text-align: center;
    padding: 12px 0;
}

.form-done__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--wa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6 10 17.5 19.2 7'/%3E%3C/svg%3E") center / 28px no-repeat;
}

.form-done__title {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 6px;
}

.form-done__text {
    font-size: 1.16rem;
    line-height: 1.55;
    color: var(--body);
}

body.is-modal-open {
    overflow: hidden;
}


/* ── 16. BARRA CTA FISSA SU MOBILE ─────────────────────────────────────── */
/* Compare superata la hero. Su una pagina di questa lunghezza è quello che
   tiene l'azione sempre a portata di pollice. Da desktop non serve: le CTA
   nel corpo sono già frequenti. */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    padding: 10px var(--pad-x) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform var(--t);
}

.sticky-cta.is-visible {
    transform: translateY(0);
}

/* Stessa faccia del bottone nel corpo pagina — bordo scuro, luce interna,
   freccia, pressione al tap — solo più compatta. L'alone pulsante invece
   qui è spento: una barra sempre presente che pulsa diventa fastidiosa. */
.sticky-cta .btn-cta {
    padding: 14px 12px;
    font-size: clamp(1.17rem, 5.25vw, 1.45rem);
    letter-spacing: -.005em;
    gap: .45em;
    border-bottom-width: 4px;
    animation: none;
}

.sticky-cta .btn-cta::after {
    animation: none;
}

.sticky-cta .btn-cta:active {
    transform: translateY(3px);
}


/* ── 17. FOOTER ────────────────────────────────────────────────────────── */
.footer {
    background: var(--ink);
    color: #A7AEC2;
    padding: 34px var(--pad-x) 40px;
    margin-top: 40px;
    text-align: center;
}

.footer__inner {
    max-width: var(--w);
    margin: 0 auto;
}

/* Il logo Subito nel piede è stato tolto: la landing opt-in non ce l'ha
   e qui non serviva a niente. Restano copyright, link legali e la nota di
   non affiliazione. */

.footer__legal {
    font-size: 1.06rem;
    font-weight: 700;
    color: #C3C9D9;
}

.footer__legal a {
    display: inline-block;
    padding: 4px 2px;
    color: #C3C9D9;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer__legal a:hover {
    color: var(--white);
}

/* Link legale non ancora configurato: resta leggibile ma non cliccabile,
   così non porta a una 404. */
.footer__legal a[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    text-decoration-style: dotted;
}

.footer__disclaimer {
    font-size: .96rem;
    line-height: 1.6;
    color: #8891A8;
    max-width: 560px;
    margin: 14px auto 0;
}


/* ── 18. MICROANIMAZIONI ───────────────────────────────────────────────── */
/* Ingresso morbido dei blocchi. Si attiva solo con JS disponibile
   (html.js): senza JS i contenuti restano visibili e fermi. */
.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}

.js .reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Chi ha chiesto meno movimento non deve subire nessuna animazione:
   né i reveal, né lo slider delle prove, né l'alone della CTA. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}


/* ── 19. BREAKPOINT TABLET E DESKTOP ───────────────────────────────────── */

/* — Telefoni molto stretti (320px) ————————————————————————————————— */
@media (max-width: 359px) {
    :root {
        --pad-x: 14px;
    }

            .countdown__block {
        min-width: 28px;
        padding: 4px 2px;
    }

    .countdown {
        gap: 3px;
    }

    .topbar__inner {
        gap: 8px;
    }

    .deliverable__num {
        min-width: 40px;
        height: 32px;
        font-size: 1rem;
    }

    /* Sotto i 360px l'etichetta del bottone sta su una riga sola solo
       senza la freccia. Il corpo non si abbassa: sotto i 18,66px il
       bianco sul verde uscirebbe dal contrasto minimo. */
    .sticky-cta .btn-cta {
        padding: 14px 8px;
    }

    .sticky-cta .btn-cta::after {
        display: none;
    }

    .field__row select {
        width: 92px;
    }

    .proofs__track img {
        height: 260px;
    }

    .spec {
        padding: 14px 14px;
        column-gap: 12px;
    }

    .spec__ico {
        width: 38px;
        height: 38px;
    }

    .flow__step {
        padding: 14px 14px;
        gap: 11px;
    }

    .stat {
        padding: 14px 12px;
        column-gap: 12px;
        grid-template-columns: 84px 1fr;
    }

    .cta-block__spots {
        padding: 9px 15px 9px 13px;
        letter-spacing: .03em;
    }
}


/* — Da tablet in su ————————————————————————————————————————————— */
@media (min-width: 768px) {
    :root {
        --pad-x: 24px;
    }

    body {
        font-size: 1.2rem;
    }

    .section {
        padding: 48px 0;
    }

    .section--tight {
        padding: 34px 0;
    }

    /* Le fasce tornano dentro al container e prendono l'angolo arrotondato:
       da qui in su non serve più andare da bordo a bordo. */
    .section--tint,
    .section--red {
        margin: 36px 0;
        padding: 42px 40px;
        border-radius: var(--r-xl);
    }

    .hero {
        padding: 40px 0 12px;
    }

    /* La top bar mette offerta e countdown sulla stessa riga */
    .topbar {
        padding: 10px var(--pad-x);
    }

        .topbar__inner {
        justify-content: space-between;
        gap: 20px;
    }

        .topbar__label {
        font-size: .92rem;
        /* Niente spaziatura fra le lettere: sono gli ultimi pixel che
           servono a tenere l'offerta su una riga sola a 800px di colonna. */
        letter-spacing: 0;
    }

        /* Il countdown resta compatto anche qui: a 768px di schermo la riga
       dell'offerta ha bisogno di tutta la larghezza che avanza per stare
       su una riga sola. Cresce solo da 1024 in su. */
    .countdown__label {
        font-size: .6rem;
    }

    /* Le feature card passano a due colonne: sono brevi e reggono bene */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* Le garanzie stanno affiancate: sono due e si leggono come coppia */
    .guarantee-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* Da qui in su le card dei numeri tornano verticali e centrate: c'è
       larghezza per leggerle come un cruscotto. */
    .stat-grid--3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .stat {
        grid-template-columns: 1fr;
        padding: 24px 18px;
        text-align: center;
    }

    .stat__num {
        grid-row: auto;
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        gap: .2em;
    }

    .stat__unit {
        margin-top: 0;
    }

    .stat__label {
        grid-column: auto;
        grid-row: auto;
        margin-top: 12px;
    }

    .stat__src {
        grid-column: auto;
        grid-row: auto;
        margin-top: 14px;
        padding-top: 11px;
        border-top: 1px solid var(--line);
    }

    /* Le prime quattro caratteristiche stanno affiancate a due a due */
    .spec-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .spec {
        padding: 20px 22px;
    }

    .spec-grid--solo {
        grid-template-columns: 1fr;
    }

    .spec--key {
        padding: 28px 28px 30px;
    }

    .flow {
        max-width: 560px;
    }

    /* Prima e adesso vanno affiancati: il confronto si legge in orizzontale */
    .shift {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 16px;
    }

    .shift__side {
        height: 100%;
    }

    .shift__arrow {
        transform: rotate(-90deg);
    }

    .callout {
        padding: 28px 30px 28px 32px;
    }

    /* I deliverable restano a piena larghezza anche qui: hanno troppo
       testo per due colonne. */
    .deliverable {
        padding: 28px 26px;
    }

    .deliverable__num {
        min-width: 52px;
        height: 42px;
        font-size: 1.24rem;
        border-radius: 0 var(--r-lg) 0 16px;
    }

    .card {
        padding: 26px 24px;
    }

    .cta-block {
        padding: 32px 0;
    }

    .proofs__viewport {
        margin-inline: 0;
        border-radius: var(--r-lg);
    }

    .proofs__track {
        padding: 0;
    }

    .proofs__track img {
        height: 420px;
    }

    .faq summary {
        padding: 18px 22px;
    }

    .faq__answer {
        padding: 0 22px 20px;
    }

    /* Da tablet in su la barra fissa non serve */
    .sticky-cta {
        display: none;
    }

    .modal__dialog {
        padding: 36px 32px 28px;
    }
}


/* — Desktop ——————————————————————————————————————————————————————— */
@media (min-width: 1024px) {
    .countdown {
        gap: 6px;
    }

    .countdown__block {
        min-width: 50px;
        padding: 5px 9px;
    }

    .countdown__num {
        font-size: 1.3rem;
    }

    .countdown__label {
        font-size: .62rem;
    }

    .section {
        padding: 58px 0;
    }

    .hero {
        padding: 52px 0 16px;
    }

    .section--tint,
    .section--red {
        padding: 56px 48px;
    }

    .text-block {
        max-width: 660px;
    }
}