/* *****************************************************

    AutoREG — Custom Stylesheet

    Spazio per piccole personalizzazioni dell'amministratore:
    viene caricato DOPO css/autoreg.min.css (vedi includes/head.tpl).

    Nota: questo file sostituisce il custom.css di twenty-one, che in
    WHMCS 9 imposta html { font-size: 14px } e le variabili del
    Nexus Cart (non usati da AutoREG). La base tipografica AutoREG è 16px.

    ── QUALE FOGLIO COMANDA ──────────────────────────────

    Sulle pagine del negozio i fogli sono tre, in quest'ordine:

      1. templates/autoreg/css/autoreg.min.css          il sistema, compilato
      2. templates/autoreg/css/custom.css               QUESTO
      3. templates/orderforms/autoreg_cart/css/custom.css   il carrello, compilato

    Il terzo si carica DOPO il secondo e ridichiara .ar-plans, .ar-plan,
    .ar-plan__head, .ar-plan__pricing e altro. A parità di specificità vince
    lui, non questo file. Dove serve scavalcarlo si usa — in quest'ordine:

      a. il token del sistema (--ar-fs-price-lg e simili), che si eredita e
         non innesca nessuna gara;
      b. la specificità: per la scheda serve (0,2,0), per i suoi discendenti
         (0,3,0). Il foglio del carrello sta a (0,1,0) e (0,2,0).

    Non aggiungere una quarta sorgente di stile.

***************************************************** */


/* =====================================================
   1. GRIGLIA DEI PIANI

   .ar-plans è fissata a repeat(3, …) e ha i modificatori --1 e --2, ma non
   --4. Doppia classe per la ragione spiegata in testa al file.
   ===================================================== */

/* Quattro colonne vere da 1280 in su. */
@media (min-width: 80rem) {
    .ar-plans.ar-plans--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: none;
    }
}

/* Due colonne da tablet a 1279: a quattro le schede sarebbero strette e la
   tipografia andrebbe compressa, che è esattamente ciò che non vogliamo. */
@media (min-width: 48rem) and (max-width: 79.999rem) {
    .ar-plans.ar-plans--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
}


/* =====================================================
   2. CERTIFICATI SSL — MISURE E COLORI

   --ssl-pad-x è l'UNICO margine orizzontale della scheda. Ogni fascia lo usa
   e nessuna ha margini propri: etichetta, titolo, descrizione, anteprima,
   prezzo, divisore, caratteristiche e pulsante partono tutti dalla stessa X.

   Le altezze delle prime quattro fasce sono FISSE su desktop. È una scelta:
   così le quattro schede hanno le stesse quote verticali per costruzione, non
   perché i testi si somigliano. Una descrizione più corta lascia spazio vuoto
   e non sposta niente di quello che viene dopo.

   Il colore è un ACCENTO, non una superficie: filo da 3px in cima,
   micro-etichetta, spunte, e una velatura appena percettibile dentro
   l'anteprima. La scheda resta bianca.
   ===================================================== */

.ar-plans--ssl {
    --ssl-pad-x: 1.375rem;

    --ssl-h-header: 11.75rem;
    --ssl-h-preview: 6.25rem;
    --ssl-h-price: 3.5rem;
    --ssl-h-sub: 2.5rem;
    --ssl-h-feature: 2.875rem;


    /* Due tonalità per piano e servono entrambe: --line per filetti e
       superfici, --ink per il TESTO (tutte ≥ 4.5:1 su bianco). Usare la prima
       per il testo farebbe cadere il contrasto sul verde e sull'oro. */
    --ssl-line: #3347f5;
    --ssl-ink: #2536d6;
    --ssl-tint: #f5f6ff;
    --ssl-lock: #0b7f5c;
}

.ar-plans--ssl .ar-plan--ssl-dv {
    --ssl-line: #3347f5;
    --ssl-ink: #2536d6;
    --ssl-tint: #f5f6ff;
}

.ar-plans--ssl .ar-plan--ssl-ov {
    --ssl-line: #7c4dff;
    --ssl-ink: #5b2bd9;
    --ssl-tint: #f8f6ff;
}

