/* ==========================================================================
   HORNOI — LA STORIA
   Il livello condiviso dalle due pagine che raccontano l'autonomia: la home
   (home-autonomia.php) e la pagina del percorso (autonomia-digitale.php).
   Nasceva come foglio della sola home, e finché è rimasto lì le due pagine
   hanno cominciato a divergere: stessa storia, due impaginazioni diverse.
   Adesso la forma sta qui una volta sola, e ogni pagina aggiunge sopra il
   suo (autonomia.css per listino, estensioni e FAQ).

   Il prefisso .ha- resta: sta per «hornoi · autonomia», non per «home».
   Qualche componente lo usa una pagina sola — la cover a schermo intero e il
   motto sono della home — e va bene: è la stessa regola di pages.css.
 Tutto quello che esiste già —
   bottoni, pillole, timeline, confronto a due colonne, striscia scorrevole,
   galleria, note, recensioni — arriva da core.css, blocks.css e pages.css e
   qui non viene ridichiarato: se un blocco serve anche altrove, il suo posto
   è là.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LE SFUMATURE DI SEZIONE
   Il tema alterna chiaro e scuro con fondi piatti, ed è giusto sulle pagine
   di servizio: là il fondo deve sparire. Qui no. Questa è una pagina che si
   scorre tutta d'un fiato, e undici tagli netti la fanno sembrare undici
   pagine incollate.

   Ogni sezione ha quindi una sua luce, e soprattutto FINISCE nel colore di
   quella dopo: una sezione chiara che precede una scura si scurisce verso il
   fondo, una chiara che ne segue una scura parte già scurita e si schiarisce.
   Il taglio resta, ma smette di essere uno scalino.

   Il colore lo mette background-image e non background: il fondo pieno di
   .sec (background: var(--bg)) resta sotto come rete di sicurezza, e se un
   domani questi gradienti sparissero la pagina sarebbe ancora leggibile.
   -------------------------------------------------------------------------- */

/* Scura, in mezzo ad altre scure: si solleva al centro e torna giù ai bordi,
   con un fiato arancione dall'alto. Serve a dare profondità senza inventare
   un colore che nel design system non esiste. */
.ha-wash-ink {
    background-image:
        radial-gradient(120% 78% at 50% 0%, rgba(255, 90, 31, .07), transparent 62%),
        linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 48%, var(--ink) 100%);
}

/* Scura e più costruita: due fuochi arancioni in diagonale. La uso sulle due
   sezioni che devono pesare — i principi e il percorso — e non altrove,
   perché ripetuta ovunque smetterebbe di segnalare niente. */
.ha-wash-ink-deep {
    background-image:
        radial-gradient(86% 66% at 10% 6%, rgba(255, 90, 31, .11), transparent 62%),
        radial-gradient(76% 58% at 94% 98%, rgba(255, 90, 31, .07), transparent 60%),
        linear-gradient(162deg, var(--ink-2) 0%, var(--ink) 52%, var(--ink-2) 100%);
}

/* Chiara che PRECEDE una scura: parte bianca e si scurisce verso il fondo. */
.ha-wash-paper {
    background-image:
        radial-gradient(92% 58% at 50% 0%, rgba(255, 90, 31, .05), transparent 58%),
        linear-gradient(180deg, var(--paper) 0%, var(--paper) 52%, var(--paper-2) 100%);
}

/* Chiara che SEGUE una scura: parte già scurita e si apre. È l'immagine
   speculare della precedente, ed è quello che rende continuo il ritmo. */
.ha-wash-paper-2 {
    background-image: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 42%, var(--paper) 100%);
}

/* Chiara che precede una scura, partendo già scurita: scende di un tono
   soltanto, fino in fondo. La usano la missione — stretta fra la banda
   arancione e il percorso — e le recensioni, che chiudono sulla chiusura. */
.ha-wash-paper-3 {
    background-image: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
}

/* Chiara fra una scura e un'altra chiara: si apre e si richiude. La usa la
   sezione dei progetti, che viene dopo il percorso e prima delle recensioni:
   deve uscire dal nero e poi riconsegnare il tono da cui quelle partono. */
.ha-wash-paper-mid {
    background-image: linear-gradient(180deg,
        var(--paper-2) 0%, var(--paper) 34%, var(--paper) 64%, var(--paper-2) 100%);
}

/* --------------------------------------------------------------------------
   2. LE LETTERE
   Il testo che si scrive un carattere alla volta. Lo usano il nome in cover
   e il motto, e la differenza fra i due non sta qui: sta in chi muove --p.

   Il meccanismo costa un numero solo per frame. motion.js scrive su --p
   quanto la frase è avanti — da 0 a 1 — e ogni lettera confronta quel numero
   con la propria posizione --i. Nessuna animazione da orchestrare, nessuna
   classe da aggiungere a trenta elementi: cambia --p e si riaccendono da
   sole, anche tornando indietro.

   Due motori scrivono lo stesso --p e il CSS non sa quale sia in funzione:
   data-scrub lo lega allo scroll, data-write al tempo. Il primo serve dove
   la frase si incontra scorrendo, il secondo in cover, che è già sullo
   schermo quando la pagina si apre.

   --p vale 1 di suo. Se motion.js non gira — errore prima, script bloccato,
   JavaScript spento — il testo si vede tutto, che è l'unico modo accettabile
   per un titolo di fallire.
   -------------------------------------------------------------------------- */

/* La parola non si spezza mai a metà: per il browser sono lettere separate,
   e senza questo «visione» andrebbe a capo dove capita. */
.ha-w {
    display: inline-block;
    white-space: nowrap;
}

