/* Pagina del metodo (methodology.php), hero B (blu pieno). Concept del 30/10/2026:
   docs/concepts/metodo-design/metodo-hero.php. */

/* Sul tema del sito: niente barra scura a tutta larghezza sulla testata (la navbar è la lastra di vetro al centro, come
   in home) e l'interlinea normale del concept al posto dell'1.6 del corpo. */
body.public-site.mh {
    line-height: normal;
}

body.public-site.mh > header.mh-header {
    background: none;
    border-bottom: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Le misure della pagina sono pensate senza il reset del sito (* { box-sizing: border-box }): nella testata e nel
   contenuto torna content-box. Specificità zero, così le classi che chiedono border-box restano come sono. */
:where(body.mh .mh-header, body.mh main) :where(*, *::before, *::after) {
    box-sizing: content-box;
}

body.mh {
    /* Le misure dei pulsanti e il passo della home (styles/public-home-hero.css le mette su body.homepage). */
    --home-gutter: clamp(16px, 4vw, 40px);
    --home-ease: cubic-bezier(.2, .7, .2, 1);
    --home-btn-h: 52px;
    --home-btn-px: 24px;
    --home-btn-r: 20px;
    --home-btn-fs: 16px;
    --home-btn-ls: -.01em;
    --home-btn-sm-h: 32px;
    --home-btn-sm-px: 13px;
    --home-btn-sm-r: 12px;
    --home-btn-sm-fs: 13px;
    --home-btn-line: 1.5px;
    --home-btn-press: scale(1.03);
    --home-btn-spring: cubic-bezier(.3, 1.5, .5, 1);

    --ink: #0b0d12;
    --paper: #fafaf8;
    --b: var(--public-blue-rgb);
    --side: clamp(28px, 4.5vw, 72px);

    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--public-font-body);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Navbar: lo stesso vetro della home, in versione chiara (latte) ---------- */

.mh-header {
    position: fixed;
    inset: 28px 0 auto;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 0 var(--home-gutter);
    pointer-events: none;
}

.mh-nav {
    --g-tint: rgba(255, 255, 255, .62);
    --g-solid: #fff;
    --g-bright: 1.04;
    --g-spec: 1;
    --g-spec-2: .6;
    --g-drop: 0 0 0 1px rgba(11, 13, 18, .06), 0 12px 32px -16px rgba(11, 13, 18, .28);
    gap: 10px;
    padding: 9px 12px 9px 28px;
    border-radius: 24px;
}

/* Più grande di quella della home (Luca, 30/10: «la navbar troppo piccola»). */
.mh-nav .home-nav__logo img {
    height: 36px;
}

.mh-nav .home-nav__links {
    margin: 0 12px 0 34px;
    padding-left: 40px;
    gap: 4px;
}

.mh-nav .home-nav__links a {
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 15.5px;
}

.mh-nav .home-btn--sm {
    min-height: 42px;
    padding: 0 20px;
    border-radius: 15px;
    font-size: 15px;
}

.mh-nav .home-nav__links a {
    color: var(--ink);
    opacity: .72;
}

.mh-nav .home-nav__links a:hover,
.mh-nav .home-nav__links a[aria-current] {
    opacity: 1;
    background: rgba(11, 13, 18, .05);
}

/* Il cristallo blu della home è trasparente: sul chiaro diventerebbe azzurrino. Qui la tinta è piena. */
.mh--a .liquid--blue,
.mh-nav .liquid--blue {
    --g-tint: linear-gradient(180deg, #3f7dff, var(--public-blue));
    --g-drop: 0 12px 28px -12px rgba(var(--b), .7);
}

/* ---------- Hero ---------- */

.mh-hero__copy {
    container-type: inline-size;
}

.mh-hero {
    position: relative;
    display: flex;
    box-sizing: border-box;
}

.mh-hero__panel {
    position: relative;
    isolation: isolate;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* La griglia del sito, celle da 54 px: in grigio al 5% sul chiaro, bianca all'8% sul blu. Svanisce verso il basso. */
.mh-hero__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(var(--grid-c) 1px, transparent 1px) -1px -1px / 54px 54px,
        linear-gradient(90deg, var(--grid-c) 1px, transparent 1px) -1px -1px / 54px 54px;
    -webkit-mask: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 85%);
    mask: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 85%);
}

