/* ── Correzioni di convivenza con styles.min.css del sito ──────────────────
   Il foglio globale applica text-transform:uppercase e letter-spacing ai
   button: qui i pulsanti devono restare nella forma originale della landing. */
.btn-primary,
[data-upsell-buy],
[data-upsell-decline],
[data-faq-toggle]{text-transform:none;letter-spacing:normal}
/* ── Convivenza con il banner cookie ──────────────────────────────────────
   Il banner (z-index 2147483000) sta anch'esso in basso e copre per intero
   la barra fissa mobile: il tap sulla CTA finiva sul pulsante "Accetta".
   cookie-consent.js espone gia' la classe e l'altezza del banner: le usiamo
   per sollevare la barra, che torna da sola a bottom:0 quando il banner
   sparisce (la classe viene rimossa) e segue il ResizeObserver. */
html.aics-cookie-banner-visible [data-upsell-sticky]{bottom:var(--aics-cookie-banner-clearance,0px)}
/* Dopo il consenso resta il bottone flottante "gestisci cookie" (40px, in
   basso a sinistra) che copriva il prezzo: gli lasciamo lo spazio.
   Ma SOLO al paragrafo del rifiuto, l'unico che gli sta all'altezza: da
   quando la colonna sinistra e' impilata, la riga con prezzo e pulsante gli
   passa sopra. Spingere anche quella costava 60px alla traccia della griglia
   (prima colonna `auto`) e il pulsante d'acquisto — che ha overflow:hidden —
   si tosava l'etichetta: 1px a 375, 7px a 360, 23px a 320. */
@media (max-width:767px){body:has(.aics-cookie-manage) [data-upsell-sticky]>p{padding-left:60px}}

/* ── Loghi dei metodi di pagamento ────────────────────────────────────────
   Il CSS esportato da Next li calcolava a 0×0: gli SVG non hanno dimensioni
   intrinseche (solo viewBox), quindi con width/height automatici collassano
   e il browser non li scarica nemmeno (currentSrc resta vuoto).
   Qui diamo un'altezza esplicita e lasciamo la larghezza al viewBox. */
[class*="paymentMethods"] img {
    width: auto;
    height: 26px;
    max-width: 44px;
    object-fit: contain;
}

/* ── Barra sticky mobile ──────────────────────────────────────────────────
   Sotto i 640px il CSS esportato affiancava "OFFERTA" e il conto alla
   rovescia su una riga dentro una colonna fissa da 56px, ma servono 85px:
   il testo restava tagliato e il pulsante debordava dalla barra.
   Li impiliamo — com'è già sopra i 640px — così la colonna scende a 51px e
   il pulsante recupera la larghezza che gli serve. */
@media (max-width: 640px) {
    [class*="mobileSticky"] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    [class*="mobileSticky"] > div {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        padding-left: 0;
    }
}

/* ── Via d'uscita nella barra sticky ──────────────────────────────────────
   La barra mostrava solo il pulsante d'acquisto: chi non voleva l'offerta
   non aveva alcun comando visibile e chiudeva la scheda — senza mai
   arrivare a /success, quindi senza attivare l'account.
   Il paragrafo attraversa entrambe le colonne della griglia. */
[data-upsell-sticky] > [data-upsell-decline-block] {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding: 0;
    text-align: center;
}

/* Il CSS della pagina veste OGNI <button> dentro la barra come il pulsante
   d'acquisto: altezza minima 64px, angoli arrotondati, peso 900, translateY
   e la grande ombra verde a rilievo. Su un link testuale erano fuori posto,
   quindi vanno annullate una per una. */
