/**
 * Home — hero → categorie → piu' venduti → guida → garanzie → recensioni.
 * Stesso ordine del mockup. Dipende da page.css (token + .visually-hidden).
 * Solo pagine index.
 */

/* Larghezza del contenuto: e' quella dell'area interna di main.home-page
   (max-width 1200 meno i 32px di padding per lato). Le sezioni a tutta pagina
   escono da quel contenitore, quindi devono riapplicarla ai figli o le loro
   colonne non si allineano con quelle delle sezioni normali. */
.home-page {
    --home-content-w: 1180px;
}

.home-page > section {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}

.home-page > section + section {
    margin-top: 0;
}

/* ══ MARCHI CHE TRATTIAMO — fascia loghi vendor subito sotto l'hero ═══════ */
.home-vendors {
    padding: 1.5rem clamp(1.25rem, 4vw, 2rem);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    border-bottom: 1px solid var(--page-border);
    background: var(--aml-surface);
    box-sizing: border-box;
}

.home-vendors__list {
    max-width: var(--home-content-w);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.75rem, 5vw, 3.5rem);
}

.home-vendors__list img {
    display: block;
    height: 26px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* Il file Norton fornito e' un lockup verticale (icona sopra, wordmark
   sotto) dentro un canvas con ampi margini bianchi: alla stessa altezza
   degli altri il testo "NORTON" diventava illeggibile. Qui e' ritagliato
   alla sola icona (checkmark), leggibile quanto un logo a icona come ESET,
   con qualche px in piu' perche' senza testo serve piu' peso visivo. */
.home-vendors__list img.home-vendors__logo--tall {
    height: 34px;
}

.home-hero {
    padding-bottom: 0;
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 5vw, 3rem);
    min-height: min(72svh, 600px);
    box-sizing: border-box;
}

.home-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 32rem;
    margin: 0;
    animation: home-hero-copy-in 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero-title {
    margin: 0 0 1.25rem;
    font-family: var(--aml-font-sans, var(--font-sans));
    font-size: clamp(2.15rem, 4.4vw, 3.15rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    max-width: 23ch;
}

.home-hero-subtitle {
    margin: 0 0 2rem;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    line-height: 1.65;
    font-weight: 400;
    color: color-mix(in srgb, var(--aml-paper) 78%, transparent);
    max-width: 38ch;
}

.home-hero-actions {
    gap: 0.65rem 0.85rem;
}

@keyframes home-hero-copy-in {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-content {
        animation: none;
    }
}

@media (max-width: 900px) {
    .home-hero-inner {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: clamp(3rem, 10vw, 4.25rem) 1.25rem 3rem;
        gap: 2rem;
    }

    .home-hero-title {
        max-width: none;
        font-size: clamp(1.9rem, 8vw, 2.5rem);
    }
}

/* Su schermo stretto la CTA va a piena larghezza e il testo puo' andare a
   capo: prima era nowrap + flex:1 1 0, e un'etichetta lunga come "Scopri
   Microsoft 365 Personal" usciva dal riquadro invece di adattarsi. */
@media (max-width: 768px) {
    .home-hero-actions {
        flex-wrap: wrap;
        gap: 0.6rem;
        width: 100%;
    }

    .home-hero-actions .home-btn {
        flex: 1 1 100%;
        min-width: 0;
        padding: 0.7rem 0.9rem;
        font-size: 0.85rem;
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }
}

.home-trust-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .home-trust-list {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1rem;
    }
}

.home-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--page-border);
    border-radius: var(--aml-radius-md);
    background: var(--aml-surface);
    box-shadow: var(--aml-shadow-sm);
    font-size: clamp(0.85rem, 2.4vw, 0.92rem);
    line-height: 1.45;
    color: var(--page-text);
}

.home-trust-icon {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    color: var(--page-accent);
}

.home-trust-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.home-trust-text a,
.home-social-proof__text a {
    color: var(--page-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    word-break: break-word;
}

.home-trust-text a:focus-visible,
.home-social-proof__text a:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Il vincolo di larghezza sta sui figli, non sulla sezione: cosi' la banda
   grigia del ritmo alternato puo' andare a tutta pagina (come nel mockup,
   dove le recensioni sono su slate-50) mentre il contenuto resta centrato. */