.mh-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(32px, 4vw, 80px);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 150px var(--side) 72px;
    box-sizing: border-box;
}

.mh-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: rgba(11, 13, 18, .6);
    font: 400 14px/1 var(--public-font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* Il pallino arancio: l'unico arancio della pagina, come negli eyebrow della home. */
.mh-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--public-orange);
}

.mh-eyebrow--center {
    justify-content: center;
}

/* Sempre su due righe (Luca, 30/10): una riga per frase, la misura segue la larghezza della colonna. */
.mh-title {
    margin: 0;
    font: 500 min(64px, 5.3cqi)/1.08 var(--public-font-heading);
    letter-spacing: -.045em;
}

.mh-title span {
    display: block;
    white-space: nowrap;
}

.mh-lead {
    max-width: 34em;
    margin: 24px 0 0;
    color: rgba(11, 13, 18, .64);
    font: 300 clamp(17px, 1.3vw, 22px)/1.55 var(--public-font-body);
    text-wrap: pretty;
}

.mh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}

/* Il pulsante secondario: a contorno, come quelli delle card della home; si riempie passandoci sopra. */
.mh-btn-line {
    display: inline-flex;
    align-items: center;
    min-height: var(--home-btn-h);
    padding: 0 var(--home-btn-px);
    border-radius: var(--home-btn-r);
    box-shadow: inset 0 0 0 var(--home-btn-line) currentColor;
    color: var(--ink);
    font: 400 var(--home-btn-fs)/1 var(--public-font-body);
    letter-spacing: var(--home-btn-ls);
    text-decoration: none;
    transition: background .35s, color .3s, box-shadow .35s;
}

.mh-btn-line:hover {
    background: var(--ink);
    box-shadow: inset 0 0 0 var(--home-btn-line) var(--ink);
    color: #fff;
}

/* ---------- Il Piano di adozione ---------- */

.mh-doc {
    position: relative;
    justify-self: center;
    width: clamp(300px, 22vw, 440px);
    aspect-ratio: 420 / 540;
    margin: 64px 3vw 64px 0;
}

.mh-doc__floor {
    position: absolute;
    left: 6%;
    right: -14%;
    bottom: -7%;
    height: 14%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(11, 13, 18, .2), transparent);
    filter: blur(14px);
    opacity: 0;
    transition: opacity 1s var(--home-ease) .3s;
}

.mh-doc__cover,
.mh-doc__page {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: var(--public-radius-md);
}

/* La copertina entra dal basso e si posa un poco inclinata. */
.mh-doc__cover {
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 34px 32px 30px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(60px) rotate(0deg);
    transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity .7s;
}

.mh-doc__logo {
    width: 124px;
    height: auto;
    margin-left: -6px;
}

.mh-doc__title {
    margin: auto 0 12px;
    font: 600 clamp(32px, 3vw, 44px)/.98 var(--public-font-heading);
    letter-spacing: -.045em;
}

.mh-doc__for {
    margin: 0;
    font: 400 16px/1.35 var(--public-font-body);
    opacity: .72;
}

