/* ==========================================================================
   standalone-lab-hero.css - TESTATA del configuratore DXF, linguaggio lab-astucci
   ==========================================================================

   PERCHE' ESISTE
   Il committente ha indicato /lab-astucci/ come il risultato voluto. Questo
   foglio porta sulla testata del configuratore la grammatica di quella pagina:
   pannello bianco su fondo appena azzurrato, filetto chiaro invece dell'ombra,
   testo blu-grigio invece che nero, azzurro usato solo per qualificare.
   Il DNA estratto sta in /root/backups/2026-08-15-astucci-dna/CONTRATTO.md.

   ZONA DI COMPETENZA (nient'altro va toccato da qui)
   .sago-hero e tutto il suo contenuto: occhiello, titolo, sottotitolo,
   riga delle voci di fiducia, sigillo. NON si scrive una sola regola su
   .sago-topbar / .sago-contact-link / .sago-native-icon-box: quella barra
   e' gia' identica alla pagina astucci e il committente l'ha voluta cosi'.

   LA BARRA DEI PASSI 1-2-3 NON C'E', ED E' UNA SCELTA
   Su astucci la meta' destra della testata e' occupata da <nav class="ast-steps">
   con tre <button> (cerchio + titolo + sottotitolo). Qui quel markup non
   esiste e il template non e' modificabile da questo foglio: gli unici "1 2 3"
   in pagina sono tre .sago-step-number sepolti dentro tre .sago-step-card
   distanti fra loro, e nessuno di essi porta uno stato (is-active/is-done).
   Una barra ricostruita con pseudo-elementi sarebbe quindi FISSA: mostrerebbe
   sempre lo stesso passo acceso qualunque cosa faccia il cliente. Una barra
   che mente e' peggio di nessuna barra, percio' non si fa. Il markup esatto
   che servirebbe e' nel rapporto di consegna.

   COSA OCCUPA LA META' DESTRA, ALLORA
   Le tre voci di fiducia. Non e' un ripiego: su astucci la cella di destra
   della testata contiene esattamente tre voci "pastiglia + titolo in grassetto
   + sottotitolo piccolo", e le nostre tre voci hanno la stessa forma. Cosi' il
   vuoto segnalato dal committente ("in alto a destra c'e' uno spazio assurdo")
   si riempie con contenuto vero, la colonna di lettura resta stretta il
   giusto, e il titolo smette di andare a capo tre volte.

   CHI SI DEVE BATTERE (misurato sul servito, non ipotizzato)
   - standalone.css:49-51  body .sago-page .sago-hero {position/transform/
     margin/padding !important} - specificita' (0,2,1).
   - <style id="sago-dxf-hero-compact-source-v2"> - tutto !important su
     .sago-source-*-v2, classi che uno script aggiunge a DOMContentLoAded ai
     nostri stessi nodi - specificita' (0,2,1).
   - <style id="sago-dxf-trust-cards-v4"> - tutto !important sulle schede
     costruite a runtime - specificita' (0,2,1).
   Percio' qui si usa il prefisso "html body .sago-page .sago-hero", che vale
   (0,2,2) e li supera TUTTI di specificita'. Non basterebbe pareggiare: questo
   foglio viene appeso due volte, in testa e in coda, e a parita' di
   specificita' vincerebbe solo la copia in coda, con un lampeggio al primo
   paint. Vincendo di specificita' le due copie danno lo stesso esito.
   Il !important resta obbligatorio dove l'avversario ce l'ha: l'importanza
   batte la specificita', non viceversa.

   I TOKEN
   Li dichiara standalone-lab.css, primo della catena. Qui si consumano sempre
   con valore di ripiego, cosi' il foglio regge anche da solo.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LA FASCIA
   Su astucci la testata e' un pannello vero (.ast-head): fondo bianco, filetto
   azzurrato, raggio piccolo, ombra quasi inesistente. Qui si fa lo stesso.
   Il padding e il margin vanno con !important perche' standalone.css:49-51 li
   impone; il margin-bottom senza !important non si e' mai visto, ed e' quello
   che apre lo stacco fra testata e configuratore lamentato dal committente
   ("tutto troppo appiccicato").
   -------------------------------------------------------------------------- */