.home-social-proof {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Centratura via flex e non via margin-inline:auto: i figli hanno regole
   `margin: 0` piu' avanti nel file che azzererebbero i margini automatici. */
.home-social-proof > * {
    max-width: 48rem;
    width: 100%;
}

.home-social-proof__text {
    margin: 0;
    font-size: clamp(0.9rem, 2.5vw, 0.98rem);
    line-height: 1.55;
    color: var(--page-text-secondary);
    font-weight: 500;
}

.home-social-proof__fallback {
    margin: 0 0 1rem;
    font-size: clamp(0.9rem, 2.5vw, 0.98rem);
    line-height: 1.55;
    color: var(--page-text-secondary);
    font-weight: 500;
}

.home-social-proof__fallback a {
    color: var(--page-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

/* Le regole di #trustpilot-widget sono state rimosse col TrustBox (uscito dal
   piano gratuito Trustpilot il 2026-08-30). La home non ha piu' la sezione
   .home-social-proof che lo conteneva; il voto resta nella barra header. */

/* ══ RECENSIONI (mockup 2 colonne: intro a sinistra, 3 card a destra) ═════ */

.home-page > .home-reviews {
    background: var(--aml-paper, #f8fafc);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    border-bottom: 1px solid var(--aml-line, #e2e8f0);
}

.home-reviews__inner {
    max-width: var(--home-content-w, 1180px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 960px) {
    .home-reviews__inner {
        grid-template-columns: minmax(220px, 280px) 1fr;
        gap: 2.5rem;
    }
}

.home-reviews__intro {
    display: flex;
    flex-direction: column;
}

.home-reviews__rating {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    flex-wrap: wrap;
}

.home-reviews__tp {
    font-weight: 800;
    color: #00b67a;
    white-space: nowrap;
}

.home-reviews__stars-green {
    color: #00b67a;
    letter-spacing: 0.05em;
    font-size: 0.88rem;
}

.home-reviews__count {
    color: var(--aml-ink-2, #64748b);
    font-weight: 500;
}

.home-reviews__intro .home-section-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    line-height: 1.25;
    color: var(--aml-ink, #0f172a);
    font-family: var(--font-display);
    font-weight: 800;
}

.home-reviews__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--aml-brand, #c74104);
    text-decoration: none;
}

.home-reviews__cta:hover {
    text-decoration: underline;
}

.home-reviews__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .home-reviews__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

.home-reviews__card {
    background: var(--aml-surface, #ffffff);
    border: 1px solid var(--aml-line, #e2e8f0);
    border-radius: 12px;
    padding: 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-reviews__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.home-reviews__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.home-reviews__name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--aml-ink, #0f172a);
}

.home-reviews__quote-icon {
    font-family: Georgia, serif;
    font-size: 2.2rem;
    line-height: 0.8;
    color: var(--aml-line, #cbd5e1);
    opacity: 0.7;
    user-select: none;
}

.home-reviews__stars-amber {
    color: #f59e0b;
    letter-spacing: 0.05em;
    font-size: 0.82rem;
    margin-bottom: 0.6rem;
}

.home-reviews__card p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--aml-ink-2, #475569);
    font-weight: 450;
}

.home-page .product-card-foot {
    margin-top: auto;
}

.home-page .product-card-foot .btn-cta-primary {
    width: 100%;
}

/* Ritmo sezioni — sfondo alternato per dare profondità tonale alla pagina.
   Esclude .home-guide, che ha una banda scura tutta sua come nel mockup e
   che senza esclusione perderebbe: il selettore vale 0,7,1 contro lo 0,1,0
   della classe.
   .home-social-proof non e' piu' esclusa: il suo vincolo di larghezza e'
   passato ai figli, quindi la banda puo' andare a tutta pagina senza
   scentrare il contenuto — ed e' cosi' anche nel mockup.
   .home-business, .home-faq e .home-recommended erano nell'elenco ma le
   sezioni non esistono piu' (home allineata al mockup).
   .home-guarantee e' esclusa perche' il suo eyebrow/titolo/lede non hanno un
   wrapper di larghezza proprio (a differenza di .home-guide/.home-vendors):
   affidarsi alla parita' nth-of-type e' fragile, ogni sezione aggiunta prima
   di lei ne cambia la parita' e la fa sbandierare a tutta pagina disallineata
   a sinistra, come successo aggiungendo .home-vendors. */
/* Ritmo sezioni — bande a tutta pagina con sfondi alternati per dare
   struttura, profondita' e gerarchia visiva alla home. */
.home-page > .home-catalog {
    background: var(--aml-paper);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: 2.25rem clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    border-bottom: 1px solid var(--aml-line);
}

.home-page > .home-protect {
    position: relative;
    overflow: hidden;
    background: var(--aml-surface);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: 2.25rem clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    border-bottom: 1px solid var(--aml-line);
}

.home-page > .home-m365-band {
    background: var(--aml-paper);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: 2.25rem clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    border-bottom: 1px solid var(--aml-line);
}

.home-page > .home-categories {
    background: var(--aml-surface);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: 2.25rem clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    border-bottom: 1px solid var(--aml-line);
}

.home-page > .home-business {
    background: var(--aml-paper);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: 2.25rem clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    border-bottom: 1px solid var(--aml-line);
}

.home-page > .home-social-proof {
    background: var(--aml-paper);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: 2.25rem clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    border-top: 1px solid var(--aml-line);
    border-bottom: 1px solid var(--aml-line);
}

.home-page > .home-guarantee {
    background: var(--aml-surface);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: 2.25rem clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    border-bottom: 1px solid var(--aml-line);
}

.home-page > .home-reviews {
    background: var(--aml-paper);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: 2.25rem clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    border-bottom: 1px solid var(--aml-line);
}

.home-catalog-intro {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 2rem;
}

.home-catalog-lede {
    margin: 0 0 0.75rem;
    font-size: clamp(0.92rem, 2.2vw, 1.02rem);
    line-height: 1.55;
    color: var(--page-text-secondary);
    font-weight: 500;
}

/* Unico avviso non ridondante rimasto dalla ex fascia .home-institutional:
   gli altri 3 claim duplicavano parola per parola la barra utility in
   header (sempre visibile), questo no — resta qui, vicino ai CTA. */
.home-catalog-payment-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--page-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.home-catalog-payment-note svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--aml-ok);
}

.home-catalog-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--page-accent);
    text-decoration: none;
}

.home-catalog-more:hover {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.home-catalog-more:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.home-catalog-lede-block {
    text-align: center;
    color: var(--page-text-muted);
    margin-bottom: 48px;
    font-size: 1.1rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    box-sizing: border-box;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 1.35rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.home-btn:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 3px;
}

.home-btn-primary {
    background: var(--page-accent);
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--page-accent) 40%, transparent);
}

.home-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--page-accent) 50%, transparent);
    filter: brightness(1.08);
}

.home-btn-primary:active {
    transform: translateY(0);
    filter: brightness(1);
}

.home-btn-secondary {
    background: var(--aml-surface);
    color: var(--page-text);
    border: 1px solid var(--page-border);
}

.home-btn-secondary:hover {
    background: var(--aml-paper);
    border-color: color-mix(in srgb, var(--aml-ink) 20%, var(--page-border));
}

.home-catalog .home-section-title {
    margin-bottom: 1.5rem;
}

.home-page .home-catalog .home-section-title {
    text-align: center;
}

/* Più venduti — 6 prodotti su un'unica riga da desktop in su.
   Scoped alla home: le listing categoria restano su .product-grid globale. */
.home-page .home-catalog .product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2.5vw, 1.25rem);
}

@media (min-width: 700px) {
    .home-page .home-catalog .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .home-page .home-catalog .product-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1rem;
    }
}

.home-page .home-catalog .product-card {
    min-width: 0;
    min-height: 0;
    padding: clamp(0.85rem, 2vw, 1.35rem);
    gap: 0.75rem;
}

.home-page .home-catalog .product-card-media {
    height: clamp(140px, 38vw, 200px);
}

/* Cornice uniforme: le immagini prodotto arrivano con stili molto diversi
   tra loro (illustrazioni piatte, render scatola, gradienti) e riempiono
   già da sole il proprio canvas 400×400, quindi object-fit:contain da solo
   non lascia margine. Un padding fisso sul riquadro forza lo stesso respiro
   neutro attorno a ogni immagine, cosa che le fa leggere come un'unica
   collezione invece di un accostamento casuale di stili. */
.home-page .home-catalog .product-card-media {
    padding: 0.85rem;
    box-sizing: border-box;
}

.home-page .home-catalog .product-card-name {
    font-size: clamp(0.88rem, 2.4vw, 1.05rem);
}

.home-page .home-catalog .product-card-blurb {
    font-size: clamp(0.75rem, 2.1vw, 0.85rem);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-page .home-catalog .product-card-foot .btn-cta-primary {
    min-height: 44px;
    padding: 0.7rem 0.45rem;
    font-size: clamp(0.72rem, 2.2vw, 0.82rem);
    white-space: normal;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 1024px) {
    .home-page .home-catalog .product-card-media {
        height: 165px;
    }

    .home-page .home-catalog .product-card-foot .btn-cta-primary {
        padding: 0.65rem 0.5rem;
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-btn-primary:hover,
    .home-btn-secondary:hover {
        transform: none;
        filter: none;
    }
}

/* ── Sezione categorie — mobile: card verticali 2 col; desktop: tile orizzontali 3 col ── */
/* Come .home-social-proof: il vincolo di larghezza sta sui figli, non sulla
   sezione. La sezione e' in posizione pari, quindi il ritmo alternato le da'
   margin-inline: calc(50% - 50vw) per la banda a tutta pagina; quel margine
   vince sul `margin: 0 auto` (0,7,1 contro 0,1,0) e senza questo accorgimento
   il blocco da 1200px restava incollato al bordo sinistro. Centratura via
   flex perche' i figli hanno `margin: 0` che azzererebbe i margini automatici. */
.home-categories {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.home-categories > * {
    max-width: var(--home-content-w);
    width: 100%;
}

.home-page .home-categories .home-section-title {
    text-align: center;
}

.home-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-categories-grid > li {
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
}

@media (min-width: 900px) {
    .home-categories-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

.home-category-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--page-border);
    border-radius: var(--aml-radius-md);
    background: var(--aml-surface);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.home-category-tile:hover {
    border-color: var(--page-accent);
}

.home-category-tile:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 3px;
}

.home-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--page-accent) 12%, transparent);
    color: var(--page-accent);
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.home-category-icon svg {
    width: 18px;
    height: 18px;
}

