/**
 * 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;
}

#trustpilot-widget {
    min-height: 40px;
    width: 100%;
}

#trustpilot-widget:not(.trustpilot-widget--active) {
    display: none;
}

/* ══ 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;
    background-color: var(--aml-slate-100);
    color: var(--aml-slate-900);
    overflow: hidden;
    isolation: isolate;
}

.home-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}

.home-hero__bg img {
    width: 100%;
    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-paper) 58%, transparent) 0%,
        color-mix(in srgb, var(--aml-paper) 47%, transparent) 35%,
        color-mix(in srgb, var(--aml-paper) 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: 34rem;
}

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

/* 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-color: var(--aml-paper);
    }

    .home-hero__bg::after {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--aml-paper) 78%, transparent) 0%,
            color-mix(in srgb, var(--aml-paper) 55%, transparent) 24%,
            color-mix(in srgb, var(--aml-paper) 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;
}

.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 con il configuratore che gli passa
   davanti. 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 il gutter
   destro sparisce e la figura finirebbe sopra il configuratore, 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) {
    .home-guide__figure {
        display: block;
        position: absolute;
        /* La figura vive nel gutter a destra della colonna centrale: il suo
           bordo sinistro si allinea al bordo destro del contenuto, cosi' su
           schermi larghi non copre affatto il pannello. Il 438px e' la sua
           larghezza resa (570px di altezza per l'aspect ratio 769/1000).
           Quando il gutter e' piu' stretto della figura il valore diventa
           negativo e la figura sborda a destra invece di invadere il
           pannello; il max() ferma lo sbordo a 70px per non perdere la
           spalla destra. */
        right: max(-70px, calc(50% - var(--home-content-w) / 2 - 438px));
        /* Ancorata al fondo della banda, non sospesa a mezz'aria. L'altezza
           e' volutamente contenuta: oltre i ~580px la figura diventa cosi'
           larga da finire con il viso dietro il pannello invece che accanto. */
        bottom: 0;
        z-index: 0;
        height: min(84%, 570px);
        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;
}

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

.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, non piu' 70%: con la figura del consulente dietro, un
       pannello traslucido lascerebbe trasparire il viso sotto il 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);
}

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

@media (prefers-reduced-motion: reduce) {
    .home-guide__option {
        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;
    }
}

.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;
}