.ha-ch {
    /* Quante lettere stanno cambiando nello stesso momento. È la manopola
       della sfumatura: alzala e l'effetto diventa un'onda morbida,
       abbassala e le lettere scattano una a una. Ogni testo può darsi la
       sua, perché una frase lunga e un nome corto non vogliono lo stesso
       fronte. */
    --fronte: 9;

    /* Quanto il fronte sfora oltre l'ultima lettera. Serve perché anche
       quella si accenda del tutto prima della fine, invece di restare a
       metà quando --p tocca 1. */
    --margine: 12;

    display: inline-block;

    /* Quanto è avanti il fronte su questa lettera, prima di ammorbidirlo. */
    --raw: clamp(0, calc((var(--p) * (var(--n) + var(--margine)) - var(--i)) / var(--fronte)), 1);

    /*
     * La stessa quantità, addolcita.
     *
     * --raw cresce in modo lineare, e una rampa lineare si vede: le lettere
     * partono di colpo e si fermano di colpo. Questa è la smoothstep,
     * t²(3−2t): parte piano, accelera in mezzo, si posa. È la differenza fra
     * un'animazione che funziona e una che sembra elegante, e costa una
     * moltiplicazione.
     */
    --on: calc(var(--raw) * var(--raw) * (3 - 2 * var(--raw)));

    /* Non arriva a zero: la frase resta leggibile in filigrana anche prima
       di essere scritta, e quello che si anima è il passaggio da traccia a
       parola invece che da niente a parola. */
    opacity: calc(.06 + .94 * var(--on));

    /*
     * Tre cose insieme, tutte piccole: la lettera sale di un filo, cresce di
     * un filo e si mette a fuoco. Presa una per una nessuna si nota — ed è
     * il punto: quello che si deve notare è il testo che compare, non
     * l'effetto che lo fa comparire.
     *
     * La sfocatura è l'unica che costa qualcosa, perché il browser deve
     * ridisegnare ogni lettera mentre cambia. Cinque pixel su qualche decina
     * di lettere è un prezzo che si può pagare; se un domani questo
     * trattamento finisse su un paragrafo, è la riga da togliere per prima.
     */
    transform: translateY(calc((1 - var(--on)) * .24em)) scale(calc(.94 + .06 * var(--on)));
    filter: blur(calc((1 - var(--on)) * 5px));

    /* Nessuna transition, ed è voluto: --p si muove già in modo continuo,
       che lo spinga lo scroll o il tempo. Una transizione sopra lo farebbe
       arrivare in ritardo e molleggiare quando ci si ferma. */
}

/* --------------------------------------------------------------------------
   3. L'APERTURA
   Il blocco d'ingresso delle pagine che non hanno la cover della home:
   il percorso, «Chi sono», il Framework. Stessa impaginazione — occhiello,
   titolo grande, una riga di claim, i bottoni — con due altezze possibili.

   Di suo è alta quanto basta al suo contenuto. Con --full riempie la
   schermata: è la variante delle pagine che aprono un discorso invece di
   presentare un'offerta, dove la prima cosa da fare è far leggere una riga
   sola e niente altro.

   Quello che resta della sola home è la cover con le foto: --full ne prende
   l'altezza, non lo slideshow. È quella la sua firma, non i pixel.
   -------------------------------------------------------------------------- */
.ha-hero {
    /* l'header è fisso: il respiro sopra serve a ogni apertura, non a una */
    padding-top: clamp(120px, 12vw, 168px);
    padding-bottom: clamp(56px, 6vw, 88px);
    text-align: center;
    overflow: hidden;
}

.ha-hero__in { width: 100%; }

/*
 * L'apertura a schermo intero.
 *
 * min-height e non height: il contenuto comanda comunque, e su una finestra
 * bassa — un portatile vecchio, un telefono girato — l'apertura si allunga
 * invece di tagliare i bottoni fuori dallo schermo.
 *
 * svh sovrascrive vh dove il browser lo conosce, per la stessa ragione della
 * cover: su mobile la barra dell'indirizzo che compare e scompare cambia vh
 * a metà scroll, e senza svh l'apertura ballerebbe sotto le dita.
 *
 * Il respiro sopra è quello della cover e non quello dell'apertura corta:
 * qui il blocco è centrato sull'altezza, quindi il padding non serve a
 * scostarlo dall'header ma a tenere il centro ottico un filo sopra il centro
 * geometrico, che è dove l'occhio se lo aspetta.
 */
.ha-hero--full {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(104px, 14vh, 160px);
    padding-bottom: clamp(64px, 9vh, 112px);
}

/* L'alone dietro l'apertura. Sta qui e non nei fogli delle pagine perché
   spostarlo di pagina in pagina non aggiungerebbe niente: è lo stesso
   riverbero, e averne uno solo vuol dire che le aperture si somigliano
   davvero invece che per caso. */
.ha-hero__glow { top: -26%; right: -14%; width: 60vw; }

.hornoi .ha-hero__t {
    /* fronte stretto: questi titoli sono corti, e con il fronte del motto
       sarebbero una dissolvenza invece che una scrittura */
    --p: 1;
    --fronte: 6;
    --margine: 8;

    max-width: 20ch;
    margin-inline: auto;
    margin-top: clamp(20px, 3.2vh, 36px);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5.4vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -.038em;
    text-wrap: balance;
}

.hornoi .ha-hero__claim {
    max-width: 56ch;
    margin: clamp(22px, 3.4vh, 38px) auto 0;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.55;
    color: var(--fg-soft);
    text-wrap: pretty;
}

.ha-hero__cta { justify-content: center; margin-top: clamp(24px, 3.6vh, 40px); }

/* --------------------------------------------------------------------------
   4. COVER
   Schermo intero, le foto sul palco che scorrono dietro al testo.
   -------------------------------------------------------------------------- */
/* Centrata sui due assi. Prima era una colonna allineata a sinistra con
   cinque blocchi impilati — occhiello, titolo su due righe, lead, due
   bottoni, quattro riquadri di credenziali — e riempiva la schermata fino a
   toccare la barra in fondo. Adesso i blocchi sono quattro e corti, e quello
   che riempie lo schermo sono le foto: che è il motivo per cui ci sono. */