.home-category-tile:hover .home-category-icon {
    background: var(--page-accent);
    color: #fff;
}

.home-category-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.home-category-name {
    font-weight: 700;
    font-size: clamp(0.88rem, 2.4vw, 1rem);
    line-height: 1.3;
    color: var(--page-text);
}

.home-category-desc {
    font-size: clamp(0.75rem, 2vw, 0.85rem);
    line-height: 1.45;
    color: var(--page-text-muted);
}

/*
 * Mobile / tablet: icona sopra, testo a tutta larghezza della cella.
 * Evita la colonna testo stretta (icona | testo | freccia) che spezzava le parole.
 */
@media (max-width: 899px) {
    .home-category-tile {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.55rem;
        padding: 0.85rem 0.8rem 0.9rem;
    }

    .home-category-icon {
        width: 40px;
        height: 40px;
    }

    .home-category-icon svg {
        width: 20px;
        height: 20px;
    }

    .home-category-copy {
        width: 100%;
        flex: none;
    }

    .home-category-name {
        font-size: 0.9rem;
        white-space: normal;
        overflow: visible;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .home-category-desc {
        font-size: 0.78rem;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .home-category-arrow {
        display: none;
    }
}

.home-category-arrow {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.1rem;
    color: var(--page-accent);
    transition: transform 0.2s ease;
}

.home-category-tile:hover .home-category-arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .home-category-tile,
    .home-category-arrow,
    .home-category-tile:hover .home-category-arrow {
        transition: none;
        transform: none;
    }
}

/* ══ HERO CONSUMER — sfondo fotografico ════════════════════════════════════
   L'immagine e' un <picture> in markup, non un background-image: cosi' e'
   l'elemento LCP, il browser la scopre subito e le applica fetchpriority.
   Sopra ci va uno scrim orizzontale, altrimenti il testo bianco finisce su
   una foto molto chiara — stesso accorgimento dell'hero precedente. */

.home-hero--consumer {
    position: relative;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    margin-top: 0;
    /* Oltre il cap dello sfondo (vedi .home-hero__bg img) questo fondo riempie
       il margine: stesso verso del gradiente interno dell'immagine, cosi' la
       giunzione su schermi molto larghi non si vede. */
    background: linear-gradient(180deg, var(--aml-slate-50), var(--aml-slate-100));
    color: var(--aml-slate-900);
    overflow: hidden;
    isolation: isolate;
    /* Velo leggermente avoriato invece del grigio-paper puro: la meta'
       sinistra su widescreen non risulta clinica. 8% di brand-soft e' sotto
       la soglia percettiva sul testo ma toglie il "bianco morto". */
    --aml-hero-veil: color-mix(in srgb, var(--aml-paper) 92%, var(--aml-brand-soft));
}

.home-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* flex + flex-end: l'immagine e' cappata (vedi img sotto) e ancorata a
       destra. Il contenitore resta a tutta larghezza, cosi' il velo ::after
       copre anche il margine e il contrasto testo non cambia. */
    display: flex;
    justify-content: flex-end;
}

.home-hero__bg img {
    /* Cap a 1728px: oltre, l'immagine 2.36:1 si stirava e la sua meta'
       sinistra vuota diventava un vuoto bianco enorme. Cappata e ancorata a
       destra, il soggetto resta ben inquadrato e il resto lo fa il fondo di
       sezione (quasi identico al bordo sinistro dell'immagine). */
    width: min(100%, 1728px);
    height: 100%;
    object-fit: cover;
    /* Foto centrata: il soggetto cade nella meta' destra e la sinistra resta
       libera per il testo. */
    object-position: 50% center;
    display: block;
}

.home-hero--consumer .home-hero-inner {
    z-index: 2;
}

/* Velo solo sulla colonna del testo. Il titolo stava gia' sopra la soglia
   anche senza, ma il sottotitolo cade piu' in basso, dove nella foto ci sono
   la pianta e il tablet sulla scrivania: li' andava a 1,25:1 su circa il 9%
   della sua area. Il gradiente si spegne al 64%, cosi' il soggetto a destra
   resta intatto e la meta' sinistra si schiarisce senza appiattirsi. */
.home-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--aml-hero-veil) 58%, transparent) 0%,
        color-mix(in srgb, var(--aml-hero-veil) 47%, transparent) 35%,
        color-mix(in srgb, var(--aml-hero-veil) 20%, transparent) 50%,
        transparent 64%
    );
}

/* Con la vecchia foto (una persona a destra) la colonna restava stretta per
   non arrivarci sopra. La composizione attuale (collage prodotto, nessun
   soggetto fisso) tollera una colonna piu' larga: qui serve anche a far
   stare "Protezione originale," su una riga sola invece di spezzarsi. */
.home-hero--consumer .home-hero-content {
    max-width: 38rem;
}

.home-hero--consumer .home-hero-title {
    color: var(--aml-slate-900);
}

/* Solo da tablet in su: un filo piu' grande del base per bilanciare, con la
   colonna a 38rem, il vuoto a sinistra su widescreen. Sotto i 901px vale la
   scala mobile definita nel media query dedicato. */
@media (min-width: 901px) {
    .home-hero--consumer .home-hero-title {
        font-size: clamp(2.4rem, 4.6vw, 3.4rem);
    }
}

/* Slate-900 come il titolo: con lo slate-700 precedente il velo necessario
   per arrivare a 4,5:1 avrebbe dovuto essere circa il doppio e la foto ci
   perdeva. La gerarchia la reggono corpo e peso. */
.home-hero--consumer .home-hero-subtitle {
    color: var(--aml-slate-900);
}

/* Riga di riprova sotto la CTA. Volutamente non ripete "Azienda italiana",
   "Fattura disponibile" e "Supporto via email e WhatsApp": stanno gia' nella
   utility bar poche decine di pixel piu' su, ed e' proprio la ripetizione che
   aveva fatto togliere la vecchia fascia trust. Qui vanno solo fatti che la
   utility bar non dice: il giudizio Trustpilot e l'anzianita' con il volume
   ordini, entrambi gia' dichiarati altrove sul sito ("Eccellente" e' la
   fascia Trustpilot per un punteggio da 4,3 in su). Il numero di recensioni
   e' stato tolto: 94 accanto a "1000+ ordini" faceva un confronto stridente. */