.mh-doc__foot {
    display: flex;
    justify-content: space-between;
    margin: 26px 0 0;
    padding-top: 13px;
    border-top: 1px solid currentColor;
    border-top-color: color-mix(in srgb, currentColor 20%, transparent);
    font: 500 12px/1 var(--public-font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
}

/* La pagina sta dietro la copertina e scivola fuori in alto a destra: se ne legge la fascia alta, con la tabella, dopo che la copertina si è posata. */
.mh-doc__page {
    z-index: 1;
    padding: 26px 30px 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(11, 13, 18, .06), 0 24px 50px -24px rgba(11, 13, 18, .35);
    color: var(--ink);
    opacity: 0;
    transform: translateY(60px);
    transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .75s, opacity .5s .2s;
}

.mh-doc__note {
    margin: 0 0 12px;
    color: rgba(11, 13, 18, .42);
    font: 400 10px/1 var(--public-font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mh-doc__h {
    margin: 0 0 10px;
    font: 600 12.5px/1.2 var(--public-font-heading);
    letter-spacing: -.01em;
}

.mh-doc__table {
    display: grid;
    margin-bottom: 20px;
}

.mh-doc__row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid rgba(11, 13, 18, .08);
    font: 400 10.5px/1.2 var(--public-font-body);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .5s, transform .6s var(--home-ease);
}

.mh-doc__row--head {
    border-top: 0;
    color: rgba(11, 13, 18, .45);
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mh-doc__row span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Il livello: tre tacche, piene in blu fino al valore. */
.lv {
    display: inline-flex;
    width: 22px;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--public-blue) var(--lv), rgba(11, 13, 18, .1) var(--lv));
}

.lv--2 { --lv: 66%; }
.lv--3 { --lv: 100%; }

.mh-doc__lines {
    display: grid;
    gap: 7px;
    margin-bottom: 18px;
}

.mh-doc__lines i {
    height: 6px;
    border-radius: 3px;
    background: rgba(11, 13, 18, .08);
}

.mh-doc__lines i:last-child {
    width: 70%;
}

/* L'ingresso: copertina, poi la pagina che esce, poi le righe della tabella una alla volta. */
.mh.is-on .mh-doc__floor { opacity: 1; }
.mh.is-on .mh-doc__cover { opacity: 1; transform: translate(-12%, 15%) rotate(-4deg); }
.mh.is-on .mh-doc__page { opacity: 1; transform: translate(12%, -15%) rotate(2.5deg); }
.mh.is-on .mh-doc__row { opacity: 1; transform: none; }
.mh.is-on .mh-doc__row:nth-child(1) { transition-delay: 1.5s; }
.mh.is-on .mh-doc__row:nth-child(2) { transition-delay: 1.65s; }
.mh.is-on .mh-doc__row:nth-child(3) { transition-delay: 1.8s; }
.mh.is-on .mh-doc__row:nth-child(4) { transition-delay: 1.95s; }

/* Il testo entra appena prima del documento. */
.mh-hero__copy > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s, transform .9s var(--home-ease);
}

.mh.is-on .mh-hero__copy > * { opacity: 1; transform: none; }
.mh.is-on .mh-hero__copy > :nth-child(2) { transition-delay: .1s; }
.mh.is-on .mh-hero__copy > :nth-child(3) { transition-delay: .2s; }
.mh.is-on .mh-hero__copy > :nth-child(4) { transition-delay: .3s; }

/* Senza JavaScript (js/pages/metodo-hero.js mette .is-on) testo e documento sono subito al loro posto. */
@media (scripting: none) {
    .mh .mh-hero__copy > *,
    .mh .mh-doc__floor,
    .mh .mh-doc__row { opacity: 1; transform: none; }
    .mh .mh-doc__cover { opacity: 1; transform: translate(-12%, 15%) rotate(-4deg); }
    .mh .mh-doc__page { opacity: 1; transform: translate(12%, -15%) rotate(2.5deg); }
}

/* ---------- A · Chiaro: la copertina è l'unica superficie blu ---------- */

.mh--a {
    --grid-c: rgba(11, 13, 18, .055);
}

.mh--a .mh-doc__cover {
    background:
        radial-gradient(110% 80% at 15% 10%, var(--public-blue) 30%, transparent 75%),
        linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px) -1px -1px / 54px 54px,
        linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px) -1px -1px / 54px 54px,
        var(--public-blue);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .22),
        inset 0 18px 30px -18px rgba(255, 255, 255, .4),
        0 34px 60px -28px rgba(var(--b), .55),
        0 18px 30px -20px rgba(11, 13, 18, .3);
    color: #fff;
}

/* ---------- B · Blu pieno: un riquadro blu staccato dai bordi, come la fascia bianca della home ---------- */

.mh--b {
    --grid-c: rgba(255, 255, 255, .09);
}

.mh--b .mh-hero {
    padding: 12px 12px 0;
}