.ha-cover {
    /*
     * La durata di un singolo scatto, dichiarata qui e una volta sola: la
     * ereditano il fondo, le didascalie e gli indicatori, che devono restare
     * in sincrono. Prima stava scritta in tre punti, ed erano tre occasioni
     * di cambiarne due su tre e ritrovarsi la didascalia sfasata dalla foto.
     *
     * Il ciclo completo è questa moltiplicata per --n, cioè per quante foto
     * stampa hax_cover_slides(): oggi sei, quindi trenta secondi in tutto.
     *
     * Cinque secondi è il valore trovato provando: a 6,5 la cover si
     * addormentava e la sesta foto non la vedeva nessuno, a 4 sembrava
     * nervosa. Se un giorno viene la tentazione di riabbassarlo, il motivo
     * per cui non conviene è scritto qui.
     */
    --dur: 5s;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* svh sovrascrive vh dove il browser lo conosce: su mobile la barra che
       compare e scompare cambia vh a metà scroll, e la cover ballerebbe. */
    min-height: 100svh;
    padding-top: clamp(104px, 14vh, 160px);
    /* in fondo passa la barra delle didascalie: lo spazio è suo, e il testo
       non deve mai arrivarci sotto */
    padding-bottom: clamp(92px, 13vh, 144px);
    text-align: center;
    overflow: hidden;
}

.ha-cover__in { width: 100%; }

/* --- lo slideshow ------------------------------------------------------- */

.ha-cover__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ha-cover__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    animation: ha-slide calc(var(--n) * var(--dur)) var(--ease-io) infinite;
    animation-delay: calc(var(--i) * var(--dur));
}

.ha-cover__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 34%;
    /* mezza saturazione: la foto deve dare atmosfera, non competere con il
       titolo che ci sta sopra */
    filter: grayscale(.52) contrast(1.06);
}

/*
 * Le percentuali qui sotto valgono per SEI scatti, quanti ne ha oggi
 * hc_events(). La finestra di ciascuno è 100/6 = 16,67% del ciclo, e la
 * dissolvenza sfora di poco su quella dopo: è la sovrapposizione a far
 * sembrare il passaggio un respiro invece di un taglio.
 *
 * Se in hc_events() il numero di foto cambia, questa è la cosa da
 * ricalcolare — qui, in ha-cap e in ha-dot. La formula è sempre la stessa:
 * finestra = 100/n, l'entrata nel primo sesto di finestra, l'uscita che
 * scavalca il confine di un paio di punti. La durata del ciclo invece si
 * aggiusta da sola, perché la moltiplica --n.
 *
 * Lo scatto è anche una carrellata lenta: parte a 1.10 e arriva a 1.02
 * proprio mentre esce di campo, così il movimento sta tutto dentro i
 * secondi in cui la foto si vede davvero.
 */
@keyframes ha-slide {
    0%    { opacity: 0; transform: scale(1.10); }
    2.5%  { opacity: 1; }
    13%   { opacity: 1; }
    19%   { opacity: 0; transform: scale(1.02); }
    100%  { opacity: 0; transform: scale(1.02); }
}

/* Due velature sovrapposte. La prima era orizzontale, perché il testo stava
   in colonna a sinistra; ora che sta al centro è un ovale, più scuro dove
   cadono le parole e più leggero verso i bordi — così gli angoli della foto
   restano visibili invece di essere spenti insieme al resto. La seconda,
   verticale, riattacca la foto all'header sopra e alla sezione che viene
   dopo: senza, la cover finisce con un taglio netto. */
.ha-cover__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(118% 86% at 50% 46%,
            rgba(10, 10, 10, .88) 0%,
            rgba(10, 10, 10, .74) 44%,
            rgba(10, 10, 10, .50) 100%),
        linear-gradient(180deg,
            rgba(10, 10, 10, .90) 0%,
            transparent 22%,
            transparent 60%,
            var(--ink) 100%);
}

/* --- il testo ----------------------------------------------------------- */

/* L'occhiello numerato: dice di cosa parla la pagina e non chiede niente.
   Il numero è staccato da una riga verticale, come su una copertina. */
.ha-cover__kicker {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.ha-cover__kicker i {
    font-style: normal;
    padding-right: 13px;
    border-right: 1px solid var(--line);
    color: var(--orange);
}

/*
 * Da qui in avanti i margini verticali sono scritti con il prefisso .hornoi,
 * e non è pedanteria: il reset di core.css azzera i margini con
 * `.hornoi h1, ... .hornoi p { margin: 0 }`, che vale (0,1,1). Una regola a
 * classe sola vale (0,1,0) e perde, comunque la si scriva e in qualunque
 * ordine — la specificità non guarda l'ordine dei file.
 *
 * Senza il prefisso succede esattamente questo: nome, ruolo e claim si
 * incollano fra loro, la riga delle prove si attacca al bottone e il claim
 * perde il `margin-inline: auto` che lo teneva in mezzo, quindi con la sua
 * max-width scivola a sinistra e la cover sembra non centrata.
 *
 * È la stessa trappola che core.css documenta in fondo, nella sezione delle
 * utility .mt-*. Sui figli di un contenitore (`.ha-princ__i p`) il problema
 * non si pone: quelli valgono già (0,2,0).
 */

/* Il nome. È l'unico elemento della pagina che può permettersi questa
   misura, e la usa per una ragione precisa: dopo di lui non c'è più niente
   da leggere fino al bottone.

   Si scrive lettera per lettera all'ingresso (data-write, vedi sezione 2).
   Fronte e margine sono più stretti di quelli del motto: quindici lettere
   con il fronte largo nove sarebbero il nome intero in dissolvenza, e si
   perderebbe proprio la cosa che si voleva vedere. */
.hornoi .ha-cover__name {
    --p: 1;
    --fronte: 5;
    --margine: 6;
    margin-top: clamp(20px, 3.2vh, 36px);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.7rem, 7.4vw, 5.6rem);
    line-height: .98;
    letter-spacing: -.042em;
}