.home-hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.1rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--aml-text-sm);
    line-height: 1.4;
    color: var(--aml-slate-900);
}

.home-hero-trust li {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

/* Striscia bianca sottile, solo dietro alla riga di riprova (non su titolo e
   sottotitolo, che restano sulla foto col velo sopra), con l'angolo arrotondato
   sul lato destro dove finisce subito dopo "1000+ ordini dal 2020" (l'unico
   angolo visibile: a sinistra sborda fuori pagina). align-self:flex-start
   toglie lo stretch del flex column del contenitore, altrimenti la riga si
   allargava a tutta la colonna e la striscia finiva ben oltre il testo invece
   di aderirci.
   Il pieno copre solo gli ultimi ~27rem prima del bordo destro (la riga di
   testo e' larga circa 26rem) e sfuma a trasparente nei 6rem prima di quello:
   sotto i 1180px di contenuto centrato lo spazio a sinistra del testo e'
   minimo, ma su schermi larghi diventava un rettangolo bianco vuoto sulla
   foto per centinaia di px. Gli stop in rem (non %) restano ancorati al
   bordo destro qualunque sia la larghezza del pseudo-elemento (100vw).
   Solo sopra i 900px: sotto quella soglia la riga passa a bianco per il
   velo scuro mobile e sparirebbe su questo stesso sfondo chiaro. */
@media (min-width: 901px) {
    .home-hero--consumer .home-hero-trust {
        position: relative;
        z-index: 1;
        align-self: flex-start;
    }

    .home-hero--consumer .home-hero-trust::before {
        content: "";
        position: absolute;
        top: -0.7rem;
        bottom: -0.7rem;
        right: -0.9rem;
        width: 100vw;
        background: linear-gradient(
            90deg,
            transparent 0,
            transparent calc(100% - 33rem),
            var(--aml-paper) calc(100% - 27rem),
            var(--aml-paper) 100%
        );
        border-radius: 0 var(--aml-radius-lg) var(--aml-radius-lg) 0;
        z-index: -1;
    }
}

/* Ora che la riga siede sulla striscia bianca (non piu' sulla foto), l'inchiostro
   di fondo puo' tornare l'arancione brand: --aml-brand e' orange-700, 5,2:1 su
   bianco. Il resto della riga resta slate-900 apposta (vedi sopra la striscia):
   qui e' solo la stella a prendere colore, il testo intorno resta un segnale di
   fiducia neutro. Su mobile il media query sotto forza comunque il bianco sul
   velo scuro, quindi qui non serve alcuna condizione di larghezza. */
.home-hero-trust__star {
    font-size: 0.95em;
    line-height: 1;
    color: var(--aml-brand);
}

/* Gradiente come nel mockup, ma sui gradini scuri della scala: sulla foto
   chiara l'orange-600 dava 2,6:1 di contrasto (1,7:1 nel punto peggiore),
   sotto la soglia 3:1 del testo grande. Con 800/900 si sta sopra restando
   nella stessa famiglia del brand. */
.home-hero-title .home-hero__accent {
    background: linear-gradient(90deg, var(--aml-orange-800), var(--aml-orange-900) 55%, var(--aml-orange-800));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 900px) {
    .home-hero__bg img {
        object-position: 62% center;
    }

    .home-hero--consumer .home-hero-content {
        max-width: none;
    }

    /* Il testo sta SOPRA la foto anche su mobile. Con la vecchia foto (scura,
       una persona all'ambiente) serviva un velo scuro + testo bianco per
       arrivare al contrasto. L'immagine attuale (collage prodotto: sfondo
       chiaro pesca/grigio, box con il loro proprio testo leggibile) e'
       l'opposto: un velo scuro spegneva anche il testo stampato sui box,
       reso illeggibile proprio dove dovrebbe convincere. Qui usiamo lo
       stesso verso del desktop — velo CHIARO, inchiostro scuro — ma
       verticale e concentrato in alto, dove sta il titolo: si spegne
       prima di arrivare ai box cosi' restano leggibili. */
    .home-hero--consumer {
        background: var(--aml-paper);
    }

    .home-hero__bg::after {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--aml-hero-veil) 78%, transparent) 0%,
            color-mix(in srgb, var(--aml-hero-veil) 55%, transparent) 24%,
            color-mix(in srgb, var(--aml-hero-veil) 18%, transparent) 40%,
            transparent 55%
        );
    }

    .home-hero--consumer .home-hero-inner {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* ══ GARANZIA E SICUREZZA (mockup 2026-08-17) ══════════════════════════════
   Prende il posto del blocco B2B "Per aziende e professionisti". Quattro
   punti come nel mockup, ma con la copy gia' in uso nella trustbar delle
   schede prodotto: la "Garanzia AML Care" e il tempo medio di risposta che
   il mockup dichiara non sono affermazioni che il sito fa. */

.home-section-eyebrow {
    margin: 0 0 0.5rem;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aml-brand-vivid);
}

/* ══ GARANZIA E SICUREZZA (mockup 2 colonne) ═══════════════════════════════ */