/* Lo stesso blu della card del metodo in home: pieno a sinistra, con la griglia che si vede verso il documento. */
.mh--b .mh-hero__panel {
    border-radius: 36px;
    background:
        radial-gradient(90% 110% at 14% 30%, var(--public-blue) 30%, transparent 75%),
        radial-gradient(60% 80% at 76% 55%, rgba(255, 255, 255, .08), transparent 70%),
        var(--public-blue);
    color: #fff;
}

.mh--b .mh-lead {
    color: rgba(255, 255, 255, .84);
}

/* Il vetro cristallo della card blu della home (.home-percorso__glass in styles/public-home-percorso.css): bordi
   accesi con il doppio filo dello spessore, riflesso lucido in alto, una lama di luce in diagonale e una leggera
   dispersione azzurra e calda ai lati. Sta sopra la griglia, sotto testo e documento. */
.mh-hero__glass {
    display: none;
}

.mh--b .mh-hero__glass {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    border-radius: inherit;
    background:
        linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .1) 39%, rgba(255, 255, 255, .03) 44%, transparent 50%),
        radial-gradient(140% 60% at 30% -12%, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06) 55%, transparent 70%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .22),
        inset 0 0 0 4px rgba(255, 255, 255, .04),
        inset 0 0 0 5px rgba(255, 255, 255, .12),
        inset 3px 0 6px -2px rgba(150, 200, 255, .45),
        inset -3px 0 6px -2px rgba(255, 170, 110, .35),
        inset 0 18px 30px -18px rgba(255, 255, 255, .45),
        inset 0 -22px 40px -16px rgba(0, 0, 0, .28);
    pointer-events: none;
}

.mh--b .mh-hero__glass::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.8px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .25) 18%, transparent 40%, transparent 65%, rgba(255, 255, 255, .3) 85%, rgba(255, 255, 255, .8) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.mh--b .mh-hero__glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(30% 40% at 8% 4%, rgba(255, 255, 255, .35), transparent 70%);
}

.mh--b .mh-hero__inner {
    position: relative;
    z-index: 1;
}

.mh--b .mh-hero .mh-eyebrow {
    color: rgba(255, 255, 255, .78);
}

/* ---------- Il pulsante principale sul blu (?btn=), dalle tinte del design system del vetro ---------- */

/* Latte: vetro bianco quasi pieno, testo blu. */
.mh--b.mh-btn--latte .mh-cta {
    --g-tint: rgba(255, 255, 255, .86);
    --g-solid: #fff;
    --g-blur: 10px;
    --g-bright: 1.1;
    --g-spec: 1;
    --g-spec-2: .7;
    --g-sheen: .2;
    --g-drop: 0 14px 30px -14px rgba(5, 20, 70, .6);
    color: var(--public-blue);
    font-weight: 500;
}

/* Fumé: il vetro scuro della navbar della home, testo bianco. */
.mh--b.mh-btn--fume .mh-cta {
    --g-tint: rgba(10, 12, 20, .62);
    --g-solid: #15171e;
    --g-drop: 0 14px 30px -14px rgba(5, 20, 70, .7);
    color: #fff;
}

/* Cristallo: trasparente, si vede il blu dietro; bordi e riflesso più accesi per staccarlo. */
.mh--b.mh-btn--cristallo .mh-cta {
    --g-tint: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12));
    --g-solid: #3a76ff;
    --g-blur: 4px;
    --g-bright: 1.25;
    --g-spec: 1;
    --g-spec-2: .8;
    --g-sheen: .3;
    --g-drop: 0 14px 30px -14px rgba(5, 20, 70, .6);
    color: #fff;
    text-shadow: 0 1px 2px rgba(5, 20, 70, .35);
}

.mh--b .mh-btn-line {
    color: #fff;
}

.mh--b .mh-btn-line:hover {
    background: #fff;
    box-shadow: inset 0 0 0 var(--home-btn-line) #fff;
    color: var(--public-blue);
}

.mh--b .mh-doc__cover {
    background: #fbfbf9;
    box-shadow: 0 0 0 1px rgba(11, 13, 18, .06), 0 34px 60px -26px rgba(5, 20, 70, .55);
    color: var(--ink);
}