.hornoi .ha-cover__role {
    margin-top: clamp(12px, 1.8vh, 20px);
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.7vw, 1.32rem);
    font-weight: 500;
    letter-spacing: .005em;
    color: var(--fg-soft);
}

/* Il posizionamento. Non è più il titolo, ed è per questo che finalmente si
   legge: qui fa una cosa sola invece di due. */
.hornoi .ha-cover__claim {
    max-width: 47ch;
    margin: clamp(26px, 4vh, 46px) auto 0;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.5;
    color: var(--fg-soft);
    text-wrap: balance;
}

.ha-cover__cta {
    justify-content: center;
    margin-top: clamp(26px, 4vh, 44px);
}

/* Gli altri blocchi della cover non si scrivono lettera per lettera: su una
   frase intera sarebbe troppo, e toglierebbe al nome il momento che gli
   spetta. Entrano però con la stessa lingua — salgono e si mettono a fuoco —
   così la cover si legge come una cosa sola invece che come un titolo
   animato in mezzo a quattro comparse. */
.ha-cover [data-rv] {
    filter: blur(7px);
    transition: opacity .8s var(--ease),
                transform .8s var(--ease),
                filter .8s var(--ease);
    transition-delay: var(--rv-d, 0ms);
}
.ha-cover [data-rv].is-in { filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
    .ha-cover [data-rv] { filter: none; }
}

/* Le prove: una riga sola, separata da pallini arancioni. Erano quattro
   riquadri con icona e sottotitolo, e da soli si prendevano un quarto della
   schermata per dire queste stesse quattro cose. */
.hornoi .ha-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px 22px;
    margin-top: clamp(24px, 3.6vh, 40px);
}

.ha-proof li {
    position: relative;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--fg-muted);
}

/* Il separatore sta a destra della voce e non a sinistra della successiva:
   quando la riga va a capo — e sul telefono ci va — un pallino che chiude
   la riga si legge come punteggiatura, mentre uno che la apre sembra un
   errore. */
.ha-proof li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -12px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--orange);
    opacity: .8;
    transform: translateY(-50%);
}

@media (max-width: 560px) {
    .ha-proof { gap: 7px 18px; }
    .ha-proof li { font-size: .72rem; }
    .ha-proof li:not(:last-child)::after { right: -10px; }
}

/* --- la barra in fondo: didascalia e indicatori ------------------------- */
.ha-cover__foot {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding-block: 16px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, transparent, rgba(10, 10, 10, .6));
}

.ha-cover__foot-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Le didascalie stanno una sopra l'altra e si alternano con lo stesso ritmo
   delle foto: sono la stessa animazione, con lo stesso ritardo. */
.ha-cover__caps {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 2.6em;
}

.ha-cover__cap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    opacity: 0;
    animation: ha-cap calc(var(--n) * var(--dur)) var(--ease-io) infinite;
    animation-delay: calc(var(--i) * var(--dur));
}

.ha-cover__cap b {
    font-family: var(--f-display);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: -.012em;
}
.ha-cover__cap i {
    font-style: normal;
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--orange);
}

@keyframes ha-cap {
    0%    { opacity: 0; transform: translateY(6px); }
    2.5%  { opacity: 1; transform: translateY(0); }
    13%   { opacity: 1; transform: translateY(0); }
    19%   { opacity: 0; transform: translateY(-6px); }
    100%  { opacity: 0; transform: translateY(-6px); }
}

/* Gli indicatori: trattini che si riempiono nel tempo dello scatto. Fanno
   capire che la cover sta scorrendo, e quanto manca al prossimo. */
.ha-cover__dots {
    display: flex;
    gap: 7px;
    flex: none;
}

.ha-cover__dots span {
    position: relative;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    overflow: hidden;
}

.ha-cover__dots span::after {
    content: '';
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(0);
    background: var(--orange);
    animation: ha-dot calc(var(--n) * var(--dur)) linear infinite;
    animation-delay: calc(var(--i) * var(--dur));
}

@keyframes ha-dot {
    0%      { transform: scaleX(0); }
    16.67%  { transform: scaleX(1); }
    18%     { transform: scaleX(1); opacity: 1; }
    22%     { transform: scaleX(1); opacity: 0; }
    100%    { transform: scaleX(0); opacity: 0; }
}

/* Sul telefono la barra deve far stare sei indicatori e una didascalia nella
   stessa riga. I trattini si accorciano e il titolo resta su una riga sola,
   tagliato con i puntini: andando a capo uscirebbe dalla sua fascia e
   finirebbe sopra il testo della cover. */