.ar-plans--ssl .ar-plan--ssl-wildcard {
    --ssl-line: #14b88a;
    --ssl-ink: #0b7f5c;
    --ssl-tint: #f2fbf8;
}

.ar-plans--ssl .ar-plan--ssl-ev {
    --ssl-line: #e0a109;
    --ssl-ink: #8a6508;
    --ssl-tint: #fffaf0;
}


/* =====================================================
   3. LA SCHEDA

   Sette righe esplicite, una per zona (ssl-card.tpl). Niente subgrid: righe
   dichiarate, prevedibili, identiche in tutte e quattro.
   ===================================================== */

/* Doppia classe: il foglio del carrello ridichiara `.ar-plans { gap }` e si
   carica dopo. Card vere e separate, non celle di una tabella.

   La sezione esce dal contenitore del carrello (1206px su uno schermo da 1440):
   con quattro schede quel contenitore lasciava 133px di bianco per lato e le
   schede scendevano a 279px. Adesso sono 329 e il blocco e' largo 1376.

   Si esce con `left: 50%` piu' `translate: -50%`, non con un margine negativo
   in percentuale: quello, dentro un foglio di stile, qui resta a zero (inline
   funziona, nel foglio no) e la quarta scheda finiva fuori dallo schermo.
   La larghezza e' limitata a 100vw meno un margine di rispetto, quindi non
   produce mai scorrimento orizzontale. */
.ar-plans.ar-plans--ssl {
    gap: 1.25rem;
    align-items: stretch;
}

/* Solo da 1280 in su: sotto, il contenitore del carrello e' gia' della misura
   giusta e allargare significherebbe stringere (a 320px `100vw - 4rem` vale
   256, meno dei 288 che la pagina dava da sola). */
@media (min-width: 80rem) {
    .ar-plans.ar-plans--ssl {
        width: min(100vw - 4rem, 96rem);
        max-width: none;
        position: relative;
        left: 50%;
        translate: -50%;
    }
}

.ar-plans--ssl .ar-plan--ssl {
    display: grid;
    grid-template-rows:
        var(--ssl-h-header)
        var(--ssl-h-preview)
        var(--ssl-h-price)
        var(--ssl-h-sub)
        auto
        1fr
        auto;
    row-gap: 0;
    /* NIENTE overflow: hidden. Il raggio agisce già sul border box, e un
       contenitore di scorrimento romperebbe la griglia. */
    border: 1px solid var(--ar-gray-200, #dfe2ec);
    border-top: 3px solid var(--ssl-line);
    border-radius: var(--ar-radius-lg, 10px);
    background: var(--ar-gray-0, #fff);
    box-shadow: 0 1px 2px #11153a0a;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    /* Una velatura del colore del piano che scende dal filo superiore e si
       spegne dentro l'intestazione. Al 5% e senza bordo: da' colore alla scheda
       senza diventare la fascia pastello di prima, che era piatta, opaca e
       uguale su tutti e quattro. */
    background-image: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--ssl-line) 5%, transparent),
        transparent var(--ssl-h-header)
    );
}

/* La scheda non ha padding proprio: ce l'ha ogni fascia, una volta sola, con
   --ssl-pad-x. Sommato a quello della scheda il rientro arrivava a 47px.

   Il foglio del carrello scrive `padding: var(--card-pad)` e ridefinisce
   --card-pad **sulla scheda stessa**, non su un antenato: ereditarlo dal
   contenitore quindi non serve a niente, va riscritto allo stesso livello. Il
   suo selettore vale (1,3,0) e si carica dopo, percio' qui ne serve uno da
   (1,4,0) — la classe della variante in piu'. Resta circoscritto alle schede
   SSL: le altre categorie non si toccano. */
#order-standard_cart .products .product.ar-plan.ar-plan--ssl {
    --card-pad: 0;
}

/* L'unico margine orizzontale della scheda. */
.ar-plans--ssl .ar-plan--ssl > * {
    padding-inline: var(--ssl-pad-x);
    margin: 0;
}