.home-page > .home-guarantee {
    position: relative;
    background: var(--aml-surface, #ffffff);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    border-bottom: 1px solid var(--aml-line, #e2e8f0);
    overflow: hidden;
}

.home-guarantee__watermark {
    position: absolute;
    left: -20px;
    top: -10px;
    width: 320px;
    height: 320px;
    color: var(--aml-ink, #0f172a);
    pointer-events: none;
    z-index: 0;
}

.home-guarantee__inner {
    position: relative;
    z-index: 1;
    max-width: var(--home-content-w, 1180px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    align-items: center;
}

@media (min-width: 960px) {
    .home-guarantee__inner {
        grid-template-columns: minmax(300px, 390px) 1fr;
        gap: 2.75rem;
    }
}

.home-guarantee__intro {
    display: flex;
    flex-direction: column;
}

.home-guarantee__intro .home-section-eyebrow {
    margin: 0 0 0.4rem;
    font-size: var(--aml-text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aml-brand, #c74104);
}

.home-guarantee__intro .home-section-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    line-height: 1.25;
    color: var(--aml-ink, #0f172a);
    font-family: var(--font-display);
    font-weight: 800;
}

.home-guarantee__lede {
    margin: 0 0 1.25rem;
    font-size: clamp(0.88rem, 2vw, 0.95rem);
    line-height: 1.55;
    color: var(--aml-ink-2, #475569);
    font-weight: 500;
}

.home-guarantee__divider {
    border: none;
    border-top: 1px solid var(--aml-line, #e2e8f0);
    margin: 0 0 1.25rem;
    width: 100%;
}

.home-guarantee__tp {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    font-size: var(--aml-text-xs, 0.82rem);
    font-weight: 600;
    color: var(--aml-ink, #0f172a);
}

.home-guarantee__tp-stars {
    display: inline-flex;
    align-items: center;
}

.home-guarantee__tp-score {
    font-weight: 700;
    color: var(--aml-ink, #0f172a);
}

.home-guarantee__tp-count {
    color: var(--aml-ink-3, #94a3b8);
    font-weight: 500;
}

.home-guarantee__mini-trust {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.home-guarantee__mini-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.home-guarantee__mini-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--aml-ink, #0f172a);
    flex-shrink: 0;
}

.home-guarantee__mini-item strong {
    display: block;
    font-size: 0.82rem;
    color: var(--aml-ink, #0f172a);
    font-weight: 700;
    line-height: 1.2;
}

.home-guarantee__mini-item small {
    display: block;
    font-size: 0.73rem;
    color: var(--aml-ink-3, #64748b);
    line-height: 1.2;
}

.home-guarantee__about-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--aml-brand, #c74104);
    text-decoration: none;
}

.home-guarantee__about-link:hover {
    text-decoration: underline;
}

/* Griglia 6 Card */
.home-guarantee__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .home-guarantee__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.95rem;
    }
}

.home-guarantee__card {
    background: var(--aml-surface, #ffffff);
    border: 1px solid var(--aml-line, #e2e8f0);
    border-radius: 12px;
    padding: 1.25rem 0.9rem 1.1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-guarantee__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.home-guarantee__card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--aml-orange-100, #ffe8d6);
    color: var(--aml-brand, #c74104);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.home-guarantee__card-title {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--aml-ink, #0f172a);
    line-height: 1.3;
}

.home-guarantee__card-body {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--aml-ink-2, #64748b);
}

/* ══ GUIDA ALL'ACQUISTO (mockup 2026-08-17) ════════════════════════════════ */

.home-guide {
    position: relative;
    overflow: hidden;
    background: var(--aml-slate-900);
    color: #ffffff;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2rem);
    box-sizing: border-box;
    /* Larghezza della figura del consulente. Vive qui e non nella media query
       perche' la stessa misura serve due volte: alla figura e alla corsia che
       le viene riservata dentro la griglia (vedi .home-guide__cols). */
    --guide-figure-w: clamp(280px, 22vw, 420px);
}

.home-guide__inner {
    position: relative;
    z-index: 1;
    max-width: var(--home-content-w);
    margin: 0 auto;
}

/* Il consulente non vive dentro una card: e' parte della composizione della
   banda scura, ancorato al bordo destro accanto al configuratore. Serve un
   ritaglio su sfondo TRASPARENTE: una foto con fondo bianco qui stonerebbe
   sul navy.

   E' un background e non un <img> di proposito: sotto i 1200px non c'e'
   spazio per la figura, ma un <img> display:none veniva comunque scaricato
   dai telefoni (61 KB sprecati su ogni visita mobile). Dichiarato dentro la
   media query non viene proprio richiesto — stessa tecnica di footer.css e
   consultation.css. */
.home-guide__figure {
    display: none;
}

@media (min-width: 1200px) {
    /* Corsia riservata alla figura. Prima non esisteva: la figura passava
       dietro al pannello, che per restare leggibile doveva farsi quasi opaco.
       Finche' il pannello era corto la testa emergeva e la composizione
       reggeva; da quando mostra anche il caveat e i link secondari e'
       cresciuto e copriva il consulente quasi per intero, viso compreso.
       Restringendo le colonne la figura sta accanto e non piu' dietro.

       Si sottrae il gutter di pagina perche' quella parte di figura cade
       gia' fuori dal contenuto: su schermi molto larghi il gutter la ospita
       quasi tutta e le colonne non perdono quasi nulla. Sotto i 1244px la
       formula sovrastima il gutter (li' l'inner e' limitato dal padding, non
       dalla sua max-width) e la corsia risulta piu' larga del necessario:
       e' l'errore dalla parte giusta, non produce sovrapposizioni.

       I 2.5rem non sono solo il respiro fra pannello e figura: 100vw conta
       anche la scrollbar mentre il gutter reale no, quindi il gutter viene
       sovrastimato di mezza scrollbar e il margine se ne mangia una parte. */
    .home-guide__cols {
        padding-right: max(0px, calc(
            var(--guide-figure-w) - (100vw - var(--home-content-w)) / 2 + 2.5rem
        ));
    }

    .home-guide__figure {
        display: block;
        position: absolute;
        /* Ancorata al bordo destro della banda, che e' a tutta pagina: la
           figura arriva al bordo dello schermo senza perdere la spalla. */
        right: 0;
        bottom: 0;
        z-index: 0;
        /* Dimensionata in larghezza e non in altezza: e' la larghezza a
           decidere quanto invade la griglia, e la corsia sopra e' calcolata
           sulla stessa variabile. L'aspect ratio nativo fa il resto. */
        width: var(--guide-figure-w);
        aspect-ratio: 769 / 1000;
        background: url("../asset/media/home-guide-consultant.webp") bottom right / contain no-repeat;
        pointer-events: none;
    }
}

.home-guide .home-section-eyebrow {
    color: var(--aml-orange-400);
}

.home-guide .home-section-title {
    color: #ffffff;
}

.home-guide__lede {
    margin: -0.5rem 0 2rem;
    max-width: 52ch;
    font-size: var(--aml-text-base);
    line-height: 1.6;
    color: var(--aml-slate-300);
}

.home-guide__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: start;
}

/* Barra di stato del configuratore: progresso + "ricomincia". Il totale non e'
   fisso (i rami hanno profondita' diversa), quindi i segmenti in eccesso
   vengono nascosti dal JS invece che disegnati spenti. */
.home-guide__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.home-guide__progress {
    display: inline-flex;
    gap: 4px;
}

.home-guide__progress-seg {
    width: 26px;
    height: 4px;
    border-radius: 2px;
    background: var(--aml-slate-700);
    transition: background 0.25s ease;
}

.home-guide__progress-seg.is-on {
    background: var(--aml-orange-500);
}

.home-guide__progress-seg[hidden] {
    display: none;
}

.home-guide__progress-label {
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aml-slate-400, #94a3b8);
}

.home-guide__reset {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    color: var(--aml-slate-300);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.home-guide__reset:hover {
    color: #ffffff;
}

.home-guide__reset[hidden] {
    display: none;
}

/* Filo di Arianna: ogni risposta gia' data resta cliccabile per tornarci
   sopra. E' il pezzo che rende il percorso a piu' passi accettabile — senza,
   sbagliare al passo 2 obbligherebbe a ricominciare da capo. */
.home-guide__trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.home-guide__trail[hidden] {
    display: none;
}

.home-guide__trail li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.home-guide__trail li + li::before {
    content: "›";
    color: var(--aml-slate-500, #64748b);
    font-size: var(--aml-text-sm);
}

.home-guide__crumb {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--aml-slate-700);
    border-radius: 999px;
    background: color-mix(in srgb, var(--aml-slate-900) 55%, transparent);
    color: var(--aml-slate-300);
    font: inherit;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.home-guide__crumb:hover {
    border-color: var(--aml-orange-500);
    color: #ffffff;
}

.home-guide__crumb:focus-visible {
    outline: 2px solid var(--aml-orange-400);
    outline-offset: 2px;
}

.home-guide__step[hidden] {
    display: none;
}

.home-guide__question {
    margin: 0 0 1rem;
    font-size: var(--aml-text-sm);
    font-weight: 700;
    color: var(--aml-slate-200);
}

/* Nel wizard la domanda e' una alla volta ed e' il titolo del passo: puo'
   permettersi il peso di un titolo vero. Nel markup legacy (altre lingue) le
   domande sono due insieme e restano piccole, come sopra. */
.home-guide__step .home-guide__question {
    font-size: var(--aml-text-lg);
    line-height: 1.35;
    color: #ffffff;
}

/* Riceve il focus a ogni cambio di passo (tabindex="-1"): senza questa regola
   il browser disegnerebbe comunque un anello attorno a un paragrafo, che a
   mouse risulta un artefatto. Il focus resta visibile da tastiera. */
.home-guide__question:focus {
    outline: none;
}

.home-guide__question:focus-visible {
    outline: 2px solid var(--aml-orange-400);
    outline-offset: 4px;
    border-radius: 4px;
}

.home-guide__options {
    display: grid;
    gap: 0.65rem;
}

/* Step 1 (categoria): chip affiancate invece della colonna verticale, cosi'
   le due domande insieme non allungano troppo la sezione. */
.home-guide__options--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.home-guide__options--inline .home-guide__option {
    width: auto;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
}

/* Separatore tra le due domande: il gruppo attivo e' l'unico non [hidden],
   quindi la regola colpisce sempre e solo quello visibile. */
.home-guide__step2 {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--aml-slate-700);
}

.home-guide__step2[hidden] {
    display: none;
}

.home-guide__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--aml-slate-700);
    background: color-mix(in srgb, var(--aml-slate-900) 55%, transparent);
    color: var(--aml-slate-300);
    font: inherit;
    font-size: var(--aml-text-sm);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.home-guide__option:hover {
    border-color: var(--aml-slate-500);
    color: #ffffff;
}

.home-guide__option.is-selected {
    background: var(--aml-slate-900);
    border-color: var(--aml-orange-500);
    color: #ffffff;
}

.home-guide__option:focus-visible {
    outline: 2px solid var(--aml-orange-400);
    outline-offset: 2px;
}

.home-guide__result {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--aml-orange-500) 40%, transparent);
    /* Quasi opaco. Nasceva per coprire la figura del consulente, che passava
       dietro; ora la figura ha una corsia sua e non ci passa piu', ma il
       fondo pieno resta la scelta giusta per il contrasto del testo. */
    background: color-mix(in srgb, var(--aml-slate-800) 96%, transparent);
}

.home-guide__result-img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin: 0 0 0.85rem;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

.home-guide__result-label {
    margin: 0 0 0.35rem;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aml-orange-400);
}

.home-guide__result-title {
    margin: 0 0 0.5rem;
    font-size: var(--aml-text-lg);
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.home-guide__result-body {
    margin: 0 0 1.25rem;
    font-size: var(--aml-text-sm);
    line-height: 1.55;
    color: var(--aml-slate-300);
}

/* Stato di partenza: il pannello non finge una raccomandazione prima che il
   cliente abbia risposto (era il difetto della versione precedente, che
   partiva sempre dallo stesso prodotto). Al suo posto spiega cosa succede e
   offre le tre guide di confronto, utili anche a chi non fa il percorso. */
.home-guide__result.is-empty {
    border-color: var(--aml-slate-700);
}

.home-guide__intro[hidden],
.home-guide__card[hidden] {
    display: none;
}

.home-guide__intro-sub {
    margin: 1.25rem 0 0.5rem;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    color: var(--aml-slate-400, #94a3b8);
}

.home-guide__hublist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.home-guide__hublist a {
    font-size: var(--aml-text-sm);
    font-weight: 700;
    color: var(--aml-orange-400);
    text-decoration: none;
}

.home-guide__hublist a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Il caveat. Serve a dire prima dell'acquisto quello che di solito si scopre
   dopo (CAL escluse, supporto Windows 10 finito, licenza per singola
   postazione): e' il motivo per cui il configuratore non e' un menu. */
.home-guide__note {
    display: flex;
    gap: 0.5rem;
    margin: -0.5rem 0 1.25rem;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    border-left: 3px solid var(--aml-orange-500);
    background: color-mix(in srgb, var(--aml-orange-500) 12%, transparent);
    font-size: var(--aml-text-xs);
    line-height: 1.5;
    color: var(--aml-slate-200);
}

.home-guide__note::before {
    content: "!";
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--aml-orange-500);
    color: #ffffff;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.home-guide__note[hidden] {
    display: none;
}

.home-guide__cta {
    display: inline-flex;
}

/* Le vie d'uscita: l'alternativa concreta, il confronto e il contatto umano.
   Senza queste il percorso resta un vicolo cieco quando il consiglio non
   convince. */
.home-guide__links {
    display: grid;
    gap: 0.5rem;
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--aml-slate-700);
}

.home-guide__link {
    font-size: var(--aml-text-xs);
    font-weight: 700;
    color: var(--aml-slate-300);
    text-decoration: none;
}

.home-guide__link:hover {
    color: var(--aml-orange-400);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-guide__link[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .home-guide__cols {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-guide__option,
    .home-guide__crumb,
    .home-guide__progress-seg {
        transition: none;
    }
}

/* Security First — finder, M365 band, business band.
   Niente padding orizzontale qui: sono sezioni "normali" (non a tutta
   pagina), quindi il gutter di main.home-page e' gia' sufficiente — vedi
   nota in cima al file. Raddoppiarlo stringeva il contenuto e lasciava
   troppo bianco ai lati su schermi da laptop/desktop. */
.home-protect,
.home-m365-band,
.home-business {
    padding: 2.5rem 0 2.75rem;
}

.home-protect {
    padding-bottom: 1.5rem;
}

.home-m365-band {
    padding-top: 1.75rem;
    border-top: 1px solid var(--aml-line);
}

.home-protect__bg {
    display: none;
}

@media (min-width: 1024px) {
    .home-protect__bg {
        display: block;
        position: absolute;
        top: 50%;
        left: max(-30px, calc((100vw - 1200px) / 2 - 160px));
        transform: translateY(-50%);
        width: 420px;
        height: 92%;
        background-image: url('../asset/media/security-protection-bg.webp');
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        pointer-events: none;
        opacity: 0.55;
        z-index: 0;
    }
}

.home-protect__inner,
.home-m365-band__inner {
    position: relative;
    z-index: 1;
    max-width: var(--aml-maxw, 1200px);
    margin: 0 auto;
}

.home-m365-band__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.home-m365-band__label .home-section-title,
.home-m365-band__label .home-catalog-lede {
    margin: 0;
}

.home-m365-band__label .home-catalog-lede {
    margin-top: 0.5rem;
}

@media (min-width: 900px) {
    .home-m365-band__inner {
        grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
        gap: 2rem;
    }

    .home-m365-band__label {
        padding-top: 0.2rem;
    }
}

.home-m365-band__content {
    container-type: inline-size;
    min-width: 0;
}

/* Hero Banner Visuale Desktop Microsoft 365:
   Nascosto di default su schermi mobile/tablet (<1024px) per azzerare il download dell'immagine (0 Byte).
   Attivo da min-width: 1024px con sfumatura navy e composizione grafica lifestyle. */
.home-m365-hero {
    display: none;
}

@media (min-width: 1024px) {
    .home-m365-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        grid-column: 1 / -1;
        background: #060e1d linear-gradient(135deg, #060e1d 0%, #0c1c38 55%, #020610 100%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--aml-radius-lg, 12px);
        box-shadow: 0 8px 24px -4px rgba(10, 24, 48, 0.22);
        padding: 1.25rem 2rem;
        margin-bottom: 0.75rem;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .home-m365-hero__content {
        flex: 1 1 55%;
        max-width: 580px;
        z-index: 2;
    }

    .home-m365-hero__badge {
        display: inline-flex;
        align-items: center;
        padding: 0.22rem 0.65rem;
        background: rgba(0, 102, 255, 0.2);
        border: 1px solid rgba(0, 102, 255, 0.45);
        color: #60a5fa;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border-radius: 20px;
        margin-bottom: 0.5rem;
    }

    .home-m365-hero__title {
        font-family: var(--aml-font-heading, inherit);
        font-size: clamp(1.2rem, 1.8vw, 1.45rem);
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 0.35rem;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    .home-m365-hero__sub {
        font-size: var(--aml-text-sm, 0.875rem);
        color: #94a3b8;
        margin: 0;
        line-height: 1.45;
    }

    .home-m365-hero__media {
        flex: 0 0 450px;
        height: 155px;
        margin: -1.25rem -2rem -1.25rem 0;
        background-image: url('../asset/media/m365-banner-lifestyle.webp');
        background-repeat: no-repeat;
        background-position: center right;
        background-size: cover;
        z-index: 1;
        mask-image: linear-gradient(to right, transparent 0%, #000 22%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
    }
}

.home-business__inner {
    max-width: var(--aml-maxw, 1200px);
    margin: 0 auto;
    padding: 1.25rem 1.75rem;
    border: 1px solid var(--aml-line);
    border-radius: var(--aml-radius-lg, 12px);
    background: var(--aml-surface);
    box-shadow: var(--aml-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 1.75rem;
    flex-wrap: wrap;
}

.home-business__copy {
    flex: 1 1 240px;
}

.home-business__copy .home-section-title {
    margin: 0 0 0.25rem;
}

.home-business__copy .home-catalog-lede {
    margin: 0;
}

.home-business__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 2 1 360px;
}

.home-business__card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--aml-line);
    border-radius: 999px;
    background: var(--aml-surface);
    color: var(--aml-ink);
    font-weight: 650;
    font-size: var(--aml-text-sm);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.home-business__card:hover {
    border-color: var(--aml-brand);
    color: var(--aml-brand);
}

.home-business__card:focus-visible {
    outline: 2px solid var(--aml-brand);
    outline-offset: 2px;
}

.plan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0 0;
    align-items: stretch;
}

@media (min-width: 900px) {
    .plan-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.15rem;
        align-items: stretch;
    }

    .plan-grid.plan-grid--count-2 {
        grid-template-columns: repeat(2, minmax(0, 280px));
        justify-content: center;
    }

    /* 4 varianti (es. McAfee 1/3/5/10): 2x2 fino a 1200px, poi 4 in fila. */
    .plan-grid.plan-grid--count-4 {
        grid-template-columns: repeat(2, minmax(0, 320px));
        justify-content: center;
    }
}

@media (min-width: 1200px) {
    .plan-grid.plan-grid--count-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.plan-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    padding: 1.15rem 1.1rem 1rem;
    border: 1px solid var(--aml-line);
    border-top: 3px solid var(--aml-slate-400);
    border-radius: var(--aml-radius-lg);
    background: var(--aml-surface);
    box-shadow: var(--aml-shadow-sm);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.plan-card--plus {
    border-top-color: var(--aml-brand);
}

.plan-card--premium {
    border-top-color: var(--aml-navy);
}

/* Accento sottile per brand (solo il filo superiore, mai lo sfondo intero:
   il sito deve restare Aml Store, non un mini-sito del produttore). */
.plan-card--brand-norton {
    border-top-color: #E8A400;
}

.plan-card--brand-eset {
    border-top-color: #2B6CB0;
}

.plan-card--brand-mcafee {
    border-top-color: #CC2936;
}

.plan-card--brand-bitdefender {
    border-top-color: #E24329;
}

.plan-card.is-featured {
    border-color: var(--aml-brand);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--aml-brand) 18%, transparent), var(--aml-shadow-sm);
}

@media (min-width: 900px) {
    .plan-card.is-featured {
        transform: translateY(-6px);
    }
}

@media (min-width: 900px) {
    .plan-card:not(.is-featured):hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--aml-ink) 14%, var(--aml-line));
        box-shadow: var(--aml-shadow-md);
    }

    .plan-card.is-featured:hover {
        box-shadow: 0 12px 30px color-mix(in srgb, var(--aml-brand) 24%, transparent), var(--aml-shadow-sm);
    }
}

.plan-card__badge {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--aml-cta-bg);
    color: var(--aml-cta-ink);
    font-size: var(--aml-text-xs);
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--aml-shadow-sm);
}

.plan-card__badge .plan-card__badge-icon {
    margin-right: 0.3rem;
}

.plan-card.is-featured .plan-card__badge {
    display: inline-flex;
    align-items: center;
}

.plan-card__brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.plan-card__brand-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--aml-radius-sm);
}