[data-upsell-sticky] [data-upsell-decline] {
    display: inline-block;
    width: auto;
    min-height: 0;
    height: auto;
    padding: 6px 10px;
    position: static;
    overflow: visible;
    transform: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    color: #8e9bad;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

[data-upsell-sticky] [data-upsell-decline]:hover {
    color: #e8f0ff;
}

/* ── Il modulo di pagamento non deve restare prigioniero dell'hero ─────────
   Sopra gli 821px il primo riquadro d'acquisto (CTA1) sta dentro l'hero, che
   è position:sticky con altezza fissa pari alla viewport e overflow:hidden.
   Il pannello Stripe viene inserito lì dentro: misurato a 1280×700, di 400px
   di pannello ne restavano tagliati 97 e il pulsante "Paga" finiva nascosto,
   senza alcun modo di scorrere (l'hero non è scorrevole).
   Mentre il modulo è aperto lasciamo che l'hero smetta di essere appiccicato
   e prenda l'altezza del suo contenuto: il pagamento torna intero e in vista
   (col visitatore a metà traccia il pulsante passa da y=887, fuori schermo,
   a y=250). Il video di sfondo smette di seguire lo scroll finché si paga —
   `corsa <= 1` in meta-motion.js se ne accorge da solo e si ferma.
   Se il browser non conosce :has() non cambia nulla: resta il comportamento
   di prima, mai peggio. */
@media (min-width: 821px) {
    [data-scroll-video-frame]:has([data-upsell-pay-panel]) {
        position: static;
        height: auto;
        overflow: visible;
    }
}

/* ── Su finestre basse il rifiuto finiva tagliato ─────────────────────────
   Stessa causa della regola qui sopra, ma senza bisogno di aprire il modulo:
   l'hero è alto `100dvh - 62px` con overflow:hidden e centra il riquadro, che
   in modalità post-acquisto misura 694px (identico in italiano e in inglese —
   verificato). Sotto i 674px di hero il riquadro sborda da entrambi i lati e
   la coda viene tagliata: a 718px di finestra sparivano gli ultimi 6px del
   link "No grazie, continuo senza Meta ADS AI Mastery", su un MacBook Air
   1280×800 ne sparisce l'intera riga. Non era recuperabile scorrendo: l'hero
   è appiccicato, quindi quel che esce dal riquadro non torna mai in vista.
   La pagina già comprimeva i margini sotto i 980px (padding 98px → 18/22),
   ma non bastava. Qui, sotto i 780px, sganciamo l'hero e gli lasciamo
   l'altezza del contenuto: la pagina scorre normale e il link si raggiunge.
   Accorciamo ANCHE la traccia, altrimenti restano 1148px di vuoto da scorrere
   (la traccia è `100svh + 1180px`, tarata su un hero alto quanto la finestra).
   ⚠️ Di telai scorrevoli in questa pagina ce ne sono TRE (hero, sezione video,
   programma) e gli altri due non hanno il difetto: mirare a
   `[data-scroll-video-frame]` li avrebbe spenti tutti. Si mira quindi alla
   classe dell'hero, con `[class*=…]` perché l'hash del modulo cambia a ogni
   build (stesso idioma di `[class*="barWarning"]` in upsell-meta.js). Il
   doppio underscore fa parte del nome: è il confine che il modulo CSS mette
   prima dell'hash, quindi `heroStage__` non può agganciare per sbaglio un
   futuro `heroStageOverlay`. Il test verifica che di elementi ne prendano
   uno ciascuno.
   Le due regole hanno la stessa specificità di quelle della pagina: vincono
   perché questo foglio è l'ultimo caricato. */
@media (min-width: 821px) and (max-height: 780px) {
    [class*="heroScrollTrack__"] {
        height: auto;
    }

    [class*="heroStage__"] {
        position: static;
        height: auto;
        min-height: 0;
        overflow: visible;
    }
}

/* POPUP DEL SUPPORTO GUIDATO
   La sovrapposizione ha `display: grid` nel CSS della pagina, quindi da sola
   l'attributo `hidden` non basterebbe a nasconderla: serve una regola più
   specifica. Nel sorgente React il nodo non esisteva proprio finché il popup
   era chiuso; qui esiste sempre e lo governiamo con `hidden`. */
[data-upsell-support-overlay][hidden] {
    display: none !important;
}

/* La barra d'urgenza in cima alla pagina è `position: sticky` con z-index 120,
   più alto del 100 della sovrapposizione: si disegnava SOPRA il popup e copriva
   la ✕, che diventava impossibile da premere (verificato con
   `document.elementFromPoint`, che al centro della ✕ restituiva la barra).
   200 basta e avanza: resta sotto la pila dei cookie, che deve stare in cima. */
[data-upsell-support-overlay] {
    z-index: 200;
}

/* Il banner dei cookie è fisso in fondo con z-index 2147483000 e deve restare
   sopra a tutto (è obbligatorio). In produzione, a consenso non ancora dato,
   copriva il pulsante "Sì, aggiungi il supporto live": verificato con
   `document.elementFromPoint`, che al centro del pulsante restituiva
   `aics-cookie-actions`. In locale non si vedeva perché il consenso era già
   memorizzato — il difetto esisteva solo per chi arriva la prima volta.
   Un semplice `padding-bottom` NON basta: il pannello è più alto dello schermo
   e la sovrapposizione scorre internamente, quindi il pulsante restava dov'era.
   Si accorcia invece la sovrapposizione stessa fino al bordo superiore del
   banner, usando la variabile che cookie-consent.js già pubblica: tutto ciò che
   sta dentro è così garantito libero. */
html.aics-cookie-banner-visible [data-upsell-support-overlay] {
    bottom: var(--aics-cookie-banner-clearance, 0px);
}