@media (max-width: 640px) {
    .ha-cover__foot-in { gap: 14px; }
    .ha-cover__caps { height: 1.6em; }
    .ha-cover__cap i { display: none; }
    .ha-cover__cap b {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ha-cover__dots { gap: 5px; }
    .ha-cover__dots span { width: 14px; }
}

/*
 * Chi ha chiesto meno movimento non deve ritrovarsi una cover nera. Il
 * blocco reduced-motion di core.css tronca ogni animazione a .01ms, e senza
 * questa correzione tutti gli scatti resterebbero al loro stato di partenza,
 * che è opacity: 0. Qui la prima foto, la prima didascalia e il primo
 * indicatore vengono riaccesi a mano: la cover diventa una fotografia sola,
 * che è esattamente quello che la persona ha chiesto.
 */
@media (prefers-reduced-motion: reduce) {
    .ha-cover__slide { transform: none; }
    .ha-cover__slide:first-child { opacity: 1; }
    .ha-cover__cap:first-child { opacity: 1; transform: none; }
    .ha-cover__dots span:first-child::after { transform: scaleX(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   5. IL MOTTO
   Una sezione per una frase sola. Il carattere è più grande di qualunque
   titolo del sito, ed è il punto: qui non si legge, si guarda.

   Resta scuro come la cover, e non è una svista nell'alternanza: la barra
   delle didascalie chiude la cover con la sua riga, e da lì il nero
   prosegue. La frase atterra come un cartello, senza che una sezione chiara
   in mezzo le tolga il colpo.
   -------------------------------------------------------------------------- */
.ha-motto { overflow: hidden; }

/*
 * La frase si scrive mentre scorri: il markup lo costruisce hax_spezza() in
 * inc/story.php e la meccanica delle lettere sta nella sezione 2 di questo
 * foglio. Qui resta solo la tipografia del motto.
 *
 * text-wrap: balance è uscito: le righe le decide hax_motto() con i suoi a
 * capo, e su una frase fatta di inline-block il bilanciamento automatico non
 * ha niente da bilanciare.
 */
.ha-motto__q {
    --p: 1;
    /* il fronte è largo quasi un terzo della frase: è quello che la fa
       leggere come una sfumatura che attraversa il testo */
    --fronte: 9;
    margin: 0;
    text-align: center;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2rem, 5.6vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -.035em;
}

/* «rumore» perde colore e prende una riga mossa sotto: la parola si vede
   che è quella scartata, senza bisogno di spiegarlo. */
.ha-motto__noise {
    position: relative;
    color: var(--fg-faint);
}

/* Il trattino si tira solo alla fine, quando la parola è ormai scritta: è
   la cancellatura, e cancellare qualcosa che non c'è ancora non vuol dire
   niente. */
.ha-motto__noise::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: .06em;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        var(--orange) 0 3px,
        transparent 3px 7px
    );
    opacity: .5;

    /* Si tira da sinistra a destra, come una riga tracciata a mano, invece
       di comparire tutta insieme: parte quando la parola è ormai scritta e
       ci mette l'ultimo quinto di scroll. */
    transform: scaleX(clamp(0, calc((var(--p) - .8) * 5), 1));
    transform-origin: left center;
}

/* Chi ha chiesto meno movimento riceve la frase già scritta: motion.js in
   quel caso mette --p a 1 e non aggancia nemmeno lo scroll. Questo blocco è
   la seconda rete, per il caso in cui lo script non arrivi affatto. */
@media (prefers-reduced-motion: reduce) {
    .ha-ch { opacity: 1; transform: none; filter: none; }
    .ha-motto__noise::after { opacity: .5; transform: scaleX(1); }
}

/* La riga sotto la frase si apre dal centro verso i due lati mentre la
   sezione entra: fa atterrare il motto invece di lasciarlo sospeso. */
.ha-motto__rule {
    display: block;
    width: min(600px, 84%);
    height: auto;
    margin: clamp(26px, 3vw, 40px) auto 0;
    overflow: visible;
}
.ha-motto__rule-l { stroke: var(--line); stroke-width: 1.5; }
.ha-motto__rule-d { fill: var(--orange); }

.ha-motto__b {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
    max-width: 880px;
    margin: var(--sp-6) auto 0;
}
@media (max-width: 720px) { .ha-motto__b { grid-template-columns: minmax(0, 1fr); } }

.ha-motto__b p { margin: 0; }

/* --------------------------------------------------------------------------
   6. IL PROFESSIONISTA
   Ritratto a sinistra, il racconto in prima persona a destra. È la sezione
   che costruisce il credito che tutte le altre andranno a spendere.
   -------------------------------------------------------------------------- */
.ha-me {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: center;
}
@media (max-width: 900px) { .ha-me { grid-template-columns: minmax(0, 1fr); gap: 44px; } }

.ha-me__ph {
    position: relative;
    margin: 0;
    /* lo spazio in fondo è della scheda, che sborda dalla cornice */
    padding-bottom: 44px;
}

.ha-me__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-2);
    box-shadow: var(--shadow-lg);
}

.ha-me__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.03);
}

/* velo in basso: la scheda ci si appoggia sopra e resta leggibile */
.ha-me__frame::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background: linear-gradient(to top, rgba(10, 10, 10, .5), transparent);
}

.ha-me__card {
    position: absolute;
    left: clamp(16px, 2.4vw, 26px);
    right: clamp(16px, 2.4vw, 26px);
    bottom: 0;
    display: grid;
    gap: 5px;
    padding: clamp(16px, 1.8vw, 20px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.ha-me__card .pill { justify-self: start; margin-bottom: 3px; }
.ha-me__card strong {
    font-family: var(--f-display);
    font-size: 1.02rem;
    letter-spacing: -.02em;
}
.ha-me__card span { font-size: .78rem; line-height: 1.4; color: var(--fg-muted); }

.ha-me__b .lead { max-width: 60ch; }

/* --------------------------------------------------------------------------
   7. I NUMERI E LA STRISCIA
   -------------------------------------------------------------------------- */
.ha-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--line);
}
@media (max-width: 860px) { .ha-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } }

.ha-stat .stat__l { max-width: 24ch; }

/* il pallino davanti a ogni competenza: l'unica cosa che .mq non porta già */
.ha-stack .mq__i i {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--orange);
}

/* --------------------------------------------------------------------------
   8. I PRINCIPI
   Quattro schede, ognuna con il suo numero in filigrana. Il numero è grande
   e quasi trasparente: dà ritmo alla griglia senza chiedere di essere letto.
   -------------------------------------------------------------------------- */
.ha-princ { overflow: hidden; }
.ha-princ__glow { top: -18%; right: -12%; width: 54vw; }

.ha-princs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 760px) { .ha-princs { grid-template-columns: minmax(0, 1fr); } }

.ha-princ__i {
    position: relative;
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    transition: background var(--t), border-color var(--t), transform var(--t);
}
.ha-princ__i:hover {
    background: var(--surface-2);
    border-color: rgba(255, 90, 31, .24);
    transform: translateY(-3px);
}