.plan-card__brand-icon--wordmark {
    width: auto;
    max-width: 110px;
    height: 24px;
    border-radius: 0;
    object-fit: contain;
    object-position: left center;
}

.plan-card__brand-text {
    min-width: 0;
}

.plan-card__role {
    margin: 0;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--aml-ink-2);
}

.plan-card__name {
    margin: 0.1rem 0 0;
    font-size: 1.1rem;
    font-weight: 750;
    color: var(--aml-ink);
    line-height: 1.25;
}

.plan-card__sub {
    margin: 0.35rem 0 0;
    font-size: var(--aml-text-xs);
    line-height: 1.45;
    color: var(--aml-ink-2);
}

.plan-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.45rem;
    margin: 0.85rem 0 0;
}

.plan-card__price-sale {
    font-size: var(--aml-text-price);
    font-weight: var(--aml-weight-price);
    letter-spacing: -0.02em;
    color: var(--aml-ink);
    line-height: 1;
}

.plan-card__price-msrp {
    font-size: var(--aml-text-base);
    font-weight: 600;
    color: var(--aml-ink-2);
    text-decoration: line-through;
}

.plan-card__price-period {
    margin: 0.2rem 0 0;
    font-size: var(--aml-text-xs);
    font-weight: 600;
    color: var(--aml-ink-2);
}