@media (hover: hover) {
    .ar-plans--ssl .ar-plan--ssl:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--ssl-line) 40%, var(--ar-gray-200, #dfe2ec));
        border-top-color: var(--ssl-line);
        box-shadow: 0 2px 4px #11153a0a, 0 12px 28px #11153a14;
    }
}


/* --- 3a. intestazione ------------------------------------------------ */

.ar-plans--ssl .ar-plan--ssl .ar-plan__head {
    /* Il tema dà alle intestazioni dei piani un fondo verde menta a tutta
       larghezza: identico su tutti e quattro, copre un terzo della scheda e
       annulla i colori di piano. Qui la scheda resta bianca. */
    background: none;
    border: 0;
    display: grid;
    align-content: start;
    padding-block: 1.25rem .5rem;
    overflow: hidden;
}

.ar-plans--ssl .ar-plan--ssl .ar-plan__kicker,
.ar-plans--ssl .ar-plan--ssl .ar-plan__name {
    padding-right: 3.5rem;
}

.ar-plans--ssl .ar-plan--ssl .ar-plan__kicker {
    color: var(--ssl-ink);
    text-transform: uppercase;
    letter-spacing: .065em;
    margin-bottom: .4375rem;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.2;
}

.ar-plans--ssl .ar-plan--ssl .ar-plan__name {
    color: var(--ssl-ink);
    margin-bottom: .5rem;
    font-size: 1.3125rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.012em;
    /* Due righe SEMPRE riservate, anche a chi ne usa una: «Enterprise SSL Pro»
       va a capo e gli altri no, e senza questo spazio la sua descrizione
       partirebbe piu' in basso. Lo spazio in eccesso resta vuoto: e' il punto. */
    min-height: calc(2 * 1.2em);
}

.ar-plans--ssl .ar-plan--ssl .ar-plan__tagline {
    color: var(--ar-ink-500, #62678a);
    font-size: .8125rem;
    line-height: 1.5;
}


/* Il lucchetto del piano, in alto a destra. Si chiude quando la scheda compare
   e stringe al passaggio del mouse: e' l'unica cosa che si muove nella scheda,
   e ha senso che sia proprio quella. */
.ar-plans--ssl .ar-plan--ssl {
    position: relative;
}

.ar-plan__seal {
    position: absolute;
    top: 1.125rem;
    right: var(--ssl-pad-x);
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ar-gray-0, #fff);
    color: var(--ssl-line);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--ssl-line) 22%, transparent),
        0 0 0 5px color-mix(in srgb, var(--ssl-line) 7%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ar-plan__seal svg {
    width: 1.625rem;
    height: 1.625rem;
    display: block;
}

@media (hover: hover) {
    .ar-plans--ssl .ar-plan--ssl:hover .ar-plan__seal {
        transform: scale(1.06);
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--ssl-line) 45%, transparent),
            0 0 0 8px color-mix(in srgb, var(--ssl-line) 10%, transparent);
    }
}

/* L'arco si disegna chiudendosi: 34 e' la lunghezza del tratto, misurata. */
@media (prefers-reduced-motion: no-preference) {
    .ar-plan__seal-shackle {
        stroke-dasharray: 34;
        animation: ar-seal .5s cubic-bezier(.4, 0, .2, 1) .1s both;
    }

    @keyframes ar-seal {
        from { stroke-dashoffset: 34; }
        to { stroke-dashoffset: 0; }
    }
}


/* --- 3b. anteprima --------------------------------------------------- */

.ar-plans--ssl .ar-plan--ssl .ar-plan__preview {
    display: grid;
    align-content: start;
    padding-block: 0 .75rem;
}


/* --- 3c. prezzo ------------------------------------------------------ */

.ar-plans--ssl .ar-plan--ssl .ar-plan__pricing {
    display: grid;
    align-content: start;
    padding-block: .25rem 0;
}

/* Una misura sola per tutti e quattro, scelta sul caso peggiore (€189,05):
   nessuna scheda viene rimpicciolita per far stare il suo numero. */