.ha-princ__n {
    position: absolute;
    top: clamp(14px, 1.8vw, 20px);
    right: clamp(18px, 2.4vw, 28px);
    font-family: var(--f-display);
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--fg);
    opacity: .06;
    pointer-events: none;
}

.ha-princ__ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    background: rgba(255, 90, 31, .14);
    color: var(--orange);
}
.ha-princ__ico svg { width: 21px; height: 21px; }

.ha-princ__i h3 { margin-top: 20px; }
.ha-princ__i p { margin-top: 10px; max-width: 46ch; }

/* --------------------------------------------------------------------------
   9. I DUE RITRATTI E I SINTOMI
   -------------------------------------------------------------------------- */
.ha-dim { color: var(--fg-muted); }

.ha-portraits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 32px);
}
@media (max-width: 860px) { .ha-portraits { grid-template-columns: minmax(0, 1fr); } }

.ha-portrait {
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.ha-portrait__top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.ha-portrait__ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--orange);
}
.ha-portrait__ico svg { width: 21px; height: 21px; }

.ha-portrait__who {
    display: block;
    margin-top: 3px;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--fg-muted);
}

/* La frase detta in call. È il pezzo che deve far fermare chi legge, quindi
   ha il peso di un titolo e non di una citazione decorativa. */
.ha-portrait__q {
    position: relative;
    display: flex;
    gap: 14px;
    margin: 0 0 24px;
    padding: clamp(18px, 2vw, 24px);
    border-radius: var(--r);
    background: var(--surface-2);
    border-left: 3px solid var(--orange);
}
.ha-portrait__q svg { width: 18px; height: 18px; flex: none; color: var(--orange); margin-top: 3px; }
.ha-portrait__q p {
    margin: 0;
    font-family: var(--f-display);
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: -.018em;
}

.hornoi .ha-portrait__pains { margin-bottom: 24px; }
.ha-portrait__pains li { font-size: .93rem; }

/* la riga del costo resta in fondo anche se le due schede hanno elenchi di
   lunghezza diversa: è la conclusione, e due conclusioni disallineate
   sembrano un errore di impaginazione */
.hornoi .ha-portrait__cost {
    display: flex;
    gap: 12px;
    margin: auto 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: .93rem;
    line-height: 1.55;
    color: var(--fg-soft);
}
.ha-portrait__cost svg { width: 17px; height: 17px; flex: none; color: var(--orange); margin-top: 2px; }

/* --- i sintomi ---------------------------------------------------------- */
.ha-sympt {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 900px) { .ha-sympt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ha-sympt { grid-template-columns: minmax(0, 1fr); } }

.ha-sympt__i {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    font-size: .92rem;
    line-height: 1.45;
    color: var(--fg-soft);
    transition: border-color var(--t), background var(--t);
}
.ha-sympt__i:hover { border-color: rgba(255, 90, 31, .28); background: var(--surface-2); }

.ha-sympt__ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--orange);
}
.ha-sympt__ico svg { width: 15px; height: 15px; }
.ha-sympt__i:hover .ha-sympt__ico { background: rgba(255, 90, 31, .14); }

/* --------------------------------------------------------------------------
   10. LA CATENA CHE PORTA ALL'INAZIONE
   Sei caselle numerate, da leggere in fila. L'ultima ha una forma sua
   perché non è un passaggio del processo: è il suo risultato.
   -------------------------------------------------------------------------- */
.ha-prob { overflow: hidden; }
.ha-prob__glow { top: 12%; left: -14%; width: 52vw; }

.ha-chain {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 900px) { .ha-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ha-chain { grid-template-columns: minmax(0, 1fr); } }

.ha-chain__i {
    position: relative;
    padding: clamp(22px, 2.5vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    transition: border-color var(--t), background var(--t), transform var(--t);
}
.ha-chain__i:hover {
    background: var(--surface-2);
    transform: translateY(-2px);
}

.ha-chain__n {
    position: absolute;
    top: clamp(18px, 2.2vw, 26px);
    right: clamp(18px, 2.2vw, 26px);
    font-family: var(--f-mono);
    font-size: .72rem;
    color: var(--fg-faint);
    font-variant-numeric: tabular-nums;
}

.ha-chain__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--fg-soft);
}
.ha-chain__ico svg { width: 19px; height: 19px; }

.ha-chain__i h3 {
    margin: 18px 0 0;
    font-family: var(--f-display);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: -.018em;
}

.ha-chain__i p {
    margin: 9px 0 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--fg-muted);
}

/* L'ultima casella. L'arancione qui non è un accento decorativo: è l'unico
   punto della sezione in cui il colore dice «è questo che ti costa». */
.ha-chain__i--end {
    border-color: rgba(255, 90, 31, .34);
    background: linear-gradient(180deg, rgba(255, 90, 31, .10), transparent 70%), var(--surface);
    box-shadow: 0 0 0 4px rgba(255, 90, 31, .05);
}
.ha-chain__i--end .ha-chain__ico { background: rgba(255, 90, 31, .16); color: var(--orange); }
.ha-chain__i--end .ha-chain__n { color: var(--orange); }
.ha-chain__i--end p { color: var(--fg-soft); }

.hornoi .ha-prob__cut {
    margin: var(--sp-7) auto 0;
    max-width: 22em;
    text-align: center;
    font-family: var(--f-display);
    font-size: clamp(1.35rem, 2.6vw, 2.1rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.026em;
    color: var(--fg-muted);
}
.ha-prob__cut strong { color: var(--fg); font-weight: 650; }

/* --------------------------------------------------------------------------
   11. VISUAL · I DUE BINARI DEL TEMPO
   template-parts/visual/ha-tempo.php
   -------------------------------------------------------------------------- */
.hatm {
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.hatm__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 26px;
}

.hatm__t {
    font-family: var(--f-display);
    font-size: .96rem;
    font-weight: 600;
    letter-spacing: -.014em;
}

.hatm__legend { display: flex; flex-wrap: wrap; gap: 18px; }
.hatm__lg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .76rem;
    font-weight: 500;
    color: var(--fg-muted);
}
.hatm__lg i { width: 16px; height: 2px; border-radius: 2px; flex: none; }
.hatm__lg--bad i  { background: var(--fg-faint); }
.hatm__lg--good i { background: var(--orange); }