.plan-card__features {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
}

.plan-card__features li {
    position: relative;
    padding: 0.22rem 0 0.22rem 1.25rem;
    font-size: var(--aml-text-xs);
    line-height: 1.4;
    color: var(--aml-ink);
}

.plan-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.55rem;
    height: 0.3rem;
    border-left: 2px solid var(--aml-ok);
    border-bottom: 2px solid var(--aml-ok);
    transform: rotate(-45deg);
}

.plan-card__ideal {
    margin: 0.85rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--aml-line);
    font-size: var(--aml-text-sm);
    color: var(--aml-ink-2);
}

.plan-card__ideal strong {
    font-weight: 700;
    color: var(--aml-ink);
}

.plan-card__devices {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0.9rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--aml-line);
}

.plan-card__devices-label {
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--aml-ink-2);
}

.plan-card__devices-pill {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--aml-line);
    border-radius: var(--aml-radius-sm);
    background: var(--aml-surface);
    font-size: var(--aml-text-sm);
    font-weight: 650;
    color: var(--aml-ink);
}

.plan-card__devices-select {
    min-height: 40px;
    box-sizing: border-box;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--aml-line);
    border-radius: var(--aml-radius-sm);
    background: var(--aml-surface);
    color: var(--aml-ink);
    font-family: inherit;
    font-size: var(--aml-text-sm);
    font-weight: 650;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.plan-card__devices-select:hover {
    border-color: var(--aml-brand);
}