.mh--b .mh-doc__page {
    box-shadow: 0 24px 50px -24px rgba(5, 20, 70, .5);
}

.mh--b .mh-doc__floor {
    background: radial-gradient(closest-side, rgba(5, 20, 70, .45), transparent);
}

/* ---------- L'attacco della sezione dopo: il sentiero a puntini della home che scende ---------- */

.mh-next {
    position: relative;
    padding: 56px var(--side) 160px;
    text-align: center;
}

.mh-next__path {
    display: block;
    width: 3px;
    height: 96px;
    margin: 0 auto 28px;
    background: radial-gradient(circle, rgba(11, 13, 18, .35) 1.2px, transparent 1.6px) center top / 3px 10px repeat-y;
}

.mh-next__todo {
    margin: 0;
    color: rgba(11, 13, 18, .4);
    font: 300 15px/1.5 var(--public-font-body);
}

/* ---------- Il selettore delle versioni ---------- */

.mh-switch {
    flex-wrap: wrap;
    max-width: min(760px, calc(100vw - 32px));
    position: fixed;
    left: 16px;
    bottom: 72px;
    z-index: 1001;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(11, 13, 18, .82);
    font: 400 12px/1 var(--public-font-body);
}

.mh-switch a {
    padding: 8px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}

.mh-switch__row {
    flex-basis: 100%;
    height: 0;
}

.mh-switch__sep {
    width: 1px;
    margin: 4px 4px;
    background: rgba(255, 255, 255, .2);
}

.mh-switch a[aria-current] {
    background: #fff;
    color: var(--ink);
}

/* Telefono e tablet (Luca, 30/10: «la hero è fuori proporzione»). Il titolo non resta più su due righe a forza: con la
   colonna stretta si rimpiccioliva a 15 px. Va a capo e ha una misura sua; pulsanti a tutta larghezza, documento più
   grande e con l'aria per le due carte girate. */
@media (max-width: 900px) {
    body.mh {
        --side: 20px;
    }

    .mh-header {
        inset: 16px 0 auto;
    }

    .mh-nav {
        padding: 6px 8px 6px 18px;
        border-radius: 20px;
    }

    .mh-nav .home-nav__logo img {
        height: 28px;
    }

    .mh-nav .home-nav__links {
        margin: 0;
        padding: 0;
    }

    .mh-nav .home-nav__links a {
        padding: 13px 14px;
        font-size: 16px;
    }

    .mh-nav .home-nav__menu .home-btn--sm {
        min-height: var(--home-btn-h);
        border-radius: 12px;
        font-size: var(--home-btn-fs);
    }

    .mh--b .mh-hero {
        padding: 8px 8px 0;
    }

    .mh--b .mh-hero__panel {
        border-radius: 28px;
    }

    .mh-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 112px 22px 8px;
    }

    .mh-eyebrow {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .mh-title {
        font-size: clamp(34px, 9.6vw, 52px);
        line-height: 1.04;
        letter-spacing: -.045em;
    }

    .mh-title span {
        white-space: normal;
        text-wrap: balance;
    }

    .mh-lead {
        margin-top: 20px;
        font-size: 17px;
    }

    .mh-actions {
        flex-direction: column;
        max-width: 420px;
        margin-top: 32px;
    }

    .mh-actions > * {
        justify-content: center;
    }

    .mh-doc {
        width: min(72%, 340px);
        margin: 64px auto 88px;
    }

    .mh-doc__cover {
        padding: 24px 22px 20px;
    }

    .mh-doc__logo {
        width: 96px;
        margin-left: -4px;
    }

    .mh-doc__title {
        font-size: 30px;
    }

    .mh-doc__for {
        font-size: 14px;
    }

    .mh-doc__foot {
        gap: 8px;
        margin-top: 18px;
        padding-top: 10px;
        font-size: 9.5px;
        letter-spacing: .06em;
    }

    .mh-doc__page {
        padding: 20px 20px 0;
    }

    .mh-doc__h {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mh-hero__copy > *,
    .mh-doc__cover,
    .mh-doc__page,
    .mh-doc__row,
    .mh-doc__floor {
        transition: none !important;
    }
}