/* overflow visible: le etichette delle fermate sporgono dal viewBox */
.hatm__svg { display: block; width: 100%; height: auto; overflow: visible; }

.hatm .hatm-now  { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.hatm .hatm-rail { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.hatm .hatm-rail--bad  { stroke: var(--fg-faint); }
.hatm .hatm-rail--good { stroke: var(--orange); stroke-width: 3.2; }

/* .hatm-stop è solo il gruppo che tiene insieme pallino ed etichette: non ha
   stili suoi, li hanno i due modificatori qui sotto. */
.hatm .hatm-dot { fill: var(--surface); stroke: var(--fg-faint); stroke-width: 2.4; }
.hatm .hatm-stop--win .hatm-dot  { stroke: var(--orange); fill: var(--orange); }
/* il capolinea che spesso non si raggiunge: vuoto e tratteggiato */
.hatm .hatm-stop--miss .hatm-dot { stroke-dasharray: 3 3; opacity: .7; }

.hatm .hatm-ping { fill: none; stroke: var(--orange); stroke-width: 1.6; }

.hatm .hatm-row {
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    fill: var(--fg-muted);
}
.hatm .hatm-row--good { fill: var(--orange); }

.hatm .hatm-lbl {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 600;
    fill: var(--fg);
}
.hatm .hatm-w {
    font-family: var(--f-mono);
    font-size: 9.5px;
    fill: var(--fg-muted);
}
.hatm .hatm-stop--win .hatm-lbl { fill: var(--orange); }

.hatm .hatm-note {
    font-family: var(--f-body);
    font-size: 10.5px;
    font-style: italic;
    fill: var(--fg-faint);
}
.hatm .hatm-note--good { fill: var(--orange); font-style: normal; font-weight: 600; }

/* lo spazio che avanza dopo il binario corto: è il tempo che torna indietro */
.hatm .hatm-gain {
    fill: none;
    stroke: var(--orange);
    stroke-width: 2;
    stroke-dasharray: 2 7;
    opacity: .5;
}

/* Sotto una certa larghezza le etichette dentro l'SVG diventano illeggibili:
   il disegno si allarga oltre la colonna e si scorre di lato, invece di
   rimpicciolire il testo fino a farlo sparire. */
@media (max-width: 720px) {
    .hatm { overflow-x: auto; }
    .hatm__svg { min-width: 620px; }
}

/* --------------------------------------------------------------------------
   12. LA VISIONE
   Usa .vs di blocks.css: qui non c'è niente da aggiungere.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   13. IL PERCORSO · LO STEPPER
   A sinistra le quattro fasi, a destra la scena che si ridisegna su quella a
   fuoco. Su desktop la fase attiva la decide lo scroll; sotto i 940px il
   visual sparisce e le fasi tornano un elenco normale, tutte alla stessa
   opacità — un elenco in cui tre voci su quattro sono sbiadite, senza il
   disegno accanto, è solo un elenco mal stampato.
   -------------------------------------------------------------------------- */
/*
 * ATTENZIONE: la sezione #autonomia NON deve avere `overflow: hidden`, e ce
 * l'aveva.
 *
 * position: sticky smette di funzionare se un antenato ha un overflow
 * diverso da visible: quell'antenato diventa il contenitore di scorrimento
 * del figlio appiccicato, e siccome non scorre mai, il figlio si comporta
 * come un elemento normale. È esattamente quello che succedeva al disegno
 * delle fasi: scorreva via insieme all'elenco e a metà sezione era già
 * sparito in alto.
 *
 * L'avevo scritto copiando il modello delle altre sezioni scure, dove serve
 * davvero perché il loro alone (.bg-glow) è largo mezza finestra e sborda.
 * Qui dentro c'è solo .bg-grid, che sta a inset: 0 e non esce da nessuna
 * parte: non c'era niente da tagliare.
 *
 * Per questo la sezione non ha più una classe sua: non restava niente da
 * stilare, e .sec porta già il position: relative che serve a .bg-grid per
 * posizionarsi. Se un domani ne servisse una, il posto è questo.
 */

.ha-method {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}
@media (max-width: 940px) {
    .ha-method { grid-template-columns: minmax(0, 1fr); }
    .ha-method__viz { display: none; }
}

.ha-method__list { display: grid; margin: 0; padding: 0; list-style: none; }

.ha-method__i {
    padding: clamp(24px, 2.8vw, 34px) 0;
    border-top: 1px solid var(--line);
    opacity: .42;
    transition: opacity var(--t);
}
.ha-method__i:last-child { border-bottom: 1px solid var(--line); }
.ha-method__i.is-active { opacity: 1; }
.ha-method__i:focus-visible { outline-offset: 6px; }
@media (max-width: 940px) { .ha-method__i { opacity: 1; } }

.ha-method__hd {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
}
.ha-method__hd h3 { margin: 0; }

.ha-method__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--fg-muted);
    transition: background var(--t), color var(--t);
}
.ha-method__ico svg { width: 17px; height: 17px; }
.ha-method__i.is-active .ha-method__ico { background: rgba(255, 90, 31, .16); color: var(--orange); }

.ha-method__hd .ordinal { color: var(--fg-faint); transition: color var(--t); }
.ha-method__i.is-active .ordinal { color: var(--orange); }

/* la settimana chiude la riga, in mono: è un dato, non un titolo */
.ha-method__when {
    margin-left: auto;
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .04em;
    color: var(--fg-muted);
    white-space: nowrap;
}

.ha-method__i p { max-width: 52ch; }

