/*
 * Il CSS della homepage «Tavolo tecnico». Fonte unica: da qui si sincronizza
 * la tavola (regione @home:css) e si genera assets/css/homepage-tavolo.css
 * nel child theme. Consuma i token del chrome: nella pagina va caricato DOPO
 * tokens.css e components.css.
 */

    /* ---- L'ospite WordPress ----
       Nella tavola queste regole vivono nel preambolo della pagina, PRIMA
       della regione chrome, e la prima estrazione le aveva lasciate lì:
       misurato su staging, le fasce scure restavano incassate nel
       contenitore BuddyBoss (#content > .container > .bb-grid) e
       .section-shell non aveva larghezza. Il main si stende a tutta la
       finestra col binario già in produzione sul template light
       (width:100vw + margin-left calc), e dichiara ciò che altrimenti
       erediterebbe dal tema ospite — stessa ragione del drawer.
       Questo foglio si carica SOLO sul template della home: le regole non
       scopate qui sotto restano di questa pagina. */
    /* I wrapper del tema ospite devono farsi da parte: il binario 100vw +
       margin negativo del template light centra sul VIEWPORT, e da loggato il
       contenitore BuddyBoss è fuori centro per il pannello laterale —
       misurato: fascia spostata a sinistra e colonna vuota a destra. Con i
       wrapper a piena larghezza il main riempie l'area contenuto in ogni
       stato. A farli da parte non è più questo foglio con una body-class: lo
       fa l'impianto di pagina nel ponte (chrome-wp.css), ancorato al marcatore
       `.nzeb-pagina-piena` che template-homepage-tavolo.php scrive sul
       <main>. */
    /* Il banner Complianz vive fuori dal main: senza la tipografia
       dell'ospite (la classe bb-custom-typo è tolta su questo template)
       erediterebbe -apple-system dal body del tema — misurato il 28 lug
       2026. I token stanno su :root, quindi arrivano anche qui. */
    body.page-template-template-homepage-tavolo .cmplz-cookiebanner { font-family: var(--font-body); }
    /* Le tre regole che scioglievano la catena BuddyBoss vivevano qui e sono
       salite nel ponte, dentro l'impianto di pagina: sono le uniche di questo
       foglio che conoscessero WordPress, e questo foglio si genera anche nella
       tavola .dc.html, dove `#content.site-content` non esiste nemmeno.
       Il `display: block` sulla .site-content-grid non serve più: misurato che
       con la griglia lasciata flex il risultato è identico, in orizzontale e
       in verticale. */
    .homepage-tavolo {
      box-sizing: border-box;
      width: 100%;
      min-width: 320px;
      color: var(--ink);
      background: var(--paper);
      font-family: var(--font-body);
      font-size: var(--body-size);
      font-weight: var(--body-weight);
      line-height: var(--body-leading);
      -webkit-font-smoothing: antialiased;
    }
    .homepage-tavolo *, .homepage-tavolo *::before, .homepage-tavolo *::after { box-sizing: border-box; }
    .homepage-tavolo a { color: inherit; }
    /* :where() azzera la specificità dello scope: nella tavola questo reset
       è `button { font: inherit }` (0,0,1) e il `.button` del chrome (0,1,0)
       lo vince col suo font-weight 700. Scopato pieno faceva (0,1,1) e il
       «Trova il corso» perdeva il grassetto — misurato su staging. */
    :where(.homepage-tavolo) button, :where(.homepage-tavolo) input { font: inherit; }
    .homepage-tavolo button { cursor: pointer; }
    /* Senza questa, un elemento nascosto ma con un display proprio (le
       frecce, display:grid) resta visibile: il difetto misurato sulla
       tavola vale identico qui. */
    .homepage-tavolo [hidden] { display: none !important; }
    /* Il tema padre BuddyBoss azzera i margini di OGNI figure con
       `figure:not(.wp-block-image)` (0,1,1), che batte `.founder` (0,1,0):
       misurato il 29 lug 2026, il link «Guarda un fascicolo esempio» era
       incollato al riquadro della citazione, contro i 32px della tavola.
       Scopata al main, la nostra vale (0,2,0) e torna a vincere.
       `.review` non è nella stessa condizione: dichiara `margin: 0` di suo e
       lo spazio fra le testimonianze lo fa il gap della griglia. */
    .homepage-tavolo .founder { margin: var(--space-lg) 0; }
    .homepage-tavolo .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
    /* Non scopata di proposito: la media query a 1099px la porta a 28px con
       specificità (0,1,0), e una base scopata (0,2,0) non perderebbe mai. */
    .hero { width: min(100% - 40px, 1240px); margin: 0 auto; }

    /* ---- Primo viewport: il tavolo ---- */
    .hero-stage { position: relative; overflow: hidden; }
    .hero-stage::before { position: absolute; z-index: 0; inset: 0; background-image: linear-gradient(180deg, transparent 52%, var(--paper) 88%), var(--grid-paper); content: ""; }
    /* Contenuto ancorato in alto e altezza guidata dal contenuto: niente fascia vuota
       tra header e titolo su schermi alti (prima il centraggio + min-height:100vh lo spingeva giù). */
    .hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); gap: clamp(32px, 6vw, 80px); align-items: start; padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 80px); }
    .dossier-label, .dossier-meta dt { margin: 0; color: var(--olive); font-size: var(--label-size); font-weight: var(--label-weight); line-height: var(--label-leading); letter-spacing: var(--label-tracking); text-transform: uppercase; }
    /* Il componente è nella terza casa (partials/componenti.css): qui resta solo
       il colore, che sulla home è --olive — la stessa composizione di superficie
       di .dossier-label e .dossier-meta dt qui sopra. */
    .section-kicker { color: var(--olive); }
    h1 { max-width: 680px; margin: var(--space-sm) 0 var(--space-md); color: var(--bark); font: var(--display-weight) var(--display-size)/var(--display-leading) var(--font-display); letter-spacing: var(--display-tracking); text-wrap: balance; }
    h1 em { color: var(--ink); font-style: normal; }
    /* Lead: il paragrafo che apre il primo schermo. Era a 16px sotto un
       display da 64 e sembrava una didascalia — la misura si accorcia da
       58ch a 46ch perché a corpo maggiore la riga resta leggibile.
       Tipografia e margine sono nel componente (partials/componenti.css,
       blocco condiviso `.hero-intro, .section-intro`): qui resta solo la
       VARIANTE di questa hero, colonna più stretta e inchiostro --ink-2 —
       il margine coincide col default del componente (--space-lg), quindi
       non va ridichiarato. */
    .hero-intro { max-width: 46ch; color: var(--ink-2); }
    /* .hero-copy siede sulla carta millimetrata di .hero-stage::before (var(--grid-paper),
       niente sfondo opaco proprio): misurato sui pixel reali, non sul solo background-color
       dichiarato, --olive e --ink-2 scendono sotto 4,5:1 nel punto più scuro della trama
       (eyebrow 4,4976:1, hero-intro 4,2771:1). --bark e --ink — già usati da h1/h1 em, che
       infatti restano larghi anche lì (6,19:1 e 9,02:1) — coprono lo stesso caso. */
    /* L'occhiello della hero non ha margine sotto: la hero governa la propria
       spaziatura verso h1 con il margin-top di h1 (var(--space-sm)), non con
       un margine proprio. Prima del Task 6 il valore veniva dalla vecchia
       classe eyebrow (rinominata), che condivideva una regola con margin
       ZERO insieme a `.dossier-label, .dossier-meta dt` — una regola
       DIVERSA da quella dei nove occhielli di sezione (oggi in componenti.css,
       margin: 0 0 10px), con cui era stata confrontata per errore nel giro di
       correzione 1 di quel task: il confronto aveva preso la regola che
       coincideva col valore del componente, non quella vera da cui l'hero
       prendeva il proprio margine. Misurato al confronto delle fotografie
       prima/dopo il rilascio (7 ago 2026): il margin-bottom renderizzato
       passava da 0 a 10px. Qui si torna a 0, scoperto sulla sola hero — le
       nove etichette di sezione tengono il margine del componente, corretto
       per loro fin dall'inizio. */
    .hero-copy .section-kicker { margin: 0; color: var(--bark); }
    .hero-copy .hero-intro { color: var(--ink); }

    /* Ricerca: il componente condiviso vive in partials/componenti.css
       (Task 10, 7 ago 2026) — padding/border/border-radius/background di
       `.course-search`, la label, la base del control e la sua svg, più lo
       spegnimento dell'anello di fuoco sull'input. Qui resta solo la
       larghezza massima, che diverge davvero dal catalogo (680px contro
       620px): è l'unica variante che questa pagina possiede per la
       cassetta. */
    .course-search { max-width: 680px; }
    /* Il control qui non fissa un'altezza propria (a differenza del catalogo,
       V5 del 31 lug 2026, mai portata su questa pagina): cresce col figlio
       più alto, il bottone. Il padding resta la variante reale — diverso da
       quello del catalogo (7px su tutti i lati tranne 18px a sinistra, non
       0 sopra/sotto + 18/7 orizzontale). */
    .course-search__control { padding: 7px 7px 7px 18px; }
    /* `padding: 0` (e lo `background: transparent` che lo affianca) restano
       qui, non nel componente: il tema ospite dà agli input[type="search"]
       un padding-left di 2rem più una sua lente in background — senza
       dichiararli qui il testo partiva ~32px più a destra che nella tavola,
       misurato su staging il 28 lug 2026. È la stessa guerra di specificità
       del catalogo (giro di correzione 1 del Task 10, partials/componenti.css):
       le uniche due proprietà del campo con un concorrente reale a pari
       specificità (0,1,1) restano di pagina; il resto (width, min-width,
       height, border, outline, color, font-size, border-radius) è salito nel
       componente sotto lo stesso selettore nudo che questa pagina già usava
       — `height: auto`, in particolare, batte comunque `input { height:
       41px }` (0,0,1) del tema ospite anche da lì (misurato il 29 lug 2026
       su staging: input 41px e bottone 46px dentro una riga alta 62,
       disallineati fra loro), perché (0,1,1) vince su (0,0,1) a prescindere
       da dove la dichiarazione vive. */
    .course-search input { padding: 0; background: transparent; }
    /* Lo spegnimento dell'anello di fuoco (focus-visible + placeholder) è
       salito nel componente (partials/componenti.css, Task 10): identico
       byte per byte alla copia che il catalogo aveva. Il ring di sistema
       (:where(input):focus-visible, tech) vince su `outline:0` e disegna un
       bordo blu dentro il control: su un input di testo stona, e la casella
       al click resta a riposo (scelta del committente). `box-shadow` va
       spento INSIEME all'outline perché l'indicatore di questa tavola è
       disegnato con due proprietà — l'anello e l'alone di 6px in --paper che
       lo stacca dal fondo (`a, button, input:focus-visible` più sotto):
       spegnere solo l'outline lasciava vivo l'alone, misurato in Chrome il
       30 lug 2026, `rgb(247,244,240) 0 0 0 6px`. Il componente spegne
       SEMPRE entrambe le proprietà, anche dove — come sul catalogo — il
       ring di pagina non porta l'alone: non deve dipendere da quale foglio
       lo ospita. */

    /* `.button`, `.button--primary` e `.button--primary:hover` vivevano qui:
       erano una seconda copia di quelle del chrome, e già divergenti — questa
       portava `white-space: nowrap` e la transizione, quella no. Il bottone
       serve a rendere il chrome (CTA del megamenu, invio della newsletter):
       la base è sua, e le due dichiarazioni mancanti sono salite in
       partials/site-chrome.css. Qui resta la variante di sola pagina. */
    .button--ghost { border-color: var(--bark); color: var(--bark); background: transparent; }
    .button--ghost:hover, .button--ghost:focus { color: var(--paper); background: var(--bark); }
    .search-status { min-height: 1.6em; margin: 10px 0 0; color: var(--ink-2); font-size: var(--body-size); }

    /* `.shortcut` è il componente condiviso (partials/componenti.css,
       Task 9, 6 ago 2026): qui resta solo la spaziatura verso l'elemento
       sopra, che diverge per pagina (16px qui, 24px sul catalogo) —
       composizione, non identità. */
    .shortcut-list { margin-top: var(--space-sm); }
    .hero-catalog-link { margin: var(--space-sm) 0 0; }

    /* ---- Il fascicolo ---- */
    .dossier { position: relative; isolation: isolate; max-width: 510px; margin-left: auto; padding: clamp(26px, 3vw, 36px); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--bark) 55%, transparent); }
    .dossier::before { position: absolute; z-index: -1; top: 20px; right: -14px; bottom: -14px; left: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-alt); content: ""; }
    /* Linguetta del fascicolo: a filo del bordo destro (stesso valore su desktop e mobile).
       Al passaggio del mouse scivola fuori con un'ombra di piega: si legge come estraibile. */
    .dossier-tab { position: absolute; top: 38px; right: -14px; padding: 6px 14px; color: var(--surface); background: var(--tech); border-radius: var(--radius-sm) 0 0 var(--radius-sm); font: var(--label-weight) var(--label-size)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
    .dossier:hover .dossier-tab { transform: translateX(6px); box-shadow: -3px 4px 10px -3px color-mix(in srgb, var(--bark) 50%, transparent); }
    /* Scala di posizione: dice quale delle quattro famiglie è sul tavolo */
    .dossier-scale { display: flex; gap: 4px; align-items: flex-end; height: 14px; margin: 0 0 14px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
    .dossier-scale span { width: 20px; height: 14px; background: var(--line-strong); transform: scaleY(.28); transform-origin: bottom; transition: transform .3s var(--ease-out), background-color .3s var(--ease-out); }
    .dossier-scale span[data-on="true"] { background: var(--lime); transform: none; }
    .dossier-kicker { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-right: 96px; }
    /* Le frecce del fascicolo: nascoste finché il JS non le arma, e mai
       mostrate se il corso è uno solo. Ai fianchi della scheda, centrate in
       verticale, fondo trasparente e ombra leggera (richiesta utente 28 lug:
       in alto a destra, bordo su fondo carta, si confondevano con la scheda).
       A metà fuori dal bordo il cerchio attraversa solo la zona di padding
       (26px minimi): il glifo da 20px non tocca mai il testo. */
    .dossier-nav { display: contents; }
    .dossier-nav__btn { position: absolute; top: 50%; z-index: 2; translate: 0 -50%; inline-size: 40px; block-size: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; color: var(--bark); background: transparent; box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--bark) 45%, transparent); cursor: pointer; padding: 0; }
    .dossier-nav__btn[data-dossier-prev] { left: -20px; }
    .dossier-nav__btn[data-dossier-next] { right: -20px; }
    .dossier-nav__btn svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; }
    /* Colore e fondo dichiarati anche negli stati: il tema ospite ha
       `button:hover, button:focus` (0,1,1) con testo bianco su fondo bianco
       — misurato: al passaggio la freccia spariva, cerchio e glifo. */
    .dossier-nav__btn:hover, .dossier-nav__btn:focus, .dossier-nav__btn:active { color: var(--bark); background: var(--surface); }
    .dossier h2 { margin: 12px 0; color: var(--bark); font: var(--headline-weight) clamp(1.45rem, 2.2vw, 1.75rem)/1.14 var(--font-display); letter-spacing: var(--headline-tracking); text-wrap: balance; }
    /* impeccable-disable-next-line side-tab -- accento del baseline Task 2, ripristinato su richiesta e riportato sull'arancione brand */
    .dossier-why { margin: 0 0 14px; padding: var(--space-sm); border-left: 3px solid var(--ember); background: var(--paper); }
    .dossier-why strong { display: block; margin-bottom: 3px; color: var(--bark); font: var(--label-weight) var(--label-size)/var(--label-leading) var(--font-body); letter-spacing: var(--label-tracking); text-transform: uppercase; }
    .dossier-why p { margin: 0; }
    .dossier-outcome { margin: 0 0 var(--space-sm); color: var(--ink-2); }
    .dossier-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--space-md); margin: 0 0 var(--space-sm); padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .dossier-meta div { min-width: 0; }
    .dossier-meta dt { margin-bottom: 2px; font-size: var(--label-size); }
    .dossier-meta dd { margin: 0; font-size: var(--body-size); font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; }
    .dossier-meta dd[data-dossier-cfp] { color: var(--tech); }
    .dossier-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
    .dossier-price { margin: 0; color: var(--ink-2); font-size: var(--label-size); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
    .dossier-price strong { display: block; margin-top: 3px; color: var(--ink); font: 800 1.5rem/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-transform: none; }
    /* Regolo graduato: il segno ricorrente del sistema */
    .technical-rule { display: flex; gap: 6px; align-items: flex-end; height: 14px; margin-top: var(--space-md); }
    .technical-rule span { display: block; width: 2px; height: 7px; background: var(--line-strong); }
    .technical-rule span:nth-child(5n+1) { height: 14px; background: var(--lime); }

    /* ---- Sezioni ---- */
    .section { padding: var(--space-section) 0; border-top: 1px solid var(--line); }
    .section-kicker, .course-label, .route-label, .resource-type {
      margin: 0 0 10px;
      color: var(--olive);
      font-size: var(--label-size);
      font-weight: var(--label-weight);
      line-height: var(--label-leading);
      letter-spacing: var(--label-tracking);
      text-transform: uppercase;
    }
    .section-heading { max-width: 760px; margin: 0 0 var(--space-md); color: var(--bark); font: var(--headline-weight) var(--headline-size)/var(--headline-leading) var(--font-display); letter-spacing: var(--headline-tracking); text-wrap: balance; }
    .section-heading::after { display: block; width: 88px; height: 3px; margin-top: var(--space-sm); background: var(--lime); content: ""; }
    /* Lead: il paragrafo che apre ogni sezione. Stessa ragione della
       hero-intro; la misura passa da 650px a 46ch, che a 22px vale ~600px.
       Tipografia e margine di base sono nel componente (partials/
       componenti.css): qui restano la VARIANTE di questa pagina — colonna
       più stretta, inchiostro --ink-2 — e un margine maggiore (--space-xl,
       non il --space-lg del componente) che distingue queste sezioni dalla
       testata.
       ⚠️ NON scopata a `.homepage-tavolo`: nella tavola
       Homepage-Redesign-Tavolo-Tecnico.dc.html il <main> non porta quella
       classe (la scrive solo template-homepage-tavolo.php, sul sito vero) —
       verificato il 6 ago 2026. Uno scoping `.homepage-tavolo .section-intro`
       lascerebbe lì il default del componente (54ch, --ink) sulle cinque
       intro sotto il primo schermo: un cambio di resa vero nella tavola, non
       autorizzato da questo task. L'ordine di caricamento (i componenti
       PRIMA dei fogli di pagina) basta a far vincere questa regola anche
       senza scoparla, sulla tavola come sul sito. */
    .section-intro { max-width: 46ch; margin-bottom: var(--space-xl); color: var(--ink-2); }
    /* Solo il testo è sottolineato: la freccia è inline-block, quindi atomica e fuori dalla linea. */
    .text-link { display: inline-block; color: var(--bark); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .text-link::after { content: "→"; display: inline-block; margin-left: 8px; text-decoration: none; transition: transform .22s var(--ease-out); }
    .text-link:hover { color: var(--ember-ink); }
    .text-link:hover::after { transform: translateX(4px); }
    a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--tech); outline-offset: 3px; box-shadow: 0 0 0 6px var(--paper); }
    /* Trovato misurando i contrasti dello Step 7d sui pixel reali: questa
       regola generica (0,1,1) batte il fallback a bassa specificità del
       chrome (:where(), specificità 0) e ne ignora --focus-ring, riportando
       l'anello a var(--tech) dentro header/megamenu/footer/annuncio —
       1,97:1 sul footer, 1,44:1 sull'annuncio, sotto i 3:1 di WCAG 1.4.11,
       proprio sulle superfici scure che quel token doveva correggere. Il
       chrome torna a possedere il proprio anello dentro i propri confini;
       fuori da lì la regola sopra (alone incluso) resta invariata. */
    .site-header a:focus-visible, .site-header button:focus-visible, .site-header input:focus-visible,
    .megamenu a:focus-visible, .megamenu button:focus-visible, .megamenu input:focus-visible,
    .site-footer a:focus-visible, .site-footer button:focus-visible, .site-footer input:focus-visible,
    .announcement a:focus-visible, .announcement button:focus-visible, .announcement input:focus-visible {
      outline: 3px solid var(--focus-ring, var(--tech));
      outline-offset: 2px;
      box-shadow: none;
    }

    /* ---- Il registro: credenziali che portano il proprio numero ---- */
    .trust-strip { padding: var(--space-xl) 0; color: var(--paper); background: var(--bark); border-top: 0; }
    .trust-list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
    .trust-list li { position: relative; padding: 0 var(--space-md); border-left: 1px solid color-mix(in srgb, var(--lime-soft) 30%, transparent); }
    .trust-list li:first-child { border-left: 0; padding-left: 0; }
    .trust-list b { display: block; margin-bottom: 6px; color: var(--lime-soft); font: 800 clamp(1.75rem, 3vw, 2.25rem)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
    .trust-list strong { display: block; color: var(--surface); font: 700 var(--body-size)/1.35 var(--font-display); }
    .trust-list span { display: block; margin-top: 4px; color: var(--paper-alt); font-size: var(--label-size); line-height: 1.4; }

    /* ---- Sul tavolo adesso ---- */
    .courses-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr); gap: var(--space-lg); align-items: stretch; }
    .featured-course { overflow: hidden; display: grid; grid-template-columns: minmax(210px, .85fr) minmax(0, 1.15fr); min-height: 420px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); }
    .featured-course__media { position: relative; min-height: 260px; background: var(--paper-alt); }
    /* la locandina vince sul fondo neutro: stessa collisione di cascata già
       misurata sul catalogo (pari specificità, superficie dopo i componenti)
       — qui CONFERMATA da review esterna col computed style (paper-alt al
       posto della tinta, 15/08). Specificità dichiarata, mai !important. */
    .featured-course__media.nzb-locandina { background: var(--fam); }
    .featured-course__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .featured-course__index { position: absolute; top: var(--space-sm); left: var(--space-sm); padding: 6px 10px; color: var(--ink-on-accent); background: var(--lime); border-radius: var(--radius-sm); font-size: var(--label-size); font-weight: 700; }
    .featured-course__body { display: flex; flex-direction: column; padding: clamp(24px, 4vw, 42px); }
    .featured-course h3 { margin: 0 0 var(--space-sm); font: 700 clamp(1.65rem, 3vw, 2.25rem)/1.08 var(--font-display); letter-spacing: -.025em; }
    .title-link { color: var(--bark); text-decoration: none; }
    .title-link:hover { color: var(--ember-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
    .title-link:focus-visible { outline: 3px solid var(--tech); outline-offset: 4px; border-radius: var(--radius-sm); }
    .featured-course__problem { margin: 0 0 var(--space-md); color: var(--ink-2); }
    /* display/flex-wrap/list-style sono nel componente (partials/
       componenti.css, Task 10): qui resta la sola veste della home — badge
       con bordo e sfondo per voce, non l'elenco separato da «·» del
       catalogo. */
    .course-facts { gap: var(--space-xs); margin: 0 0 var(--space-md); padding: 0; }
    .course-facts li { padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); font-size: var(--label-size); font-weight: 700; font-variant-numeric: tabular-nums; }
    .course-facts li.is-cfp { color: var(--tech); background: var(--tech-wash); border-color: color-mix(in srgb, var(--tech) 35%, transparent); }
    .featured-course__price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--space-md); font-variant-numeric: tabular-nums; }
    .featured-course__price s { color: var(--ink-2); }
    .featured-course__price b { color: var(--ink); font: 800 1.75rem/1 var(--font-display); letter-spacing: -.025em; }
    .featured-course__price span { color: var(--ink-2); font-size: var(--label-size); }
    .featured-course__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: auto; align-items: center; }

    .compact-course-list { border-top: 2px solid var(--bark); }
    .compact-course { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: start; padding: var(--space-md) 0 var(--space-md) var(--space-sm); border-bottom: 1px solid var(--line); }
    .compact-course::before { position: absolute; top: var(--space-md); bottom: var(--space-md); left: 0; width: 3px; background: var(--lime); content: ""; transform: scaleY(0); transform-origin: top; transition: transform .28s var(--ease-out); }
    .compact-course:hover::before, .compact-course:focus-within::before { transform: scaleY(1); }
    .compact-course h3 { margin: 0 0 5px; font: var(--title-weight) var(--title-size)/var(--title-leading) var(--font-display); letter-spacing: var(--title-tracking); }
    .compact-course p { margin: 0; color: var(--ink-2); font-size: var(--body-size); font-variant-numeric: tabular-nums; }
    .compact-course p b { color: var(--tech); font-weight: 700; }
    .compact-course .family-cue { align-self: start; margin-top: 2px; }

    /* ---- Indice operativo ---- */
    .problems-section { background: var(--paper-alt); }
    .problems-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(48px, 8vw, 110px); }
    .problems-intro { position: sticky; top: 120px; align-self: start; }
    .problem-index { border-top: 2px solid var(--bark); }
    /* Tutta la famiglia è cliccabile: il titolo è il link, il suo ::after copre la riga. */
    .problem-family { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding: var(--space-lg) 0; border-bottom: 1px solid var(--line-strong); }
    .problem-family__mark { display: grid; width: 44px; height: 44px; place-items: center; border: 1.5px solid var(--lime); border-radius: 50%; background: var(--surface); transition: background-color .22s var(--ease-out), border-color .22s var(--ease-out); }
    .problem-family__mark svg { width: 21px; height: 21px; fill: none; stroke: var(--bark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .problem-family:hover .problem-family__mark, .problem-family:focus-within .problem-family__mark { background: var(--lime); border-color: var(--lime); }
    .problem-family h3 { margin: 0 0 var(--space-xs); font: var(--title-weight) var(--title-size)/var(--title-leading) var(--font-display); }
    .family-link { color: var(--bark); text-decoration: none; }
    .family-link::after { position: absolute; inset: 0; content: ""; }
    .family-link:hover { color: var(--ember-ink); text-decoration: underline; text-underline-offset: 4px; }
    .family-link:focus-visible { outline: 3px solid var(--tech); outline-offset: 4px; border-radius: var(--radius-sm); }
    .problem-family ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; color: var(--ink-2); list-style: none; }
    /* Il ripiego «N corsi» è un <p> che esiste solo su WordPress: senza
       margine dichiarato prendeva i 27px del tema ospite e le righe
       dell'indice risultavano più alte della tavola — misurato. */
    .family-count { margin: 0; color: var(--ink-2); }
    .problem-family li::before { margin-right: 7px; color: var(--ember-ink); content: "/"; font-weight: 700; }
    .family-cue { align-self: center; color: var(--bark); font-weight: 700; white-space: nowrap; }
    .family-cue::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform .22s var(--ease-out); }
    .problem-family:hover .family-cue { color: var(--ember-ink); }
    .problem-family:hover .family-cue::after { transform: translateX(4px); }

    /* ---- Corso o percorso ---- */
    .route-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
    .route-panel { padding: clamp(28px, 5vw, 58px); }
    .route-panel + .route-panel { color: var(--paper); background: var(--bark); }
    .route-panel + .route-panel .route-label { color: var(--lime-soft); }
    .route-panel + .route-panel .route-meta { color: var(--paper-alt); }
    .route-panel + .route-panel h3, .route-panel + .route-panel .text-link { color: var(--surface); }
    .route-panel + .route-panel .text-link:hover { color: var(--lime-soft); }
    .route-panel h3 { margin: 0 0 var(--space-sm); color: var(--bark); font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--font-display); letter-spacing: -.02em; }
    .route-panel > p { margin: 0 0 var(--space-md); }
    .route-meta { color: var(--ink-2); font-size: var(--body-size); font-variant-numeric: tabular-nums; }
    .route-picks { margin: var(--space-md) 0 var(--space-lg); padding: 0; list-style: none; }
    .route-picks li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 11px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
    .route-picks li:last-child { border-bottom: 1px solid var(--line); }
    .route-picks b { font-weight: 700; }
    .route-picks span { color: var(--ink-2); white-space: nowrap; }
    .route-steps { display: grid; gap: 0; margin: var(--space-lg) 0; padding: 0; list-style: none; counter-reset: route; }
    .route-steps li { counter-increment: route; position: relative; padding: 0 0 var(--space-md) 44px; }
    /* La linea corre da centro a centro e viene mascherata dai cerchi pieni sopra: connessione netta. */
    .route-steps li:not(:last-child)::after { position: absolute; z-index: 0; top: 15px; bottom: -14px; left: 14px; width: 1px; background: color-mix(in srgb, var(--lime-soft) 55%, transparent); content: ""; }
    .route-steps li::before { position: absolute; z-index: 1; top: 0; left: 0; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--lime); border-radius: 50%; background: var(--bark); color: var(--lime-soft); content: counter(route); font-size: var(--label-size); font-weight: 700; }
    /* I tre passaggi sono l'ossatura del pannello, non una didascalia: il
       titolo prende il gradino dei titoli (22px) e la descrizione il corpo
       (17px). Stavano a 17 e 13 — cioè il passaggio si leggeva come una nota
       a piè di pagina, su fondo scuro dove il contrasto già lavora meno. */
    .route-steps strong { display: block; color: var(--surface); font-family: var(--font-display); font-size: var(--title-size); font-weight: var(--title-weight); line-height: var(--title-leading); letter-spacing: var(--title-tracking); }
    .route-steps span { display: block; margin-top: 2px; color: var(--paper-alt); font-size: var(--body-size); line-height: var(--body-leading); }
    .route-saving { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--ink-on-accent); background: var(--lime-soft); font-variant-numeric: tabular-nums; }
    .route-saving b { font: 800 1.375rem/1 var(--font-display); letter-spacing: -.02em; }
    .route-saving span { font-size: var(--label-size); font-weight: 700; }

    /* ---- Metodo ---- */
    .method-section { position: relative; overflow: hidden; background: var(--surface); }
    .method-section::before { position: absolute; inset: 0; background-image: var(--grid-paper); opacity: .55; content: ""; }
    .method-grid { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); gap: clamp(48px, 8vw, 100px); align-items: center; }
    .method-visual { position: relative; min-height: 560px; }
    .method-photo { position: absolute; inset: 44px 14% 0 12%; width: 74%; height: calc(100% - 44px); object-fit: cover; border-radius: var(--radius-lg); filter: saturate(.82); }
    .method-paper { position: absolute; width: min(330px, 76%); padding: var(--space-md); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--bark) 70%, transparent); }
    .method-paper--one { top: 0; left: 0; transform: rotate(-2deg); }
    .method-paper--two { right: 0; bottom: 28px; transform: rotate(2deg); }
    .method-paper .section-kicker { color: var(--bark); padding-bottom: 6px; border-bottom: 2px solid var(--lime); }
    .method-paper h3 { margin: 0 0 12px; color: var(--bark); font: var(--title-weight) var(--title-size)/var(--title-leading) var(--font-display); }
    .check-list { margin: 0; padding: 0; list-style: none; }
    .check-list li { position: relative; padding: 8px 0 8px 26px; border-top: 1px solid var(--line); }
    .check-list li::before { position: absolute; top: 15px; left: 3px; width: 8px; height: 8px; background: var(--lime); border-radius: 50%; content: ""; }
    .method-copy .check-list { margin: var(--space-lg) 0; }
    .method-copy .check-list li { padding: 13px 0 13px 30px; }
    .method-copy .check-list li::before { top: 21px; }
    .founder { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-md); align-items: center; margin: var(--space-lg) 0; padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
    .founder img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
    .founder blockquote { margin: 0 0 8px; color: var(--ink); font: 600 var(--title-size)/1.4 var(--font-display); letter-spacing: var(--title-tracking); }
    .founder figcaption { color: var(--ink-2); font-size: var(--label-size); }
    .founder figcaption strong { display: block; color: var(--bark); font-size: var(--body-size); }

    /* ---- Prove ---- */
    .proof-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(48px, 8vw, 100px); }
    .reviews { display: grid; gap: var(--space-md); }
    /* Foglio di prova: spigolo vivo, staccato dal blocco. La riga lime è la testata, non un accento laterale. */
    .review { margin: 0; padding: var(--space-lg); border: 1px solid var(--line); border-top: 3px solid var(--lime); background: var(--surface); }
    .review blockquote { margin: 0 0 var(--space-md); color: var(--bark); font: 600 var(--title-size)/1.45 var(--font-display); letter-spacing: var(--title-tracking); }
    .review figcaption { color: var(--ink-2); font-size: var(--body-size); }
    .review figcaption strong { color: var(--ink); }
    .forum-panel { padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--paper-alt); }
    .forum-panel h3 { margin: 0 0 var(--space-xs); color: var(--bark); font: 700 1.65rem/1.2 var(--font-display); letter-spacing: -.02em; }
    .forum-panel > p { margin: 0 0 var(--space-md); color: var(--ink-2); }
    .discussion-list { margin: 0; padding: 0; list-style: none; }
    .discussion-list li { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-sm); padding: var(--space-md) 0; border-top: 1px solid var(--line-strong); }
    .discussion-list strong { display: block; color: var(--bark); line-height: 1.35; }
    .discussion-list span { color: var(--ink-2); font-size: var(--label-size); }
    .discussion-list .discussion-mark { display: grid; width: 32px; height: 32px; place-items: center; color: var(--surface); background: var(--tech); border-radius: var(--radius-sm); font-size: var(--body-size); font-weight: 700; }
    /* Le discussioni dei corsi non si cliccano (delibera del 29 lug 2026):
       il permalink portava chi non è iscritto sulla landing del corso, e
       promettere una discussione per consegnare una pagina di vendita è un
       dirottamento anche quando la destinazione è pertinente. Il tono più
       chiaro dice che la voce è ferma; il titolo resta più scuro e più
       pesante del sottotesto, quindi non si confonde con esso. */
    .discussion-list strong.discussion-ferma { color: var(--ink-2); }
    /* Il colore da solo non basta a dire «questo si clicca» (WCAG 1.4.1):
       chi resta sul titolo cliccabile vede anche la sottolineatura. */
    .discussion-list a:hover, .discussion-list a:focus-visible { text-decoration: underline; }

    /* ---- Risorse gratuite ---- */
    .resources-section { color: var(--paper); background: var(--bark); }
    .resources-section .section-kicker { color: var(--lime-soft); }
    .resources-section .section-heading { color: var(--surface); }
    .resources-section .section-intro { color: var(--paper-alt); }
    /* Impianto del mockup originale, ripristinato dopo la bocciatura del
       committente (schiacciato/alto): colonna centrale più stretta, fondo in
       evidenza sulla card centrale (Corsi gratuiti). `resource-entry--form`
       resta sul markup come marcatore per i contratti e per chi scrive la
       veste (non ha una regola CSS propria, non porta più né fondo né
       min-height: tutte e tre le card sono alla pari) — non è il marcatore
       che usa il JavaScript, che aggancia [data-iscrizione-form]. */
    .resource-list { display: grid; grid-template-columns: 1.1fr .9fr 1fr; margin-top: var(--space-xl); border-top: 1px solid color-mix(in srgb, var(--lime-soft) 45%, transparent); }
    .resource-entry { display: flex; flex-direction: column; padding: var(--space-lg); border-left: 1px solid color-mix(in srgb, var(--lime-soft) 45%, transparent); }
    .resource-entry:first-child { border-left: 0; padding-left: 0; }
    .resource-entry:last-child { padding-right: 0; }
    .resource-entry:nth-child(2) { background: color-mix(in srgb, var(--bark-deep) 55%, transparent); }
    .resource-type { color: var(--lime-soft); }
    .resource-entry h3 { margin: 0 0 var(--space-sm); color: var(--surface); font: var(--title-weight) var(--title-size)/var(--title-leading) var(--font-display); }
    .resource-entry p { margin: 0 0 var(--space-md); color: var(--paper-alt); }
    /* Le card non hanno più un'altezza minima e i rimandi seguono il testo
       (niente margin-top:auto): il committente (29 lug 2026) voleva il box
       più basso e senza il vuoto fra testo e link. I bordi verdi restano
       pari perché .resource-list (griglia, stretch) tiene le tre card alla
       stessa altezza, quella della colonna più alta. */
    .resource-entry .text-link { align-self: flex-start; color: var(--surface); }
    .resource-entry .text-link:hover { color: var(--lime-soft); }
    /* Il conteggio dei corsi gratuiti eredita dal chrome un tono pensato per
       fondo chiaro: sul bark era quasi invisibile (misurato sulla tavola). */
    .resource-entry .link-count { color: var(--lime-soft); }
    /* ---- Il modulo di iscrizione ----
       Riga sola, come nel mockup originale: campo email e bottone
       affiancati. Sotto, la spunta del consenso; sotto ancora, il posto del
       messaggio d'errore. Un solo gap sul contenitore per tutta la
       spaziatura verticale: niente margini propri che si sommano al gap e
       gonfiano la card oltre le altre due. Il tema ospite dà al <form> un
       margin-bottom (misurato 32px su staging il 30 lug 2026) che, senza
       nulla sotto, allungava la colonna più alta e con lei — a parità di
       altezza — tutte e tre le card: azzerato qui (margin-block end 0). */
    .resource-form { display: grid; gap: var(--space-xs); margin-block: 12px 0; }
    /* Riga: il campo si espande (flex:1, min-inline-size:0 perché senza
       l'input non si lascerebbe restringere sotto il suo contenuto), il
       bottone tiene la sua larghezza naturale e non si comprime (flex:none). */
    .resource-form__campo { display: flex; align-items: stretch; gap: var(--space-xs); margin: 0; }
    .resource-form input[type="email"] {
      flex: 1; min-inline-size: 0; height: 48px; padding: 0 12px; border: 1px solid var(--lime-soft);
      border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
      font-family: var(--font-body); font-size: var(--body-size); font-weight: 400; line-height: 1.4;
    }
    .resource-form input::placeholder { color: var(--ink-2); opacity: 1; }
    .resource-form input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
    /* Stessa altezza del campo (48px): il committente li vuole allineati,
       non affidati allo stretch implicito del flex. */
    .resource-form__campo .button { flex: none; height: 48px; }
    /* La spunta la disegniamo noi: quella del tema ospite su fondo scuro è
       un quadrato scuro su scuro, e il consenso è la cosa che meno di tutte
       può essere invisibile. */
    .resource-form__consenso { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; margin: 0; }
    /* align-items: start (non center) perché il testo può andare a capo: la
       spunta resta sulla prima riga. Il box va centrato sull'INCHIOSTRO del
       testo (cima maiuscole ↔ base), NON sulla line-box: la line-box include
       lo spazio dei discendenti sotto la base, così le lettere stanno nella
       metà alta e centrare sulla line-box lascia il testo «troppo alto»
       rispetto al centro del quadrato (rilievo committente, misurato a schermo
       il 30 lug 2026). Il centro-inchiostro (margin 1px, delta 0) leggeva
       ancora un filo basso al committente: margin-top 0 alza il box di 1px
       sul centro dell'inchiostro — scelta finale a schermo (30 lug 2026). */
    /* ⚠️ Il TIPO è qualificato per la stessa ragione del gemello nel footer
       (`.newsletter-consent input[type="checkbox"]`, partials/site-chrome.css,
       2 ago 2026): `input[type="checkbox"] { width: auto; height: auto }` del
       tema padre fa (0,1,1) come questa riga, e a parità decide l'ordine di
       caricamento — che su questo sito CAMBIA CON LA PAGINA. Qui la casella
       oggi è sana (misurata 20×20 sulla home servita, dove components.css
       carica dopo theme.css), quindi non si corregge un difetto visibile: si
       toglie una dipendenza dall'ordine, prima che questo form venga
       riusato su una pagina dove l'ordine è rovesciato — che è esattamente
       come il footer, stesso componente, è arrivato a 2×2px su /shop/. */
    .resource-form__consenso input[type="checkbox"] {
      appearance: none; -webkit-appearance: none; width: 20px; height: 20px;
      margin: 0;
      border: 1px solid var(--lime-soft); border-radius: 4px; background: var(--surface); cursor: pointer;
    }
    .resource-form__consenso input:checked { border-color: var(--lime); background: var(--lime); }
    .resource-form__consenso input:checked::after {
      display: block; width: 5px; height: 10px; margin: 2px auto 0;
      border: solid var(--ink-on-accent); border-width: 0 2px 2px 0; content: ""; transform: rotate(45deg);
    }
    .resource-form__consenso input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
    /* Corpo di lettura, non micro-etichetta: è il testo su cui si acconsente. */
    .resource-form__consenso label { color: var(--paper-alt); font-size: var(--body-size); font-weight: 400; letter-spacing: normal; line-height: 1.4; text-transform: none; cursor: pointer; }
    .resource-form__consenso a { color: var(--lime-soft); text-decoration: underline; }
    .resource-form__trappola { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    /* Scopate a .resource-entry: sono entrambe un <p>, e senza questo la
       regola generica .resource-entry p (0,1,1) batte queste due (0,1,0) —
       misurato: l'esito rendeva lo stesso --paper-alt del testo normale
       invece di --ember, e la conferma non era mai lime. */
    .resource-entry .resource-form__esito { margin: 0; color: var(--ember); font-size: var(--body-size); font-weight: 700; }
    .resource-entry .resource-form__fatto { margin: var(--space-sm) 0 0; color: var(--lime-soft); font-size: var(--body-size); }

    /* ---- Ricerca finale ---- */
    .final-search-section { position: relative; overflow: hidden; padding: clamp(70px, 10vw, 130px) 0; border-top: 4px solid var(--lime); background: var(--paper); }
    .final-search-section::before { position: absolute; inset: 0; background-image: var(--grid-paper); content: ""; }
    .final-search-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(48px, 8vw, 110px); align-items: end; }
    .final-search-section .section-heading { margin-bottom: 0; }
    .final-search-form label { display: block; margin-bottom: 10px; color: var(--bark); font-size: var(--label-size); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
    .final-search-control { display: flex; gap: var(--space-xs); padding: var(--space-xs); border: none; border-radius: var(--radius-md); background: var(--surface); }
    .final-search-control input { width: 100%; min-width: 0; height: auto; padding: 10px; border: 0; color: var(--ink); background: transparent; font-size: var(--body-size); }
    /* Stesso motivo della ricerca dell'hero: l'alone si spegne con l'anello,
       altrimenti resta un rettangolo beige sul bianco del controllo. */
    .final-search-control input:focus-visible { outline: none; box-shadow: none; }
    .final-search-control input::placeholder { color: var(--ink-2); opacity: 1; }
    .publication-note { margin: 0; padding: var(--space-sm) 20px; border-top: 1px solid var(--ember); color: var(--ember-ink); background: var(--paper); font-size: var(--label-size); font-weight: 700; text-align: center; }

    /* ---- Il pannello dei materiali ----
       Chiuso di suo. Si apre in due modi indipendenti: `data-aperto`, messo
       dal JavaScript, e `:target`, che è la strada di chi il JavaScript non
       ce l'ha (o di quando fallisce a metà). Il foglio scorre da solo: la
       pagina dietro la blocca il JavaScript, ma senza di lui il pannello è
       una sezione lunga e deve restare percorribile. */
    .materiali { position: fixed; z-index: 900; inset: 0; display: none; }
    .materiali[data-aperto], .materiali:target { display: block; }
    /* La chiusura vince su entrambe le strade di apertura. Senza questa
       regola, chiudere un pannello aperto da `:target` dipenderebbe dal
       momento in cui il browser rivaluta la pseudo-classe dopo il
       replaceState — una scommessa che qui non si può misurare. Stessa
       specificità di [data-aperto] (0,2,0) e scritta dopo: vince per ordine;
       su :target (0,1,1) vince per specificità. */
    .materiali[data-chiuso] { display: none; }
    .materiali__sfondo { position: absolute; inset: 0; background: color-mix(in srgb, var(--bark-deep) 55%, transparent); }
    .materiali__foglio { position: absolute; inset: 5vh 50% auto auto; overflow-y: auto; box-sizing: border-box; width: min(1080px, 92vw); max-height: 90vh; padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--paper); transform: translateX(50%); }
    .materiali__foglio:focus { outline: none; }
    .materiali__testata { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
    .materiali__titolo { margin: 0; color: var(--bark); font: var(--display-weight) clamp(1.6rem, 3vw, 2.2rem)/1.15 var(--font-display); letter-spacing: var(--display-tracking); }
    .materiali__esempio { margin: 6px 0 0; color: var(--ink-2); font-size: var(--body-size); }
    .materiali__chiudi { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); }
    .materiali__chiudi:hover, .materiali__chiudi:focus { color: var(--ink); background: var(--lime-wash); }
    .materiali__chiudi svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
    .materiali__gruppo { margin-bottom: var(--space-lg); }
    .materiali__gruppo h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--space-md); color: var(--bark); font: 700 var(--title-size)/1.3 var(--font-display); }
    .materiali__quanti { color: var(--ink-2); font-size: var(--label-size); font-weight: 700; }
    .materiali-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
    .materiali-card { display: grid; grid-template-rows: auto auto auto 1fr; gap: 8px; padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
    .materiali-card__icona { width: 26px; height: 26px; fill: none; stroke: var(--olive); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
    .materiali-card__badge { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
    .materiali-card__formato, .materiali-card__pagine, .materiali-card__accesso { padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--label-size); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
    .materiali-card__formato { color: var(--ink); background: var(--line); }
    .materiali-card__pagine { color: var(--ink-2); background: transparent; }
    .materiali-card__accesso--gratuito { color: var(--ink-on-accent); background: var(--lime); }
    .materiali-card__accesso--incluso { color: var(--ink-2); background: var(--lime-wash); }
    .materiali-card h4 { margin: 0; color: var(--bark); font: 700 var(--body-size)/1.35 var(--font-display); }
    /* Corpo di lettura, non micro-etichetta: 25 descrizioni sono la superficie
       più densa di testo della home, e girava a var(--label-size) — 13px, il
       gradino dei badge maiuscoli. Fra label e body la scala non ha gradini
       intermedi (DESIGN.md, Step Rule: «Il corpo di lettura non scende mai
       sotto i 17 px»), e inventarne uno qui sarebbe un token di pagina. */
    .materiali-card__testo { margin: 0; color: var(--ink-2); font-size: var(--body-size); line-height: var(--body-leading); }
    .materiali__piede { margin: 0; }
    .materiali__sprite { position: absolute; width: 0; height: 0; }

    /* ---- Il momento autorevole: il tavolo si compone una volta sola ---- */
    @media (prefers-reduced-motion:no-preference) {
      .hero-copy > *, .dossier { animation: table-set .7s var(--ease-out) both; }
      .hero-copy > *:nth-child(1) { animation-delay: .05s; }
      .hero-copy > *:nth-child(2) { animation-delay: .12s; }
      .hero-copy > *:nth-child(3) { animation-delay: .19s; }
      .hero-copy > *:nth-child(4) { animation-delay: .26s; }
      .hero-copy > *:nth-child(6) { animation-delay: .33s; }
      .dossier { animation-name: dossier-lay; animation-delay: .28s; animation-duration: .85s; }
      .technical-rule span { animation: tick-in .5s var(--ease-out) both; animation-delay: calc(.62s + var(--i, 0) * .022s); }
      .dossier[data-updating="out"] .dossier-kicker,
      .dossier[data-updating="out"] h2,
      .dossier[data-updating="out"] .dossier-why,
      .dossier[data-updating="out"] .dossier-outcome,
      .dossier[data-updating="out"] .dossier-meta,
      .dossier[data-updating="out"] .dossier-footer {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
      }
      .dossier[data-updating="in"] .dossier-kicker,
      .dossier[data-updating="in"] h2,
      .dossier[data-updating="in"] .dossier-why,
      .dossier[data-updating="in"] .dossier-outcome,
      .dossier[data-updating="in"] .dossier-meta,
      .dossier[data-updating="in"] .dossier-footer {
        animation: sheet-swap .52s var(--ease-out) both;
      }
      /* Il default è visibile: il reveal si arma solo se il JS può davvero rivelarlo. */
      [data-reveal][data-armed="true"] > * { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay: calc(var(--i, 0) * .07s); }
      [data-reveal][data-armed="true"][data-shown="true"] > * { opacity: 1; transform: none; }
    }
    @keyframes table-set { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
    @keyframes dossier-lay { from { opacity: 0; transform: translate3d(26px, 10px, 0) rotate(.6deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
    @keyframes tick-in { from { opacity: 0; transform: scaleY(.2); transform-origin: bottom; } to { opacity: 1; transform: none; } }
    @keyframes sheet-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    /* L'input decide il bersaglio, non la larghezza dello schermo: un portatile
       con touch merita i 44 px quanto un telefono, un mouse preciso no. */
    @media (pointer:coarse) {
      /* .main-nav a è del chrome (site-chrome.css la possiede): questa regola
         la ridefiniva a inline-flex, e .mega-feature — la card del corso in
         evidenza — è un <a> dentro .main-nav. Su ogni dispositivo touch la
         card collassava (fino a 75×75px su tre righe a 1440px). Rimossa da
         qui: il chrome dichiara già il bersaglio tattile su .main-nav__link. */
      /* `.brand`, `.header-actions a`, `.footer-links a` e `.newsletter-form
         input` vivevano qui: sono controlli del CHROME, gli ultimi tre in
         forma discendente — la vecchia guardia `posseduti` cercava il
         selettore a inizio riga o dopo `,{}` e non li vedeva. Il chrome ha
         ora un proprio blocco `@media (pointer: coarse)` e li possiede,
         `.footer-link` per classe (così prende anche i quattro link di
         `.footer-service`, che `.footer-links a` mancava) e `.brand` anche in
         larghezza. `.newsletter-form input` non serve a nessuno dei due: la
         regola base del chrome gli dà già 44px su ogni puntatore.
         Qui restano `.text-link` e `.family-cue`, che sono contenuto della
         homepage e non escono da questa pagina. */
      .text-link, .family-cue {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
      }
      .course-search input, .final-search-control input { min-height: 44px; }
      .discussion-list li, .problem-family { row-gap: var(--space-sm); }
      /* Col bersaglio a 44px la sporgenza scende a 12px: la scheda qui è a
         tutta larghezza e a -22px la freccia uscirebbe dai 20px di margine
         del binario (overflow hidden della hero la mozzerebbe). */
      .dossier-nav__btn { inline-size: 44px; block-size: 44px; }
      .dossier-nav__btn[data-dossier-prev] { left: -12px; }
      .dossier-nav__btn[data-dossier-next] { right: -12px; }
    }
    @media (max-width:1099px) {
      /* `.header-inner { flex-wrap: wrap }` viveva qui: mandava l'header su
         due righe su iPad verticale, mentre Megamenu-Redesign (senza il
         residuo) restava su una — le due superfici divergevano proprio dove
         la fonte unica doveva impedirlo. .header-inner è del chrome. */
      /* .menu-toggle/.main-nav/.main-nav[data-open] vivevano qui da prima che
         esistesse il chrome condiviso (Task 3/4): nascondevano l'intera nav
         fra 768 e 1099px in attesa di un data-open che solo il drawer
         imposta. Misurato: sulla homepage il pannello "Corsi" restava a
         altezza 0 in quella fascia, mentre su Megamenu-Redesign (senza
         questo residuo) funzionava. site-chrome.css è ora l'unica fonte per
         questi selettori: qui sotto i 1100px il megamenu resta inline a due
         colonne, l'hamburger compare solo sotto i 768px. */
      /* Il gutter delle sezioni scende a 28px sulla stessa soglia del chrome.
         Prima questa riga non c'era e `.section-shell` prendeva i 28px dal
         CSS del chrome, che se l'era presa: `.hero` restava a 40px e fra 768
         e 1099px hero e sezioni erano disallineati di 6px per lato. Ora la
         larghezza del contenuto è della pagina, e la pagina la tiene
         allineata ai binari della barra e del footer. */
      /* variante della home: sotto la soglia il respiro scende a 28px */
      .hero, .section-shell { width: min(100% - 28px, 1240px); }
      .hero { grid-template-columns: 1fr; min-height: auto; }
      .dossier { max-width: 640px; margin: 0; }
      .trust-list { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
      .trust-list li:nth-child(3) { border-left: 0; padding-left: 0; }
      .courses-layout, .problems-layout, .method-grid, .proof-grid, .final-search-grid { grid-template-columns: 1fr; }
      .problems-intro { position: static; }
      .method-visual { min-height: 520px; }
      .resource-list { grid-template-columns: 1fr; }
      .resource-entry, .resource-entry:first-child, .resource-entry:last-child { min-height: auto; padding: var(--space-lg) 0; border-left: 0; border-bottom: 1px solid color-mix(in srgb, var(--lime-soft) 40%, transparent); }
      .resource-entry:nth-child(2) { min-height: auto; padding: var(--space-lg); }
      /* `.footer-grid { grid-template-columns: repeat(2, 1fr) }` viveva qui:
         selettore del chrome, che nella stessa soglia dichiara già
         `repeat(2, minmax(0, 1fr))` — identico all'occhio, ma `1fr` vale
         `minmax(auto, 1fr)` e lascia traboccare una colonna con dentro una
         parola lunga. La ridefinizione fuori regione vinceva sulla fonte
         unica per sola posizione nel file. */
    }
    @media (max-width:767px) {
      body, input { font-size: 16px; }
      /* `.announcement { font-size: var(--label-size) }` viveva qui: rimpicciolisce
         l'annuncio sul telefono, ma `.announcement` è un componente del chrome,
         che lo renderizza e lo stila. La regola è salita in
         partials/site-chrome.css (blocco "solo il telefono"); qui la homepage
         non cambia di un pixel. */
      /* `.header-inner, .hero, .section-shell, .footer-inner { width: ... }`
         viveva qui: per `.hero` e `.section-shell` la soglia giusta è 1099px
         (vedi sopra), e `.header-inner`/`.footer-inner` sono del chrome, che
         li porta già a 28px dai 1099px in giù — questa riga ripeteva la fonte
         unica su una soglia più stretta.
         `.header-inner { min-height: 64px; gap: var(--space-xs) }` viveva qui:
         stessa famiglia, ma non ridondante — era l'unico posto dove la barra
         si accorciava sul telefono, quindi la stessa barra era alta 64px sulla
         homepage e 76px su ogni altra superficie. La regola è salita nel
         chrome, alla stessa soglia: la homepage non cambia di un pixel. */
      /* `.main-nav[data-open="true"] { align-items: stretch; flex-direction:
         column; gap: 0 }` viveva qui: selettore del chrome, e con gli stessi
         tre valori che il chrome dichiara sul drawer aperto. Vinceva solo per
         posizione nel file — una copia identica, quindi invisibile finché
         qualcuno non avesse cambiato il chrome e non l'altra. */
      /* `.main-nav a { padding: 12px 0; border-bottom: ... }` viveva qui:
         specificità (0,1,1), batteva .mega-link e .button (0,1,0) del
         chrome — nel drawer i link perdevano il padding e prendevano una
         riga sotto, la CTA arancione perdeva il padding orizzontale. */
      /* `.header-actions a:first-child { display: none }` viveva qui: forma
         discendente su un selettore del chrome, e ridondante — il chrome
         nasconde già `.header-actions a:not(.header-actions__cart)` alla
         stessa soglia, cioè "Cerca" e "Accedi" insieme invece del solo primo.
         Peggio: se un giorno il carrello fosse il primo figlio, questa riga
         nasconderebbe proprio il controllo che DESIGN.md vuole sempre
         raggiungibile. */
      /* `.header-actions { gap: 12px; }` viveva qui: selettore esatto,
         chrome-owned (site-chrome.css usa clamp(10px, 1.6vw, 22px), che a
         queste larghezze risolve comunque a 10px — la differenza visiva era
         minima, la ridefinizione della fonte unica no). La guardia di Step 2
         intercetta esattamente questo caso. */
      /* Il blocco `.cart-label { position:absolute; clip: rect(0,0,0,0); ... }`
         viveva qui: codice morto su un selettore del chrome. Il chrome porta
         `.cart-label { display: none }` già dai 1099px in giù, e su un
         elemento non renderizzato quelle nove dichiarazioni non fanno nulla —
         misurate, differivano fra le due superfici senza spostare un pixel. */
      .section { padding: 68px 0; }
      .course-search, .final-search-form { width: 100%; }
      .course-search { padding: var(--space-sm); }
      .course-search__control, .final-search-control { flex-wrap: wrap; }
      .course-search input, .final-search-control input { flex: 1 1 190px; min-height: 44px; }
      .course-search__control .button, .final-search-control .button { width: 100%; }
      /* Stesso padding generoso del desktop (fino a 36px), con minimo sicuro sui
         telefoni stretti. margin-right riserva lo spazio per carta sabbia + linguetta,
         così la card non tocca il bordo dello schermo. */
      .dossier { padding: clamp(28px, 8vw, 36px); margin-right: 14px; }
      .dossier-why { padding: var(--space-md); }
      .dossier-kicker { padding-right: 76px; }
      .dossier-tab { top: 34px; padding: 6px 9px; font-size: var(--label-size); }
      .dossier-footer { align-items: flex-start; flex-direction: column; }
      .dossier-footer .button { width: 100%; }
      .trust-list { grid-template-columns: 1fr; row-gap: var(--space-md); }
      .trust-list li, .trust-list li:nth-child(3) { padding: var(--space-md) 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--lime-soft) 30%, transparent); }
      .trust-list li:first-child { padding-top: 0; border-top: 0; }
      .courses-layout { display: block; }
      .featured-course { grid-template-columns: 1fr; min-height: 0; }
      .compact-course-list { margin-top: var(--space-lg); }
      .compact-course { grid-template-columns: 1fr; }
      .compact-course .family-cue { grid-column: 1; margin-top: var(--space-xs); }
      .problem-family { grid-template-columns: 44px minmax(0, 1fr); }
      .problem-family .family-cue { grid-column: 2; }
      .route-grid { grid-template-columns: 1fr; }
      .method-visual { min-height: 480px; }
      .method-photo { right: 0; left: 0; width: 88%; margin: auto; }
      .method-paper { width: 82%; }
      .founder { grid-template-columns: 1fr; text-align: left; }
      .materiali__foglio { inset: 0 auto auto 0; width: 100%; max-height: 100%; border-radius: 0; transform: none; }
      .materiali-griglia { grid-template-columns: 1fr; }
      /* Ultimi tre residui pre-chrome su selettori del footer condiviso:
         `.footer-grid { grid-template-columns: 1fr }` e
         `.footer-bottom { flex-direction: column }` ripetevano parola per
         parola quello che il chrome dichiara nella stessa soglia;
         `.newsletter-form { grid-template-columns: 1fr }` era codice morto —
         il modulo non è una griglia, il chrome lo impila e basta. */
    }
    @media (prefers-reduced-motion:reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
        scroll-behavior: auto;
      }
    }
    @media (prefers-contrast:more) {
      /* Il rimpiazzo dei token (--ink-2, --line, --paper-alt) è salito nella
         regione dei token: è una regola del design system, non di questa
         pagina. Qui restano solo i rinforzi dei componenti della homepage. */
      .course-search, .course-search__control, .dossier, .featured-course, .compact-course, .route-grid, .problem-family {
        border-color: var(--bark);
        border-width: 2px;
      }
      .hero-intro, .section-intro, .featured-course__problem, .compact-course p, .dossier-outcome { color: var(--ink); }
      /* `footer, .footer-links a, .newsletter-demo-note, .legal-demo` e
         `.footer-bottom` sono usciti da queste due righe: il rinforzo delle
         superfici scure è del chrome, ed è salito in site-chrome.css — qui
         mancava a ogni altra tavola, e il selettore `footer` (0,0,1) perdeva
         perfino contro `.site-footer` (0,1,0) della fonte unica. */
      .resources-section .section-kicker, .resources-section .section-intro, .resource-type, .resource-entry p { color: var(--paper); }
      .resource-list, .resource-entry { border-color: var(--lime-soft); }
      .hero-stage::before, .method-section::before, .final-search-section::before { display: none; }
    }