html body .sago-page .sago-hero{
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    row-gap:0;
    column-gap:0;

    /* respiro interno: era 22px sopra e 34px sotto, con i lati quasi a zero */
    padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,32px) !important;
    /* lo stacco verso il configuratore: unica via per aprirlo davvero */
    margin:0 0 clamp(22px,2.4vw,32px) !important;

    color:var(--ast-text,#29445f);
    /* il !important non e' pigrizia: standalone.css:299-301 impone
       background:transparent !important sulla testata. Senza, la fascia
       bianca non esiste e resta il degrade del corpo pagina. */
    background:var(--ast-paper,#ffffff) !important;
    border:1px solid var(--ast-line,#d7e3ee);
    border-radius:var(--ast-r-lg,9px);
    /* il contratto e' esplicito: qui la profondita' la fanno i filetti, non le
       ombre. Questa e' la stessa che astucci mette sotto .ast-head. */
    box-shadow:0 4px 18px rgba(20,57,89,.025);

    font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif);
}

/* Il raggio resta ben sotto 30px di proposito: lo script del mu-plugin
   hero-compact-v2 promuove a "badge" il primo antenato con border-radius >= 30
   e gli impone 136x136. Un raggio grande qui gli farebbe deformare la fascia. */


/* --------------------------------------------------------------------------
   2. LA COLONNA DI TESTO SPARISCE COME SCATOLA
   .sago-hero-copy e' un contenitore senza significato che chiude occhiello,
   titolo, sottotitolo e voci di fiducia. Con display:contents i suoi quattro
   figli diventano celle della griglia della testata: e' l'unico modo di
   portare le voci di fiducia nella meta' destra SENZA toccare il template.
   Resta valido anche a colonna singola, cosi' fra le due forme non cambia
   nulla nell'albero delle scatole e non c'e' riflusso.
   -------------------------------------------------------------------------- */
html body .sago-page .sago-hero .sago-hero-copy{
    display:contents;
}


/* --------------------------------------------------------------------------
   3. IL SIGILLO RESTA NEL DOM MA FUORI DALLA VISTA
   Non si puo' cancellare: il mu-plugin hero-compact-v2 esce del tutto se non
   trova un nodo foglia con testo "DXF 2D", e senza di lui la testata perde le
   sue misure compatte. Nascosto misura 0x0, quindi il cancello geometrico di
   badge-clean-v7 (antenato largo 90-280 e alto 70-240) non si apre mai e
   nessuna delle sue classi arriva sul DOM. Il testo continua a esistere per
   chi lo cerca via querySelector.
   L'informazione utile viene riproposta piu' sotto come contenuto generato,
   che non entra in textContent e quindi non confonde nessuno script.
   -------------------------------------------------------------------------- */
html body .sago-page .sago-hero .sago-hero-seal{
    display:none !important;
}


/* --------------------------------------------------------------------------
   4. OCCHIELLO
   Su astucci e' "— SAGOMATO.COM LAB": un trattino azzurro di 20x2 seguito da
   una scritta piccolissima molto spaziata. Il trattino qui e' un ::before,
   perche' nel nostro markup manca lo <span> che astucci usa per disegnarlo.
   Il ::before non aggiunge figli ne' testo: hero-compact-v2 cerca questo nodo
   con children.length === 0 e textContent === "crea il tuo sagomato", e
   continua a trovarlo.
   Colore: NON --ast-blue. Su carta bianca #0878e8 da' 4,32:1, sotto la soglia
   AA di 4,5 per un testo di 12px. La regola generale su questa pagina e':
   --ast-blue e --ast-green per le SUPERFICI, --ast-blue-text (#075fbd, 6,21:1)
   e --ast-green-text (#04795a, 5,40:1) per tutto cio' che si LEGGE.
   Corpo: 12px, non i 10,5px di astucci: sotto i 12px non si scende.
   -------------------------------------------------------------------------- */
html body .sago-page .sago-hero .sago-eyebrow{
    display:flex !important;
    align-items:center;
    gap:9px;

    grid-column:1;

    margin:0 0 clamp(12px,1.4vw,18px) !important;

    color:var(--ast-blue-text,var(--ast-blue-dark,#075fbd)) !important;

    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase;
}

html body .sago-page .sago-hero .sago-eyebrow::before{
    content:"";
    flex:0 0 auto;
    width:20px;
    height:2px;
    border-radius:2px;
    /* qui l'azzurro pieno va bene: e' un segno grafico, soglia 3:1, sta a 4,32 */
    background:var(--ast-blue,#0878e8);
}


/* --------------------------------------------------------------------------
   5. TITOLO
   Due difetti da chiudere insieme.
   (a) "in alto a destra c'e' uno spazio assurdo": la gabbia vera e'
       .sago-source-title-v2{max-width:820px !important}, che il mu-plugin
       applica a runtime. Si azzera esplicitamente: la larghezza del titolo la
       decide la colonna della griglia, non un tetto fisso.
   (b) il titolo andava a capo tre volte. Il markup ha gia' un <br> che dice
       dove spezzare; basta un corpo che permetta alla seconda riga (28 battute)
       di stare nella colonna. A 46px servono ~670px e la colonna ne offre 930
       a 1440. Il corpo scende con la finestra, quindi il conto regge sempre.
   Il salto da clamp(48px,3.8vw,62px) a clamp(30px,3.2vw,46px) non e' timidezza:
   e' la scala di astucci, dove l'h1 della testata sta fra 29 e 35px. E' quella
   densita' che il committente ha chiamato "stupenda".
   -------------------------------------------------------------------------- */
html body .sago-page .sago-hero h1{
    grid-column:1;

    max-width:none !important;
    margin:0 0 clamp(12px,1.3vw,17px) !important;

    color:var(--ast-navy,#0b2745) !important;

    font-size:clamp(30px,3.2vw,46px) !important;
    font-weight:900 !important;
    line-height:1.05 !important;
    letter-spacing:-.038em !important;
}

/* Niente text-wrap:balance qui: il markup ha gia' un <br> che decide dove
   spezzare, e il bilanciamento automatico potrebbe aggiungerne un altro,
   che e' esattamente il difetto da chiudere. */


/* --------------------------------------------------------------------------
   6. SOTTOTITOLO
   Colore --ast-copy: su carta bianca da' 4,57:1, sopra la soglia AA.
   Il tetto di misura resta, ma in px e non in ch: un tetto in ch si accorcia
   insieme al corpo e ricrea lo stesso difetto piu' in basso.
   -------------------------------------------------------------------------- */
html body .sago-page .sago-hero p{
    grid-column:1;

    max-width:640px !important;
    margin:0 !important;

    color:var(--ast-copy,#62788e) !important;

    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.55 !important;
}


/* --------------------------------------------------------------------------
   7. LA PASTIGLIA DI STATO
   Su astucci, sotto il sottotitolo, c'e' un pallino verde con "Pronto per il
   salvataggio". Qui la stessa cosa dice "Configurazione in corso" e recupera
   l'informazione del sigillo nascosto.
   E' un ::after DENTRO il paragrafo: non aggiunge figli e non entra in
   textContent, quindi ne' hero-compact-v2 ne' trust-cards-v4 ne'
   badge-clean-v7 la vedono. Se l'avessi messa come nodo vero avrei spostato i
   loro appigli.
   Il pallino e' disegnato con un radial-gradient perche' un solo
   pseudo-elemento non puo' contenerne un altro.
   -------------------------------------------------------------------------- */
html body .sago-page .sago-hero p::after{
    content:"Configurazione in corso · DXF 2D, analisi protetta";

    display:block;
    width:-moz-fit-content;
    width:fit-content;
    max-width:100%;

    margin:clamp(14px,1.5vw,18px) 0 0;
    padding:0 11px 0 24px;

    /* il pallino: cerchio da 3,5px di raggio a 12px dal bordo sinistro.
       --ast-green-text e non --ast-green: il token pieno su questo fondo da'
       2,98:1, appena sotto la soglia 3:1 dei segni non testuali. Cosi' sta a
       5,11:1. Non si puo' usare var() dentro un gradiente di un ::after e
       poi cambiarlo per stato, ma qui lo stato non cambia mai. */
    background-color:#f1fbf7;
    background-image:radial-gradient(circle at 12px 50%,#04795a 0 3.5px,transparent 3.5px);
    background-repeat:no-repeat;

    border:1px solid #cbeadf;
    border-radius:var(--ast-r,4px);

    /* #04795a su #f1fbf7 = 5,11:1. La coppia di astucci (.ast-live) era
       #087857 su #f1fbf7, 5,19:1: stessa famiglia, stessa leggibilita'. */
    color:var(--ast-green-text,#04795a);

    font-size:12px;
    font-weight:800;
    line-height:26px;
    letter-spacing:.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* ==========================================================================
   8. LE TRE VOCI DI FIDUCIA
   Due forme possibili, e il foglio deve essere decente in tutte e due.
   FORMA A RUNTIME  .sago-trust-row-v4 > .sago-trust-card-v4 >
                    (.sago-trust-icon-v4 > svg) + (.sago-trust-copy-v4 >
                     .sago-trust-title-v4 + .sago-trust-subtitle-v4)
                    La costruisce lo script inline sago-dxf-trust-cards-v4, che
                    riscrive className: dopo di lui .sago-trust-row NON esiste
                    piu' su quel nodo.
   FORMA STATICA    .sago-trust-row > tre <span> con il testo preceduto da "✓".
                    E' quella che si vede se lo script non gira, e quella che
                    si vede comunque fino a DOMContentLoaded.
   Nella grammatica astucci sono schede bianche con filetto e icona in un
   riquadro tinto. Il colore sta nel riquadro, non nel fondo della scheda:
   tre riquadri saturi sarebbero l'errore di lettura che il contratto vieta.
   ========================================================================== */

/* --- la riga, in entrambe le forme ---------------------------------------- */
html body .sago-page .sago-hero .sago-trust-row,
html body .sago-page .sago-hero .sago-trust-row-v4{
    grid-column:1;

    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:12px !important;

    width:auto !important;
    max-width:none !important;

    margin:clamp(20px,2.2vw,28px) 0 0 !important;
    padding:0 !important;
}

/* --- la scheda: guscio comune alle due forme ------------------------------- */
html body .sago-page .sago-hero .sago-trust-card-v4,
html body .sago-page .sago-hero .sago-trust-row>span{
    position:relative !important;

    align-items:center !important;

    min-width:0 !important;
    min-height:66px !important;

    margin:0 !important;
    /* il committente ha detto "tutto troppo appiccicato": il rientro passa da
       12/14 a 15/16, che e' quanto basta perche' la scheda respiri senza
       diventare un riquadro vuoto */
    padding:15px 16px !important;

    overflow:hidden !important;

    color:var(--ast-text,#29445f) !important;
    /* fondo pulito, niente sfumature: il colore vive nel riquadro dell'icona */
    background:var(--ast-paper,#ffffff) !important;

    border:1px solid var(--ast-line,#d7e3ee) !important;
    border-radius:var(--ast-r,4px) !important;

    box-shadow:none !important;

    text-align:left !important;

    font-size:12.5px !important;
    font-weight:700 !important;
    line-height:1.3 !important;

    transition:border-color .18s ease,box-shadow .18s ease !important;
}

/* La forma a runtime ha due figli: riquadro dell'icona e blocco di testo. */
html body .sago-page .sago-hero .sago-trust-card-v4{
    display:grid !important;
    grid-template-columns:36px minmax(0,1fr) !important;
    gap:12px !important;
}

/* La forma di riserva ha solo testo, quindi niente colonna per l'icona. */
html body .sago-page .sago-hero .sago-trust-row>span{
    display:flex !important;
    gap:0 !important;
}

/* La v4 disegna un alone azzurro nell'angolo in alto a destra di ogni scheda.
   Su astucci non esistono aloni: si spegne. */
html body .sago-page .sago-hero .sago-trust-card-v4::after{
    content:none !important;
    display:none !important;
}

/* La v4 solleva la scheda di 2px al passaggio del mouse. Qui la scheda non e'
   cliccabile, quindi non deve fingere di esserlo: resta ferma e cambia solo il
   filetto, come fanno i pannelli di astucci. */
html body .sago-page .sago-hero .sago-trust-card-v4:hover{
    transform:none !important;
    border-color:#b9d3ec !important;
    box-shadow:none !important;
}

/* --- il riquadro dell'icona ----------------------------------------------- */
/* Ricetta presa pari pari da .ast-option-icon di astucci: quadrato piccolo,
   raggio 4px, fondo tinto tenue, icona nel colore che qualifica la voce.
   Astucci la usa in verde (#087c5b su #dcf5eb): #e3f0fd e' la stessa tinta
   tradotta in azzurro. Non c'e' un token per questi due fondi perche' non
   compaiono nel :root della pagina viva: sono scritti a mano li' come qui. */
html body .sago-page .sago-hero .sago-trust-icon-v4{
    position:relative !important;
    z-index:1 !important;

    display:grid !important;
    place-items:center !important;

    width:36px !important;
    height:36px !important;

    margin:0 !important;
    padding:0 !important;

    /* 5,37:1 sul proprio fondo. Il tratto di un'icona e' inchiostro quanto una
       lettera: si usa la variante da testo, non --ast-blue (3,73:1). */
    color:var(--ast-blue-text,#075fbd) !important;
    background:#e3f0fd !important;

    border:0 !important;
    border-radius:var(--ast-r,4px) !important;

    box-shadow:none !important;
}

/* Terza voce: "Verifica tecnica inclusa". Il contratto riserva il verde a cio'
   che e' incluso o confermato, ed e' esattamente questo caso. Due azzurre e
   una verde e' la parsimonia di astucci, non decorazione. */
html body .sago-page .sago-hero .sago-trust-card-v4:nth-child(3) .sago-trust-icon-v4{
    /* 4,71:1 su #dcf5eb */
    color:var(--ast-green-text,#04795a) !important;
    background:#dcf5eb !important;
}

html body .sago-page .sago-hero .sago-trust-icon-v4 svg{
    display:block !important;

    width:18px !important;
    height:18px !important;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

/* --- i due testi della scheda --------------------------------------------- */
html body .sago-page .sago-hero .sago-trust-copy-v4{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:3px !important;

    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
}

html body .sago-page .sago-hero .sago-trust-title-v4{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:var(--ast-navy,#0b2745) !important;

    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    letter-spacing:-.01em !important;

    /* astucci taglia con i puntini invece di far crescere la scheda */
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
}

/* Il blocco inline della v4 mette il sottotitolo a 10,5px. Sotto i 12px non si
   scende: qui si riporta a 12px. --ast-copy su carta bianca da' 4,57:1. */
html body .sago-page .sago-hero .sago-trust-subtitle-v4{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:var(--ast-copy,#62788e) !important;

    font-size:12px !important;
    font-weight:500 !important;
    line-height:1.25 !important;

    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
}

/* --- la forma di riserva --------------------------------------------------
   Se lo script non gira restano tre <span> con dentro "✓ testo". Non c'e' modo
   di dare loro un riquadro-icona (il segno di spunta e' dentro il testo, non e'
   un nodo), percio' si sceglie la seconda forma di astucci: il filetto sinistro
   di 4px nel colore che qualifica, che il contratto cita per gli elementi
   importanti. Restano schede bianche, allineate alla stessa griglia, con lo
   stesso rientro: la testata resta composta anche senza JavaScript.
   Il mu-plugin puo' averle marcate .sago-source-benefit-v2 con
   min-height/padding/font-size !important: si battono qui. */
html body .sago-page .sago-hero .sago-trust-row span{
    border-left:4px solid var(--ast-blue,#0878e8) !important;

    color:var(--ast-navy,#0b2745) !important;
    font-weight:800 !important;
}

html body .sago-page .sago-hero .sago-trust-row span:nth-child(3){
    border-left-color:var(--ast-green-text,#04795a) !important;
}


/* ==========================================================================
   9. SOPRA I 1180px: LA TESTATA SI APRE IN DUE
   E' la stessa soglia a cui standalone.css fa passare il configuratore da tre
   colonne a due, cosi' testata e corpo cambiano respiro insieme.
   A sinistra la colonna di lettura, a destra le tre voci: e' la disposizione
   di .ast-head su astucci, dove la cella destra ospita tre voci con lo stesso
   ritmo "pastiglia + titolo + sottotitolo".
   Le celle sono assegnate a mano e non lasciate all'incolonnamento automatico:
   se un mu-plugin infilasse un nodo dentro .sago-hero-copy finirebbe in una
   riga implicita a sinistra, senza scomporre la testata.
   ========================================================================== */
@media (min-width:1181px){

    html body .sago-page .sago-hero{
        grid-template-columns:minmax(0,1fr) minmax(292px,352px);
        /* la terza riga e' l'unica elastica di proposito. Le tre voci di
           fiducia occupano tutte e tre le righe, e un elemento che ne
           attraversa piu' d'una distribuisce la propria altezza sulle righe
           che tocca: con tre righe "auto" la pila di destra, se piu' alta del
           testo, aprirebbe buchi fra occhiello, titolo e sottotitolo. Con una
           riga in fr tutta l'eccedenza finisce sotto il sottotitolo, dove non
           si vede, e il ritmo verticale del testo resta quello scritto nei
           margini. */
        grid-template-rows:auto auto 1fr;
        column-gap:clamp(26px,3vw,44px);
        align-items:start;
    }

    html body .sago-page .sago-hero .sago-eyebrow{
        grid-row:1;
        grid-column:1;
    }

    html body .sago-page .sago-hero h1{
        grid-row:2;
        grid-column:1;
    }

    html body .sago-page .sago-hero p{
        grid-row:3;
        grid-column:1;
    }

    /* le tre voci occupano tutta l'altezza della cella destra e si centrano
       rispetto al blocco di testo: e' quello che pareggia otticamente i due
       lati e chiude lo "spazio assurdo" segnalato dal committente */
    html body .sago-page .sago-hero .sago-trust-row,
    html body .sago-page .sago-hero .sago-trust-row-v4{
        grid-row:1 / 4;
        grid-column:2;
        align-self:center;

        grid-template-columns:minmax(0,1fr) !important;
        gap:10px !important;
        margin:0 !important;
    }
}


/* --------------------------------------------------------------------------
   10. SOTTO I 760px: le tre voci si incolonnano
   A tre colonne i titoli ("Verifica tecnica inclusa") non ci starebbero e
   verrebbero tagliati dai puntini.
   -------------------------------------------------------------------------- */
@media (max-width:760px){

    html body .sago-page .sago-hero .sago-trust-row,
    html body .sago-page .sago-hero .sago-trust-row-v4{
        grid-template-columns:minmax(0,1fr) !important;
        gap:10px !important;
    }

    html body .sago-page .sago-hero .sago-trust-card-v4,
    html body .sago-page .sago-hero .sago-trust-row>span{
        min-height:60px !important;
        padding:13px 14px !important;
    }

    /* a schermo stretto la pastiglia di stato puo' andare a capo invece di
       essere troncata: c'e' spazio in verticale, non in orizzontale */
    html body .sago-page .sago-hero p::after{
        line-height:1.4;
        padding:7px 12px 7px 24px;
        white-space:normal;
        background-image:radial-gradient(circle at 12px 15px,#04795a 0 3.5px,transparent 3.5px);
    }
}


/* --------------------------------------------------------------------------
   11. SOTTO I 440px
   Titolo e testi restano leggibili senza scendere sotto i 12px.
   -------------------------------------------------------------------------- */
@media (max-width:440px){

    html body .sago-page .sago-hero{
        padding:22px 18px 24px !important;
        border-radius:var(--ast-r,4px);
    }

    html body .sago-page .sago-hero .sago-trust-title-v4,
    html body .sago-page .sago-hero .sago-trust-subtitle-v4{
        white-space:normal !important;
    }
}


/* --------------------------------------------------------------------------
   12. MOVIMENTO E FUOCO
   L'unica transizione di questo foglio e' il filetto della scheda al passaggio
   del mouse; la v4 ne aveva anche una su transform, gia' spenta sopra. Chi ha
   chiesto meno movimento non ne vede nessuno.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){

    html body .sago-page .sago-hero .sago-trust-card-v4,
    html body .sago-page .sago-hero .sago-trust-row>span{
        transition:none !important;
    }

    html body .sago-page .sago-hero .sago-trust-card-v4:hover{
        transform:none !important;
    }
}

/* Oggi nella testata non c'e' nulla che prenda il fuoco da tastiera. La regola
   sta qui lo stesso perche' il giorno in cui il template ci mettesse un link o
   la barra dei passi (che e' fatta di <button>), l'anello di fuoco di astucci
   ci sarebbe gia' e nessuno dovrebbe ricordarsene. */
html body .sago-page .sago-hero a:focus-visible,
html body .sago-page .sago-hero button:focus-visible{
    outline:2px solid var(--ast-blue,#0878e8);
    outline-offset:2px;
    border-radius:var(--ast-r,4px);
    box-shadow:var(--ast-focus,0 0 0 3px rgba(8,120,232,.11));
}