/* Cosa resta in mano finita quella fase. Lo stampa solo la pagina del
   percorso: sulla home le fasi servono a far capire che esiste un ordine,
   là a far capire cosa si compra. Il prefisso .hornoi serve perché il reset
   azzera i margini delle liste con specificità più alta. */
.hornoi .ha-method__out {
    display: grid;
    gap: 9px;
    margin-top: var(--sp-4);
    padding: clamp(16px, 1.8vw, 20px);
    border-radius: var(--r);
    background: var(--surface-2);
}

.ha-method__out li {
    position: relative;
    padding-left: 22px;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--fg-soft);
}

.ha-method__out li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .48em;
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--orange);
}

/* Il disegno resta appiccicato mentre l'elenco scorre: è quello che rende
   evidente che la scena cambia con la fase, invece di farla scorrere via. */
/* Resta appiccicato mentre l'elenco scorre. Perché funzioni servono tre
   cose insieme, e togliendone una smette senza dire niente: align-items:
   start sulla griglia (così la colonna è alta quanto il disegno e ha spazio
   per scorrere dentro la sua area), un `top`, e nessun antenato con
   overflow diverso da visible — vedi la nota qui sopra.

   Il `top` è un clamp e non i 120px fissi delle altre pagine: il pannello è
   alto sui 440px e su uno schermo alto, incollato a 120px, resterebbe nel
   terzo superiore mentre l'occhio legge le fasi più in basso. Così scende
   quel tanto che basta a stargli davanti. */
.ha-method__viz {
    position: sticky;
    top: clamp(104px, 15vh, 168px);
}

/* --------------------------------------------------------------------------
   14. VISUAL · LE QUATTRO SCENE
   template-parts/visual/ha-fasi.php
   -------------------------------------------------------------------------- */
.hafz {
    padding: clamp(20px, 2.6vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.hafz__svg { display: block; width: 100%; height: auto; }

/* Le scene stanno una sopra l'altra nello stesso viewBox: si vede solo
   quella attiva. visibility, oltre a opacity, la toglie anche al puntatore e
   alle tecnologie assistive mentre è spenta. */
.hafz__scene {
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease-io), visibility 0s linear .45s;
}
.hafz__scene.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s var(--ease-io), visibility 0s;
}

.hafz .hafz-plate {
    fill: var(--surface-2);
    stroke: var(--line);
    stroke-width: 1;
}
.hafz .hafz-sep    { stroke: var(--line); stroke-width: 1; }
.hafz .hafz-accent { fill: var(--orange); }
.hafz .hafz-line   { fill: var(--fg); opacity: .16; }
.hafz .hafz-card   { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.hafz .hafz-num    { fill: none; stroke: var(--orange); stroke-width: 2; }
.hafz .hafz-tick   { fill: var(--fg); opacity: .22; }
.hafz .hafz-pill   { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.hafz .hafz-lock   { fill: var(--orange); }
.hafz .hafz-ring   { fill: none; stroke: var(--orange); stroke-width: 1.6; }
.hafz .hafz-mark   { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; }
.hafz .hafz-shield { fill: rgba(255, 90, 31, .12); stroke: var(--orange); stroke-width: 1.8; }
.hafz .hafz-check  { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; }
.hafz .hafz-cam    { fill: var(--surface); stroke: var(--orange); stroke-width: 1.6; }
.hafz .hafz-head   { fill: none; stroke: var(--fg-muted); stroke-width: 1.8; }
.hafz .hafz-body   { fill: none; stroke: var(--fg-muted); stroke-width: 1.8; }
.hafz .hafz-live   { fill: var(--orange); }
.hafz .hafz-cursor { fill: var(--fg); }
.hafz .hafz-up     { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hafz .hafz-pub    { fill: var(--orange); }
.hafz .hafz-bolt   { fill: #fff; }
.hafz .hafz-wave   { fill: none; stroke: var(--orange); stroke-width: 1.4; opacity: .3; }

.hafz .hafz-txt {
    font-family: var(--f-body);
    font-size: 10.5px;
    font-weight: 500;
    fill: var(--fg-muted);
}
.hafz .hafz-txt--pub { fill: #fff; font-weight: 600; font-size: 11.5px; }

/* --------------------------------------------------------------------------
   15. COSA RESTA IN MANO
   Un pannello solo, con l'etichetta a cavallo del bordo: sono le quattro
   cose che restano dopo, ed è la differenza fra un corso e un percorso.
   -------------------------------------------------------------------------- */
.ha-res {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 34px);
    padding: clamp(30px, 3.6vw, 46px);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
}
@media (max-width: 760px) { .ha-res { grid-template-columns: minmax(0, 1fr); } }

/* Vive di questo translateY: per questo il pannello entra con data-rv e non
   con data-rv-group, che azzererebbe il transform di ogni figlio diretto. */
.ha-res__k {
    position: absolute;
    top: 0;
    left: clamp(30px, 3.6vw, 46px);
    transform: translateY(-50%);
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.ha-res__i {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.ha-res__ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--orange);
}
.ha-res__ico svg { width: 18px; height: 18px; }

.ha-res__i p { margin-top: 7px; }

/* --------------------------------------------------------------------------
   16. LA CHIUSURA
   Sostituisce la CTA globale del footer, che il template spegne: là si
   chiede il Check-Up, qui il percorso.
   -------------------------------------------------------------------------- */
.ha-end { overflow: hidden; }
.ha-end .bg-glow { bottom: -40%; left: 50%; transform: translateX(-50%); width: 70vw; }

.ha-end__b {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
}

.ha-end__t { text-wrap: balance; }

.hornoi .ha-end__q {
    margin-top: var(--sp-4);
    font-family: var(--f-display);
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -.02em;
    color: var(--fg-soft);
}

.ha-end__row { justify-content: center; margin-top: var(--sp-6); gap: 14px; }

.ha-end__sig { justify-content: center; margin-top: var(--sp-6); }