.plan-card__devices-select:focus-visible {
    outline: 2px solid var(--aml-brand);
    outline-offset: 2px;
}

.plan-card .btn-cta-primary {
    width: 100%;
    margin-top: 1rem;
    justify-content: center;
}

.plan-card__more {
    display: inline-flex;
    justify-content: center;
    margin-top: 0.55rem;
    font-size: var(--aml-text-sm);
    font-weight: 650;
    color: var(--aml-brand);
    text-decoration: none;
}

.plan-card__more:hover {
    text-decoration: underline;
}

.plan-card__more:focus-visible {
    outline: 2px solid var(--aml-brand);
    outline-offset: 2px;
}

.home-protect__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 1.35rem 0 0;
    text-align: center;
    font-size: var(--aml-text-sm);
    color: var(--aml-ink-2);
}

.home-protect__trust::before {
    content: "";
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.3rem;
    border-left: 2px solid var(--aml-ok);
    border-bottom: 2px solid var(--aml-ok);
    transform: rotate(-45deg);
}

.home-protect__all {
    display: block;
    margin: 0.5rem 0 0;
    text-align: center;
    font-weight: 650;
    color: var(--aml-brand);
}

.m365-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.9rem;
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
}

.m365-grid > li {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Soglia basata sulla larghezza della colonna contenuto (container query),
   cosi' la griglia si adatta allo spazio realmente disponibile anche quando
   la sidebar del titolo (da 900px) lo riduce rispetto alla viewport intera.
   Il container non supera mai ~810px di larghezza utile su questo layout
   (il main della home e' comunque limitato a ~1180px complessivi): 4
   colonne comprimerebbero card e CTA sotto una soglia leggibile, quindi il
   massimo stabile e utile e' 2 colonne (griglia 2x2 per 4 prodotti). */
@container (min-width: 480px) {
    .m365-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 780px) {
    .m365-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

/* Fallback per browser senza container query */
@supports not (container-type: inline-size) {
    @media (min-width: 700px) {
        .m365-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1100px) {
        .m365-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.75rem;
        }
    }
}

.m365-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 1rem 0.9rem 0.95rem;
    border: 1px solid var(--aml-line);
    border-radius: var(--aml-radius-lg);
    background: var(--aml-surface);
    box-shadow: var(--aml-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.m365-card__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-bottom: 0.5rem;
    border-radius: var(--aml-radius-sm);
}

@media (min-width: 700px) {
    .m365-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--aml-ink) 14%, var(--aml-line));
        box-shadow: var(--aml-shadow-md);
    }
}

.m365-card__name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--aml-ink);
}

.m365-card__payoff {
    margin: 0.3rem 0 0;
    font-size: var(--aml-text-xs);
    color: var(--aml-ink-2);
}

.m365-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.4rem;
    margin: 0.75rem 0 0;
}

.m365-card__price-sale {
    font-size: 1.35rem;
    font-weight: var(--aml-weight-price);
    letter-spacing: -0.02em;
    color: var(--aml-ink);
    line-height: 1;
}

.m365-card__price-msrp {
    font-size: var(--aml-text-xs);
    font-weight: 600;
    color: var(--aml-ink-2);
    text-decoration: line-through;
}

.m365-card__price-period {
    margin: 0.15rem 0 0;
    font-size: var(--aml-text-xs);
    font-weight: 600;
    color: var(--aml-ink-2);
}

.m365-card .btn-cta-primary {
    width: 100%;
    margin-top: auto;
    justify-content: center;
}

.m365-card__more {
    display: inline-flex;
    justify-content: center;
    margin-top: 0.45rem;
    font-size: var(--aml-text-sm);
    font-weight: 650;
    color: var(--aml-brand);
    text-decoration: none;
}

.m365-card__more:hover,
.home-protect__all:hover,
.home-m365-band__cta:hover {
    text-decoration: underline;
}

.m365-card__more:focus-visible,
.home-protect__all:focus-visible,
.home-m365-band__cta:focus-visible {
    outline: 2px solid var(--aml-brand);
    outline-offset: 2px;
}

.home-m365-band__cta,
.home-business__cta {
    display: inline-flex;
    margin-top: 1.1rem;
    font-weight: 650;
    color: var(--aml-brand);
}

@media (prefers-reduced-motion: reduce) {
    .plan-card.is-featured,
    .plan-card:hover,
    .m365-card:hover {
        transform: none;
    }
}

.av-filters,
.protect-brand-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}

.protect-brand-tabs {
    justify-content: center;
    margin: 1.5rem 0 1.25rem;
}

/* Stesso stile del menu select/pill dispositivi dentro le card (radius, bordo,
   superficie), non il chip arancione pieno: qui sono controlli-tab, non CTA. */
.av-filters [data-av-filter],
.protect-brand-tabs button {
    min-height: 44px;
    box-sizing: border-box;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--aml-line);
    border-radius: var(--aml-radius-sm);
    background: var(--aml-surface);
    color: var(--aml-ink);
    font-weight: 650;
    font-size: var(--aml-text-sm);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.av-filters [data-av-filter]:hover,
.protect-brand-tabs button:hover {
    border-color: var(--aml-brand);
}

.av-filters [data-av-filter].is-selected,
.protect-brand-tabs button.is-selected {
    border-color: var(--aml-brand);
    background: color-mix(in srgb, var(--aml-brand) 10%, var(--aml-surface));
    color: var(--aml-ink);
    font-weight: 700;
}

.av-filters [data-av-filter]:focus-visible,
.protect-brand-tabs button:focus-visible {
    outline: 2px solid var(--aml-brand);
    outline-offset: 2px;
}

.product-grid .product-card[hidden] {
    display: none;
}

.plan-grid[hidden] {
    display: none;
}