.ar-plans--ssl {
    --ar-fs-price-lg: 2.5rem;
}

/* Le parti del prezzo sulla stessa linea di base. */
.ar-plans--ssl .ar-plan--ssl .ar-price__visual {
    display: flex;
    align-items: baseline;
    gap: .0625rem;
}

.ar-plans--ssl .ar-plan--ssl .ar-price__cur {
    color: var(--ssl-line);
}


/* --- 3d. riga secondaria --------------------------------------------- */

.ar-plans--ssl .ar-plan--ssl .ar-plan__sub {
    display: grid;
    align-content: start;
    gap: .125rem;
    padding-block: .25rem 0;
}

.ar-plans--ssl .ar-plan--ssl .ar-plan__equiv,
.ar-plans--ssl .ar-plan--ssl .ar-plan__renewal {
    color: var(--ar-ink-500, #62678a);
    font-size: .75rem;
    line-height: 1.4;
    text-align: left;
}


/* --- 3e. divisore ---------------------------------------------------- */

.ar-plans--ssl .ar-plan--ssl .ar-plan__rule {
    border: 0;
    border-top: 1px solid var(--ar-gray-100, #eceef5);
    width: auto;
    height: 0;
    margin-block: .5rem 0;
}


/* --- 3f. caratteristiche --------------------------------------------- */

.ar-plans--ssl .ar-plan--ssl .ar-specs {
    display: grid;
    align-content: start;
    gap: 0;
    padding-block: 0;
    font-size: .8125rem;
}

/* Altezza fissa per riga: le cinque righe cadono alle stesse quote in tutte e
   quattro le schede, e un valore più lungo non sposta quelle sotto. */
.ar-plans--ssl .ar-plan--ssl .ar-specs__row {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-content: center;
    gap: 0 .5rem;
    min-height: var(--ssl-h-feature);
    padding-block: .375rem;
    border-top: 1px solid var(--ar-gray-100, #eceef5);
    line-height: 1.35;
}

.ar-plans--ssl .ar-plan--ssl .ar-specs__row:first-child {
    border-top: 0;
}

/* La spunta: una maschera SVG, così prende il colore del piano senza avere
   quattro immagini diverse. Niente file, niente font di icone. */
.ar-plans--ssl .ar-plan--ssl .ar-specs__row::before {
    content: "";
    grid-row: 1 / span 2;
    align-self: center;
    width: 1rem;
    height: 1rem;
    background-color: var(--ssl-ink);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ar-plans--ssl .ar-plan--ssl .ar-specs dt {
    color: var(--ar-ink-500, #62678a);
    grid-column: 2;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.3;
}

.ar-plans--ssl .ar-plan--ssl .ar-specs dd {
    color: var(--ar-ink-900, #11153a);
    grid-column: 2;
    font-size: .8125rem;
    font-weight: 600;
    /* Il tema allinea a destra i valori, perché nelle schede hosting etichetta
       e valore stanno sulla stessa riga. Qui sono incolonnati. */
    text-align: left;
    justify-self: start;
}


/* --- 3g. pulsante ---------------------------------------------------- */

.ar-plans--ssl .ar-plan--ssl .ar-plan__foot {
    display: grid;
    /* Senza questa riga la colonna implicita e' `auto` e si stringe sul
       contenuto: il pulsante restava largo 153px dentro una fascia da 229, e
       nemmeno `width: 100% !important` lo allargava, perche' quel 100% era il
       100% della traccia. */
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    padding-block: 1rem 1.25rem;
}

/* Un solo pulsante per tutti e quattro: il colore del piano resta un accento,
   non diventa quattro bottoni diversi. */
.ar-plans--ssl .ar-plan--ssl .ar-btn--buy {
    width: 100%;
}


/* =====================================================
   4. L'ANTEPRIMA DEL BROWSER

   Tre zone ad altezza fissa, sempre presenti. Il riquadro è identico nelle
   quattro schede: cambiano solo l'accento e il testo. Larghezza 100% della
   fascia, che è già rientrata di --ssl-pad-x: nessun margine proprio, nessun
   offset, nessuna traslazione.
   ===================================================== */

.ar-ssl-bar {
    display: grid;
    grid-template-rows: .5rem 1.875rem 1rem;
    align-content: start;
    gap: .375rem;
    width: 100%;
    padding: .625rem .625rem .6875rem;
    border: 1px solid color-mix(in srgb, var(--ssl-line) 18%, var(--ar-gray-200, #dfe2ec));
    border-radius: var(--ar-radius-sm, 6px);
    background: var(--ssl-tint);
}

.ar-ssl-bar__chrome {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.ar-ssl-bar__chrome i {
    width: .3125rem;
    height: .3125rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ssl-line) 32%, transparent);
}

/* La barra degli indirizzi. */
.ar-ssl-bar__addr {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .5rem;
    border: 1px solid color-mix(in srgb, var(--ssl-line) 20%, transparent);
    border-radius: 999px;
    background: var(--ar-gray-0, #fff);
    font-size: .75rem;
    overflow: hidden;
}

/* Il lucchetto è verde in tutti i piani: vuol dire «sicuro», non «piano tre». */
.ar-ssl-bar__lock {
    color: var(--ssl-lock);
    flex: none;
    width: .8125rem;
    height: .8125rem;
}

.ar-ssl-bar__host {
    color: var(--ar-ink-900, #11153a);
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La terza zona: ragione sociale, copertura del wildcard o nota. Una riga
   sola, sempre alla stessa quota. */
.ar-ssl-bar__detail {
    color: var(--ar-ink-500, #62678a);
    align-self: center;
    padding-left: .125rem;
    font-size: .6875rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-ssl-bar__detail b {
    color: var(--ssl-lock);
    font-weight: 700;
}


/* --- 4a. il lucchetto che si chiude --- */

@media (prefers-reduced-motion: no-preference) {
    .ar-ssl-bar__lock {
        transform-origin: 50% 70%;
        animation: ar-lock .22s ease-out both;
    }

    /* Al passaggio del mouse si richiude: un nome di animazione diverso, perche'
       la stessa non riparte da sola. */
    .ar-plans--ssl .ar-plan--ssl:hover .ar-ssl-bar__lock {
        animation: ar-lock-hover .22s ease-out both;
    }

    @keyframes ar-lock-hover {
        from {
            transform: translateY(-1px) scale(.88);
        }

        to {
            transform: none;
        }
    }

    /* Senza rimbalzo: si chiude e si ferma. */
    @keyframes ar-lock {
        from {
            transform: translateY(-1px) scale(.88);
            opacity: 0;
        }

        to {
            transform: none;
            opacity: 1;
        }
    }
}


/* =====================================================
   5. SOTTO I 1280

   Le altezze fisse servono ad allineare schede affiancate. Quando le schede
   vanno a capo (due colonne, una colonna) non c'è più niente da allineare e
   una gabbia rigida farebbe solo buchi: le righe tornano a seguire il
   contenuto, con più respiro.
   ===================================================== */

/* Due colonne: le schede sono affiancate, quindi vanno ancora allineate fra
   loro. Le fasce restano fisse, solo piu' basse: a 347px di larghezza i testi
   occupano meno righe che a 329. */
@media (min-width: 48rem) and (max-width: 79.999rem) {
    .ar-plans--ssl {
        --ssl-h-header: 10rem;
        --ssl-h-preview: 6.25rem;
    }

    .ar-plans--ssl .ar-plan--ssl .ar-plan__head {
        padding-block: 1.375rem .625rem;
    }
}

/* Una colonna: non c'e' piu' niente da allineare e una gabbia rigida farebbe
   solo buchi. Le righe tornano a seguire il contenuto, con piu' respiro. */
@media (max-width: 47.999rem) {
    .ar-plans--ssl .ar-plan--ssl {
        grid-template-rows: auto auto auto auto auto 1fr auto;
    }

    .ar-plans--ssl .ar-plan--ssl .ar-plan__head {
        padding-block: 1.375rem .625rem;
    }
}

@media (max-width: 47.999rem) {
    .ar-plans--ssl {
        --ssl-pad-x: 1.25rem;
        --ssl-h-feature: 3rem;
        --ar-fs-price-lg: 2.75rem;
    }

    .ar-plans--ssl .ar-plan--ssl .ar-plan__name {
        font-size: 1.5rem;
    }

    .ar-plans--ssl .ar-plan--ssl .ar-plan__tagline,
    .ar-plans--ssl .ar-plan--ssl .ar-specs dd {
        font-size: .875rem;
    }
}


/* =====================================================
   6. FOCUS DA TASTIERA

   Trovato mentre si verificavano le schede SSL: nel tema `.ar-btn` ha
   `outline-style: none` e non esiste nessuna regola `:focus-visible`. Chi
   naviga con il tastierino non vede dove si trova — su nessun pulsante del
   sito, non solo qui.

   La regola è additiva e riguarda solo il focus da tastiera: con il mouse non
   cambia niente, perché `:focus-visible` non scatta al clic.
   ===================================================== */

.ar-btn:focus-visible,
.btn-order-now:focus-visible {
    outline: 3px solid var(--ar-blue-600, #3347f5);
    outline-offset: 2px;
}

.ar-btn--buy:focus-visible {
    outline-color: var(--ar-ink-900, #11153a);
    box-shadow: 0 0 0 2px var(--ar-gray-0, #fff);
}


/* =====================================================
   7. PAGINA CERTIFICATI SSL — PALETTE

   Il verde della categoria (#13b584) e' gia' saturo: quello che rendeva la
   pagina spenta erano la velatura (#e3f7ef) e il gradiente (#d9f4e9 → #f0faf6),
   entrambi a un passo dal bianco. Qui restano gli stessi ruoli, con piu' colore.

   Il gradiente si muove davvero — menta, azzurro, lilla — e sono i colori che
   ritrovi negli accenti delle quattro schede: DV blu, OV viola, wildcard verde,
   EV oro. La pagina e le schede parlano la stessa lingua.

   Circoscritto alla landing SSL (`.ar-lp.ar-cat--ssl`): la stessa classe la usa
   anche la tessera del menu, che non va toccata.
   ===================================================== */

.ar-lp.ar-cat--ssl,
.ar-phero.ar-cat--ssl {
    --cat: #00cf90;
    --cat-2: #7cf5cd;
    /* L'unico che resta scuro: e' il colore del TESTO, e deve restare leggibile
       su bianco (7,2:1). Tutto il resto puo' urlare. */
    --cat-ink: #046b50;
    --cat-tint: #a6f4d7;
    --cat-soft: #00cf9047;
    --cat-glow: #00cf90d6;
    /* Quattro tappe invece di tre: smeraldo, ciano, indaco, rosa. Sono i colori
       degli accenti delle quattro schede, tirati su di parecchio. */
    --cat-grad: linear-gradient(120deg, #5cf0bd 0%, #45d7ff 36%, #8a86ff 70%, #ff93d8 100%);
    --cat-on-dark: #7cf5cd;
}


/* -----------------------------------------------------
   7a. Il ritmo delle sezioni

   La pagina era «spenta» non per colpa del verde: era bianca. Su nove fasce,
   sette avevano fondo bianco e due un colore a un passo dal bianco
   (#eafaf4, #f0f2ff). Cambiare i token non si vedeva perche' non c'era quasi
   niente da colorare.

   Qui le fasce si alternano davvero, e il giro dei colori e' lo stesso delle
   quattro schede: menta, ciano, indaco, rosa. Le fasce chiare restano chiare
   abbastanza da far leggere il testo scuro senza toccare i contrasti.
   ----------------------------------------------------- */

/* «Perche' l'HTTPS non e' un dettaglio» — le sei voci. */
.ar-lp.ar-cat--ssl .ar-lp-feats {
    background:
        radial-gradient(70rem 30rem at 85% 0%, #cffbec 0%, transparent 65%),
        linear-gradient(170deg, #e6fff7 0%, #edf8ff 100%);
}

/* Il confronto: e' il punto in cui si decide, e si stacca dal resto. */
.ar-lp.ar-cat--ssl .ar-lp-compare-sec {
    background:
        radial-gradient(60rem 26rem at 10% 100%, #ffe4f6 0%, transparent 62%),
        linear-gradient(160deg, #eee9ff 0%, #f6f0ff 58%, #fff0fa 100%);
}

/* I passaggi dell'attivazione. */
.ar-lp.ar-cat--ssl .ar-lp-steps-sec {
    background: linear-gradient(135deg, #c9f9e7 0%, #d5f1ff 55%, #e3e0ff 100%);
}

/* Le domande. */
.ar-lp.ar-cat--ssl .ar-lp-faq-sec {
    background:
        radial-gradient(56rem 24rem at 92% 8%, #d9f7ff 0%, transparent 60%),
        linear-gradient(180deg, #e8ecff 0%, #f4edff 100%);
}

/* L'illustrazione dentro le sezioni: l'alone prende piu' corpo. */
.ar-lp.ar-cat--ssl .ar-lp-stage {
    background:
        radial-gradient(70% 80% at 45% 45%, #00cf9066 0%, transparent 72%),
        radial-gradient(60% 70% at 75% 80%, #8a86ff3d 0%, transparent 70%);
}

/* Le schede delle sei voci restano bianche sopra la fascia colorata: e' il
   contrasto a farle risaltare, non un altro colore addosso. */
.ar-lp.ar-cat--ssl .ar-lp-feats .ar-card {
    background: #fff;
    border-color: #ffffff;
    box-shadow: 0 1px 2px #11153a0f, 0 10px 30px #0a4f3a14;
}


/* -----------------------------------------------------
   7b. L'hero

   Era la fascia piu' bianca della pagina, ed e' la prima che si vede. Tre
   aloni invece di uno: menta in alto a destra dietro l'illustrazione, ciano
   che attraversa, rosa in basso a sinistra sotto il titolo. Il testo resta
   scuro su chiaro, quindi i contrasti non si muovono.
   ----------------------------------------------------- */

.ar-phero.ar-cat--ssl.ar-phero--light {
    background:
        radial-gradient(52rem 32rem at 88% -10%, #6ef0c2 0%, transparent 62%),
        radial-gradient(44rem 26rem at 42% 108%, #ffb3e2 0%, transparent 60%),
        radial-gradient(60rem 34rem at 4% 20%, #9fe3ff 0%, transparent 64%),
        linear-gradient(160deg, #f2fffb 0%, #eef6ff 55%, #f8f0ff 100%);
}


/* =====================================================
   8. BADGE HOSTING VERDE (footer)

   Sta nella riga in fondo, insieme ai dati societari. Larghezza e altezza sono
   dichiarate anche nel markup: l'immagine arriva da fuori e senza quelle il
   footer farebbe un salto quando atterra.
   ===================================================== */

.ar-footer__green {
    display: inline-flex;
    margin-bottom: .75rem;
    border-radius: var(--ar-radius-sm, 6px);
    line-height: 0;
    transition: opacity .16s ease;
}

/* Altezza automatica: il badge lo disegna la fondazione e le sue misure possono cambiare
   (oggi 300x135). Un'altezza fissa lo schiaccerebbe — 200x95 lo stringeva del 5%. */
.ar-footer__green img {
    width: 200px;
    height: auto;
    max-width: 100%;
    border-radius: var(--ar-radius-sm, 6px);
}

@media (hover: hover) {
    .ar-footer__green:hover {
        opacity: .85;
    }
}

.ar-footer__green:focus-visible {
    outline: 3px solid var(--ar-blue-600, #3347f5);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------------------------------------
   Collegamenti legali del footer: scritte, non distintivi.

   Iubenda trasforma i suoi link in un distintivo a dimensione fissa. Lo fa in due modi che vanno
   battuti in due modi diversi:

     1. uno stile IN LINEA sull'elemento (width: 116px; height: 25px; display: inline-block) —
        contro un attributo style non basta la specificita, serve !important;
     2. il foglio https://cdn.iubenda.com/iubenda_badge.css, caricato dal suo script e servito da
        un altro dominio (quindi illeggibile da qui), che impone fondo bianco, angoli 3px e testo
        11px grassetto.

   Due cose che sembrano la causa e non lo sono, provate sul sito:
     · "no-brand" e attivo davvero — la Cookie Solution ha whitelabel: true — e non c'entra;
     · togliere "iubenda-white" non cambia NULLA: e "iubenda-embed" a portarsi dietro il badge.
       Ma quella classe serve ad aprire il documento nella finestra sovrapposta senza lasciare la
       pagina, quindi non si toglie: si sovrascrive lo stile.

   I valori qui sotto non sono scelti a occhio: sono quelli che il tema gia da agli altri link del
   footer (.ar-body .ar-footer a e .ar-footer__links a in autoreg.min.css). Verificato: le quattro
   voci legali calcolano le stesse identiche proprieta di "Chi siamo", che sta nella stessa lista.
   ------------------------------------------------------------------------------------------------ */
.ar-body .ar-footer a[class*="iubenda"] {
    width: auto !important;
    height: auto !important;
    padding-block: .1875rem !important;
    padding-inline: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font: inherit !important;
    color: rgb(255 255 255 / .78) !important;
    text-decoration: none !important;
    vertical-align: baseline !important;
}

/* Il colore qui sopra e !important, quindi batterebbe anche il :hover del tema: va ripetuto. */
.ar-body .ar-footer a[class*="iubenda"]:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* ------------------------------------------------------------------------------------------------
   PecPRO — contenuto del modulo nella pagina del servizio. Arriva dal workspace stage01
   (sessione PecPRO, 27/09/2026). Aggiunto IN CODA al file di produzione, non al posto suo:
   le due copie erano disgiunte (stage01 1,6 KB di sole regole PEC, produzione 27,8 KB senza
   nessuna regola PEC). Sostituire l'uno con l'altro avrebbe cancellato 26 KB di stili.
   ------------------------------------------------------------------------------------------------ */
/* *****************************************************

    AutoREG — Custom Stylesheet

    Spazio per piccole personalizzazioni dell'amministratore:
    viene caricato DOPO css/autoreg.min.css (vedi includes/head.tpl).

    Nota: questo file sostituisce il custom.css di twenty-one, che in
    WHMCS 9 imposta html { font-size: 14px } e le variabili del
    Nexus Cart (non usati da AutoREG). La base tipografica AutoREG è 16px.

***************************************************** */

/* PEC nell'area clienti (modulo autoreg_openapi_pec, templates/clientarea.tpl) ------------------ */
.ar-modulo { margin-block: 1.5rem; }
.ar-pec .ar-pannello__head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.ar-pec__stato { padding: .2rem .7rem; border-radius: 999px; background: var(--ar-blue-50); color: var(--ar-blue-700); font-size: .8125rem; font-weight: 800; }
.ar-pec__passi { margin: 0 0 1.5rem; }
.ar-pec__passi .ar-steps__item.is-done .ar-steps__num { background: var(--ar-mint-500); border-color: var(--ar-mint-500); color: #fff; }
.ar-pec__todo { display: grid; gap: 1rem; }
@media (min-width: 62em) { .ar-pec__todo { grid-template-columns: 1fr 1fr 2fr; align-items: start; } }
.ar-pec__passo { padding: 1.25rem; border: 1px solid var(--ar-gray-200); border-radius: 1rem; background: var(--ar-gray-25); }
.ar-pec__passo h3 { margin: 0 0 .35rem; font-size: 1.0625rem; }
.ar-pec__passo p { margin: 0 0 .75rem; color: var(--ar-ink-600); font-size: .9375rem; }
.ar-pec__passo .ar-field { margin-bottom: .75rem; }
.ar-pec__azioni { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }