/**
 * main.css — UNICO foglio di stile del tema Skimup.
 *
 * Organizzato con @layer nell'ordine di CLAUDE.md:
 *   tokens     → custom properties (colori, spaziature, type scale, breakpoint)
 *   base       → reset + UNA sola definizione per h1/h2/h3/p/blockquote/button/...
 *   components → .btn, .nav, .card, .pill, .form-*  (varianti = classi modificatrici)
 *   sections   → solo layout specifico di ogni sezione
 *
 * Regola di centralizzazione (CLAUDE.md): due istanze dello stesso tipo di elemento
 * non devono mai avere regole duplicate o divergenti. Una variante è una classe
 * modificatrice sulla regola base, non una regola nuova.
 *
 * Mobile-first. Breakpoint (dove il contenuto si rompe, non per device):
 *   600 / 840 / 1200 / 1600 px  (riferimento Material Design 3).
 */

@layer tokens, base, components, sections;

/* ---- @font-face: Open Sans self-hosted (fuori dai @layer per precedenza piena) ----
   Variable font (asse wght 300..800): un file per subset copre tutti i pesi.
   Open Sans = sostituto di Segoe UI del mockup (stesso disegnatore, match ~85%).
   Vedi assets/fonts/README.md. */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/open-sans/open-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/open-sans/open-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/open-sans/open-sans-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/open-sans/open-sans-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================ tokens ===== */
@layer tokens {
	:root {
		/* --- colori di marca (valori esatti da XD Design Specs "SKIMUP v3") --- */
		--c-navy: #172337;
		--c-navy-2: #22314d;          /* navy chiaro: tracce di sfondo */
		--c-lime: #bcff00;
		--c-lime-tint: #e7ffa2;
		--c-magenta: #ff0080;         /* UI: pill attiva, pallini, bottone griglia */
		--c-magenta-mark: #ff008c;    /* solo il marchio SKIMUP */
		--c-magenta-ink: #e60073;     /* magenta come FONDO sotto testo BIANCO: 4.55:1 → AA.
		                                 Il magenta di marca sotto il bianco è 3.77:1, sotto la
		                                 soglia 4.5:1 per il testo normale (misurato con axe-core
		                                 in Fase 20, QA pre go-live): falliva su bottoni, voce di
		                                 menu attiva, badge numerici e bottone dei moduli. Stessa
		                                 logica di --c-green-ink sopra: il colore di marca resta
		                                 --c-magenta per decori e icone (non-testo, soglia 3:1). */
		--c-ink: #303030;             /* titoli su fondo chiaro (H2/H3) */
		--c-green-ink: #478100;       /* "verde OK" leggibile su bianco: il lime #bcff00 non ha
		                                 contrasto sul bianco (~1.3:1). ~4.7:1 → AA. Badge "Conforme". */
		--c-white: #ffffff;
		/* superficie chiara appena staccata dal bianco: contenitore del modulo nelle
		   pagine Contatti/Demo (l'XD la disegna come rettangolo segnaposto #EBEBEB —
		   qui un grigio più tenue, così i campi bianchi restano l'elemento più chiaro). */
		--c-surface-soft: #f4f5f7;

		/* --- colori semantici --- */
		--color-text: var(--c-white);
		/* Testo secondario su navy. UN solo valore per questo ruolo: prima della Fase 9
		   convivevano 0.72 / 0.86 / 0.88 / 0.9 in punti diversi per la stessa cosa.
		   --color-text-soft è l'unica variante ammessa (testo lungo su navy, dove 0.72
		   scendeva sotto il comfort di lettura). */
		--color-text-muted: rgb(var(--c-white-rgb) / 0.72);
		--color-text-soft: rgb(var(--c-white-rgb) / 0.88);
		--c-ink-muted: rgb(var(--c-ink-rgb) / 0.72);  /* --color-text-muted, ma su sfondo chiaro (card blog, estratti) */
		--color-accent: var(--c-lime);
		--color-link: var(--c-lime);
		--color-focus: var(--c-lime);

		/* Superfici a gradiente dell'XD (pannello CTA della Verifica, coda della fascia
		   navy della home): navy leggermente schiarito in diagonale. */
		/* Estremi del gradiente e alone azzurro dell'hero: token perché la palette di
		   Skimup → Colori (Fase 21) li ricalcola dal navy. Stessi valori di prima. */
		--c-panel-from: #1c2b47;
		--c-panel-to: #26365c;
		--c-glow-rgb: 62 99 161;
		--grad-panel: linear-gradient(150deg, var(--c-panel-from) 0%, var(--c-panel-to) 100%);
		--grad-band-tail: linear-gradient(180deg, var(--c-navy) 0%, #1d2c46 55%, #22335170 100%);

		/* --- scala spaziature: base 8px, half-step 4px --- */
		--space-4: 0.25rem;
		--space-8: 0.5rem;
		--space-12: 0.75rem;
		--space-16: 1rem;
		--space-20: 1.25rem;
		--space-24: 1.5rem;
		--space-28: 1.75rem;
		--space-32: 2rem;
		--space-48: 3rem;
		--space-64: 4rem;
		--space-96: 6rem;

		/* --- tipografia --- */
		/* Il mockup XD è impaginato in "Segoe UI" (Light hero, Semibold corpo/titoli,
		   Bold nav). Sostituito da "Open Sans" self-hosted (stesso disegnatore,
		   match ~85%); Segoe UI resta come fallback su Windows. Vedi
		   assets/fonts/README.md per la mappa pesi. */
		--font-sans: "Open Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
		--fw-light: 300;      /* hero H1, mega-claim (unici Light: mockup Segoe UI Light/Semilight) */
		--fw-regular: 400;    /* corpo del testo */
		--fw-semibold: 600;   /* titoli sezione, domande FAQ, titoli box (mockup "regular") */
		--fw-bold: 700;       /* nav, bottoni, footer */

		/* Scala tipografica fluida — RIVISTA 2026-09-21 (Fase 16, #10/#8).
		   Metodo Utopia (utopia.fyi/type): "terza maggiore" (rapporto 1.25), fluida fra
		   390px (rapporto mobile 1.2) e 1440px (rapporto desktop 1.25) — decisione
		   Federico, non più il valore esatto dell'artboard XD a 1920px. Ogni clamp ha
		   comunque una componente `rem`, mai solo `vw` (WCAG 1.4.4, testo ridimensionabile
		   al 200%). Motivo del cambio: molti testi erano percepiti come eccessivamente
		   grandi (#10) e il footer in particolare (#8) — la vecchia scala inseguiva l'XD
		   punto per punto e non seguiva un rapporto tipografico comprovato.
		   NOTA: nelle sezioni "a stage" (.s-home-intro__stage, pannelli Approfondimento,
		   Approfondimento 2 esclusi #10) i font scalano con `cqw` sull'artboard 1920 — lì
		   la fedeltà è per costruzione e questi token non si applicano. */
		--fs-mega:     clamp(2.986rem, 2.5014rem + 1.9886vw, 4.2915rem);  /* 48→69px */
		--fs-display:  clamp(2.4883rem, 2.1371rem + 1.44vw, 3.4332rem);  /* 40→55px */
		--fs-h1:       clamp(2.0736rem, 1.8237rem + 1.0257vw, 2.7466rem);/* 33→44px (nuovo: h1 di pagina) */
		--fs-h2:       clamp(1.728rem, 1.5538rem + 0.7152vw, 2.1973rem); /* 28→35px — titoli di sezione */
		--fs-h3:       clamp(1.44rem, 1.3218rem + 0.4848vw, 1.7578rem); /* 23→28px */
		--fs-h4:       clamp(1.2rem, 1.1234rem + 0.3143vw, 1.4063rem);  /* 19→22.5px — titoli di card/riga */
		--fs-body-lg:  var(--fs-h4);                                    /* stesso step di --fs-h4 (Utopia) */
		--fs-body:     clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);     /* 16→18px — corpo */
		--fs-nav:      1rem;        /* voci di menu / bottoni (uppercase Bold) — 16px */
		--fs-label:    0.875rem;    /* kicker, meta, link footer — 14px */
		--fs-small:    0.75rem;     /* nuovo: crediti del footer — 12px (#8, "eccessiva") */

		/* Alias storico: le domande FAQ usano lo step dei titoli di card/riga (Fase 16:
		   erano --fs-h3/40px, troppo grandi rispetto al resto della gerarchia — #10). */
		--fs-faq-q:    var(--fs-h4);

		--lh-display: 1.1;   /* mega-claim, hero H1, titoli intro a due colonne */
		--lh-tight: 1.2;     /* stesso ruolo di --lh-display, valore Fase 16 */
		--lh-snug: 1.3;      /* h2-h4, domande FAQ, titoli di card/riga (default heading) */
		--lh-normal: 1.6;    /* corpo */

		--tracking-tight: -0.01em;  /* display grande */
		--tracking-wide: 0.04em;    /* bottoni uppercase */
		--tracking-widest: 0.16em;  /* micro-label uppercase ("SCORRI") */

		/* --- movimento (XD: hover state-transition 0.3s ease-out) --- */
		--ease-out: cubic-bezier(0, 0, 0.2, 1);
		--dur-hover: 0.3s;

		/* --- forme ---
		   I raggi dell'XD, letti uno a uno dalle Design Specs: 112 (fascia navy home),
		   100 (fasce navy Verifica), 68 (famiglia "card grande" — box Verifica, CTA
		   finale, form, text-box desktop/mobile), 50 (fascia FAQ e pillole grandi), 45
		   (pillola nav). Un token per ruolo, mai un px sciolto.
		   Fase 16 #20 (coerenza dei componenti): --radius-card ora vale il raggio unico
		   della famiglia "card grande" (prima --radius-68, e prima ancora un valore da
		   91px mai usato) — .s-vef-box__card e .s-page-cta__card avevano un clamp scritto
		   a mano con un massimo diverso, ora condividono lo stesso token. --radius-lg
		   (usata solo dal text-box mobile, ora sul token comune) e --radius-xl (mai
		   usata) sono state rimosse. --radius-hero-pill raccoglie il clamp della pillola
		   "a stadio" degli hero, prima scritto a mano in 3 punti. */
		--radius-pill: 999px;
		--radius-sm: 0.5rem;
		--radius-md: 1rem;
		/* Fase 16 (#14): fluidi, 48px a 390 → valore XD da ~1300px. Un raggio fisso di
		   112px su un telefono largo 390 mangiava i lati del personaggio col tablet
		   appoggiato sul fondo della fascia (e gli angoli di tutte le fasce apparivano
		   sproporzionati su mobile). */
		--radius-section: clamp(3rem, 1.2rem + 7.4vw, 7rem);        /* fascia navy della home — XD 112px */
		--radius-section-alt: clamp(3rem, 1.2rem + 7.4vw, 6.25rem); /* fasce navy della Verifica — XD 100px */
		--radius-band-faq: 3.125rem;   /* fascia navy della FAQ — XD 50px */
		--radius-card: clamp(1.75rem, 3.5vw, 4.25rem);  /* card di contenuto grande: 68px uniforme */
		--radius-hero-pill: clamp(1.5rem, 5vw, 3rem);   /* pillola hero (Verifica/TPS/Competenze/page-hero) */
		--radius-faq: clamp(1.25rem, 2.5vw, 2rem);    /* scheda FAQ aperta (~32px) */

		/* Filo magenta fra la fascia navy della FAQ e il footer lime — XD 13px. */
		--rule-footer: 8px;   /* filo magenta sopra il footer: XD 13px, assottigliato su richiesta di Federico (Fase 20) */

		/* --- canali RGB dei colori di marca ---
		   Servono per scrivere le trasparenze come rgb(var(--c-*-rgb) / α) invece di
		   ripetere la terna a mano: prima lo stesso navy compariva in 11 alfa diverse
		   scritte per esteso, e cambiare quel colore avrebbe richiesto 24 sostituzioni. */
		--c-navy-rgb: 23 35 55;
		--c-white-rgb: 255 255 255;
		--c-magenta-rgb: 255 0 128;
		--c-black-rgb: 0 0 0;
		--c-ink-rgb: 48 48 48;

		/* --- bordi sottili su superficie chiara (un token per ruolo) --- */
		--border-hairline: rgb(var(--c-navy-rgb) / 0.18);       /* box e card su bianco */
		--border-hairline-soft: rgb(var(--c-navy-rgb) / 0.2);   /* separatori fra righe */
		--border-hairline-strong: rgb(var(--c-navy-rgb) / 0.3); /* campi modulo, pillole */

		/* --- ombre --- */
		/* ombra fissa delle pillole bianche della nav: leggera su navy, sufficiente a
		   staccarle da una sezione bianca (pagina Verifica, footer, ecc.) */
		--shadow-nav: 0 2px 10px rgb(var(--c-navy-rgb) / 0.12), 0 1px 3px rgb(var(--c-navy-rgb) / 0.1);
		/* card della CTA finale (Verifica e Test Psicometrico): la stessa ombra era
		   scritta per esteso in due punti. */
		--shadow-panel: inset 0 0 0 1px rgb(var(--c-white-rgb) / 0.06), 0 30px 80px -48px rgb(var(--c-black-rgb) / 0.6);
		/* immagine in evidenza dell'articolo */
		--shadow-card: 0 18px 48px rgb(var(--c-navy-rgb) / 0.18);

		/* --- ritmo verticale fra sezioni (Fase 9) ---
		   UNA sola scala per lo stacco fra sezioni, al posto dei clamp scritti a mano
		   sezione per sezione. Regola: lo stacco fra due sezioni è UNA sola dichiarazione
		   (il padding-block della sezione), mai la somma di due margini opposti. */
		--space-section-sm: clamp(3rem, 6vw, 5rem);      /*  48 →  80px */
		--space-section:    clamp(4rem, 8vw, 7.5rem);    /*  64 → 120px */
		--space-section-lg: clamp(5rem, 11vw, 10rem);    /*  80 → 160px */
		/* Fase 19 (#2): stacco sopra e sotto le introduzioni che seguono gli hero
		   (titolo + testo centrati): un gruppo a sé, respira più di uno stacco standard. */
		--space-intro:      var(--space-section-lg);
		--space-block:      clamp(2rem, 4vw, 4rem);      /*  32 →  64px — fra blocchi interni */

		/* Margine sopra le 3 pillole hero (Verifica/TPS-Competenze/pagine secondarie):
		   prima un clamp(…, 9vh, …) identico ripetuto 3 volte — vh è una cattiva pratica
		   per lo spazio verticale (varia con la barra indirizzi mobile, Fase 16 #3).
		   Stessa tecnica dei token tipografici: rem+vw fluido fra 390 e 1440px. */
		--space-hero-top: clamp(3rem, 1.5143rem + 6.0952vw, 7rem);   /*  48 → 112px */

		/* Padding verticale delle 4 pillole hero (Verifica, TPS, Competenze, pagine
		   secondarie): erano due valori diversi (4.25rem contro 4rem) per lo stesso
		   ruolo sullo stesso tipo di componente — unificati sulla griglia a 8px
		   (Fase 16 #3, regola "Centralizzazione degli stili"). */
		--space-hero-pill-y: clamp(var(--space-32), 5.5vw, var(--space-64));   /* 32 → 64px */

		/* Stacco verticale delle PAGINE INTERNE (Verifica, Test Psicometrico, Contatti,
		   Demo, blog, articolo). Fase 15: --vef-gap, --tps-gap e --page-gap avevano lo
		   stesso identico valore, dichiarato tre volte su tre scope diversi — quindi un
		   componente condiviso non poteva riferirsi a nessuno dei tre senza sapere in
		   quale pagina si trovava. Ora il valore è QUI e i tre token lo aliasano, così
		   i componenti .s-page-* usano un nome solo.
		   Fase 16 (#3): --section-gap non ha più una scala propria, è un alias diretto
		   di --space-section — un'unica scala di ritmo verticale per tutto il sito, non
		   due quasi identiche. */
		--section-gap:    var(--space-section);          /*  64 → 120px : stacco standard */
		/* NON un alias di --space-section-lg: qui sotto scendono fisicamente le gambe
		   delle figure sedute (hero Verifica/TPS/Competenze → introduzione/FAQ) — un
		   overlap reale, non un respiro di sezione. Verificato uso per uso in Fase 16
		   (#3): ogni --section-gap-lg/--vef-gap-lg/--tps-gap-lg/--page-gap-lg del CSS
		   riserva spazio per una figura che scende, mai un semplice stacco.
		   Fase 16 (#3b, QA spaziature): il clamp(9rem, 20vw, 22rem) era scollegato dalla
		   figura reale — misurato (Playwright) che a 1440/1920 le gambe della donna
		   seduta di Verifica/TPS/Competenze finiscono 8-15px DENTRO l'hero (nessun
		   overhang oltre la sezione: sotto i 900px la figura siede al CENTRO e le gambe
		   pendono sotto la pillola, da 900px in su siede sul bordo DESTRO e resta
		   dentro), quindi quel clamp riservava 300-350px di navy vuoto prima del titolo
		   successivo. Sotto i 900px l'overhang vero (misurato) è ~110-126px in tutti i
		   breakpoint per queste tre pagine (stessa figura/CSS condivisi): la riserva
		   sotto i 900px è --space-section + quell'overhang, arrotondato a 8rem per
		   margine di sicurezza (mai per difetto: il rischio è l'overlap). Da 900px in
		   su non c'è overhang da riservare: la riserva torna semplice --space-section,
		   e il resto del respiro visibile lo dà già l'allineamento verticale centrato
		   del blocco introduttivo (CLAUDE.md §introduzione a due colonne) — misurato
		   fra 48 e 69px extra secondo quanto la colonna del paragrafo è più alta del
		   titolo. Risultato: gambe→titolo passa da 82/344/430px (VEF, 390/1440/1920)
		   a 66/172/198px — mai il vuoto di 300+px di prima, mai sotto lo stacco
		   standard. --page-gap-lg (Contatti/Demo, figura più grande con overhang che
		   cresce col viewport) resta invariato: era già in un range accettabile
		   (30-145px), non il vuoto di 300+px di qui. */
		--section-gap-lg: calc(var(--space-section) + 4rem);   /* < 900px: spazio_sezione + overhang misurato delle gambe (Fase 16: con 8rem lo stacco visibile era 130px, con 4rem ≈ 66px) */

		/* --- layout --- */
		--container-max: 1600px;
		--container-pad: var(--space-24);
		/* Altezza reale dell'header sticky: .nav min-height 3.75rem + 2× --space-16 di
		   padding di .site-header = 5.75rem (92px). Era 5.5rem e i 92px veri comparivano
		   hardcodati altrove: un solo valore, qui. Fase 16 (#18/#19): questo resta il
		   fallback per il primo render (no-JS, o prima che il ResizeObserver di nav.js
		   giri) — nav.js scrive qui sopra la misura VERA (`getBoundingClientRect().height`
		   di `.site-header`), perché la prima fascia navy di ogni pagina ora vi si
		   aggancia (margin-top negativo, vedi `.s-hero` e `.s-*-navy--round-bottom` più
		   sotto): un valore anche di poco sbagliato sposterebbe quella fascia. */
		--header-height: 5.75rem;
		--z-header: 100;

		/* Touch target minimo (WCAG 2.5.8 AA = 24px; 44px è la raccomandazione pratica).
		   Era ripetuto come `min-height: 44px` in 6 punti diversi. */
		--touch-target: 2.75rem;

		/* --- misura leggibilità testo --- */
		--measure: 65ch;
	}

	@media (min-width: 840px) {
		:root {
			--container-pad: var(--space-48);
		}
	}

	/* Sotto 1360px `.site-header` passa a `--space-12` di padding verticale (nav
	   compatta, vedi @media max-width:1359px più sotto): l'header vero è più basso
	   (3.75rem + 2×0.75rem = 5.25rem/84px, contro 92px). Fallback SOLO — nav.js lo
	   corregge subito col valore reale via ResizeObserver (Fase 16, #18/#19). */
	@media (max-width: 1359.98px) {
		:root {
			--header-height: 5.25rem;
		}
	}

	/* Da 900px in su le figure sedute (Verifica/TPS/Competenze) siedono sul bordo
	   DESTRO della pillola e le gambe restano dentro l'hero (misurato: 8-15px prima
	   del bordo, mai oltre) — non c'è più un overhang da riservare, vedi il commento
	   sopra --section-gap-lg. */
	@media (min-width: 900px) {
		:root {
			--section-gap-lg: var(--space-section);
		}
	}
}

/* ============================================================== base ===== */
@layer base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
	}

	/* <body> è bianco ovunque (Fase 16, #18/#19): prima era navy (--color-bg) sulle
	   pagine con fascia scura in apertura e la classe `skimup-surface-light` lo
	   sbiancava sulle altre — ma con la prima fascia navy di ogni pagina che ora
	   risale FISICAMENTE sotto l'header sticky (margin-top negativo, vedi
	   `.s-hero`/`.s-vef-navy--round-bottom`/ecc. più sotto), il colore dietro
	   l'header non deve più venire dal body: è la fascia stessa, e si restringe con
	   lei quando "respira" (breathe-bg.js). Vedi CLAUDE.md §fasce navy ↔ bianco. */
	body {
		margin: 0;
		background: var(--c-white);
		color: var(--color-text);
		font-family: var(--font-sans);
		font-size: var(--fs-body);
		font-weight: var(--fw-regular);
		line-height: var(--lh-normal);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	h1,
	h2,
	h3,
	h4 {
		margin: 0 0 var(--space-24);
		line-height: var(--lh-snug);
		text-wrap: balance;
	}

	/* Mockup XD: solo l'hero H1 (e il mega-claim) è Light; i titoli di sezione,
	   le domande FAQ e i titoli dei box sono Semibold. */
	h1 {
		font-size: var(--fs-display);
		font-weight: var(--fw-light);
		line-height: var(--lh-display);
		letter-spacing: var(--tracking-tight);
	}

	h2 {
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
	}

	h3 {
		font-size: var(--fs-h3);
		font-weight: var(--fw-semibold);
	}

	h4 {
		font-size: var(--fs-h4);
		font-weight: var(--fw-semibold);
	}

	p {
		margin: 0 0 var(--space-16);
		max-width: var(--measure);
	}

	blockquote {
		margin: 0 0 var(--space-24);
		padding-left: var(--space-20);
		border-left: 3px solid var(--color-accent);
		max-width: var(--measure);
	}

	a {
		color: var(--color-link);
		text-underline-offset: 0.15em;
	}

	img,
	picture,
	svg,
	video {
		display: block;
		max-width: 100%;
		height: auto;
	}

	button {
		font: inherit;
		color: inherit;
		margin: 0;
		cursor: pointer;
	}

	ul,
	ol {
		margin: 0;
		padding: 0;
	}

	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline: 3px solid var(--color-focus);
		outline-offset: 2px;
		border-radius: 2px;
	}

	.screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.skip-link:focus {
		position: fixed;
		top: var(--space-8);
		left: var(--space-8);
		z-index: 999;
		width: auto;
		height: auto;
		clip: auto;
		clip-path: none;
		padding: var(--space-12) var(--space-16);
		background: var(--c-white);
		color: var(--c-navy);
		border-radius: var(--radius-sm);
		font-weight: var(--fw-bold);
	}

	/* Movimento ridotto: preferenza di sistema E toggle UI manuale del footer. */
	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	:root[data-reduced-motion="reduce"] {
		scroll-behavior: auto;
	}

	:root[data-reduced-motion="reduce"] *,
	:root[data-reduced-motion="reduce"] *::before,
	:root[data-reduced-motion="reduce"] *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ======================================================== components ===== */
@layer components {

	/* --- bottoni ------------------------------------------------------
	   Base tipografica unica di ogni bottone/link-azione del sito (Fase 16 #20):
	   stessa altezza minima, stesso padding, stesso peso/maiuscolo/tracking/dimensione.
	   .newsletter-bar__submit, .forminator-button, .search-form__submit e
	   .s-page-404__link condividono queste proprietà via selettore (non possono
	   ricevere la classe .btn nel markup — MailPoet/Forminator/i template core
	   generano il proprio HTML). Il COLORE resta una scelta per superficie reale
	   (mai un hover bianco su bianco, CLAUDE.md), non una proprietà unificata qui. */
	.btn,
	.newsletter-bar__submit,
	.s-page-form .forminator-button-submit,
	.s-page-form button.forminator-button,
	.search-form__submit,
	.s-page-404__link,
	.s-page-mailpoet__back {
		min-height: var(--touch-target);
		padding: var(--space-12) var(--space-24);
		border-radius: var(--radius-pill);
		font-weight: var(--fw-bold);
		font-size: var(--fs-nav);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
	}

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-8);
		border: 2px solid transparent;
		background: var(--c-lime);
		color: var(--c-navy);
		text-decoration: none;
		white-space: nowrap;
		transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
	}

	.btn:hover {
		background: var(--c-lime-tint);
	}

	/* CTA "Richiedi una demo" (componente condiviso .cta-demo): pillola bianca con
	   il bottone demo + cerchio griglia magenta. Usato nell'header e nel blocco
	   "La risposta" della home (template-parts/cta-demo.php). Hover sull'intera CTA
	   (XD auto-animate 0.3s ease-out):
	     - la pillola demo si riempie di magenta, testo bianco — MEDESIMA DIMENSIONE;
	     - il cerchio griglia si inverte: fondo bianco, icona + bordo magenta.
	   Il sottile filo bianco attorno alla pillola magenta = il padding di .cta-demo. */
	.btn--demo {
		flex: 1 1 auto;
		align-self: stretch;
		background: transparent;
		color: var(--c-navy);
		transition:
			background-color var(--dur-hover) var(--ease-out),
			color var(--dur-hover) var(--ease-out);
	}

	.cta-demo:hover .btn--demo,
	.btn--demo:focus-visible {
		background: var(--c-magenta-ink);
		color: var(--c-white);
	}

	.btn--demo:focus-visible {
		/* .cta-demo non ha overflow:hidden: l'outline lime di default disegna sopra lo
		   sfondo circostante (bianco in header/answer) — invisibile. Fase 7. */
		outline-color: var(--c-navy);
	}

	/* CTA "Scopri di più" (componente condiviso .discover-cta): pillola + cerchio
	   con triangolo play. Usata nelle 3 pillole di Approfondimento 2
	   (template-parts/discover-cta.php). Hover sull'intera CTA (XD state-transition
	   0.3s ease-out, come .cta-demo): inversione del riempimento — la pillola prende
	   il colore accento, il cerchio si inverte. Nessun ingrandimento.
	   Le 3 varianti di tono (--on-navy / --on-magenta / --on-white) = classi
	   modificatrici che cambiano solo i colori, non il layout. */
	.discover-cta {
		display: inline-flex;
		align-items: center;
		gap: 0;
		padding: 3px;
		border-radius: var(--radius-pill);
		background: var(--c-navy);
	}

	.discover-cta__btn {
		display: inline-flex;
		align-items: center;
		min-height: var(--touch-target); /* era 40px — allinea al touch target consigliato usato altrove (Fase 7) */
		padding: var(--space-8) var(--space-20);
		border-radius: var(--radius-pill);
		background: transparent;
		color: var(--c-white);
		font-weight: var(--fw-bold);
		font-size: var(--fs-nav);
		text-decoration: none;
		white-space: nowrap;
		transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
	}

	.discover-cta__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 34px;
		height: 34px;
		margin-left: calc(var(--space-8) * -1);
		border: 2px solid transparent;
		border-radius: 50%;
		background: var(--c-white);
		color: var(--c-navy);
		transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
	}

	/* riposo: pillola del colore accento del tono; hover: si inverte in bianco/navy */
	.discover-cta--on-navy,
	.discover-cta--on-white {
		background: var(--c-magenta-ink);
	}

	.discover-cta--on-magenta {
		background: var(--c-navy);
	}

	.discover-cta:hover,
	.discover-cta:focus-within {
		background: var(--c-white);
	}

	/* focus-within porta lo sfondo del wrapper a bianco (regola sopra) per i toni
	   on-navy/on-magenta: l'outline lime di default (regola condivisa :focus-visible)
	   ci diventa invisibile — trovato verificando i fix di Fase 7, stesso pattern dei
	   4 override già corretti sopra. Il tono on-white non serve (il suo focus-within
	   porta a navy, lime resta visibile). */
	.discover-cta--on-navy .discover-cta__btn:focus-visible,
	.discover-cta--on-magenta .discover-cta__btn:focus-visible {
		outline-color: var(--c-navy);
	}

	.discover-cta:hover .discover-cta__btn,
	.discover-cta:focus-within .discover-cta__btn {
		color: var(--c-navy);
	}

	.discover-cta:hover .discover-cta__icon,
	.discover-cta:focus-within .discover-cta__icon {
		background: transparent;
		border-color: var(--c-navy);
		color: var(--c-navy);
	}

	/* variante --on-white: il bottone a riposo è già magenta su un disco BIANCO
	   (Approfondimento 2, "Competenze"). L'hover generico qui sopra lo
	   porterebbe a bianco → invisibile sul disco bianco (fix segnalato). Override
	   dedicato: hover verso navy invece che bianco. */
	/* variante --upper: maiuscolo (bottone "VEDI TUTTI" del blog) — non una regola
	   nuova, solo il modificatore sul testo del bottone esistente. */
	.discover-cta--upper .discover-cta__btn {
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	.discover-cta--on-white:hover,
	.discover-cta--on-white:focus-within {
		background: var(--c-navy);
	}

	.discover-cta--on-white:hover .discover-cta__btn,
	.discover-cta--on-white:focus-within .discover-cta__btn {
		color: var(--c-white);
	}

	.discover-cta--on-white:hover .discover-cta__icon,
	.discover-cta--on-white:focus-within .discover-cta__icon {
		background: transparent;
		border-color: var(--c-white);
		color: var(--c-white);
	}

	/* --- header / navigazione "a pillola" --------------------------- */
	.site-header {
		position: sticky;
		top: 0;
		z-index: var(--z-header);
		padding: var(--space-16) clamp(0.75rem, 2vw, 2.5rem);
	}

	/* Offset standard WP per la admin bar (32px desktop, 46px sotto 783px, dove core
	   la rende più alta): senza questo l'header sticky (top:0) si aggancia PROPRIO
	   dove la admin bar (fixed, z-index 99999) è già disegnata sopra — quando loggati
	   l'header finisce parzialmente coperto invece di scorrere sotto di lei. */
	body.admin-bar .site-header {
		top: 32px;
	}

	@media screen and (max-width: 782px) {
		body.admin-bar .site-header {
			top: 46px;
		}
	}

	.site-header__inner {
		display: flex;
		align-items: stretch;
		gap: var(--space-12);
		max-width: 1880px;
		margin-inline: auto;
	}

	.nav {
		flex: 1 1 auto;
		display: flex;
		align-items: stretch;
		gap: var(--space-16);
		min-width: 0;
		min-height: 3.75rem;
		padding: 0 0 0 var(--space-24);
		background: var(--c-white);
		border-radius: var(--radius-pill);
		/* ombra fissa: la pillola bianca resta visibile anche su sezioni bianche */
		box-shadow: var(--shadow-nav);
		overflow: hidden;
	}

	.nav__brand {
		display: inline-flex;
		align-items: center;
		flex: 0 0 auto;
		margin-right: var(--space-8);
		text-decoration: none;
	}

	.nav__brand img,
	.nav__brand svg {
		display: block;
		height: 1.75rem;
		width: auto;
	}

	.nav__menu {
		display: flex;
		align-items: stretch;
		flex-wrap: nowrap;
		list-style: none;
		margin-left: auto; /* voci allineate a destra della pillola (mockup) */
	}

	.nav__menu .menu-item {
		display: flex;
		align-items: stretch;
	}

	/* L'ultima voce arriva fino al bordo della pillola: il testo resta staccato
	   dalla curva (padding-right generoso), ma il box — e quindi il riempimento
	   magenta in hover/attiva — invade la curva destra (ritagliato da
	   .nav overflow:hidden). */
	.nav__menu .menu-item:has(+ .menu-item--demo) > a {
		padding-right: clamp(2.75rem, 4vw, 4rem);
	}

	/* la voce "Richiedi una demo" serve solo nell'overlay mobile (< 1360px) */
	.nav__menu .menu-item--demo {
		display: none;
	}

	/* le icone social (Fase 19, #5b) restano solo nel footer da 1360px in su: nel
	   pannello mobile chiudono l'overlay, sotto la CTA */
	.nav__menu .menu-item--social {
		display: none;
	}

	/* Barra "segmentata": le celle sono adiacenti, a piena altezza; hover e voce
	   attiva riempiono l'intera cella di magenta con testo bianco, angoli vivi
	   (XD: Rettangolo 191 r0, state-transition auto-animate 0.3s ease-out). */
	.nav__menu .menu-item > a {
		display: inline-flex;
		align-items: center;
		padding: 0 var(--space-20);
		color: var(--c-navy);
		font-weight: var(--fw-bold);
		font-size: var(--fs-nav);
		letter-spacing: 0.01em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
		transition: color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
	}

	.nav__menu .menu-item > a:hover,
	.nav__menu .menu-item > a:focus-visible,
	.nav__menu .current-menu-item > a {
		background: var(--c-magenta-ink);
		color: var(--c-white);
	}

	.nav__menu .menu-item > a:focus-visible {
		/* .nav ha overflow:hidden (riga 515) e le celle sono a piena altezza: un
		   outline outset (default) viene clippato sopra/sotto. Disegna verso
		   l'interno e usa navy (contrasto ~4.2:1 su sfondo magenta). Fase 7. */
		outline-color: var(--c-navy);
		outline-offset: -3px;
	}

	/* Scala continua della nav completa, da 1920 (artboard XD: 16px, celle larghe) fino a
	   1360px, dove voci e padding sono al minimo ma le 5 voci + la CTA stanno ancora su
	   una riga. Sostituisce la vecchia finestra 1561-1860px + il salto a icona sotto i
	   1560: su un portatile 1366/1440 — risoluzioni comunissime — la navigazione
	   spariva del tutto (Fase 9, decisione Federico: menu esteso fino a ~1100px; misurato
	   a schermo, a 1100 le voci sforavano di 78px, quindi la soglia è 1200 — che è anche
	   uno dei breakpoint della scala consolidata 600/840/1200/1600). */
	@media (min-width: 1360px) {
		.nav {
			gap: var(--space-8);
			padding-left: clamp(var(--space-12), 1.2vw, var(--space-24));
		}

		.nav__menu .menu-item > a {
			padding-inline: clamp(0.375rem, 2.5vw - 1.75rem, var(--space-20));
			/* Fase 16: token invece del clamp 14→16px scritto a mano. Misurato con
			   Playwright a 1360px (scratch-xd, vedi f16-nav.mjs): la voce più lunga
			   ("Verifica Efficacia Formazione") passa da 655px a 734px di larghezza
			   totale del menu, ma il menu resta ancorato a destra dentro `.nav` (che
			   parte da 27px) con margine residuo — nessun overflow, nessun a-capo. */
			font-size: var(--fs-nav);
			letter-spacing: 0;
		}

		.nav__menu .menu-item:has(+ .menu-item--demo) > a {
			padding-right: clamp(1.5rem, 4vw, 4rem);
		}

		.cta-demo--header {
			min-width: 0;
		}
	}


	.cta-demo {
		position: relative;   /* contenitore del link esteso, vedi sotto */
		display: flex;
		align-items: stretch;
		gap: var(--space-8);
		flex: 0 0 auto;
		min-width: 18rem;
		padding: var(--space-4);
		background: var(--c-white);
		border-radius: var(--radius-pill);
	}

	.cta-demo--header {
		box-shadow: var(--shadow-nav);
	}

	/* Fase 18 (Federico: «cliccando sull'icona di "Richiedi una demo" non porta al
	   link»). Il cerchio griglia non era un link: decorativo nelle CTA e, nell'header,
	   il toggle del menu, inutile da 1360px dove il menu è sempre visibile. Link esteso
	   (tecnica "stretched link"): lo pseudo-elemento del link copre tutta la pillola,
	   cerchio compreso, senza annidare elementi interattivi. Nell'header vale solo
	   dove il cerchio non è il toggle del menu (≥1360px); sotto resta il toggle. */
	.cta-demo--answer .btn--demo::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		border-radius: inherit;
	}

	@media (min-width: 1360px) {
		.cta-demo--header .btn--demo::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			border-radius: inherit;
		}
	}

	.nav__grid {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3.25rem;
		height: 3.25rem;
		padding: 0;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--c-magenta);
		color: var(--c-white);
		box-shadow: inset 0 0 0 0 var(--c-magenta);
		transition:
			background-color var(--dur-hover) var(--ease-out),
			color var(--dur-hover) var(--ease-out),
			box-shadow var(--dur-hover) var(--ease-out);
	}

	/* Hover CTA: il cerchio griglia si inverte (bianco + icona/bordo magenta). */
	.cta-demo:hover .nav__grid {
		background: var(--c-white);
		color: var(--c-magenta);
		box-shadow: inset 0 0 0 2px var(--c-magenta);
	}

	.nav__grid-icon {
		display: inline-flex;
	}

	.nav__grid-icon--close {
		display: none;
	}

	/* --- navigazione compatta (< 1360px): mostra solo logo + bottone --- */
	@media (max-width: 1359px) {
		.site-header {
			padding: var(--space-12) clamp(0.75rem, 3vw, 1.5rem);
		}

		.nav {
			overflow: visible;
			justify-content: space-between;
		}

		/* Il menu NON è più `display:none` quando chiuso: resta nel DOM come overlay
		   fisso e si apre/chiude con un clip-path CIRCOLARE dall'angolo del pulsante
		   griglia (Fase 10, richiesta Federico: "si apre con ingrandimento dal
		   pulsante e si chiude allo stesso modo"). `visibility` + `pointer-events`
		   tengono l'overlay fuori dal tab-order quando è chiuso. */
		#primary-menu {
			position: fixed;
			inset: 0;
			z-index: 190;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: var(--space-8);
			margin: 0;
			padding: var(--space-96) var(--space-24) var(--space-48);
			background: var(--c-white);
			overflow-y: auto;
			text-align: center;
			/* origine ≈ centro del pulsante griglia (top ~16px + metà 3.25rem;
			   right ~0.75rem + metà 3.25rem) */
			clip-path: circle(0 at calc(100% - 2.4rem) 2.4rem);
			visibility: hidden;
			pointer-events: none;
			transition: clip-path 0.4s var(--ease-out), visibility 0s linear 0.4s;
		}

		body.nav-open #primary-menu {
			clip-path: circle(150% at calc(100% - 2.4rem) 2.4rem);
			visibility: visible;
			pointer-events: auto;
			transition: clip-path 0.4s var(--ease-out), visibility 0s linear 0s;
		}

		/* movimento ridotto: niente cerchio animato, il pannello appare/sparisce netto
		   (il `transition-delay` sulla visibility non è coperto dal reset globale
		   `transition-duration`, va azzerato a mano). */
		:root[data-reduced-motion="reduce"] #primary-menu,
		:root[data-reduced-motion="reduce"] body.nav-open #primary-menu {
			transition: none;
			clip-path: none;
		}

		:root[data-reduced-motion="reduce"] #primary-menu {
			visibility: hidden;
			pointer-events: none;
			opacity: 0;
		}

		:root[data-reduced-motion="reduce"] body.nav-open #primary-menu {
			visibility: visible;
			pointer-events: auto;
			opacity: 1;
		}

		.cta-demo--header .btn--demo {
			display: none;
		}

		.cta-demo--header {
			min-width: 0;
			padding: var(--space-4);
			gap: 0;
		}
	}

	/* --- menu mobile aperto: overlay bianco a schermo intero, voci centrate --- */
	body.nav-open {
		overflow: hidden;
	}

	/* v1.0.5 (segnalazione Federico, iPhone e Android): gli stili delle VOCI del
	   pannello non dipendono da `body.nav-open`. Prima erano tutti
	   `body.nav-open #primary-menu …`: alla chiusura la classe spariva subito
	   mentre il pannello restava visibile altri 0,4s (clip-path), e in quella
	   finestra le voci prendevano lo stile della nav desktop — celle squadrate,
	   magenta sulla voce attiva, colori intermedi della transizione. Il pannello
	   è sempre e solo il pannello: sotto 1360px `#primary-menu` è l'overlay, aperto
	   o chiuso che sia. Su `body.nav-open` restano solo il pulsante e l'overflow. */
	@media (max-width: 1359px) {
		#primary-menu .menu-item {
			width: 100%;
			max-width: 30rem;
			justify-content: center;
		}

		/* CTA in coda all'overlay: bottone magenta pieno; in hover navy (mai bianco,
		   l'overlay è bianco) */
		/* Fase 18 (#11): la CTA è staccata dalle voci di navigazione da un filetto
		   e da uno stacco (è un'azione, non una pagina), così non si confonde con la
		   voce della pagina attiva. */
		#primary-menu .menu-item--demo {
			display: flex;
			margin-top: var(--space-24);
			padding-top: var(--space-24);
			border-top: 1px solid var(--border-hairline);
		}

		#primary-menu .menu-item--demo > a {
			background: var(--c-magenta-ink);
			color: var(--c-white);
			border-radius: var(--radius-pill);
		}

		#primary-menu .menu-item--demo > a:hover,
		#primary-menu .menu-item--demo > a:focus-visible {
			background: var(--c-navy);
			color: var(--c-white);
		}

		/* Icone social (Fase 19, #5b): stesso trattamento della CTA — filetto +
		   stacco a separarle dalle voci sopra, sempre nell'overlay bianco. Le
		   icone stesse (`.social-links__link`, componenti) sono già "tono-sicure"
		   su bianco: icona navy a riposo, hover/focus riempie di navy con icona
		   lime — mai un hover bianco su questo sfondo bianco (CLAUDE.md). */
		#primary-menu .menu-item--social {
			display: flex;
			margin-top: var(--space-24);
			padding-top: var(--space-24);
			border-top: 1px solid var(--border-hairline);
		}

		#primary-menu .menu-item--social .social-links--menu {
			margin-top: 0;
		}

		#primary-menu .menu-item > a {
			width: 100%;
			justify-content: center;
			padding: var(--space-16) var(--space-20);
			font-size: var(--fs-body);
			text-align: center;
			/* Fase 18 (#11): pillola come la CTA e come la nav desktop (era --radius-md) */
			border-radius: var(--radius-pill);
		}

		/* Fase 18 (#11, Federico: la pagina attiva e «Richiedi una demo» erano
		   entrambe magenta, visivamente uguali). La pagina attiva è una pillola
		   LIME con testo navy (contrasto ~13:1); il magenta resta solo alla CTA.
		   L'hover delle altre voci è una velatura navy, mai magenta né lime, così
		   nessuno stato si confonde con gli altri due. */
		/* v1.0.5: stato base esplicito. L'hover qui sotto vale solo con un puntatore
		   vero (hover:hover): su touch restava «appiccicato» dopo il tap. Senza questa
		   base, un :hover appiccicato ricadrebbe sulla regola della nav desktop
		   (`.nav__menu .menu-item > a:hover`, magenta), che l'id qui batte. */
		#primary-menu .menu-item:not(.menu-item--demo) > a {
			background: transparent;
			color: var(--c-navy);
		}

		#primary-menu .menu-item:not(.menu-item--demo) > a:focus-visible {
			background: rgb(var(--c-navy-rgb) / 0.08);
			color: var(--c-navy);
		}

		@media (hover: hover) {
			#primary-menu .menu-item:not(.menu-item--demo) > a:hover {
				background: rgb(var(--c-navy-rgb) / 0.08);
				color: var(--c-navy);
			}
		}

		#primary-menu .current-menu-item:not(.menu-item--demo) > a {
			background: var(--c-lime);
			color: var(--c-navy);
		}

		body.nav-open .nav__grid {
			position: fixed;
			top: var(--space-16);
			right: clamp(0.75rem, 3vw, 1.5rem);
			z-index: 200;
		}

		body.nav-open .nav__grid-icon--grid {
			display: none;
		}

		body.nav-open .nav__grid-icon--close {
			display: inline-flex;
		}
	}

	/* --- campo decori procedurale "in orbita" (deco-field.js, issue #4) ----------
	   Il markup PHP emette un set FISSO (`.deco--static` / `.deco-shape--static` /
	   `.s-hero__deco` / `.s-appro__deco`) = fallback senza JS / con movimento ridotto.
	   Quando il campo orbitale è montato, il contenitore prende `.has-deco-field` e il
	   set fisso sparisce. I nodi orbitali sono iniettati da JS con left/top in %. */
	.deco-field__item {
		position: absolute;
		z-index: 0;               /* dietro personaggi (z2) / testi / box (z3) */
		pointer-events: none;
		will-change: transform;
		transform: translate(-50%, -50%);
	}

	.deco-field__item--dot { border-radius: 50%; }
	.deco-field__item--lozenge { border-radius: var(--radius-pill); }
	.deco-field__item--white { background: var(--c-white); }
	.deco-field__item--lime { background: var(--c-lime); }
	.deco-field__item--magenta { background: var(--c-magenta); }

	.has-deco-field .deco--static,
	.has-deco-field .deco-shape--static,
	.has-deco-field .s-hero__deco,
	.has-deco-field .s-appro__deco,
	.has-deco-field .s-vef__deco,
	.has-deco-field .s-tps__deco,
	.has-deco-field .s-comp__deco,
	.has-deco-field .s-page-cta__deco {
		display: none;
	}

	/* --- card (scheletro condiviso) --- */
	.card {
		border-radius: var(--radius-md);
		background: var(--c-white);
		color: var(--c-navy);
	}

	/* --- icona di esito ✓/✗ (template-parts/icon-esito.php) ---
	   L'immagine è l'asset originale dell'XD (Giusto.png / Sbagliato.png, 64×64): disco
	   colorato e segno sono già dentro il PNG, qui c'è solo la misura. Un solo punto di
	   definizione, usato dalla checklist "In pratica…" e dal box interattivo. */
	.icon-esito {
		display: inline-flex;
		flex: none;
		width: clamp(2.5rem, 2rem + 1.6vw, 4rem);   /* max 64px = dimensione XD */
		aspect-ratio: 1;
	}

	.icon-esito__img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* --- card blog (componente condiviso: carosello home + archivio "vedi tutti") ---
	   Fedele a docs/mockup-reference/home-expanded/04.png: SOLO immagine + titolo +
	   estratto (niente data/categoria, decisione confermata Fase 5). Estende .card
	   (già bianca/navy — qui invisibile perché .s-blog/.blog-archive sono già bianche:
	   solo l'immagine ha chrome visibile). template-parts/blog-card.php. */
	.blog-card {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);
		height: 100%;
		text-decoration: none;
		color: inherit;
	}

	.blog-card__image {
		display: block;
		aspect-ratio: 1 / 1;
		border-radius: var(--radius-card);
		overflow: hidden;
		background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-magenta) 100%);
	}

	.blog-card__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.blog-card__title {
		margin: 0;
		color: var(--c-ink);
		font-size: var(--fs-h4);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
	}

	.blog-card__excerpt {
		margin: 0;
		color: var(--c-ink-muted);
		font-size: var(--fs-body);
		line-height: var(--lh-normal);
		/* troncamento visivo a 3 righe (non tagliamo la stringa lato server) */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-height: calc(var(--fs-body) * var(--lh-normal) * 3 + 1px); /* fallback senza line-clamp */
	}

	/* --- link "← Torna a…" (single.php) --------------------------- */
	.back-link {
		display: inline-flex;
		align-items: center;
		gap: var(--space-8);
		color: var(--c-navy);
		font-weight: var(--fw-bold);
		font-size: var(--fs-nav);
		text-decoration: none;
		transition: color var(--dur-hover) var(--ease-out);
	}

	.back-link:hover {
		/* era --c-magenta: ~3.77:1 su sfondo bianco, sotto 4.5:1 AA per testo — Fase 7 */
		color: var(--c-navy);
	}

	/* --- paginazione archivio blog (the_posts_pagination(), markup core WP) --- */
	.pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-8);
	}

	.pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--touch-target);
		min-height: var(--touch-target);
		padding: 0 var(--space-12);
		border-radius: var(--radius-pill);
		background: transparent;
		color: var(--c-navy);
		font-weight: var(--fw-bold);
		text-decoration: none;
		transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
	}

	.pagination .page-numbers:hover {
		background: rgb(var(--c-navy-rgb) / 0.08);
	}

	.pagination .page-numbers.current {
		background: var(--c-navy);
		color: var(--c-white);
	}

	.pagination .page-numbers.dots {
		background: transparent;
	}

	/* --- hint "SCORRI" + icona mouse (componente condiviso) --------
	   Usato da hero e Approfondimento 1. Le differenze sono modificatrici:
	   --stack = testo e icona in colonna centrati; --ink = colore scuro su lime. */
	.scroll-hint {
		display: inline-flex;
		align-items: center;
		gap: var(--space-12);
		margin: 0;
		color: var(--color-text-muted);
		font-size: var(--fs-label);
		font-weight: var(--fw-bold);
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
	}

	.scroll-hint--stack {
		flex-direction: column;
		gap: var(--space-8);
		text-align: center;
	}

	/* il letter-spacing aggiunge spazio vuoto DOPO l'ultimo carattere (nessuno spazio
	   equivalente prima del primo): l'inchiostro del testo appare quindi spostato a
	   sinistra rispetto al centro geometrico del box, mentre l'icona (simmetrica)
	   sta esattamente al centro → sembrano disallineate (fix segnalato). Si
	   compensa il box del testo della stessa quantità, per riallineare i centri. */
	.scroll-hint__label {
		margin-inline-end: calc(-1 * var(--tracking-widest));
	}

	.scroll-hint--ink {
		color: var(--c-ink);
	}

	.scroll-hint__icon {
		display: inline-flex;
		color: currentColor;
	}

	@media (prefers-reduced-motion: no-preference) {
		.scroll-hint__dot {
			animation: skimup-scroll-dot 1.6s ease-in-out infinite;
		}
	}

	@keyframes skimup-scroll-dot {
		0%, 100% { transform: translateY(0); opacity: 1; }
		50% { transform: translateY(6px); opacity: 0.4; }
	}

	/* --- card di testo (home below-the-fold: 500×500 r68 nel mockup) ---
	   La GEOMETRIA del box (dimensioni, padding) scala con lo stage (1cqw = 1% dello
	   stage); il TESTO usa i token della scala tipografica (bounded, sempre leggibile
	   — issue #5): non deve rimpicciolirsi sotto i 16px quando lo stage si stringe.
	   Il testo è centrato verticalmente nel box (come nell'XD). */
	.text-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: clamp(var(--space-20), 2.25cqw, var(--space-48));
		background: var(--c-white);
		color: var(--c-navy);
		border-radius: var(--radius-card);
	}

	.text-box__title {
		margin: 0 0 clamp(var(--space-8), 1cqw, var(--space-16));
		color: var(--c-ink);
		font-size: var(--fs-h4);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
		text-wrap: balance;
	}

	.text-box__body > :last-child {
		margin-bottom: 0;
	}

	.text-box__body p {
		max-width: none;
		margin-bottom: var(--space-12);
		color: var(--c-navy);
		font-size: var(--fs-body);
		font-weight: var(--fw-regular);
		line-height: var(--lh-normal);
	}

	/* --- accordion FAQ (mockup: domande ~40px, scheda aperta = card navy-2,
	   chevron dentro un cerchio scuro sull'aperta, filo divisore sulle chiuse) --- */
	.faq-item {
		border-bottom: 1px solid rgb(var(--c-white-rgb) / 0.18);
	}

	.faq-item__q {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-24);
		padding: var(--space-24) 0;
		list-style: none;
		cursor: pointer;
		color: var(--c-white);
		font-size: var(--fs-faq-q);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
	}

	.faq-item__q::-webkit-details-marker {
		display: none;
	}

	.faq-item__icon {
		flex: 0 0 auto;
		display: inline-flex;
		width: 1.75rem;
		height: 1.75rem;
		align-items: center;
		justify-content: center;
		color: var(--c-white);
		border-radius: 50%;
		transition: transform var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
	}

	.faq-item[open] .faq-item__icon {
		width: 3.25rem;
		height: 3.25rem;
		background: rgb(var(--c-black-rgb) / 0.28);
		transform: rotate(180deg);
	}

	.faq-item__a {
		padding: 0 3.5rem var(--space-28) 0;
		color: rgb(var(--c-white-rgb) / 0.85);
		font-size: var(--fs-body);
	}

	.faq-item__a > :last-child {
		margin-bottom: 0;
	}

	.faq-item__a p {
		max-width: 62ch;
	}

	.faq-item__a ul {
		margin: 0 0 var(--space-16);
		padding-left: var(--space-20);
		list-style: disc;
	}

	.faq-item__a li {
		margin-bottom: var(--space-8);
	}

	/* La scheda APERTA diventa una card su fondo navy chiaro, senza filo.
	   Di default è la prima; con l'apertura singola (home.js) segue l'utente. */
	.faq-item[open] {
		border-bottom: 0;
		padding: clamp(var(--space-24), 2.5vw, var(--space-32));
		background: var(--c-navy-2);
		border-radius: var(--radius-faq);
	}

	.faq-item[open] .faq-item__q {
		padding-top: 0;
		padding-bottom: var(--space-16);
	}

	.faq-item[open] .faq-item__a {
		padding-right: 0;
		padding-bottom: 0;
	}

	/* ------------------------------------ TABELLA DELLE FUNZIONALITÀ --------
	   template-parts/feature-table.php — scheda di un modulo (page-features.php) e
	   tabella dei moduli in home (home-modules.php). Mobile-first: sotto i 900px ogni
	   riga è una scheda (nome come titolo, celle con la propria etichetta presa da
	   `data-label`); da 900px è una tabella vera, con la stessa soglia degli hero delle
	   pagine modulo (Fase 16 #17: niente buco fra la versione mobile di un componente
	   e quella del resto della pagina). I ruoli ARIA espliciti nel markup tengono la
	   semantica di tabella anche col `display:block`. */
	.feature-table,
	.feature-table tbody,
	.feature-table tr,
	.feature-table th,
	.feature-table td {
		display: block;
	}

	.feature-table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		color: var(--c-navy);
		font-size: var(--fs-body);
		line-height: var(--lh-normal);
		text-align: left;
	}

	/* intestazioni: in versione schede le porta ogni cella (::before) — qui restano
	   solo per le tecnologie assistive, con la stessa tecnica di .screen-reader-text */
	.feature-table__head {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.feature-table tbody {
		display: grid;
		gap: var(--space-16);
	}

	.feature-table__row {
		padding: var(--space-24);
		border: 1px solid var(--border-hairline);
		border-radius: var(--radius-card);
		background: var(--c-white);
	}

	/* la riga con una spiegazione aperta passa sopra le successive: dopo l'ingresso
	   (revealFade lascia transform/filter inline) ogni riga è un contesto di
	   sovrapposizione a sé, e la nuvoletta finirebbe sotto la riga dopo */
	.feature-table__row:has(.term-tip[open]) {
		position: relative;
		z-index: 2;
	}

	.feature-table__name {
		position: relative;
		margin: 0;
		color: var(--c-ink);
		font-size: var(--fs-h4);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
	}

	/* sempre a capo sotto il nome, anche quando il nome è corto */
	.feature-table__more {
		display: flex;
		width: fit-content;
		margin-top: var(--space-16);
	}

	.feature-table__cell {
		margin-top: var(--space-16);
		padding-top: var(--space-16);
		border-top: 1px solid var(--border-hairline-soft);
	}

	.feature-table__cell::before {
		content: attr(data-label);
		display: block;
		margin-bottom: var(--space-4);
		color: var(--c-ink-muted);
		font-size: var(--fs-label);
		font-weight: var(--fw-bold);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
	}

	@media (min-width: 900px) {
		.feature-table {
			display: table;
			table-layout: fixed;
		}

		.feature-table__head {
			display: table-header-group;
			position: static;
			width: auto;
			height: auto;
			overflow: visible;
			clip: auto;
			clip-path: none;
			white-space: normal;
		}

		.feature-table tbody {
			display: table-row-group;
		}

		.feature-table tr {
			display: table-row;
		}

		.feature-table th,
		.feature-table td {
			display: table-cell;
		}

		.feature-table__row {
			padding: 0;
			border: 0;
			border-radius: 0;
			background: none;
		}

		.feature-table__head th,
		.feature-table__name,
		.feature-table__cell {
			margin: 0;
			padding: var(--space-24) clamp(var(--space-16), 2vw, var(--space-32));
			vertical-align: top;
		}

		/* primo e ultimo bordo: il rientro segue l'angolo tondo del contenitore */
		.feature-table tr > :first-child {
			padding-left: max(var(--space-32), calc(var(--radius-card) * 0.6));
		}

		.feature-table tr > :last-child {
			padding-right: max(var(--space-32), calc(var(--radius-card) * 0.6));
		}

		.feature-table__head th {
			background: var(--c-navy);
			color: var(--c-white);
			font-size: var(--fs-label);
			font-weight: var(--fw-bold);
			letter-spacing: var(--tracking-wide);
			text-transform: uppercase;
		}

		/* con table-layout:fixed le larghezze le decide la riga d'intestazione */
		.feature-table__head th:first-child {
			width: 30%;
			border-top-left-radius: var(--radius-card);
		}

		.feature-table__head th:last-child {
			border-top-right-radius: var(--radius-card);
		}

		/* il bordo sta sulle celle (non sul <table>) per non dover tagliare con
		   overflow:hidden, che taglierebbe anche le nuvolette dei termini */
		.feature-table__name,
		.feature-table__cell {
			border-bottom: 1px solid var(--border-hairline-soft);
			border-top: 0;
		}

		.feature-table__row > :first-child {
			border-left: 1px solid var(--border-hairline);
		}

		.feature-table__row > :last-child {
			border-right: 1px solid var(--border-hairline);
		}

		.feature-table__row:last-child > * {
			border-bottom-color: var(--border-hairline);
		}

		.feature-table__row:last-child > :first-child {
			border-bottom-left-radius: var(--radius-card);
		}

		.feature-table__row:last-child > :last-child {
			border-bottom-right-radius: var(--radius-card);
		}

		/* righe alternate: stesso zebra delle tabelle degli articoli (.is-style-stripes) */
		.feature-table__row:nth-child(even) > * {
			background: rgb(var(--c-navy-rgb) / 0.05);
		}

		.feature-table__cell::before {
			content: none;
		}
	}

	/* ------------------------------------------ SPIEGAZIONE DI UN TERMINE ---
	   template-parts/term-tip.php — ⓘ accanto a un termine tecnico: un <details>
	   (clic/tocco/tastiera, niente hover — su touch non esiste). Icona magenta:
	   elemento grafico, basta il 3:1 di WCAG 1.4.11 (il magenta sul bianco è ~3,8:1,
	   insufficiente solo come colore di TESTO). */
	.term-tip {
		display: inline-block;
		margin-left: var(--space-4);
		vertical-align: middle;
		font-size: var(--fs-body);
		font-weight: var(--fw-regular);
		line-height: var(--lh-normal);
		letter-spacing: normal;
		text-transform: none;
	}

	.term-tip__btn {
		display: inline-grid;
		place-items: center;
		/* 32px: sopra il minimo AA di 24px senza alzare la riga del titolo */
		width: 2rem;
		height: 2rem;
		margin-block: -0.375rem;
		border-radius: var(--radius-pill);
		color: var(--c-magenta);
		list-style: none;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.term-tip__btn::-webkit-details-marker {
		display: none;
	}

	.term-tip__btn:hover,
	.term-tip[open] .term-tip__btn {
		background: rgb(var(--c-magenta-rgb) / 0.12);
	}

	.term-tip__btn:focus-visible {
		outline: 2px solid var(--c-navy);
		outline-offset: 2px;
	}

	/* mobile: la nuvoletta si apre sotto il nome, a tutta larghezza della scheda
	   (ancorata al <th>, non all'icona, che può stare vicina al bordo destro) */
	.term-tip__body {
		position: absolute;
		z-index: 3;
		top: calc(100% + var(--space-8));
		left: 0;
		right: 0;
		padding: var(--space-12) var(--space-16);
		border-radius: var(--radius-md);
		background: var(--c-navy);
		box-shadow: var(--shadow-card);
		color: var(--c-white);
		font-weight: var(--fw-regular);
	}

	@media (min-width: 900px) {
		/* desktop: ancorata all'icona. La colonna dei nomi è la prima, a sinistra:
		   verso destra c'è sempre spazio. */
		.term-tip {
			position: relative;
		}

		.term-tip__body {
			left: calc(-1 * var(--space-8));
			right: auto;
			width: max-content;
			max-width: 22rem;
		}
	}

	/* ---------------------------------------------- ICONE SOCIAL DEL FOOTER ---
	   template-parts/social-links.php — la lista non stampa nulla quando nessuna rete
	   è compilata (Skimup → Impostazioni → Social), quindi nessuna regola qui presume
	   un numero fisso di icone. `inline-flex`: è un box di livello inline, così sotto
	   840px si centra da sé ereditando il `text-align: center` di .site-footer__inner
	   (stessa tecnica già in uso per gli altri elementi del footer). */
	.social-links {
		display: inline-flex;
		flex-wrap: wrap;
		gap: var(--space-8);
		margin: var(--space-16) 0 0;
		padding: 0;
		list-style: none;
	}

	.social-links__link {
		display: inline-grid;
		place-items: center;
		width: var(--touch-target);
		height: var(--touch-target);
		border-radius: var(--radius-pill);
		color: var(--c-navy);
		transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
	}

	.social-links__icon {
		width: 1.375rem;   /* 22px */
		height: 1.375rem;
	}

	/* hover/focus: sfondo navy + icona LIME (~13:1, stessa coppia già usata per la
	   pillola attiva del filtro categorie — CLAUDE.md, contrasto verificato) — mai un
	   hover bianco sul lime del footer. */
	.social-links__link:hover,
	.social-links__link:focus-visible {
		background: var(--c-navy);
		color: var(--c-lime);
	}

	.social-links__link:focus-visible {
		outline: 3px solid var(--color-focus);
		outline-offset: 2px;
	}

	/* ------------------------------------------ INDICE DEI CONTENUTI ---
	   template-parts/post-toc.php (voci dal plugin, skimup_core_article_outline()) +
	   page-secondary.js (initToc). Sotto 1360px: riquadro fra immagine e testo, con JS
	   parte chiuso e si apre da tutta l'intestazione. Da 1360px: colonna laterale
	   sticky (posizione nel blocco SINGOLO ARTICOLO, layer sections), sempre aperta,
	   con la sezione in lettura evidenziata (aria-current). Senza JS: aperto e
	   completo, il bottone resta `hidden`.
	   Voce attiva = barra magenta + grassetto: lo stato non passa dal solo colore. */
	.post-toc {
		margin: 0 0 var(--space-block);
		padding: var(--space-8) var(--space-24) var(--space-20);
		border-radius: var(--radius-md);
		background: var(--c-surface-soft);
		color: var(--c-ink);
	}

	.post-toc__head {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-16);
		min-height: var(--touch-target);
	}

	.post-toc__title {
		margin: 0;
		color: var(--c-navy);
		font-size: var(--fs-label);
		font-weight: var(--fw-bold);
		letter-spacing: var(--tracking-wide);
		line-height: var(--lh-snug);
		text-transform: uppercase;
	}

	.post-toc__toggle {
		flex: 0 0 auto;
		display: inline-grid;
		place-items: center;
		width: var(--touch-target);
		height: var(--touch-target);
		margin-inline-end: calc(-1 * var(--space-12));
		padding: 0;
		border: 0;
		border-radius: var(--radius-pill);
		background: transparent;
		color: var(--c-navy);
		transition: background-color var(--dur-hover) var(--ease-out);
	}

	/* `display` sopra annullerebbe l'attributo hidden del markup (fallback senza JS) */
	.post-toc__toggle[hidden] {
		display: none;
	}

	/* area cliccabile estesa a tutta l'intestazione (titolo compreso) */
	.post-toc__toggle::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.post-toc__toggle:hover {
		background: rgb(var(--c-navy-rgb) / 0.08);
	}

	.post-toc__toggle:focus-visible {
		outline-color: var(--c-navy);
	}

	.post-toc__icon {
		display: inline-flex;
		transition: transform var(--dur-hover) var(--ease-out);
	}

	.post-toc__toggle[aria-expanded="true"] .post-toc__icon {
		transform: rotate(180deg);
	}

	.post-toc__list,
	.post-toc__sublist {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* filo verticale: il "binario" su cui scorre la barra della voce attiva */
	.post-toc__list {
		margin-top: var(--space-8);
		border-left: 2px solid var(--border-hairline);
	}

	.post-toc__link {
		position: relative;
		display: block;
		padding: var(--space-8) 0 var(--space-8) var(--space-16);
		color: var(--c-navy);
		font-size: var(--fs-body);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
		text-decoration: none;
	}

	.post-toc__link--sub {
		padding-left: var(--space-32);
		color: var(--c-ink-muted);
		font-weight: var(--fw-regular);
	}

	.post-toc__link::before {
		content: "";
		position: absolute;
		top: var(--space-8);
		bottom: var(--space-8);
		left: -2px;
		width: 3px;
		border-radius: 2px;
		background: transparent;
	}

	.post-toc__link:hover {
		color: var(--c-ink);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.15em;
	}

	.post-toc__link:focus-visible {
		outline-color: var(--c-navy);
		outline-offset: -3px;
	}

	.post-toc__link[aria-current="true"] {
		color: var(--c-navy);
		font-weight: var(--fw-bold);
	}

	.post-toc__link[aria-current="true"]::before {
		background: var(--c-magenta);
	}
}

/* ========================================================== sections ===== */
@layer sections {

	/* Ridondante col bianco del <body> (Fase 16, #18/#19) ma tenuto esplicito: il
	   "respiro" (scaleX su .s-home-intro__bg/.s-faq__bg/.s-vef-navy__bg, breathe-bg.js)
	   deve rivelare bianco ai lati, non un eventuale sfondo scuro di un antenato. */
	.site-main {
		display: block;
		overflow-x: clip;   /* nessuna barra orizzontale da decori/sconfini (issue #2/#4) */
		background: var(--c-white);
	}

	/* --- contratto condiviso delle fasce navy che respirano (breathe-bg.js) ---
	   IMPORTANTE: per questo modulo il `border-radius` NON è decorazione, è la
	   DICHIARAZIONE di dove la fascia confina col bianco. breathe-bg.js legge i raggi
	   calcolati e stringe la fascia solo in prossimità dell'angolo tondo. Quindi:
	     - angolo tondo in basso  → il pizzico avviene sulla cucitura bassa;
	     - nessun angolo          → la fascia non respira affatto (opt-out, come
	                                `.s-vef .s-faq__bg` più sotto);
	     - aggiungere un angolo   → si attiva il ramo corrispondente, senza toccare il JS.
	   Il raggio orizzontale viene compensato a runtime (`raggio / scaleX`) perché sotto
	   uno scaleX l'angolo si ovalizzerebbe — tecnica misurata su premiercs.com. */
	[data-breathe] {
		transform-origin: 50% 50%;
		will-change: transform;
	}

	/* --- sfumatura rosa UNICA (Fase 16, #6/#9) --- Prima ognuna delle fasce navy
	   aveva una sfumatura scritta a mano (o nessuna): `.s-page-navy__glow` (dentro il
	   layer, corretta), `.s-page-steps__glow`/`.s-tps-passi__glow`/`.s-comp-passi__glow`
	   (fratelli del layer che respira, quindi restavano a piena larghezza quando il
	   navy si restringeva — bug #9, misurato su Demo). Un solo elemento, con i
	   parametri della sfumatura di Demo (il riferimento indicato da Federico), sempre
	   DENTRO un `[data-breathe]`: eredita il suo `border-radius` (quindi la forma
	   dell'angolo verso il bianco) e il suo scaleX, quindi si restringe insieme al blu
	   invece di restare fisso. Fase 18 (#2, Federico: «non tutte le FAQ hanno la
	   sfumatura rosa»): c'è anche in `.s-faq__bg` (home, Contatti, Demo). Dove la FAQ
	   sta dentro la fascia navy della CTA (Verifica/TPS/Competenze) il suo fondo è
	   trasparente e la sfumatura ce l'ha già quella fascia: lì è nascosta, più sotto. */
	.navy-band__glow {
		position: absolute;
		inset: 0;
		z-index: 0;
		border-radius: inherit;
		background: radial-gradient(60% 50% at 50% 100%, rgb(var(--c-magenta-rgb) / 0.28) 0%, rgb(var(--c-magenta-rgb) / 0) 100%);
		pointer-events: none;
	}

	/* --- Home: hero ------------------------------------------------- */
	.s-hero {
		position: relative;
		display: flex;
		min-height: 100vh;
		min-height: 100svh;
		background: var(--c-navy);
		overflow: hidden;
	}

	.s-hero {
		/* Il body è navy come la sezione: l'header sticky, in flusso, non lascia
		   cuciture. La sezione parte subito sotto l'header, non serve compensarne
		   l'altezza. */
		margin-top: calc(var(--header-height) * -1);
	}

	.s-hero__inner {
		position: relative;
		z-index: 1;   /* sopra il campo decori (z0) */
		display: grid;
		grid-template-columns: 1fr;
		align-items: end;
		gap: var(--space-24);
		width: 100%;
		max-width: 1860px;
		margin-inline: auto;
		padding: calc(var(--header-height) + var(--space-24)) clamp(1rem, 2.4vw, 3rem) 0;
	}

	/* Mobile: il testo di apertura viene PRIMA dell'immagine ed è centrato. */
	.s-hero__figure {
		order: 2;
		justify-self: center;
		max-width: 20rem;
	}

	.s-hero__figure .character,
	.s-hero__figure .character__video {
		display: block;
	}

	.s-hero__content {
		order: 1;
		align-self: start;
		text-align: center;
		padding-bottom: var(--space-32);
	}

	/* Hero H1: LCP — visibile subito, mai da opacity:0. Un solo font-size (token
	   --fs-display, 36→68px fluido): niente più override a 840/1280 (centralizzazione). */
	.s-hero__headline {
		margin: 0 auto;
		color: var(--c-white);
		font-weight: var(--fw-light);
		font-size: var(--fs-display);
		line-height: var(--lh-tight);
		letter-spacing: var(--tracking-tight);
		max-width: 20ch;
	}

	/* hint "SCORRI": stile base in @layer components (.scroll-hint); qui solo
	   la spaziatura specifica dell'hero. */
	.s-hero__scroll-hint {
		margin-top: var(--space-32);
	}

	/* Elementi decorativi (posizione statica in Fase 1; animazione = Fase 2). */
	.s-hero__deco {
		position: absolute;
		border-radius: var(--radius-pill);
		pointer-events: none;
	}

	.s-hero__deco--blob {
		left: clamp(-5rem, -3vw, -2.5rem);
		top: 20%;
		width: clamp(4.5rem, 7vw, 7rem);
		height: clamp(7rem, 12vw, 12rem);
		background: var(--c-magenta);
	}

	.s-hero__deco--dot-lime {
		right: 4%;
		top: 22%;
		width: 0.9rem;
		height: 0.9rem;
		background: var(--c-lime);
	}

	.s-hero__deco--dot-magenta {
		right: 16%;
		top: 76%;
		width: 1.15rem;
		height: 1.15rem;
		background: var(--c-magenta);
	}

	/* Sotto 840px il testo è centrato e va prima dell'immagine: i decori
	   darebbero fastidio alla lettura → nascosti (torneranno col layout desktop). */
	@media (max-width: 839.98px) {
		.s-hero__deco {
			display: none;
		}

		/* Ordine di lettura mobile: titolo → personaggio → "SCORRI".
		   Il markup tiene titolo e hint dentro .s-hero__content (giusto da 840px in su,
		   dove stanno insieme nella colonna di destra). Su mobile `display: contents`
		   scioglie quel contenitore e i due figli diventano celle della griglia, così
		   l'hint può scendere DOPO il personaggio: un invito a scorrere ha senso in
		   fondo alla prima schermata, non incastrato fra il titolo e l'illustrazione.
		   .s-hero__content non ha sfondo né bordi, quindi `contents` non toglie nulla;
		   le sue proprietà (text-align, padding) si riportano sui figli. */
		.s-hero__content {
			display: contents;
		}

		.s-hero__headline {
			order: 1;
			text-align: center;
		}

		.s-hero__scroll-hint {
			order: 3;
			justify-content: center;
			justify-self: center;
			margin-top: var(--space-24);
		}
	}

	/* Da 840px: personaggio a sinistra, testo a destra allineato a sinistra (mockup). */
	@media (min-width: 840px) {
		.s-hero__inner {
			grid-template-columns: 34% minmax(0, 1fr);
			align-items: stretch;
			gap: clamp(1rem, 2vw, 2rem);
		}

		.s-hero__figure {
			order: 0;
			justify-self: start;
			align-self: end;
			max-width: none;
			padding-left: clamp(0.5rem, 3vw, 3rem);
		}

		.s-hero__figure .character,
		.s-hero__figure .character__img,
		.s-hero__figure .character__video {
			height: auto;
		}

		.s-hero__figure .character__img,
		.s-hero__figure .character__video {
			width: auto;
			max-width: 100%;
			height: min(78vh, 54rem);
		}

		.s-hero__content {
			order: 0;
			align-self: center;
			text-align: left;
			padding-bottom: 0;
		}

		.s-hero__headline {
			margin: 0;
			max-width: 15em;
		}

		.s-hero__scroll-hint {
			margin-top: clamp(2.5rem, 9vh, 6.5rem);
		}
	}

	/* --- Home: contenuto below-the-fold (contenitore navy) -----------------
	   Ricostruzione PROPORZIONALE dell'artboard XD (1920 × 6427 per questo tratto).
	   Lo stage ha l'aspect-ratio esatto e ogni elemento è posizionato in % sulle
	   coordinate reali (le costanti 1920 / 6427 nei calc() SONO quelle coordinate).
	   I font scalano con la larghezza dello stage: 1cqw = 19.2 px @1920. */
	/* overflow VISIBLE: il personaggio col tablet (fine stage) sconfina di sotto sulla
	   sezione bianca "Dal nostro blog", come nell'XD (issue #2). Il percorso "S" (SVG,
	   auto-clip) e il campo decori (margini d'orbita stretti) non escono. L'overflow
	   orizzontale di pagina è tagliato da .site-main. Gli angoli inferiori tondi
	   restano (border-radius sul fondo navy, ora su .s-home-intro__bg sotto).

	   z-index/margin-bottom negativo: anche ora che <body> è bianco (Fase 16, #18/#19)
	   .s-blog deve poter comparire FISICAMENTE dietro quell'angolo, non un bianco
	   generico di sfondo — altrimenti un domani un antenato scuro tornerebbe a
	   rivelarsi lì. home-intro sale di sopra (z-index) e si estende di "un raggio" in
	   più verso il basso (margin-bottom negativo), così l'arco ritaglia cosa si vede e
	   rivela .s-blog davvero, non lo sfondo sottostante. */
	.s-home-intro {
		position: relative;
		z-index: 2;
		margin-bottom: calc(-1 * var(--radius-section));
	}

	/* livello di sfondo separato dai contenuti (stage): permette di animare lo scaleX
	   del "respiro" (breathe-bg.js, [data-breathe]) senza deformare testi/personaggi/S,
	   che restano sullo stage, un fratello successivo non toccato dallo scale. */
	.s-home-intro__bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		background: var(--c-navy);
		border-radius: 0 0 var(--radius-section) var(--radius-section);
	}

	.s-home-intro__stage {
		position: relative;
		z-index: 1;
		container-type: inline-size;
		width: 100%;
		max-width: 1860px;
		margin-inline: auto;
		aspect-ratio: 1920 / 6427;
	}

	/* tutti i figli dello stage sono posizionati in assoluto sull'artboard */
	.s-home-intro__stage > * {
		position: absolute;
	}

	/* --- percorso "S" (path esatti XD, stroke #22314d 500, no distorsione) --- */
	.s-path {
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 0;
	}

	/* la variante mobile è nel DOM ma nascosta ≥900px (e viceversa per il desktop,
	   più sotto nel @media). home.js sceglie quella del breakpoint attivo. */
	.s-path--mobile {
		display: none;
	}

	.s-path__seg {
		fill: none;
		stroke: var(--c-navy-2);
		stroke-width: 500;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.s-path--mobile .s-path__seg {
		/* non-scaling-stroke: con preserveAspectRatio="none" lo stroke verrebbe
		   scalato in modo non uniforme (più spesso sui tratti verticali). Così resta
		   costante — ~52px CSS, un nastro morbido dietro ai contenuti. */
		stroke-width: 52;
		vector-effect: non-scaling-stroke;
	}

	/* --- decori: pallini + lozenge (x,y = centro; r = raggio; base 1920/6427) --- */
	.deco {
		left: calc(var(--x) / 19.2 * 1%);
		top: calc(var(--y) / 64.27 * 1%);
		width: calc(var(--r) * 2 / 19.2 * 1%);
		aspect-ratio: 1;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	.deco--white { background: var(--c-white); }
	.deco--lime { background: var(--c-lime); }
	.deco--magenta { background: var(--c-magenta); }

	/* forme allungate: pillole sotto i personaggi + lozenge decorativi (posizione =
	   centro, dimensioni/rotazione dai rettangoli XD; lo style inline dà x/y/w/rot). */
	.deco-shape {
		border-radius: var(--radius-pill);
		z-index: 1;
	}

	.deco-shape--lime { background: var(--c-lime); }
	.deco-shape--magenta { background: var(--c-magenta); }

	/* --- personaggi (decorativi) --- */
	.home-figure {
		z-index: 2;
		pointer-events: none;
	}

	.home-figure .character,
	.home-figure .character__img,
	.home-figure .character__video {
		display: block;
		width: 100%;
		height: auto;
	}

	/* left/top/width in unità artboard (÷19.2 = ÷1920×100 ; ÷64.27 = ÷6427×100) —
	   coordinate esatte dalle Design Specs XD, personaggio = rettangolo immagine. */
	.home-figure--falling  { left: calc(820 / 19.2 * 1%);  top: calc(461 / 64.27 * 1%);  width: calc(706 / 19.2 * 1%); transform: rotate(3deg); }
	.home-figure--seated   { left: calc(124 / 19.2 * 1%);  top: calc(1460 / 64.27 * 1%); width: calc(586 / 19.2 * 1%); }
	.home-figure--standing { left: calc(1014 / 19.2 * 1%); top: calc(2322 / 64.27 * 1%); width: calc(656 / 19.2 * 1%); }
	.home-figure--jumping  { left: calc(-194 / 19.2 * 1%); top: calc(3365 / 64.27 * 1%); width: calc(797 / 19.2 * 1%); }

	/* Personaggio col tablet: centrato ORIZZONTALMENTE sullo stage, base FLUSH al
	   bordo inferiore del navy.

	   `left: 50%` + `translateX(-50%)`: la `width` è un `min()` fra la % XD e un tetto
	   in vh; quando vince il tetto la larghezza si restringe — con un `left` fisso il
	   personaggio si scentrerebbe, translateX lo centra sempre.

	   `bottom: 0` invece di `top`: ancorando dal basso, il fondo resta sul bordo navy
	   qualunque cosa faccia il tetto — è la testa a salire meno, non il fondo a
	   staccarsi.

	   IL TETTO IN VH — storia (Fasi 9 → 10). Il personaggio è ancorato `bottom:0`
	   alla fine (fissa) dello stage e sale 1:1 con lo scroll: la testa transita sotto
	   la nav sticky come qualsiasi contenuto. In Fase 9 il file `character-tablet.webp`
	   aveva la CALOTTA TAGLIATA a filo del canvas → serviva un tetto enorme
	   (`clamp(7rem,14vh,11rem)`) per tenere il transito lontano dall'header. In
	   Fase 10 il file è stato ri-esportato dal master XD con la testa INTERA + ~5% di
	   margine trasparente sopra (`reprocess-chars.mjs`, fit "contain"): il margine di
	   sicurezza vive ora nell'asset, il tetto CSS può tornare vicino a
	   `--space-section-sm` (più un filo). Aspect nuovo ~0.963 (era 1:1). */
	.home-figure--tablet {
		left: 50%;
		bottom: 0;
		width: min(
			calc(1180 / 19.2 * 1%),
			calc(100vh - var(--header-height) - clamp(4rem, 9vh, 7.5rem))
		);
		transform: translateX(-50%);
		z-index: 5;
	}

	/* Fase 16 #14: scoperto ≥900px — sotto quella soglia la figura è `position:static`
	   (flusso, vedi il blocco @media più sotto) e questa regola, per specificità
	   (2 classi contro 1), batteva comunque `width:100%` del flusso mobile: con
	   l'admin bar attiva il tablet si restringeva in base alla formula vh desktop
	   anche su telefono, spostandolo dal bordo del navy invece di lasciarlo alla
	   base come nel resto del sito. */
	@media (min-width: 900px) {
		body.admin-bar .home-figure--tablet {
			width: min(
				calc(1180 / 19.2 * 1%),
				calc(100vh - var(--header-height) - clamp(4rem, 9vh, 7.5rem) - 32px)
			);
		}
	}

	/* NOTA (Fase 9): qui c'era `.home-figure__circle`, un disco navy chiaro dietro al
	   personaggio col tablet. Non esiste nell'XD — verificato sull'artboard: dietro di
	   lui c'è SOLO il gruppo vettoriale del percorso "S" (#1f3150) e i pallini
	   decorativi. Rimosso su segnalazione di Federico ("non deve avere un cerchio alle
	   spalle ma solo l'svg che gli finisce dietro come da XD"). */

	/* --- frase di apertura (centrata senza transform: i reveal di home.js
	   animano y/opacity liberamente) --- */
	.home-claim {
		left: 0;
		right: 0;
		top: calc(150 / 64.27 * 1%);
		width: calc(1600 / 19.2 * 1%);
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(30 / 19.2 * 1cqw);
		text-align: center;
		z-index: 3;
	}

	.home-claim__mark {
		width: calc(300 / 19.2 * 1cqw);
		height: auto;
	}

	/* Testo: token della scala (bounded), non 1cqw puro — issue #5. La posizione
	   resta proporzionale allo stage (% sopra); solo la dimensione è limitata. */
	.home-claim__text {
		margin: 0;
		color: var(--c-white);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
		text-wrap: balance;
	}

	/* --- card di testo (500×500, raggio 68) --- */
	.text-box {
		z-index: 3;
		width: calc(500 / 19.2 * 1%);
		min-height: calc(500 / 64.27 * 1%);
	}

	.text-box--1 { left: calc(1170 / 19.2 * 1%); top: calc(1597 / 64.27 * 1%); }
	.text-box--2 { left: calc(210 / 19.2 * 1%);  top: calc(2493 / 64.27 * 1%); }
	.text-box--3 { left: calc(1170 / 19.2 * 1%); top: calc(3670 / 64.27 * 1%); }

	/* glow radiale azzurro dietro "La risposta" (Rettangolo 23 XD: gradiente radiale
	   rgb(62,99,161) → navy trasparente, centro in basso). */
	.home-answer__glow {
		left: 0;
		top: calc(4925 / 64.27 * 1%);
		width: 100%;
		height: calc(1502 / 64.27 * 1%);
		background: radial-gradient(ellipse 60% 55% at 50% 78%, rgb(var(--c-glow-rgb) / 0.55), rgb(var(--c-navy-rgb) / 0) 72%);
		z-index: 0;
		pointer-events: none;
	}

	/* --- blocco "La risposta, adesso, è sì." (centrato senza transform) --- */
	.home-answer {
		left: 0;
		right: 0;
		top: calc(4655 / 64.27 * 1%);
		width: calc(1760 / 19.2 * 1%);
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(36 / 19.2 * 1cqw);
		text-align: center;
		z-index: 3;
	}

	.home-answer__kicker {
		margin: 0;
		color: var(--c-lime);
		font-size: var(--fs-h3);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
		text-wrap: balance;
	}

	.home-answer__statement {
		margin: 0;
		color: var(--c-white);
		font-size: var(--fs-mega);
		font-weight: var(--fw-light);
		line-height: var(--lh-display);
		letter-spacing: var(--tracking-tight);
		text-wrap: balance;
	}

	.home-answer__cta {
		display: flex;
		align-items: center;
		gap: calc(28 / 19.2 * 1cqw);
		margin-top: calc(20 / 19.2 * 1cqw);
	}

	.home-answer__mark {
		width: calc(230 / 19.2 * 1cqw);
		height: auto;
	}

	/* ====== Mobile (< 900px): lo stage torna a flusso verticale ============ */
	@media (max-width: 899px) {
		.s-home-intro__stage {
			container-type: normal;
			aspect-ratio: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: clamp(var(--space-48), 12vw, var(--space-96));
			/* Fase 16 #14: l'ultimo elemento del flusso è il personaggio col tablet e deve
			   toccare il bordo inferiore della fascia navy (`.s-home-intro__bg`,
			   inset:0 sul genitore), come sul desktop (bottom:0). Misurato (Playwright,
			   scratch qa/step8): a padding-bottom:0 il div del personaggio arrivava
			   comunque 24px SOTTO il bordo del contenitore (l'altezza auto del flex
			   column, sommata alle immagini ad aspect-ratio frazionario, arrotonda un
			   filo corta rispetto alla posizione reale dell'ultimo figlio) — 24px = un
			   token della scala (--space-24), non un valore a caso: verificato a
			   360/390/414/768/899px, lo scarto è lo stesso a ogni larghezza. Il respiro
			   sopra il primo elemento resta invariato. */
			padding-block: clamp(var(--space-64), 16vw, var(--space-96)) 0;
			padding-inline: var(--container-pad);
		}

		.s-home-intro__stage > * {
			position: static;
			left: auto;
			top: auto;
			right: auto;
			transform: none;
			width: 100%;
			max-width: 34rem;
		}

		/* sotto 900px si nasconde la "S" DESKTOP (la mobile prende il suo posto) e i
		   pallini decorativi. */
		.s-path:not(.s-path--mobile),
		.deco {
			display: none;
		}

		/* la "S" mobile NON segue la regola `> *` sopra: resta assoluta a coprire tutto
		   lo stage, dietro ai contenuti a flusso. */
		.s-home-intro__stage > .s-path--mobile {
			display: block;
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			max-width: none;
			/* Fase 16 #14: z-index negativo — senza questo, essendo un elemento
			   posizionato, il tratto dipingeva SOPRA i personaggi (in flusso, non
			   posizionati: stanno in una fase di stacking precedente), "avvolgendoli"
			   invece di restare dietro. Resta comunque sopra `.s-home-intro__bg`
			   (fratello dello stage, non antenato: lo z-index qui è locale allo stage). */
			z-index: -1;
		}

		/* il seme dell'interludio resta nel flusso (invisibile, altezza nulla) subito
		   dopo il box 3: è l'ancora dello ScrollTrigger che pinna l'interludio anche
		   su telefono (Fase 4, Q2). order = quello del box 3. */
		.interludio-seed {
			display: block;
			order: 8; /* subito dopo .text-box--3 (order 7), prima di .home-figure--jumping */
			width: 1px;
			height: 1px;
			min-height: 0;
			margin: 0;
			padding: 0;
			visibility: hidden;
		}

		.home-claim,
		.home-answer {
			max-width: 40rem;
			gap: var(--space-24);
		}

		/* i font usano già i token fluidi (clamp fino a 360px): niente override qui. */
		.home-claim__mark { width: 8rem; }

		.home-figure {
			max-width: 20rem;
		}

		.home-answer__cta {
			flex-direction: column;
			gap: var(--space-16);
			margin-top: var(--space-16);
		}

		.home-answer__mark { width: 9rem; }

		/* le card: dimensioni/padding in rem (fuori dal contesto container) */
		.text-box {
			padding: clamp(var(--space-24), 6vw, var(--space-32));
			border-radius: var(--radius-card);
			min-height: 0;
		}

		.text-box__title {
			margin-bottom: var(--space-12);
		}

		.text-box__body p {
			margin-bottom: var(--space-12);
		}

		/* forme allungate e blob: dettaglio compositivo desktop, non su mobile */
		.deco-shape {
			display: none;
		}

		/* Pillola d'appoggio sotto i personaggi seduto/in piedi (Fase 10, come nel
		   desktop dove sono due .deco-shape): qui è uno ::after, dietro al personaggio
		   (z-index -1), che spunta da sotto i piedi → sembrano appoggiati. */
		.home-figure--seated,
		.home-figure--standing {
			position: relative;
		}

		.home-figure--seated::after,
		.home-figure--standing::after {
			content: "";
			position: absolute;
			left: 50%;
			width: 64%;
			aspect-ratio: 5 / 1.15;
			border-radius: var(--radius-pill);
			z-index: -1;
		}

		/* seduto: la pillola è ciò su cui SIEDE → all'altezza del sedere, non dei piedi.
		   Fase 16 #12: misurato dal canale alfa di character-seated.webp (canvas,
		   scratch-xd/f16/seatvis.mjs) — la riga più larga della sagoma (coscia
		   appoggiata) è al 52,3% dell'altezza dell'immagine (y=948/1813), non al 68%
		   che il vecchio 22% produceva. Il 22% era stato calcolato per una posa diversa
		   e faceva comparire la pillola sotto lo stinco/scarpe invece che sotto il
		   bacino. bottom% = (1 − 0,523) − altezza-pillola-in-% (0,64 largh. × 1,15/5 ÷
		   (larghezza-immagine/altezza-immagine) ≈ 9,7%) ≈ 38%. */
		.home-figure--seated::after {
			bottom: 38%;
			background: var(--c-magenta);
			transform: translateX(-50%) rotate(7deg);
		}

		/* in piedi: la pillola è sotto i piedi (che ora arrivano quasi al fondo del box). */
		.home-figure--standing::after {
			bottom: 0.2rem;
			background: var(--c-lime);
			transform: translateX(-50%) rotate(-8deg);
		}

		/* ordine visivo: claim, fluttua, box1, seduto, box2, in piedi, box3, salta,
		   "La risposta…", tablet (ULTIMO elemento del fondo blu, come nell'XD). */
		.home-claim   { order: 1; }
		.home-figure--falling  { order: 2; }
		.text-box--1  { order: 3; }
		.home-figure--seated   { order: 4; }
		.text-box--2  { order: 5; }
		.home-figure--standing { order: 6; }
		.text-box--3  { order: 7; }
		.home-figure--jumping  { order: 8; }
		.home-answer  { order: 9; }
		.home-figure--tablet   { order: 10; }

		/* Il personaggio "che salta/indica" (mano alzata in alto a sinistra) si aggancia
		   col braccio al bordo basso del box "E per tutto il resto?" sopra di lui
		   (richiesta Federico). margin-top negativo = risale oltre il gap e si sovrappone
		   al box; leggermente spostato a sinistra dove sta la mano. */
		.home-figure--jumping {
			margin-top: -8.5rem;
			align-self: center;
			margin-left: -2rem;
			z-index: 3;
		}
	}

	/* ============ Interludio: overlay che copre la home congelata ============
	   Il pallino verde di box 3 ("E per tutto il resto?" — Ellisse 13, il seme) è il
	   trigger: quando arriva al centro del viewport la home si PINNA (si congela dov'è)
	   e questo overlay cresce dal pallino fino a coprire tutto → Approfondimento 1 →
	   il cerchio si richiude sul pallino e la home riprende ESATTAMENTE dal punto
	   lasciato. Tutto lo guida approfondimenti.js (classe .is-active) SOLO con
	   movimento consentito. Con prefers-reduced-motion / no-JS: nessun overlay,
	   Approfondimento 1 è una sezione lime statica in flusso. Fase 4: Approfondimento 2
	   + transizione di ritorno si inseriscono nella stessa timeline.

	   z-index: header sticky = 100 (resta sopra, come nel mockup); overlay = 90;
	   binario Approfondimento 1/2 = 91; chrome del ritorno = 92. */
	.s-interludio {
		position: static;
	}

	/* --- .s-appro-rail: il "binario" che sostituisce il crossfade fra Approfondimento
	   1 e 2 (fix post-Fase-4) ------------------------------------------------------
	   Un unico contenitore fisso a schermo intero (quello che prima avevano
	   indipendentemente .s-appro--1/--2) con dentro .s-appro-rail__track largo 200%:
	   i due pannelli stanno affiancati, lo scroll fa scorrere il track di un
	   viewport (invece di dissolvere l'uno nell'altro), rivelando la linea SVG unica
	   di sfondo (.s-appro-rail__seam) che li attraversa. A TUTTE le larghezze (Fase 4,
	   Q2 Federico: lo sfoglio pinnato di Appro 2 deve funzionare anche su telefono). */
	.s-appro-rail {
		position: fixed;
		inset: 0;
		z-index: 91;
		overflow: hidden;
		visibility: hidden;
		background: var(--c-lime);
	}

	/* position: relative → è LUI il contenente della seam. Senza, la seam (assoluta)
	   risolveva su .s-appro-rail, che è fixed e largo un viewport: le 3840 unità del
	   viewBox finivano schiacciate 2:1 e la linea restava ferma durante il pan. */
	.s-appro-rail__track {
		position: relative;
		display: flex;
		width: 200%;
		height: 100%;
		will-change: transform;
	}

	/* la linea unica: viewBox doppio (3840×1080 = i due artboard 1920×1080 affiancati).
	   Sta dentro il track (vedi front-page.php), quindi inset:0 la stende su TUTTI e due
	   i pannelli — 3840 unità su 3840px a viewport 1920, scala 1:1 — e il pan del track
	   (approfondimenti.js, xPercent: -50) se la porta dietro: resta agganciata ai
	   pannelli mentre si passa dall'uno all'altro. */
	.s-appro-rail__seam {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		pointer-events: none;
	}

	.s-appro-rail__seam-line {
		fill: none;
		stroke: var(--c-lime-tint);
		stroke-width: 220;
		stroke-linecap: round;
		stroke-linejoin: round;
		vector-effect: non-scaling-stroke;
	}

	/* --- i due pannelli: metà del track ciascuno (= 1 viewport), stesso
	   container-type di prima → tutte le regole cqw di personaggio/pillole restano
	   valide senza modifiche. Niente più background/z-index/position propri: li
	   fornisce .s-appro-rail. --- */
	.s-appro--1,
	.s-appro--2 {
		position: relative;
		flex: 0 0 50%;
		max-width: 50%;
		overflow: hidden;
		/* niente `visibility: visible` qui: scavalcava il `hidden` di .s-appro-rail e
		   i pannelli, trasparenti ma "visibili", intercettavano i clic sopra la
		   newsletter e i loro link restavano raggiungibili col Tab (arrivo su
		   /#newsletter). La visibilità si eredita dal binario. */
		color: var(--c-ink);
		container-type: inline-size;
	}

	/* fallback (reduced-motion di sistema, toggle, o no-JS): il binario torna in
	   flusso normale, i pannelli si impilano uno sotto l'altro (niente pan, niente
	   linea condivisa) — a qualsiasi larghezza. Ogni pannello riprende il proprio
	   sfondo lime, dato che non c'è più .s-appro-rail a fornirlo. */
	.no-js .s-appro-rail,
	:root[data-reduced-motion="reduce"] .s-appro-rail {
		position: static;
		inset: auto;
		z-index: auto;
		overflow: visible;
		visibility: visible;
		background: none;
	}

	.no-js .s-appro-rail__track,
	:root[data-reduced-motion="reduce"] .s-appro-rail__track {
		display: block;
		width: 100%;
		height: auto;
	}

	.no-js .s-appro-rail__seam,
	:root[data-reduced-motion="reduce"] .s-appro-rail__seam {
		display: none;
	}

	.no-js .s-appro--1,
	.no-js .s-appro--2,
	:root[data-reduced-motion="reduce"] .s-appro--1,
	:root[data-reduced-motion="reduce"] .s-appro--2 {
		flex: none;
		max-width: none;
		width: 100%;
		min-height: 100vh;
		min-height: 100svh;
		background: var(--c-lime);
	}

	@media (prefers-reduced-motion: reduce) {
		.s-appro-rail {
			position: static;
			inset: auto;
			z-index: auto;
			overflow: visible;
			visibility: visible;
			background: none;
		}

		.s-appro-rail__track {
			display: block;
			width: 100%;
			height: auto;
		}

		.s-appro-rail__seam {
			display: none;
		}

		.s-appro--1,
		.s-appro--2 {
			flex: none;
			max-width: none;
			width: 100%;
			min-height: 100vh;
			min-height: 100svh;
			background: var(--c-lime);
		}
	}

	/* --- overlay chrome (cerchio + scrim + frase) --- */
	.s-interludio__overlay {
		display: none;
	}

	.s-interludio.is-active .s-interludio__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 90;
		visibility: hidden;
		pointer-events: none;
	}

	.s-interludio.is-running .s-interludio__overlay {
		visibility: visible;
	}

	.s-interludio__scrim {
		position: absolute;
		inset: 0;
		background: rgb(var(--c-navy-rgb) / 0.4);
		backdrop-filter: blur(7px);
		-webkit-backdrop-filter: blur(7px);
		opacity: 0;
	}

	.s-interludio__circle {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 4.5vw;
		aspect-ratio: 1;
		background: var(--c-lime-tint);
		border-radius: 50%;
		transform: translate(-50%, -50%) scale(1);
	}

	/* Fix post-Fase-4: rimossa la frase-ponte (.s-interludio__bridge) — refuso di
	   contenuto. L'overlay non ha più nulla da mostrare nel fallback statico: resta
	   .s-interludio__overlay { display:none } di default (regola sopra), nessuna
	   banda di testo intermedia fra home-intro e Approfondimento 1. */

	/* ---- transizione di ritorno (Fase 4): la scena di Appro 2 si restringe a
	   cerchio fino al seme. Il clip-path circolare lo mette approfondimenti.js su
	   .s-appro--2; qui c'è solo il "disco-eco" verde che accompagna la chiusura.
	   Chrome puramente animato → nascosto senza interludio attivo. */
	.s-interludio__return {
		display: none;
	}

	.s-interludio.is-active .s-interludio__return {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 92;
		visibility: hidden;
		pointer-events: none;
	}

	.s-interludio.is-running .s-interludio__return {
		visibility: visible;
	}

	.s-interludio__return-disc {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 4.5vw;
		aspect-ratio: 1;
		background: var(--c-lime);
		border-radius: 50%;
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}

	/* ---- Approfondimento 1: layout interno (artboard 1920×1080) ----
	   La curva di sfondo non è più qui (era una `fill` per pannello): un'unica linea
	   condivisa attraversa entrambi i pannelli, vedi .s-appro-rail__seam più sopra. */
	.s-appro__deco {
		position: absolute;
		z-index: 1;
		pointer-events: none;
		transform-origin: center;
	}

	.s-appro__deco--dot--white {
		aspect-ratio: 1;
		background: var(--c-white);
		border-radius: 50%;
	}

	.s-appro__deco--lozenge--magenta {
		background: var(--c-magenta);
		border-radius: var(--radius-pill);
	}

	/* Il pannello è alto quanto il viewport e l'header sticky ci sta SOPRA (z-index 100
	   contro 91 del binario): a `height: 92%` la testa arrivava a ~8% dall'alto, cioè
	   proprio sotto la pillola della nav (segnalato da Federico). L'altezza è ora
	   vincolata all'header, non a una percentuale scelta a occhio: qualunque cosa
	   accada a --header-height, la testa resta sotto la nav con un margine di respiro.
	   Nell'XD il personaggio parte a 132px su 1080 (41px sotto il fondo della nav). */
	.s-appro__figure {
		position: absolute;
		left: 2.8cqw;
		bottom: 0;
		height: min(82%, calc(100% - var(--header-height) - var(--space-block)));
		width: auto;
		z-index: 2;
	}

	.s-appro__figure .character,
	.s-appro__figure .character__img,
	.s-appro__figure .character__video {
		display: block;
		height: 100%;
		width: auto;
		max-width: none;
	}

	.s-appro__content {
		position: absolute;
		left: 39.3%;
		top: 50%;
		width: min(46cqw, 48%);
		transform: translateY(-50%);
		z-index: 3;
	}

	.s-appro__headline {
		margin: 0;
		color: var(--c-ink);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
		text-wrap: pretty;
	}

	.s-appro__intro {
		margin-top: var(--space-16);
		font-size: var(--fs-body-lg);
	}

	.s-appro__intro > :last-child {
		margin-bottom: 0;
	}

	/* XD: il componente "Scorri" è centrato ESATTAMENTE sull'artboard — testo X=891 w=138
	   e icona X=946 w=28, entrambi con centro a 960 su 1920 — a 41px dal fondo (3.8%).
	   Era `left: 46.4%`, allineato alla colonna di testo invece che alla pagina
	   (segnalato da Federico: "il pulsante scorri non è centrato sulla pagina"). */
	.s-appro__scroll-hint {
		position: absolute;
		left: 50%;
		bottom: calc(41 / 1080 * 100%);
		transform: translateX(-50%);
		z-index: 3;
	}

	/* ============ Approfondimento 2: le 3 pillole sfogliabili (Fase 4, dimensione
	   rivista in Fase 16 Step 7 — #5) ============
	   Stage 1920×1080 (fixed overlay quando il movimento è consentito). Ogni unità
	   .appro2-pill (disco + testo + bottone) parte da destra ruotata; approfondimenti.js
	   la trasla/ruota lungo lo sfoglio (x/rotation/scale) fino al CENTRO scena
	   (rotazione 0 → testo dritto e leggibile) e poi verso sinistra. Il testo è
	   SEMPRE orizzontale dentro l'unità. Il centraggio (xPercent/yPercent -50) lo
	   imposta GSAP: `top`/`left` sono il CENTRO del cerchio, non l'angolo.

	   #5 (Federico): a schermi bassi e/o larghi i cerchi a 42cqw finivano sotto lo
	   "Scorri" che sta appena sopra il fondo pannello, sotto l'header sticky. Il
	   diametro è ora vincolato anche VERTICALMENTE, stessa tecnica di
	   `.home-figure--tablet` più sopra (min fra la quota-XD e un tetto in vh):
	     width: min(42cqw, spazio libero fra il fondo header e la cima di "Scorri")
	   `--appro2-hint-reserve` è la zona occupata dallo hint: la sua altezza reale
	   (icona 30px + gap 8px + etichetta ~17px, layout --stack) più l'offset dal
	   fondo pannello che usa lui stesso più sotto (`calc(41/1080*100%)`, la stessa
	   quota XD) più un margine di sicurezza. Lo stesso margine si applica sopra, fra
	   header e cerchio. `top` centra il cerchio in QUELLO spazio (non più un
	   `top:52%` fisso, che ignorava dove finisce l'header e dove inizia lo hint). */
	.appro2-track {
		position: absolute;
		inset: 0;
		z-index: 2;
	}

	.appro2-pill {
		--appro2-hint-h: 3.8rem;          /* scroll-hint--stack: icona + gap + etichetta (misurata ~60.4px) */
		--appro2-margin: var(--space-24); /* margine minimo sopra/sotto il cerchio (> 16px richiesti) */
		--appro2-hint-reserve: calc(var(--appro2-hint-h) + (41 / 1080 * 100vh) + var(--appro2-margin));
		--appro2-avail: calc(100vh - var(--header-height) - var(--appro2-margin) - var(--appro2-hint-reserve));
		position: absolute;
		left: 50%;
		top: calc(var(--header-height) + var(--appro2-margin) + var(--appro2-avail) / 2);
		width: min(42cqw, var(--appro2-avail));
		aspect-ratio: 1;
		border-radius: 50%;
		margin: 0;
		transform-origin: 50% 50%;
		will-change: transform;
	}

	.appro2-pill__disc {
		position: absolute;
		inset: 0;
		border-radius: inherit; /* segue la forma del genitore: cerchio desktop, pillola mobile (#13) */
	}

	.appro2-pill--navy .appro2-pill__disc { background: var(--c-navy); }
	.appro2-pill--magenta .appro2-pill__disc { background: var(--c-magenta); }
	.appro2-pill--white .appro2-pill__disc { background: var(--c-white); }

	.appro2-pill--navy,
	.appro2-pill--magenta {
		color: var(--c-white);
	}

	.appro2-pill--white {
		color: var(--c-ink);
	}

	/* contenuto: colonna centrata dentro il cerchio. Con il disco a 42cqw il tondo
	   lascia usabile ~72% della larghezza in mezzeria; line-height e gap generosi
	   perché il testo respiri (Fase 10, "dagli più aria"). */
	.appro2-pill__content {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 72%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.9em;
	}

	.appro2-pill__title {
		margin: 0;
		color: inherit;
		font-size: var(--fs-h4);   /* Fase 16: token (era clamp cqw a mano) */
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
		letter-spacing: 0.01em;
		text-transform: uppercase; /* i titoli dei moduli nel mockup XD sono maiuscoli */
		text-wrap: balance;
	}

	.appro2-pill__body {
		font-size: var(--fs-body);   /* Fase 16: token (era clamp cqw a mano) */
		line-height: var(--lh-normal);
	}

	.appro2-pill__body p {
		margin: 0;
		max-width: none;
		color: inherit;
	}

	.appro2-pill__body p + p {
		margin-top: 0.5em;
	}

	.appro2-pill__cta {
		margin-top: 0.8em;
	}

	/* fallback statico (no-JS / movimento ridotto): 3 pillole IMPILATE, leggibili,
	   nessuna rotazione, nessuna sovrapposizione. */
	.no-js .s-appro--2,
	:root[data-reduced-motion="reduce"] .s-appro--2,
	.no-js .s-appro--2 .appro2-track,
	:root[data-reduced-motion="reduce"] .s-appro--2 .appro2-track {
		position: relative;
	}

	.no-js .s-appro--2,
	:root[data-reduced-motion="reduce"] .s-appro--2 {
		display: flex;
		align-items: center;
		padding-block: var(--space-section);
	}

	.no-js .s-appro--2 .appro2-track,
	:root[data-reduced-motion="reduce"] .s-appro--2 .appro2-track {
		inset: auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(var(--space-32), 6vw, var(--space-64));
		padding-inline: var(--container-pad);
	}

	.no-js .s-appro--2 .appro2-pill,
	:root[data-reduced-motion="reduce"] .s-appro--2 .appro2-pill {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: min(30rem, 82vw);
	}

	.no-js .s-appro--2 .appro2-pill__content,
	:root[data-reduced-motion="reduce"] .s-appro--2 .appro2-pill__content {
		width: 74%;
	}

	@media (prefers-reduced-motion: reduce) {
		.s-appro--2 {
			display: flex;
			align-items: center;
			padding-block: var(--space-section);
		}

		.s-appro--2 .appro2-track {
			position: relative;
			inset: auto;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: clamp(var(--space-32), 6vw, var(--space-64));
			padding-inline: var(--container-pad);
		}

		.s-appro--2 .appro2-pill {
			position: relative;
			left: auto;
			top: auto;
			transform: none;
			width: min(30rem, 82vw);
		}

		.s-appro--2 .appro2-pill__content {
			width: 74%;
		}
	}

	/* ---- Approfondimento 1 e 2 su viewport stretti (< 900px) -------------------
	   Il LAYOUT INTERNO va a colonna verticale centrata SEMPRE (sia overlay pinnato
	   quando il movimento è consentito — Fase 4, Q2 Federico — sia fallback statico):
	   un artboard 1920 in assoluto su 390px sarebbe illeggibile. L'"un-pin" del
	   fallback è già gestito a tutte le larghezze dai selettori .no-js /
	   [data-reduced-motion="reduce"] più sopra. Mockup solo desktop → da validare in
	   Fase 7. ---- */
	@media (max-width: 899px) {
		.s-appro--1,
		.s-appro--2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: var(--space-24);
			padding: clamp(var(--space-48), 12vw, var(--space-96)) var(--container-pad);
		}

		/* Approfondimento 1: personaggio + titolo + hint in colonna. Fase 16 (#2): la
		   regola valeva solo per Appro 1 — su Appro 2 i pallini fissi (coordinate XD
		   desktop) restavano visibili e finivano sotto il testo della pillola verticale
		   mobile (Step 7). Stesso trattamento per entrambi. */
		.s-appro--1 .s-appro__deco,
		.s-appro--2 .s-appro__deco {
			display: none;
		}

		.s-appro__figure {
			position: static;
			height: auto;
			width: min(15rem, 52%);
			order: 2;
		}

		.s-appro__figure .character,
		.s-appro__figure .character__img,
		.s-appro__figure .character__video {
			height: auto;
			width: 100%;
		}

		.s-appro__content {
			position: static;
			left: auto;
			width: 100%;
			max-width: 34rem;
			transform: none;
			text-align: center;
			order: 1;
		}

		.s-appro--1 .s-appro__scroll-hint {
			position: static;
			left: auto;
			bottom: auto;
			transform: none;
			order: 3;
		}

		/* Approfondimento 2: le pillole restano sfogliate (assolute, guidate dal JS)
		   ma sotto 900px diventano una PILLOLA VERTICALE (#13, Federico: "i cerchi
		   sono troppo piccoli e i testi escono fuori dal cerchio... possiamo farla
		   diventare una pillola messa in verticale solo sul mobile"). Un cerchio
		   stretto non ha mai spazio per titolo + testo + CTA; una pillola con
		   altezza libera sì. `.appro2-pill__disc` la segue da solo (border-radius:
		   inherit, sopra) — qui basta cambiare il raggio sul genitore.
		   L'ALTEZZA CRESCE COL CONTENUTO: `.appro2-pill__content` torna in flusso
		   normale (era assoluto, per il centraggio a cerchio) così è lui a decidere
		   l'altezza del contenitore; il disco resta assoluto e lo ricopre (inset:0)
		   qualunque sia l'altezza finale. `min-height` pari alla larghezza: non
		   scende mai sotto un cerchio, anche a contenuto breve. */
		.s-appro--2 {
			display: block; /* la track è assoluta: niente flex sul contenitore */
			padding: 0;
		}

		.s-appro--2 .appro2-pill {
			/* Fase 16 (#13): pillola VERTICALE vera, non un ovale quasi tondo — più
			   stretta (78vw) e alta almeno 1,45 volte la larghezza. */
			--appro2-pill-w: min(78vw, 20rem);
			/* 50% (non più 52%): sopra c'è l'header (~5.25rem), sotto la zona dello
			   hint (offset + sua altezza) — le due riserve sono simili, un centro
			   piatto le bilancia meglio di un'ancora spostata verso il basso. */
			top: 50%;
			width: var(--appro2-pill-w);
			aspect-ratio: auto;
			min-height: calc(var(--appro2-pill-w) * 1.45);
			height: auto;
			border-radius: 999px;
			display: flex;
			align-items: center;
			justify-content: center;
			/* Padding ridotto rispetto alla prima bozza (25%/12%): a 360×640 con un
			   testo lungo la pillola toccava header e "Scorri" (misurato,
			   scratch-xd/f16/step7). Meno padding = pillola più bassa a parità di
			   contenuto, priorità dichiarata dal punto 1 del brief ("ridurre il
			   padding interno prima del font"). */
			/* Le calotte sono semicerchi di raggio w/2: il testo parte dopo ~un quarto
			   di larghezza, dove la calotta è già larga quasi quanto il tratto dritto. */
			padding-block: calc(var(--appro2-pill-w) * 0.24);
			padding-inline: calc(var(--appro2-pill-w) * 0.12);
		}

		.s-appro--2 .appro2-pill__content {
			position: relative;
			left: auto;
			top: auto;
			width: 100%;
			transform: none;
		}
	}

	/* --- Home: «Cosa fa ogni modulo» (tabella dei moduli, fascia bianca) ------
	   Sta fra l'interludio e il blog, quindi è LEI ora a ricevere il personaggio col
	   tablet che sconfina dalla fascia navy: prende la riserva in alto che era di
	   .s-blog (stessi valori, stesse varianti mobile / movimento ridotto più sotto), e
	   il blog che la segue riparte con lo stacco standard. Se la sezione è vuota (tutti
	   i nomi svuotati dal backend) non viene stampata e .s-blog torna a fare da sé. */
	.s-home-modules {
		position: relative;
		z-index: 1;
		background: var(--c-white);
		padding-block: clamp(14rem, 22vw, 22rem) 0;
	}

	.s-home-modules + .s-blog {
		padding-top: var(--space-section);
	}

	/* la colonna dei moduli ospita anche il discover-cta (~200px): al 30% di base
	   usciva dalla cella fra 900 e ~1000px */
	@media (min-width: 900px) {
		.s-home-modules .feature-table__head th:first-child {
			width: 34%;
		}
	}

	/* --- Home: "Dal nostro blog" (fascia bianca) ---------------------------
	   Scheletro strutturale (Step 3 / issue #2): cucitura NETTA con il navy sopra
	   (nessun raggio superiore) — il personaggio col tablet la attraversa. Il
	   `padding-top` generoso lascia spazio alla parte bassa del personaggio che
	   sconfina qui prima del titolo. Contenuti carosello = Fase 5. */
	.s-blog {
		position: relative;
		z-index: 1;
		background: var(--c-white);
		color: var(--c-navy);
		padding-block: clamp(14rem, 22vw, 22rem) var(--space-section);
	}

	.s-blog__inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	.s-blog__title {
		margin: 0;
		color: var(--c-ink);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
		text-align: center;
	}

	/* --- carosello "Dal nostro blog" -------------------------------
	   Scroll orizzontale nativo (overflow-x:auto) + frecce/drag (blog-carousel.js);
	   MAI hijack dello scroll verticale della pagina. Loop infinito (decisione
	   confermata Fase 5): il markup stampa 3 copie del set di post, .blog-carousel.js
	   rivela i 2 set clone (nascosti qui di default = fallback no-JS onesto: lista
	   semplice degli 8 post reali, scroll nativo, nessun loop). */
	.blog-carousel {
		--blog-card-w: clamp(15rem, 70vw, 21rem);
		margin-top: clamp(var(--space-48), 6vw, var(--space-96));
		/* Fase 16 #15: esce dal contenitore (.s-blog__inner ha max-width+padding) per
		   toccare i bordi del viewport — tecnica standard "break out": 50% è relativo
		   a .s-blog__inner (centrato), 50vw al viewport; la differenza è esattamente
		   lo scostamento da annullare. --carousel-inset è la distanza dal bordo dello
		   schermo al bordo del CONTENUTO di .s-blog__inner (metà dello spazio oltre
		   container-max, mai sotto zero, più il padding del contenitore): la usano il
		   viewport (per lo scroll-padding/padding della prima-ultima card) e i
		   controlli (frecce + "vedi tutti"), che restano allineati al contenuto. */
		--carousel-inset: calc(max((100vw - var(--container-max)) / 2, 0px) + var(--container-pad));
		margin-inline: calc(50% - 50vw);
	}

	@media (min-width: 600px) {
		.blog-carousel {
			--blog-card-w: 22rem;
		}
	}

	@media (min-width: 1200px) {
		.blog-carousel {
			--blog-card-w: 30rem; /* 480px: 3 card intere nel container 1600px (desktop) */
		}
	}

	.blog-carousel__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		/* v1.0.5: niente `touch-action: pan-x` (c'era fino alla 1.0.4) — vietava al
		   browser lo scroll VERTICALE quando il dito partiva su una card, e su mobile
		   la pagina si bloccava arrivata al blog (segnalato da Federico). Con il valore
		   predefinito è il browser a scegliere l'asse dal primo movimento del dito, e
		   resta anche il pinch-zoom. Il drag di blog-carousel.js è solo per il mouse. */
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		cursor: grab;
		/* la prima/ultima card si allineano al bordo del CONTENUTO (non del viewport
		   che ora è a tutta larghezza) — stesso inset usato dal titolo/controlli. */
		padding-inline: var(--carousel-inset);
		scroll-padding-inline: var(--carousel-inset);
	}

	.blog-carousel__viewport:active {
		cursor: grabbing;
	}

	.blog-carousel__viewport::-webkit-scrollbar {
		display: none;
	}

	.blog-carousel__track {
		display: flex;
		gap: var(--space-32);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.blog-card-item {
		flex: 0 0 var(--blog-card-w);
		scroll-snap-align: start;
	}

	/* cloni del loop infinito: invisibili finché blog-carousel.js non li rivela */
	.blog-card-item[aria-hidden="true"] {
		display: none;
	}

	.blog-carousel--looping .blog-card-item[aria-hidden="true"] {
		display: block;
	}

	.blog-carousel__controls {
		display: flex;
		align-items: center;
		gap: var(--space-16);
		/* frecce + "vedi tutti" restano allineate al contenuto, non al carosello
		   full-bleed che le contiene. */
		padding-inline: var(--carousel-inset);
		margin-top: clamp(var(--space-24), 4vw, var(--space-32));
	}

	.blog-carousel__arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--touch-target);
		height: var(--touch-target);
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--c-magenta);
		color: var(--c-white);
		transition: background-color var(--dur-hover) var(--ease-out);
	}

	.blog-carousel__arrow:hover {
		background: var(--c-navy);
	}

	.blog-carousel__cta {
		margin-left: var(--space-8);
	}

	/* senza JS le frecce sono inerti (nessun listener): non mostrarle, resta lo
	   scroll orizzontale nativo (drag/trackpad/touch) sugli 8 post reali. */
	.no-js .blog-carousel__arrow {
		display: none;
	}

	@media (max-width: 899px) {
		/* mobile: il personaggio è a flusso nello stage, non sconfina → meno spazio sopra */
		/* Fase 16: la fascia sopra risale di --radius-section (margin-bottom negativo di
		   .s-home-intro): lo stacco VISIBILE fascia→titolo è padding − raggio, quindi il
		   raggio va aggiunto, altrimenti restavano ~30px. */
		.s-blog {
			padding-block: calc(var(--space-section) + var(--radius-section)) var(--space-section);
		}

		.s-home-modules {
			padding-block: calc(var(--space-section) + var(--radius-section)) 0;
		}
	}

	/* movimento ridotto / no-JS: l'interludio è in flusso, il personaggio col tablet
	   resta nel navy sopra e NON sconfina qui → niente extra padding. Il toggle del
	   footer (data-reduced-motion) ha la precedenza sulla preferenza di sistema. */
	.no-js .s-blog,
	:root[data-reduced-motion="reduce"] .s-blog {
		padding-block: var(--space-section);
	}

	.no-js .s-home-modules,
	:root[data-reduced-motion="reduce"] .s-home-modules {
		padding-block: var(--space-section) 0;
	}

	@media (prefers-reduced-motion: reduce) {
		:root:not([data-reduced-motion="no-preference"]) .s-blog {
			padding-block: var(--space-section);
		}

		:root:not([data-reduced-motion="no-preference"]) .s-home-modules {
			padding-block: var(--space-section) 0;
		}
	}

	/* --- Home: form newsletter (Fase 6) -------------------------------------
	   Fedele al frame XD trovato in home-expanded/04→05.png (segnato "nessun mockup"
	   per errore in una prima analisi): testo a sinistra (titolo + sottotitolo), UNA
	   barra a pillola a destra — metà lime (campo email) + metà magenta (bottone),
	   nessun campo aggiuntivo, nessuna checkbox (solo la riga informativa con link
	   Privacy sotto la barra). Continua lo sfondo bianco di .s-blog SENZA una propria
	   cucitura/radius — .s-faq (navy, angoli superiori tondi) arriva subito dopo con lo
	   stacco già previsto. */
	.s-newsletter {
		background: var(--c-white);
		color: var(--c-navy);
		/* Il padding-bottom include il raggio della fascia FAQ, che risale di altrettanto
		   (.s-faq margin-top negativo): così lo stacco BIANCO effettivo fra la barra email
		   e l'inizio del navy è sempre --space-section e non dipende più dall'altezza
		   del viewport. Prima era la differenza fra due valori quasi uguali (padding ≤112 −
		   margine −112) → stacco ≈ 0 su schermi alti, e navy SOPRA il testo su schermi
		   bassi. Fase 16 (#16, "spazi della newsletter troppo ampi su mobile"): il
		   respiro usava --space-section-lg (fino a 160px) invece della scala standard —
		   il meccanismo di risalita resta, solo il gap visibile scende a --space-section. */
		padding-block: var(--space-section) calc(var(--space-section) + var(--radius-band-faq));
	}

	.s-newsletter__inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: clamp(var(--space-24), 4vw, var(--space-64));
	}

	/* Fase 18 (#1, Federico: «avvicina i contenuti delle due colonne»): affiancate,
	   testo e form stanno insieme al centro invece di andare ai due bordi del
	   contenitore; lo stacco fra loro è quello fra blocchi (--space-block, 32→64). */
	@media (min-width: 840px) {
		.s-newsletter__inner {
			justify-content: center;
			gap: var(--space-block);
		}
	}

	.s-newsletter__text {
		flex: 1 1 20rem;
		max-width: 30rem;
	}

	.s-newsletter__title {
		margin: 0;
		color: var(--c-ink);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
	}

	.s-newsletter__intro {
		margin: var(--space-16) 0 0;
		color: var(--c-ink-muted);
		font-size: var(--fs-body);
	}

	.s-newsletter__form-col {
		flex: 1 1 26rem;
		max-width: 36rem;
	}

	/* barra unica: metà campo (lime) + metà bottone (magenta), stesso pill esterno —
	   overflow:hidden sul contenitore taglia i due rettangoli interni sugli angoli
	   arrotondati solo esterni (fedele al mockup: nessuna cucitura visibile fra i due). */
	.newsletter-bar {
		display: flex;
		align-items: stretch;
		border-radius: var(--radius-pill);
		overflow: hidden;
		/* Fase 18 (#1): il bottone ha il suo raggio a pillola (base comune dei bottoni,
		   #20), quindi ai suoi angoli sinistri restava un taglio bianco e il campo
		   lime finiva "di botto". Con il lime sul contenitore il verde continua sotto
		   il bottone e le due parti si fondono. Sotto i 480px (barra su due righe)
		   il fondo torna `none`, più sotto. */
		background: var(--c-lime);
	}

	.newsletter-bar__input {
		flex: 1 1 auto;
		min-width: 0;
		min-height: var(--touch-target);
		padding: var(--space-16) var(--space-24);
		border: 0;
		background: var(--c-lime);
		color: var(--c-navy);
		font-family: inherit;
		font-size: var(--fs-body);
	}

	.newsletter-bar__input::placeholder {
		color: var(--c-navy);
		opacity: 0.75;
	}

	.newsletter-bar__submit {
		flex: 0 0 auto;
		border: 0;
		background: var(--c-magenta-ink);
		color: var(--c-white);
		font-family: inherit;
		white-space: nowrap;
		transition: background-color var(--dur-hover) var(--ease-out);
	}

	.newsletter-bar__submit:hover,
	.newsletter-bar__submit:focus-visible {
		background: var(--c-navy);
	}

	.newsletter-bar__submit:focus-visible {
		/* .newsletter-bar ha overflow:hidden (riga 2340): l'outline outset di default
		   viene clippato. Disegna verso l'interno — sfondo già navy in questo stato,
		   l'outline lime resta a contrasto ottimo (~13:1). Fase 7. */
		outline-offset: -3px;
	}

	.newsletter-form__disclaimer {
		margin: var(--space-12) 0 0;
		color: var(--c-ink-muted);
		font-size: var(--fs-label);
	}

	.newsletter-form__disclaimer a {
		color: var(--c-ink);
		font-weight: var(--fw-bold);
	}

	.newsletter-form__status {
		margin: var(--space-8) 0 0;
		min-height: 1.5em;
		font-weight: var(--fw-semibold);
		font-size: var(--fs-body);
	}

	.s-newsletter[data-newsletter-state="error"] .newsletter-form__status {
		color: var(--c-magenta);
	}

	.s-newsletter[data-newsletter-state="success"] .newsletter-form__status {
		color: var(--c-navy);
	}

	/* mobile: la barra a due colori torna leggibile solo se il campo può respirare —
	   sotto i 480px il bottone va a riga propria (il mockup è solo desktop). */
	@media (max-width: 480px) {
		/* Sotto 480px la barra non e' piu' un'unica pillola (va a capo su due righe):
		   la regola "il bottone dentro una barra a pillola puo' tenere la forma della
		   barra solo se la barra e' una pillola" (CLAUDE.md/#20) impone che, non
		   essendolo piu', campo e bottone tornino OGNUNO una pillola propria invece di
		   ereditare un raggio da card (--radius-md) dal contenitore clippato. */
		.newsletter-bar {
			flex-wrap: wrap;
			gap: var(--space-8);
			overflow: visible;
			background: none;
		}

		.newsletter-bar__input,
		.newsletter-bar__submit {
			flex: 1 1 100%;
			text-align: center;
			border-radius: var(--radius-pill);
		}
	}

	/* --- Home: sezione FAQ (fascia navy, angoli superiori tondi) ---
	   Stessa tecnica di .s-home-intro sopra: <body> è navy pieno, quindi l'arco da
	   solo rivelava ancora navy (confine dritto, verificato) — .s-newsletter (bianca,
	   subito sopra) deve stare fisicamente dietro l'angolo: la FAQ sale di "un raggio"
	   (margin-top negativo) e sta sopra in z-index, così l'arco rivela il bianco vero. */
	.s-faq {
		position: relative;
		z-index: 2;
		/* Risale esattamente di quanto vale il proprio raggio: l'arco consuma quel tratto
		   e rivela il bianco di .s-newsletter invece del navy del <body>. I due valori
		   devono restare uguali, per questo derivano dallo stesso token. */
		margin-top: calc(-1 * var(--radius-band-faq));
		padding-block: var(--space-section-lg);
	}

	/* livello di sfondo separato dai contenuti: vedi .s-home-intro__bg sopra, stessa
	   ragione (respiro via scaleX senza deformare titolo/accordion). */
	.s-faq__bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		background: var(--c-navy);
		/* XD: 50px sui soli angoli alti (la fascia navy della home ne ha 112 in basso). */
		border-radius: var(--radius-band-faq) var(--radius-band-faq) 0 0;
	}

	.s-faq__inner {
		position: relative;
		z-index: 1;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	.s-faq__title {
		margin: 0 0 var(--space-block);
		color: var(--c-white);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
		text-align: center;
	}

	.s-faq__cols {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0 clamp(var(--space-32), 5vw, var(--space-96));
		align-items: start;
	}

	.s-faq__col {
		display: flex;
		flex-direction: column;
	}

	.s-faq__col > .faq-item[open] {
		margin-block: var(--space-8) var(--space-24);
	}

	.s-faq__col > .faq-item[open]:first-child {
		margin-top: 0;
	}

	@media (min-width: 840px) {
		.s-faq__cols {
			grid-template-columns: 1fr 1fr;
		}
	}

	/* --- footer (mockup XD: fascia lime, filo magenta in alto) ---- */
	.site-footer {
		/* 2px sopra la sezione precedente: con lo zoom di sistema frazionario (125%,
		   150%) la fascia navy e il footer finivano entrambi a metà pixel e dallo
		   spiraglio antialiasato trapelava il bianco del <body> — una linea chiara
		   fra navy e magenta (Fase 20). Sovrapponendosi, il filo copre la giuntura.
		   2px e non 1: la fascia navy che «respira» è un livello composito che il
		   browser può arrotondare di un pixel (misurato su Verifica a 1280px/125%). */
		position: relative;
		margin-top: -2px;
		padding: calc(var(--space-section) + var(--rule-footer)) var(--container-pad) var(--space-32);
		/* Filo magenta (--rule-footer) + lime in UN SOLO sfondo con uno stacco netto,
		   non border-top + background: erano due strati con due bordi antialiasati, e
		   allo zoom frazionario fra filo e lime restava una riga chiara (Fase 20). */
		background: linear-gradient(to bottom, var(--c-magenta) var(--rule-footer), var(--c-lime) var(--rule-footer));
		color: var(--c-navy);
	}

	.site-footer__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--space-48);
		max-width: var(--container-max);
		margin-inline: auto;
	}

	.site-footer__brand {
		flex: 1 1 20rem;
		max-width: 34rem;
	}

	/* Fase 19 (#3): un logo caricato dal cliente (Skimup → Contenuti → Footer) ha le
	   sue proporzioni — questa regola lo tiene alla stessa altezza dell'SVG
	   predefinito (30px, width auto) invece di lasciarlo alla dimensione nativa del
	   file caricato in Libreria media. L'SVG di default ha già gli attributi
	   width="142" height="30" nel markup: qui il valore non cambia, resta esplicito
	   anche per un file diverso. */
	.site-footer__logo {
		display: block;
		height: 30px;
		width: auto;
		max-width: 100%;
	}

	.site-footer__tagline {
		margin: var(--space-16) 0 0;
		max-width: 42ch;
		font-size: var(--fs-body);   /* Fase 16: esplicito (coincide col default di <p>) */
		font-weight: var(--fw-semibold);
	}

	.footer-nav__list {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(5, auto);
		gap: var(--space-8) var(--space-64);
		list-style: none;
	}

	.footer-nav__list a {
		display: inline-block;
		color: var(--c-navy);
		font-weight: var(--fw-bold);
		font-size: var(--fs-label);   /* Fase 16 (#8): era --fs-body, percepito eccessivo */
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		text-decoration: none;
		/* Step 11 QA mobile: line-box a 14px/1.6 dava 22px, sotto il minimo
		   24x24 CSS (WCAG 2.5.8) misurato con Playwright su mobile/tablet. */
		padding-block: 0.125rem;
	}

	.footer-nav__list a:hover {
		/* era --c-magenta su sfondo lime: ~3.1:1, sotto 4.5:1 AA per testo — Fase 7.
		   Nessun token ammesso (testo su lime = navy/inchiostro) è compliant qui, quindi
		   l'affordance hover passa dal colore alla decorazione. */
		color: var(--c-navy);
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	.site-footer__bottom {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		max-width: var(--container-max);
		margin: var(--space-48) auto 0;
		padding-top: var(--space-16);
		border-top: 1px solid rgb(var(--c-navy-rgb) / 0.25);
		flex-wrap: wrap;
		gap: var(--space-8) var(--space-24);
	}

	/* Fase 19: link «Preferenze cookie» (iubenda), stessa scala dei crediti */
	.site-footer__cookie-prefs {
		margin: 0;
		font-size: var(--fs-small);
		font-weight: var(--fw-semibold);
	}

	.site-footer__cookie-prefs a {
		display: inline-block;
		padding-block: var(--space-4);   /* target ≥ 24px (WCAG 2.5.8) */
		color: var(--c-navy);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.site-footer__credits {
		margin: 0;
		/* v1.0.5: `p` ha `max-width: var(--measure)` (65ch) in `base`. Con il testo
		   `nowrap` (≈499px a 12px) il riquadro restava fermo a 446px e il testo ne
		   sbordava di 53px: il link «Preferenze cookie» di iubenda, che viene DOPO il
		   riquadro, finiva sopra la partita IVA da 700px in su (segnalato da Federico,
		   visibile solo online: in locale la Cookie Solution non è collegata). */
		max-width: none;
		/* Richiesta Federico: su UN rigo. Il wrap che aveva visto era causato dal
		   toggle "Riduci le animazioni" che divideva la riga → rimosso il toggle, la
		   riga sta da sola su tutta la larghezza. `nowrap` da 560px in su (fin lì ci
		   sta a font pieno); sotto — telefoni, 92 caratteri fisici — si spezza. */
		font-size: var(--fs-small);   /* Fase 16 (#8): era --fs-label, percepito eccessivo */
		font-weight: var(--fw-semibold);
	}

	@media (min-width: 560px) {
		.site-footer__credits {
			white-space: nowrap;
		}
	}

	@media (max-width: 700px) {
		.site-footer__inner {
			gap: var(--space-32);
		}

		.footer-nav__list {
			grid-template-columns: 1fr;
			gap: var(--space-8);
		}
	}

	/* --- fallback template generico (index.php) ------------------- */
	.content-fallback {
		max-width: var(--measure);
		margin: var(--space-96) auto;
		padding: 0 var(--container-pad);
	}

	/* --- singolo articolo blog (single.php) / archivio blog (home.php) ---
	   Layout e cromia stanno nel blocco "PAGINE SECONDARIE" più sotto (Fase 13):
	   entrambe le pagine si aprono ora con la fascia navy condivisa e non hanno più
	   un angolo arrotondato proprio. Qui resta SOLO la tipografia del contenuto
	   renderizzato da the_content(). */

	/* link "nudi" dentro il contenuto renderizzato (the_content()): .post-article
	   poggia su sfondo bianco, il colore di default di `a` (--color-link, lime)
	   ci è illeggibile (~1.16:1) — Fase 7, bug di contrasto reale. Stesso fondo
	   bianco per le Pagine generiche, il fallback e le pagine di MailPoet. */
	.post-article__body a,
	.content-fallback__body a,
	.s-page-content__body a {
		color: var(--c-navy);
		font-weight: var(--fw-semibold);
		/* sottolineato: navy e --c-ink fra loro sono sotto 3:1, il colore da solo non
		   basta a distinguere un link dal testo (WCAG 1.4.1) */
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.15em;
	}

	.post-article__body a:hover,
	.content-fallback__body a:hover,
	.s-page-content__body a:hover {
		color: var(--c-ink);
		text-decoration-thickness: 2px;
	}

	/* su bianco l'anello lime di default (regola condivisa :focus-visible) non si vede */
	.post-article__body :is(a, [tabindex]):focus-visible,
	.content-fallback__body :is(a, [tabindex]):focus-visible,
	.s-page-content__body :is(a, [tabindex]):focus-visible {
		outline-color: var(--c-navy);
	}

	/* ---------------------------------------------------------------------------
	   Contenuto degli articoli (the_content() → blocchi Gutenberg importati dal
	   vecchio sito, Fase 11). Il tema non aveva CSS per i blocchi: il reset globale
	   `ul,ol{padding:0}` toglieva i marcatori, tabelle e figure erano non stilate.
	   Qui il minimo indispensabile, on-brand, scoped al corpo articolo + fallback
	   (pagine legali via index.php). --------------------------------------------- */
	.post-article__body > *,
	.content-fallback__body > *,
	.s-page-content__body > * {
		margin-block: 0 var(--space-24);
	}

	.post-article__body > :last-child,
	.content-fallback__body > :last-child,
	.s-page-content__body > :last-child {
		margin-bottom: 0;
	}

	/* Gerarchia dei titoli nel testo: uno step sotto la scala delle sezioni. L'h1
	   dell'articolo è la pillola `compact` (--fs-h2): con gli H2 del corpo a --fs-h2 i
	   due erano grandi uguali, e l'h1 deve restare la scritta più grande della pagina.
	   Prossimità (Gestalt): il titolo sta molto più vicino al SUO testo che a quello
	   sopra — prima 48/24, cioè quasi equidistante. */
	.post-article__body h2,
	.content-fallback__body h2,
	.s-page-content__body h2 {
		font-size: var(--fs-h3);
		line-height: var(--lh-snug);
	}

	.post-article__body h3,
	.content-fallback__body h3,
	.s-page-content__body h3 {
		font-size: var(--fs-h4);
		line-height: var(--lh-snug);
	}

	.post-article__body h4,
	.content-fallback__body h4,
	.s-page-content__body h4 {
		font-size: var(--fs-body);
		font-weight: var(--fw-bold);
	}

	.post-article__body > h2,
	.content-fallback__body > h2,
	.s-page-content__body > h2 {
		margin-block: var(--space-64) var(--space-16);
	}

	.post-article__body > :is(h3, h4),
	.content-fallback__body > :is(h3, h4),
	.s-page-content__body > :is(h3, h4) {
		margin-block: var(--space-48) var(--space-12);
	}

	/* un titolo che segue subito un altro titolo (H2 → H3) non riapre lo stacco */
	.post-article__body > :is(h2, h3) + :is(h3, h4),
	.content-fallback__body > :is(h2, h3) + :is(h3, h4),
	.s-page-content__body > :is(h2, h3) + :is(h3, h4) {
		margin-top: var(--space-24);
	}

	.post-article__body > :is(h2, h3, h4):first-child,
	.content-fallback__body > :is(h2, h3, h4):first-child,
	.s-page-content__body > :is(h2, h3, h4):first-child {
		margin-top: 0;
	}

	/* ancore in-pagina: l'header sticky non deve coprire il titolo di destinazione */
	.post-article__body :is(h2, h3, h4)[id],
	.content-fallback__body :is(h2, h3, h4)[id],
	.s-page-content__body :is(h2, h3, h4)[id] {
		scroll-margin-top: calc(var(--header-height) + var(--space-24));
	}

	/* v1.0.5: testo iubenda nelle pagine legali (includes/legal/iubenda.php). Il
	   documento mette dei <br> fra un blocco e l'altro (figli diretti di un div, non
	   dentro un paragrafo): col nostro margine fra paragrafi diventavano un vuoto in
	   più. Gli a capo DENTRO i paragrafi restano. */
	.iubenda-policy div > br {
		display: none;
	}

	/* liste: ripristina marcatori + rientro (annullati dal reset globale) */
	.post-article__body :is(ul, ol),
	.content-fallback__body :is(ul, ol),
	.s-page-content__body :is(ul, ol) {
		margin: 0 0 var(--space-24);
		padding-left: var(--space-28);
		max-width: var(--measure);
	}

	.post-article__body ul,
	.content-fallback__body ul,
	.s-page-content__body ul {
		list-style: disc;
	}

	.post-article__body ol,
	.content-fallback__body ol,
	.s-page-content__body ol {
		list-style: decimal;
	}

	.post-article__body li,
	.content-fallback__body li,
	.s-page-content__body li {
		margin-bottom: var(--space-8);
	}

	.post-article__body li > :is(ul, ol) {
		margin-block: var(--space-8) 0;
	}

	/* marcatori di marca: elemento non testuale, magenta su bianco 3,77:1 (soglia 3:1) */
	.post-article__body li::marker,
	.content-fallback__body li::marker,
	.s-page-content__body li::marker {
		color: var(--c-magenta);
	}

	.post-article__body ol > li::marker,
	.content-fallback__body ol > li::marker,
	.s-page-content__body ol > li::marker {
		font-weight: var(--fw-bold);
	}

	/* immagini / figure (tabelle comprese: il blocco tabella è una <figure>). La regola
	   di WP core `:where(figure){margin:0 0 1em}` è fuori dai @layer e batte qualunque
	   margine del tema: `!important` è l'unico modo per vincere (stesso meccanismo già
	   documentato per Forminator e MailPoet). Figure e tabelle interrompono il testo:
	   stacco un po' più largo del paragrafo, uguale sopra e sotto. */
	.post-article__body figure,
	.content-fallback__body figure,
	.s-page-content__body figure {
		margin: var(--space-32) 0 !important;
	}

	.post-article__body > figure:first-child,
	.content-fallback__body > figure:first-child,
	.s-page-content__body > figure:first-child {
		margin-top: 0 !important;
	}

	.post-article__body > figure:last-child,
	.content-fallback__body > figure:last-child,
	.s-page-content__body > figure:last-child {
		margin-bottom: 0 !important;
	}

	.post-article__body :is(img, .wp-block-image),
	.content-fallback__body :is(img, .wp-block-image),
	.s-page-content__body :is(img, .wp-block-image) {
		border-radius: var(--radius-md);
	}

	.post-article__body figcaption,
	.content-fallback__body figcaption,
	.s-page-content__body figcaption {
		margin-top: var(--space-8);
		color: var(--c-ink-muted);
		font-size: var(--fs-label);
		text-align: center;
	}

	.post-article__body :is(.alignwide, .alignfull),
	.content-fallback__body :is(.alignwide, .alignfull),
	.s-page-content__body :is(.alignwide, .alignfull) {
		max-width: min(100%, 60rem);
		margin-inline: auto;
	}

	/* video / embed responsivi */
	.post-article__body :is(.wp-block-video, .wp-block-embed) video,
	.post-article__body .wp-block-embed iframe,
	.content-fallback__body iframe,
	.s-page-content__body iframe {
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
		border-radius: var(--radius-md);
	}

	/* ---------------------------------------------------------------------------
	   TABELLE (blocco Gutenberg «Tabella»). Stesso impaginato del vecchio sito
	   (decisione Federico, 2026-09-24): intestazione lime con testo navy, righe
	   alternate magenta / navy con testo bianco, angoli tondi. Il plugin
	   (`skimup_core_classify_table_block()`) marca ogni blocco:
	     .skimup-table--callout  una colonna: box di sintesi e riquadri «Focus»
	                             (191 delle 214 tabelle importate);
	     .skimup-table--data     più colonne: tabella dati, su schermi stretti scorre
	                             in orizzontale dentro il suo riquadro (tabindex +
	                             role=region dal plugin), la pagina mai.
	   Il magenta delle righe è --c-magenta-ink, non quello di marca: il bianco sul
	   #ff008c del vecchio sito dà 3,6:1, sotto AA.
	   Il CSS del blocco di WP core (`wp-block-table-inline-css`) è fuori dai @layer e
	   batte le nostre regole a qualunque specificità: `!important` SOLO sulle
	   proprietà che imposta lui (bordi, padding delle celle, sfondo delle righe
	   dispari di `is-style-stripes`, border-collapse) — stesso meccanismo già
	   documentato per Forminator e MailPoet. Prima di questa regola l'intestazione
	   navy dichiarata qui non compariva affatto e le righe erano il #f0f0f0 di core.
	   --------------------------------------------------------------------------- */
	:is(.post-article__body, .content-fallback__body, .s-page-content__body) .wp-block-table {
		border: 0 !important;
		border-radius: var(--radius-md);
		overflow: hidden;
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) table {
		width: 100%;
		border: 0;
		border-collapse: collapse !important;
		color: var(--c-white);
		font-size: var(--fs-body);
		line-height: var(--lh-normal);
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) :is(thead, tfoot) {
		border: 0 !important;
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) :is(th, td) {
		padding: var(--space-12) var(--space-16) !important;
		border: 0 !important;
		text-align: left;
		vertical-align: top;
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) :is(thead, tfoot) :is(th, td) {
		background: var(--c-lime);
		color: var(--c-navy);
		font-weight: var(--fw-bold);
		vertical-align: middle;
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) tbody tr {
		background-color: var(--c-magenta-ink) !important;
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) tbody tr:nth-child(even) {
		background-color: var(--c-navy) !important;
	}

	/* link dentro le celle: bianco sottolineato (il navy dei link del testo sparirebbe
	   sul navy e non regge sul magenta); navy nell'intestazione lime */
	:is(.post-article__body, .content-fallback__body, .s-page-content__body) tbody a {
		color: var(--c-white);
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) tbody a:hover {
		color: var(--c-white);
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) :is(thead, tfoot) a,
	:is(.post-article__body, .content-fallback__body, .s-page-content__body) :is(thead, tfoot) a:hover {
		color: var(--c-navy);
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) tbody a:focus-visible {
		outline-color: var(--c-white);
	}

	/* icone in linea nelle celle (es. il segnaposto 25px dei riquadri «Focus»): niente
	   raggio delle immagini del testo, allineate al centro della riga */
	:is(.post-article__body, .content-fallback__body, .s-page-content__body) :is(th, td) img {
		display: inline-block;
		margin-inline-end: var(--space-4);
		border-radius: 0;
		vertical-align: middle;
	}

	/* box a una colonna: testo discorsivo, più aria; il titolo del riquadro «Focus»
	   centrato come sul vecchio sito */
	:is(.post-article__body, .content-fallback__body, .s-page-content__body) .skimup-table--callout :is(th, td) {
		padding: var(--space-20) var(--space-24) !important;
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) .skimup-table--callout :is(thead, tfoot) :is(th, td) {
		text-align: center;
	}

	/* intestazione lasciata vuota nell'editor: sul vecchio sito restava una sottile
	   fascia lime sopra il riquadro, un accento e non un titolo — la teniamo così,
	   invece di un blocco lime vuoto alto quanto una riga */
	:is(.post-article__body, .content-fallback__body, .s-page-content__body) .wp-block-table thead :is(th, td):empty {
		height: var(--space-8);
		padding: 0 !important;
	}

	/* tabelle dati: larghezza minima per colonna (numero di colonne dal plugin), oltre
	   la quale scorre il riquadro e non la pagina. 8.5rem: a 5 colonne sta ancora nella
	   colonna di lettura desktop, a 2 colonne sta in uno schermo da 360px. */
	:is(.post-article__body, .content-fallback__body, .s-page-content__body) .skimup-table--data {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	:is(.post-article__body, .content-fallback__body, .s-page-content__body) .skimup-table--data table {
		min-width: calc(var(--skimup-table-cols, 2) * 8.5rem);
	}

	/* citazioni: il bordo lime su bianco è a basso contrasto → magenta */
	.post-article__body :is(blockquote, .wp-block-quote),
	.content-fallback__body :is(blockquote, .wp-block-quote),
	.s-page-content__body :is(blockquote, .wp-block-quote) {
		margin: 0 0 var(--space-24);
		padding-left: var(--space-20);
		border-left: 3px solid var(--c-magenta);
		max-width: var(--measure);
		font-style: italic;
	}

	.post-article__body :is(blockquote, .wp-block-quote) cite {
		display: block;
		margin-top: var(--space-8);
		color: var(--c-ink-muted);
		font-size: var(--fs-label);
		font-style: normal;
	}

	.post-article__body .wp-block-separator,
	.content-fallback__body hr,
	.s-page-content__body hr {
		margin-block: var(--space-32);
		border: 0;
		border-top: 1px solid var(--border-hairline-soft);
	}

	/* bottoni nel contenuto (es. "Scarica la tabella") → stile .btn del sito */
	.post-article__body .wp-block-buttons,
	.content-fallback__body .wp-block-buttons,
	.s-page-content__body .wp-block-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-16);
	}

	.post-article__body .wp-block-button__link,
	.content-fallback__body .wp-block-button__link,
	.s-page-content__body .wp-block-button__link {
		display: inline-block;
		padding: var(--space-12) var(--space-24);
		border-radius: var(--radius-pill);
		background: var(--c-magenta-ink);
		color: var(--c-white);
		font-weight: var(--fw-bold);
		text-decoration: none;
	}

	.post-article__body .wp-block-button__link:hover,
	.content-fallback__body .wp-block-button__link:hover,
	.s-page-content__body .wp-block-button__link:hover {
		background: var(--c-navy);
		color: var(--c-white);
	}

	/* ===================================================================
	   Pagina "Verifica Efficacia Formazione" (page-verifica-efficacia-formazione.php)
	   Ricostruzione dall'artboard XD "Verifica efficacia formazione"
	   (scratch-xd/verifica-coords.txt). Riusa i token e i componenti condivisi
	   (.btn, .cta-demo, .s-faq*, .faq-item*, .character--*, .scroll-hint); qui
	   solo il layout specifico delle sezioni.
	   =================================================================== */

	.s-vef {
		position: relative;
		background: var(--c-white);   /* .site-main è bianca: esplicito per l'overscroll */

		/* Ritmo verticale fra sezioni — best practice marketing (Apple/Stripe/Linear):
		   ~120–210px fra blocchi maggiori su desktop, ~half su mobile, passi 8pt.
		   --vef-gap è SIMMETRICO (padding-block su ogni sezione) → il salto fra due
		   sezioni adiacenti ≈ 2·--vef-gap (~210px @1600). Le due sezioni sotto cui
		   scendono le gambe delle figure (pratica, faq) usano --vef-gap-lg come top. */
		--vef-gap: var(--section-gap);
		--vef-gap-lg: var(--section-gap-lg);
	}

	.s-vef :where(h1, h2, h3) {
		text-wrap: balance;
	}

	/* --- blocco navy condiviso: UN solo layer di sfondo per hero+spiegazione+6 punti
	   e per CTA+FAQ. Riceve il "respiro" (breathe-bg.js, [data-breathe]) e gli angoli
	   arrotondati verso il bianco. Le sezioni dentro sono trasparenti. --- */
	.s-vef-navy,
	.s-tps-navy,
	.s-comp-navy,
	.s-page-hero__stage {
		position: relative;
	}

	.s-vef-navy__bg,
	.s-tps-navy__bg,
	.s-comp-navy__bg,
	.s-page-navy__bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		background: var(--c-navy);
	}

	/* Raggi dell'XD delle pagine interne: 100px (contro i 112 della fascia home). */
	.s-vef-navy--round-bottom .s-vef-navy__bg,
	.s-tps-navy--round-bottom .s-tps-navy__bg,
	.s-comp-navy--round-bottom .s-comp-navy__bg,
	.s-page-navy--round-bottom .s-page-navy__bg {
		border-radius: 0 0 var(--radius-section-alt) var(--radius-section-alt);
	}

	.s-vef-navy--round-top .s-vef-navy__bg,
	.s-tps-navy--round-top .s-tps-navy__bg,
	.s-comp-navy--round-top .s-comp-navy__bg {
		border-radius: var(--radius-section-alt) var(--radius-section-alt) 0 0;
	}

	/* --- prima fascia navy di pagina: risale sotto l'header sticky (Fase 16, #18/#19,
	   tecnica premiercs, stessa di `.s-hero` sulla home più sotto) --- margin-top
	   negativo pari all'altezza reale dell'header ("--header-height", misurata a
	   runtime da nav.js con ResizeObserver — qui il valore statico è solo il fallback
	   prima che il JS giri) sposta IN SU il bordo della fascia fino a y=0, e un
	   padding-top della stessa misura rimanda il contenuto esattamente dov'era: zero
	   spostamento visibile, ma ora l'header sticky (trasparente) mostra il navy
	   DELLA FASCIA, non quello del body. Da quando <body> è bianco ovunque (#18/#19)
	   questo è l'UNICA fonte di quel colore dietro l'header — ed è la stessa fascia
	   che "respira" (breathe-bg.js): quando si restringe in larghezza, si restringe
	   anche l'area dietro l'header, perché è lo stesso elemento. */
	.s-vef-navy--round-bottom,
	.s-tps-navy--round-bottom,
	.s-comp-navy--round-bottom,
	.s-page-navy--round-bottom {
		margin-top: calc(var(--header-height) * -1);
		padding-top: var(--header-height);
	}

	/* le sezioni navy: solo testo bianco, nessuno sfondo proprio (lo porta .s-vef-navy__bg) */
	.s-vef-dark,
	.s-tps-dark,
	.s-comp-dark {
		position: relative;
		z-index: 1;
		color: var(--c-white);
	}

	/* i contenuti stanno sopra il layer di sfondo; decori in mezzo. */
	.s-vef-hero__inner, .s-vef-pratica__inner, .s-vef-moduli__inner,
	.s-tps-hero__inner, .s-tps-intro__inner, .s-tps-passi__inner,
	.s-comp-hero__inner, .s-comp-intro__inner, .s-comp-passi__inner {
		position: relative;
		z-index: 2;
	}

	.s-vef-hero__inner,
	.s-vef-pratica__inner,
	.s-vef-moduli__inner,
	.s-page-reasons__inner,
	.s-features__inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	/* --- decori (fallback statico; deco-field.js li arricchisce dove montato) --- */
	.s-vef__deco,
	.s-tps__deco,
	.s-comp__deco,
	.s-page-hero__deco {
		position: absolute;
		z-index: 1;
		aspect-ratio: 1;
		border-radius: 50%;
		pointer-events: none;
		transform: translate(-50%, -50%);
	}

	.s-vef__deco--dot-white,
	.s-tps__deco--dot-white,
	.s-comp__deco--dot-white { background: var(--c-white); }
	.s-vef__deco--dot-magenta,
	.s-tps__deco--dot-magenta,
	.s-comp__deco--dot-magenta { background: var(--c-magenta); }

	/* ---------------------------------------------------------------- HERO --- */
	.s-vef-hero {
		position: relative;
		/* rientro del testo dal bordo sinistro della pillola (XD: pill x=176, testo x=304
		   → 128px). Stesso valore per kicker e pillola così restano allineati.
		   Fase 15: era 7rem (112px) mentre il commento diceva già 128 — l'XD di Verifica
		   dà gli stessi x dell'XD di Contatti, quindi il valore giusto è 8rem per tutti
		   e tre gli hero (vedi --tps-hero-inset e --page-hero-inset). */
		--vef-hero-inset: clamp(var(--space-28), 8vw, 8rem);
		/* niente overflow:hidden: la donna è SEDUTA sul bordo interno inferiore della
		   pillola e le gambe scendono sul navy sotto (XD strip-00 agg.). Lo scroll
		   orizzontale è già impedito da .site-main { overflow-x: clip }. */
		padding-block: var(--space-hero-top) var(--vef-gap);
	}

	.s-vef-hero__inner {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-32);
		align-items: center;
	}

	.s-vef-hero__kicker {
		margin: 0 0 var(--space-20);
		padding-left: var(--vef-hero-inset);   /* XD: allineato al testo della pillola */
		color: var(--c-white);
		font-size: var(--fs-label);   /* Fase 16: kicker/eyebrow (era --fs-h4) */
		font-weight: var(--fw-semibold);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	/* XD: pillola a raggio pieno (r540). Su mobile → rettangolo arrotondato. */
	.s-vef-hero__pill {
		position: relative;
		z-index: 2;
		background: var(--c-lime);
		color: var(--c-ink);
		border-radius: var(--radius-hero-pill);
		/* XD: testo distribuito nella pillola con respiro ampio; a sinistra il rientro
		   maggiore (--vef-hero-inset) stacca il testo dalla curva dello "stadio". */
		padding: var(--space-hero-pill-y) clamp(var(--space-24), 6vw, 4rem) var(--space-hero-pill-y) var(--vef-hero-inset);
	}

	.s-vef-hero__title,
	.s-tps-hero__title,
	.s-comp-hero__title {
		margin: 0;
		/* la larghezza reale è governata dal padding-right della pillola (zona figura):
		   il cap in ch è solo una sicurezza a viewport molto larghi → ~3 righe come XD. */
		max-width: 40ch;
		color: var(--c-ink);
		font-size: var(--fs-h1);            /* Fase 16: h1 di pagina (era --fs-h2/XD 50) */
		/* DEROGA alla fedeltà XD, decisione Federico (Fase 15): l'artboard Verifica e
		   quello Test Psicometrico danno Semibold, l'artboard Contatti dà Black su
		   un'etichetta corta. Federico ha scelto UN solo hero per tutto il sito, su
		   Bold. Non è deriva accidentale: non "correggerlo" rimettendo semibold. */
		font-weight: var(--fw-bold);
		line-height: var(--lh-snug);
	}

	.s-vef-hero__sub,
	.s-tps-hero__sub,
	.s-comp-hero__sub {
		margin: clamp(var(--space-24), 3.2vw, var(--space-48)) 0 0;
		max-width: none;
		color: var(--c-navy);
		font-size: var(--fs-body-lg);       /* Fase 16: scala Utopia (era --fs-h4/XD 35) */
		font-weight: var(--fw-bold);
	}

	/* La figura vive DENTRO .s-vef-hero__pill (markup): siede sul bordo basso interno.
	   Base = mobile: la pillola riserva una banda in basso (padding-bottom) dove la
	   donna sta seduta sul bordo interno inferiore; il sedere è a filo del bordo e
	   solo le gambe (~45% della figura) scendono sul navy sotto. La pillola non
	   ritaglia (overflow visibile). */
	.s-vef-hero__pill {
		overflow: visible;
		padding-bottom: clamp(10rem, 40vw, 12rem);
	}

	.s-vef-hero__figure,
	.s-tps-hero__figure,
	.s-comp-hero__figure {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: min(9rem, 36vw);
		transform: translate(-50%, 45%);
		z-index: 3;
	}

	.s-vef-hero__figure .character, .s-vef-hero__figure .character__img, .s-vef-hero__figure .character__video,
	.s-tps-hero__figure .character, .s-tps-hero__figure .character__img, .s-tps-hero__figure .character__video,
	.s-comp-hero__figure .character, .s-comp-hero__figure .character__img, .s-comp-hero__figure .character__video {
		display: block;
		width: 100%;
	}

	@media (min-width: 900px) {
		.s-vef-hero {
			overflow: visible;   /* le gambe della donna scendono sul navy sotto la pillola */
		}

		.s-vef-hero__inner {
			padding-bottom: 0;
		}

		.s-vef-hero__pill {
			border-radius: var(--radius-pill);
			/* Zona riservata alla figura seduta sul bordo destro. Fase 15: era un
			   `clamp(6rem, 15vw, 12rem)` scollegato dalle misure della figura, e più
			   stretto del suo ingombro reale (larghezza + scostamento da destra): il
			   testo poteva finirle sotto — con il titolo in Bold ci finiva davvero,
			   l'ultima parola della prima riga spariva dietro la donna. Ora la riserva
			   è CALCOLATA dagli stessi valori di .s-vef-hero__figure, così le due cose
			   non possono più divergere: chi cambia la figura cambia la riserva. */
			padding-right: calc(clamp(13rem, 20vw, 19rem) + clamp(-1rem, 2vw, 3rem) + var(--space-32));
			/* niente banda in basso su desktop: qui la donna siede sul bordo DESTRO */
			padding-bottom: var(--space-hero-pill-y);
		}

		/* XD strip-00: pillola larga (~80% viewport). Fase 19 (#1, Federico): centrata
		   nella pagina — nell'XD era allineata a sinistra e a 1440 restava 48px a sinistra
		   contro 181px a destra, percepito come un errore. */
		.s-vef-hero__col,
		.s-tps-hero__col,
		.s-comp-hero__col {
			max-width: min(80rem, 90%);
			margin-inline: auto;
		}

		/* XD strip-00: la donna SIEDE sul bordo interno inferiore della pillola — sedere
		   sul bordo, busto sopra, gambe che scendono sotto. Ora è figlia di
		   .s-vef-hero__pill (markup Fase 10): ancorata al bordo BASSO della PILLOLA, non
		   più della sezione. `bottom` leggermente negativo + translateY piccolo così il
		   sedere cade sul bordo e solo le gambe pendono (prima translateY(40%) la
		   lasciava penzolare ~250px nel vuoto — segnalato da Federico con le frecce). */
		.s-vef-hero__figure {
			left: auto;
			right: clamp(-1rem, 2vw, 3rem);
			bottom: -6%;
			width: clamp(13rem, 20vw, 19rem);
			max-width: none;
			transform: translateY(14%);
		}
	}

	/* ---------------------------------------- SPIEGAZIONE + "IN PRATICA…" --- */
	.s-vef-pratica {
		/* position:relative: contenitore del campo decori procedurale (deco-field.js). */
		position: relative;
		/* padding-top esteso: le gambe della donna dell'hero scendono qui + stacco ampio
		   verso "Verifica dell'Efficacia". */
		/* Fase 19 (#2): all'introduzione serve --space-intro invece dello stacco
		   standard; si aggiunge la differenza alla riserva per le gambe, così la
		   distanza dalle scarpe della figura resta pari a quella sotto. */
		padding-block: calc(var(--vef-gap-lg) + var(--space-intro) - var(--space-section)) var(--vef-gap);
	}

	/* Introduzione sotto l'hero dei moduli (Verifica, TPS, Competenze) e dei
	   `page-hero` che la usano ancora (archivi: descrizione della categoria).
	   Fase 18 (#4, Federico: «troppo attaccati al contenuto sopra e sotto… centrali
	   sulla pagina, titolo sopra al testo e non più a lato»): una sola colonna a
	   ogni larghezza, titolo sopra e testo sotto, tutto centrato. Sostituisce le due
	   colonne della Fase 15 e la bandiera destra/sinistra della Fase 17. Lo stacco
	   titolo→testo è quello interno a un gruppo (--space-24, prossimità di Gestalt);
	   lo stacco da ciò che sta sopra e sotto lo danno le sezioni (--space-section). */
	.s-vef-pratica__intro,
	.s-tps-intro__inner,
	.s-comp-intro__inner,
	.s-page-hero__intro {
		display: grid;
		justify-items: center;
		gap: var(--space-24);
		text-align: center;
	}

	.s-vef-pratica__intro-title,
	.s-tps-intro__title,
	.s-comp-intro__title {
		margin: 0;
		color: var(--c-white);
		font-size: var(--fs-h2);            /* Fase 16: titolo di sezione (era --fs-display/XD 80) */
		font-weight: var(--fw-semibold);
		line-height: var(--lh-tight);
		text-wrap: balance;
	}

	.s-vef-pratica__intro-text,
	.s-tps-intro__text,
	.s-comp-intro__text,
	.s-page-hero__intro-text {
		margin: 0;
		/* centrato: righe un po' più lunghe che a bandiera, ma sotto i 65ch */
		max-width: 60ch;
		color: var(--color-text-soft);
		font-size: var(--fs-body-lg);       /* XD 24 */
		line-height: var(--lh-normal);
	}

	/* l'XD evidenzia "attestato": stesso colore del testo attorno, solo più marcato */
	.s-vef-pratica__intro-text strong {
		font-weight: var(--fw-bold);
	}

	/* "In pratica…" + paragrafo: CENTRATI (richiesta Federico + XD). */
	.s-vef-pratica__pratica {
		/* Fase 18 (#4): stacco pieno fra sezioni dopo l'introduzione (era
		   --space-section-sm, 48→80: l'introduzione risultava attaccata a «In pratica…»). */
		margin-top: var(--space-intro);   /* Fase 19 (#2): era --space-section */
		text-align: center;
	}

	.s-vef-pratica__title {
		margin: 0 0 var(--space-24);
		color: var(--c-white);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
	}

	.s-vef-pratica__text {
		margin: 0 auto;
		max-width: 64ch;
		color: var(--color-text-soft);
		font-size: var(--fs-body-lg);
	}

	.s-vef-pratica__text p,
	.s-page-form__fallback {
		margin: 0;
	}

	/* l'XD evidenzia "Senza, risulta non conforme": più marcato del testo attorno */
	.s-vef-pratica__text strong {
		color: var(--c-white);
		font-weight: var(--fw-bold);
	}

	/* --- "In pratica…" — le due strade a confronto (screenshot Federico 2026-09-08):
	   DUE checklist affiancate, ognuna 3 voci (✓/✗) + trattino + badge d'esito
	   (pillola bianca). L'unica differenza fra le colonne è la 3ª voce e l'esito. --- */
	.s-vef-fork {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		gap: clamp(var(--space-48), 9vw, 6rem);
		margin-top: var(--space-block);
	}

	.s-vef-fork__lane {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(var(--space-16), 2.4vw, var(--space-24));
		width: min(22rem, 100%);
		text-align: left;
	}

	.s-vef-fork__list {
		display: flex;
		flex-direction: column;
		gap: clamp(var(--space-16), 2.2vw, var(--space-24));
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.s-vef-fork__item {
		display: flex;
		align-items: center;
		gap: clamp(var(--space-12), 1.6vw, var(--space-20));
		color: var(--c-white);
		font-size: var(--fs-body);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
	}

	/* Le icone di esito sono ora l'asset originale dell'XD (template-parts/icon-esito.php):
	   il disco colorato e il segno fanno parte del PNG, qui resta solo la misura.
	   Le vecchie regole .s-vef-fork__icon/--ok/--ko disegnavano a mano disco + segno e
	   sono state rimosse con gli SVG inventati (Fase 9). */

	/* trattino divisorio: si disegna L→R (verifica-efficacia.js, [data-vef-rule]) */
	.s-vef-fork__rule {
		width: 100%;
		height: 0;
		margin-block: clamp(var(--space-4), 1vw, var(--space-12));
		border-top: 1px solid rgb(var(--c-white-rgb) / 0.28);
		transform-origin: 0 50%;
	}

	.s-vef-fork__outcome {
		display: flex;
		align-items: center;
		gap: clamp(var(--space-12), 1.6vw, var(--space-20));
		margin: 0;
	}

	/* XD: pillola a CONTORNO (bordo bianco, fondo trasparente sul navy), non a fondo
	   bianco pieno. Testo magenta per "NON CONFORME", lime per "CONFORME" — sul navy
	   il magenta dà 4.2:1 e il lime 13:1, entrambi conformi per testo grande in
	   grassetto (WCAG AA, soglia 3:1). Corretto in Fase 9 sul riferimento XD. */
	.s-vef-fork__badge {
		display: inline-flex;
		flex: none;           /* mai compresso dal flex del genitore: vedi nowrap sotto */
		align-items: center;
		padding: clamp(var(--space-12), 1.5vw, var(--space-16)) clamp(var(--space-16), 2.2vw, var(--space-28));
		border: 2px solid var(--c-white);
		border-radius: var(--radius-pill);
		background: transparent;
		font-size: var(--fs-body-lg);
		font-weight: var(--fw-bold);
		letter-spacing: var(--tracking-wide);
		line-height: 1;
		text-transform: uppercase;
		/* "NON CONFORME" è più lunga di "CONFORME": senza nowrap andava a capo SOLO
		   lei, e le due pillole finivano con altezze diverse (segnalato da Federico
		   con screenshot: 2 righe contro 1). Il testo non deve mai spezzarsi. */
		white-space: nowrap;
	}

	.s-vef-fork__badge--ko,
	.s-page-form .forminator-label--required .forminator-required, .s-page-form .forminator-required { color: var(--c-magenta); }
	/* Su NAVY il lime è pienamente leggibile (13:1): --c-green-ink serve solo su bianco. */
	.s-vef-fork__badge--ok { color: var(--c-lime); }

	@media (min-width: 720px) {
		.s-vef-fork {
			grid-template-columns: repeat(2, auto);
			justify-content: center;
			align-items: start;
			gap: clamp(var(--space-48), 9vw, 7rem);
		}
	}

	/* Sotto i 720px le due strade si impilano e il confronto affiancato sparisce: due
	   checklist quasi identiche una sotto l'altra, senza modo di capire quale sia
	   "quello che fai oggi" e quale "con Skimup". Le intestazioni di corsia esistono già
	   nel markup ma sono riservate ai lettori di schermo (affiancate sono ridondanti):
	   qui tornano visibili, perché è l'unico contesto in cui servono anche a chi vede. */
	/* Affiancate, le due intestazioni sono ridondanti (il confronto è evidente) ma
	   servono ai lettori di schermo: qui sono nascoste alla vista con le stesse regole
	   di .screen-reader-text, dichiarate però SULLA CLASSE del componente. Usare la
	   utility globale non funzionava: il suo `position: absolute !important` sta in un
	   @layer precedente e per le dichiarazioni !important l'ordine dei layer è
	   INVERTITO, quindi vinceva sul nostro override. */
	.s-vef-fork__lane-title {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	@media (max-width: 719px) {
		.s-vef-fork__lane-title {
			position: static;
			width: auto;
			height: auto;
			margin: 0 0 var(--space-16);
			overflow: visible;
			clip-path: none;
			white-space: normal;
			align-self: center;        /* Fase 16 #17: centrato come il resto della pagina */
			font-size: var(--fs-h4);   /* Fase 16: titolo di riga (era --fs-body) */
			font-weight: var(--fw-bold);
			letter-spacing: var(--tracking-wide);
			text-transform: uppercase;
		}

		.s-vef-fork__lane--ko .s-vef-fork__lane-title { color: var(--c-magenta); }
		.s-vef-fork__lane--ok .s-vef-fork__lane-title { color: var(--c-lime); }

		/* Fase 16 #17 (Federico: «su mobile l'allineamento non è sempre centrato»):
		   impilate, le strade sono centrate come il resto della pagina — titolo, filo ed
		   esito al centro; la checklist diventa una colonna STRETTA centrata con le righe
		   icona+testo a bandiera al suo interno (liste su più righe: leggibilità, NN/g). */
		.s-vef-fork__lane {
			align-items: center;
			text-align: center;
		}

		.s-vef-fork__list {
			width: fit-content;
			max-width: 100%;
			text-align: left;
		}

		.s-vef-fork__rule {
			transform-origin: 50% 50%;
		}
	}

	/* --------------------------------------------------- I 6 PUNTI ---------- */
	.s-vef-moduli {
		padding-block: var(--vef-gap);
	}

	/* XD: il titolo è CENTRATO sull'artboard (blocco L=1045 X=438 su 1920, allineamento
	   Center) — coincide con la richiesta di Federico di centrarlo. font-size/weight non
	   si ridichiarano: sono già quelli di `h2` nel layer base. */
	.s-vef-moduli__title,
	.s-tps-passi__title,
	.s-comp-passi__title {
		margin: 0 auto var(--space-block);
		max-width: 34ch;   /* XD: una riga sola a 1920 (blocco 1045px) */
		color: var(--c-white);
		text-align: center;
	}

	.s-vef-moduli__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(var(--space-48), 10vw, 8rem) clamp(var(--space-32), 4vw, var(--space-48));
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: none;
	}

	/* XD: il pallino occupa solo la prima riga; titolo, trattino e testo si impilano
	   in colonna 2, tutti allineati al titolo (indentati oltre il pallino). */
	.s-vef-module,
	.s-tps-passo,
	.s-comp-passo,
	.s-page-step {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"num  title"
			"gap  rule"
			"gap  text";
		column-gap: var(--space-16);
		align-content: start;
	}

	.s-vef-module__num,
	.s-tps-passo__badge,
	.s-comp-passo__badge {
		grid-area: num;
		align-self: start;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4rem;
		height: 4rem;
		margin: 0;
		border-radius: 50%;
		background: var(--c-magenta-ink);
		color: var(--c-white);
		font-size: var(--fs-h4);
		font-weight: var(--fw-bold);
		line-height: 1;
	}

	.s-vef-module__title {
		grid-area: title;
		align-self: center;
		margin: 0;
		color: var(--c-white);
		/* XD: "Registro sempre aggiornato" ecc. sono SegoeUI-Semibold 24 → --fs-body-lg.
		   Era --fs-h4 (30): scostamento dall'XD, corretto in Fase 15. Ora coincide con
		   .s-tps-passo__title / .s-page-step__title, che erano già a 24. */
		font-size: var(--fs-body-lg);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
	}

	.s-vef-module__rule,
	.s-tps-passo__rule,
	.s-comp-passo__rule {
		grid-area: rule;
		width: 4.25rem;
		height: 0.8125rem;
		margin-top: clamp(var(--space-24), 3.5vw, var(--space-48));
		border-radius: var(--radius-pill);
		background: var(--c-lime);
		transform-origin: 0% 50%;
	}

	.s-vef-module__text {
		grid-area: text;
		margin: clamp(var(--space-20), 3vw, var(--space-32)) 0 0;
		max-width: 40ch;
		color: var(--color-text-soft);
		font-size: var(--fs-body);
	}

	@media (min-width: 700px) {
		.s-vef-moduli__grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1024px) {
		.s-vef-moduli__grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* --------------------------------------------- BOX MAGENTA INTERATTIVO --- */
	/* XD (agg. 2026-09-08): sul bianco. Titolo del blocco (ink, centrato) SOPRA la card;
	   card magenta con "Cerca il tuo ambito…" + campo lime LARGO con placeholder
	   d'esempio e icona `?` a destra. Niente riga d'aiuto.
	   Deroga all'XD (Fase 20, richiesta Federico): nell'XD l'icona sbordava dal campo
	   con un anello lime che deformava la curva della pillola; ora sta DENTRO,
	   concentrica con l'estremità destra (stesso margine sopra, sotto e a destra). */
	.s-vef-box {
		position: relative;
		z-index: 2;
		padding-inline: var(--container-pad);
		margin-block: var(--vef-gap);
	}

	/* titolo del blocco: ink su bianco, centrato, SegoeUI-Semibold ~30 (XD) */
	.s-vef-box__heading {
		max-width: 40ch;
		margin: 0 auto clamp(var(--space-32), 5vw, var(--space-64));
		color: var(--c-ink);
		font-size: var(--fs-h4);            /* XD 30 */
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
		text-align: center;
	}

	.s-vef-box__card {
		max-width: 74rem;
		margin-inline: auto;
		padding: clamp(var(--space-32), 4vw, 3.5rem) clamp(var(--space-24), 5vw, 4rem);
		border-radius: var(--radius-card);
		background: var(--c-magenta-ink);
		color: var(--c-white);
		text-align: center;
	}

	.s-vef-box__intro {
		margin: 0 auto;
		max-width: 46ch;
		color: var(--c-white);
		font-size: var(--fs-h4);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
		text-wrap: balance;
	}

	.s-vef-box__field {
		/* altezza della riga interna: la condividono il campo e l'icona, e il margine
		   attorno all'icona (--vef-box-inset) è lo stesso del padding verticale. */
		--vef-box-row: 3.4rem;
		--vef-box-inset: 0.4rem;
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--space-12);
		max-width: 50rem; /* 46 → 50 in Fase 20: l'icona ora occupa spazio nella riga */
		margin: clamp(var(--space-24), 3.5vw, var(--space-32)) auto 0;
		padding: var(--vef-box-inset) var(--vef-box-inset) var(--vef-box-inset) clamp(var(--space-20), 2.5vw, var(--space-28));
		border-radius: var(--radius-pill);
		background: var(--c-lime);
	}

	.s-vef-box__input {
		flex: 1 1 auto;
		min-width: 0;
		min-height: var(--vef-box-row);
		border: 0;
		background: transparent;
		color: var(--c-navy);
		font-family: inherit;
		font-size: var(--fs-body);
		font-weight: var(--fw-semibold);
	}

	.s-vef-box__input::placeholder {
		color: rgb(var(--c-navy-rgb) / 0.6);
	}

	.s-vef-box__input:focus {
		outline: none;
	}

	.s-vef-box__field:focus-within {
		box-shadow: inset 0 0 0 3px var(--c-navy);
	}

	/* icona-stato: cerchio dentro l'estremità destra del campo, concentrico con la
	   curva della pillola (vedi la deroga all'XD in testa al blocco). */
	.s-vef-box__icon {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: var(--vef-box-row);
		height: var(--vef-box-row);
		border-radius: 50%;
		background: var(--c-magenta);
		color: var(--c-lime);
		transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
	}

	.s-vef-box__icon-state {
		display: grid;
		place-items: center;
		color: inherit;
		font-size: var(--fs-h2);   /* Fase 16: token (era 2rem hard-coded) */
		font-weight: var(--fw-bold);
		line-height: 1;
	}

	.s-vef-box__icon-state[hidden] {
		display: none;
	}

	/* dentro il cerchio l'icona di esito (PNG con il disco già disegnato) ne prende
	   esattamente la misura: con la sua misura propria (fino a 64px) sforava il
	   cerchio da 3.4rem e finiva spostata in basso a destra (Fase 20). */
	.s-vef-box__icon .icon-esito {
		width: var(--vef-box-row);
	}

	/* esito: il PNG ha già il suo disco colorato e riempie il cerchio; uno sfondo
	   sotto spunterebbe come alone sul bordo antialiasato (Fase 20). */
	.s-vef-box__card[data-state="match"] .s-vef-box__icon,
	.s-vef-box__card[data-state="nomatch"] .s-vef-box__icon {
		background: transparent;
	}

	/* spazio SEMPRE riservato sotto il campo (XD: la card resta alta anche a vuoto) →
	   nessun salto di layout quando compare un messaggio su 2 righe. */
	.s-vef-box__status {
		min-height: 2.7em;
		margin: clamp(var(--space-20), 3vw, var(--space-32)) auto 0;
		max-width: 52ch;
		font-size: var(--fs-body);
		font-weight: var(--fw-semibold);
	}

	/* ---------------------------------- «PERCHÉ» — componente condiviso ------
	   Fascia bianca con titolo centrato e righe a due colonne. Una sola famiglia per
	   Verifica e Test Psicometrico (Fase 15): erano `.s-vef-perche*` e `.s-tps-perche*`,
	   già accorpate a metà in liste di selettori, con markup e partial PHP identici.
	   Markup: template-parts/sections/page-reasons.php */
	.s-page-reasons {
		padding-block: var(--section-gap);
	}

	.s-page-reasons__title {
		margin: 0 0 var(--space-block);
		color: var(--c-ink);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
		text-align: center;
	}

	.s-page-reasons__list {
		margin: 0;
		max-width: 62rem;
		margin-inline: auto;
	}

	.s-page-reasons__row {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-12) clamp(var(--space-32), 5vw, var(--space-64));
		padding-block: clamp(var(--space-28), 4vw, 2.5rem);
		border-top: 1px solid var(--border-hairline-soft);
	}

	.s-page-reasons__row:first-child {
		border-top: 0;
	}

	.s-page-reasons__row-title {
		margin: 0;
		color: var(--c-ink);
		font-size: var(--fs-h4);
		font-weight: var(--fw-semibold);
	}

	.s-page-reasons__row-text {
		margin: 0;
		max-width: none;
		color: var(--c-navy);
		font-size: var(--fs-body);
	}

	/* Fase 16 (#17): questo componente vive solo sugli hero che passano al
	   desktop a ≥900px (Verifica/TPS/Competenze) — la soglia era 840px, un buco
	   di 60px in cui la riga tornava già a due colonne allineate a sinistra
	   mentre il resto della pagina (hero, introduzione) era ancora in versione
	   mobile centrata. Allineata a 900px, la stessa soglia della centratura
	   sotto (vedi il blocco @media (max-width: 899.98px) più in basso). */
	@media (min-width: 900px) {
		.s-page-reasons__row {
			grid-template-columns: minmax(14rem, 26rem) 1fr;
			align-items: start;
		}

		.s-page-reasons--plain .s-page-reasons__row {
			grid-template-columns: 1fr;
		}
	}

	/* Variante "sola frase" (Competenze, XD #4): nessun titolo di riga, la frase
	   è centrata. Il markup è una <ul>. XD: righe alte ~207px a 1920 (frase + filo),
	   contro le ~104 delle righe con titolo: il respiro va quasi raddoppiato. */
	.s-page-reasons--plain .s-page-reasons__list {
		padding: 0;
		list-style: none;
	}

	.s-page-reasons--plain .s-page-reasons__row {
		padding-block: clamp(var(--space-32), 5vw, var(--space-96));
		text-align: center;
	}

	/* --------------------------- «IL MODULO IN SINTESI» / «COSA FA OGNI MODULO» ---
	   Fascia bianca con la tabella delle funzionalità (componente .feature-table).
	   Pagine modulo: dopo le righe «perché» → lo stacco fra le due sezioni è il solo
	   padding-bottom di .s-page-reasons (una dichiarazione, mai due sommate).
	   Home: vedi .s-home-modules più in basso, accanto a .s-blog.
	   Markup: template-parts/sections/page-features.php, home-modules.php */
	.s-features {
		padding-block: var(--section-gap);
	}

	.s-page-reasons + .s-features {
		padding-top: 0;
	}

	.s-features__title {
		margin: 0 0 var(--space-block);
		color: var(--c-ink);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
		text-align: center;
	}

	.s-features__intro {
		max-width: var(--measure);
		margin: calc(-1 * var(--space-block) + var(--space-16)) auto var(--space-block);
		color: var(--c-navy);
		font-size: var(--fs-body-lg);
		text-align: center;
	}

	/* 75rem: tre colonne di testo restano nei 50–75 caratteri per riga */
	.s-features__inner > .feature-table {
		max-width: 75rem;
		margin-inline: auto;
	}

	/* ------------------------------------------------ CTA FINALE ------------ */
	/* Vive dentro .s-vef-navy--round-top (navy + respiro + angoli alti tondi, logica
	   condivisa): la sezione è trasparente. Dentro: un pannello soprelevato appena
	   più chiaro; donna SEDUTA sul bordo alto-sinistra del pannello. */
	/* ------------------------- CTA FINALE — componente condiviso -------------
	   Card lime con la donna seduta sul bordo sinistro, titolo, testo e bottone.
	   Una sola famiglia per Verifica e Test Psicometrico (Fase 15): erano
	   `.s-vef-cta*` e `.s-tps-cta*`, già accorpate per tre quarti in liste di
	   selettori, con partial PHP identici a meno della copia e di un pallino.
	   Markup: template-parts/sections/page-cta.php
	   pb resta piccolo: lo stacco verso la FAQ (con le gambe della donna) lo porta
	   `.s-vef .s-faq { padding-top: --vef-gap-lg }`. */
	.s-page-cta {
		position: relative;
		padding: var(--section-gap) var(--container-pad) var(--space-32);
	}

	.s-page-cta__card {
		position: relative;
		z-index: 1;
		max-width: min(72rem, 100%);
		margin-inline: auto;
		padding: clamp(var(--space-32), 5vw, var(--space-64));
		border-radius: var(--radius-card);
		background: var(--grad-panel);
		box-shadow: var(--shadow-panel);
		color: var(--c-white);
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-24);
		align-items: center;
	}

	.s-page-cta__card > *:not(.s-page-cta__figure):not(.s-page-cta__deco) {
		position: relative;
		z-index: 1;
	}

	.s-page-cta__figure {
		position: relative;
		z-index: 2;
		justify-self: center;
	}

	.s-page-cta__figure .character, .s-page-cta__figure .character__img, .s-page-cta__figure .character__video {
		display: block;
		width: min(12rem, 46vw);
		height: auto;
		margin: 0 auto var(--space-16);   /* mobile: in cima alla card, senza sbordare */
	}

	.s-page-cta__title {
		margin: 0 0 var(--space-16);
		color: var(--c-white);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
	}

	.s-page-cta__text {
		margin: 0 0 var(--space-32);
		max-width: 52ch;
		color: var(--color-text-soft);
		font-size: var(--fs-body-lg);
	}

	.s-page-cta__action .cta-demo {
		width: fit-content;
		max-width: 100%;
	}

	.s-page-cta__deco {
		position: absolute;
		z-index: 0;
		pointer-events: none;
		border-radius: 50%;
		background: var(--c-white);
	}

	/* losanga lime che spunta dall'angolo alto-sinistra del pannello */
	.s-page-cta__deco--lozenge {
		z-index: 0;
		left: clamp(-0.75rem, -1vw, 0rem);
		top: clamp(-1.5rem, -2vw, -0.75rem);
		width: clamp(6.5rem, 10vw, 10.5rem);
		height: clamp(3.25rem, 5vw, 5rem);
		border-radius: var(--radius-pill);
		background: var(--c-lime);
		transform: rotate(-45deg);
	}

	.s-page-cta__deco--dot-a { right: 5%; top: 9%; width: 1.3rem; height: 1.3rem; }
	.s-page-cta__deco--dot-b { right: 13%; top: 46%; width: 1rem; height: 1rem; }
	.s-page-cta__deco--dot-c {
		right: 16%;
		bottom: 9%;
		width: clamp(2.5rem, 4vw, 3.75rem);
		height: clamp(2.5rem, 4vw, 3.75rem);
	}
	.s-page-cta__deco--dot-lime {
		left: 15%;
		bottom: 11%;
		width: 1.6rem;
		height: 1.6rem;
		background: var(--c-lime);
	}

	/* Fase 16 (#2): sotto 900px il contenuto della card si impila e il bottone
	   "Richiedi una demo" arriva vicino al bordo basso — questi due decori (vicini al
	   bordo basso) ci finivano sotto. Stesso trattamento già in uso per `.s-page-hero__deco`:
	   niente decori fissi in quella fascia sotto i 900px (il campo orbitale JS non monta
	   comunque sotto quella soglia). */
	@media (max-width: 899px) {
		.s-page-cta__deco--dot-c,
		.s-page-cta__deco--dot-lime {
			display: none;
		}
	}

	/* Fase 19 (#6, Federico) — mobile, card impilata.
	   1) Centratura: `1fr` è `minmax(auto, 1fr)`, quindi la traccia si allargava fino
	      al min-content della pillola «Richiedi una demo» (min-width 18rem + cerchio):
	      a 375px il contenuto andava da 32px a 1px dai bordi della card. La traccia ora
	      può restringersi, la pillola non supera la card, e sotto 400px il padding
	      laterale scende perché il bottone (testo nowrap) ci stia per intero.
	   2) Posa seduta (Verifica): la figura va SOTTO il testo, seduta sul bordo basso
	      della card, con le gambe che pendono sul navy. La riga della seduta è al 55%
	      dell'altezza dell'immagine (misurata dal canale alfa di
	      character-verifica-cta.webp: le cosce finiscono al 55%, poi la sagoma si
	      stringe sulle gambe); rapporto 1378/720. Si scende con un margine negativo,
	      mai con un transform: la figura è un [data-reveal] (lezione della Fase 17).
	      Chi sostituisce l'immagine aggiorna --cta-seat-ratio e --cta-seat-line. */
	@media (max-width: 839.98px) {
		.s-page-cta__card {
			grid-template-columns: minmax(0, 1fr);
			padding-inline: var(--space-24);
		}

		.s-page-cta__action .cta-demo {
			min-width: 0;
			margin-inline: auto;   /* testo centrato su mobile: la pillola lo segue */
		}

		.s-page-cta__action .btn--demo {
			padding-inline: var(--space-16);
		}

		.s-page-cta--seated {
			--cta-seat-w: min(12rem, 46vw);
			--cta-seat-ratio: 1.914;
			--cta-seat-line: 0.55;
			/* parte della figura sotto la seduta, cioè sotto il bordo della card */
			--cta-seat-overhang: calc(var(--cta-seat-w) * var(--cta-seat-ratio) * (1 - var(--cta-seat-line)));
			padding-bottom: calc(var(--cta-seat-overhang) + var(--space-32));
		}

		.s-page-cta--seated .s-page-cta__figure {
			order: 2;
			/* la card ha padding-bottom 32px (clamp minimo): anche quello va superato */
			margin-bottom: calc(-1 * (var(--cta-seat-overhang) + clamp(var(--space-32), 5vw, var(--space-64))));
		}

		.s-page-cta--seated .s-page-cta__figure .character,
		.s-page-cta--seated .s-page-cta__figure .character__img,
		.s-page-cta--seated .s-page-cta__figure .character__video {
			width: var(--cta-seat-w);
			margin: 0 auto;
		}
	}

	@media (max-width: 399.98px) {
		.s-page-cta__card {
			padding-inline: var(--space-16);
		}
	}

	@media (min-width: 840px) {
		.s-page-cta__card {
			display: block;
			padding: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
		}

		/* XD strip-03: la donna SIEDE sul bordo interno inferiore del pannello — sedere
		   sul bordo, busto dentro il pannello, solo le gambe che scendono sotto.
		   translateY ridotto da 40% a 15%: a 40% penzolava ~250px nel vuoto sotto il
		   pannello (segnalato da Federico con le frecce). `bottom: -4%` porta il sedere
		   appena sotto il bordo. */
		.s-page-cta__figure {
			position: absolute;
			left: clamp(0.5rem, 3vw, 3rem);
			bottom: -4%;
			width: clamp(14rem, 22vw, 19rem);
			z-index: 2;
			transform: translateY(15%);
		}

		.s-page-cta__figure .character,
		.s-page-cta__figure .character__img,
		.s-page-cta__figure .character__video {
			width: 100%;
			margin: 0;
		}

		.s-page-cta__body {
			margin-left: clamp(13rem, 26vw, 22rem);
			padding-block: clamp(var(--space-32), 5vw, 4rem);
		}
	}

	/* Pose "appoggiate" (arg `pose` di page-cta.php, 2026-09-22): la base della
	   figura poggia sul bordo basso della card, a sinistra — nessuno sbordo sotto.
	     --desk     mezzo busto al portatile (Test Psicometrico): la card è alta almeno
	                quanto la figura, che ci sta tutta dentro.
	     --standing figura intera in piedi (Competenze): più alta della card, la testa
	                esce sopra il bordo alto.
	   Mobile: resta in cima alla card come la posa seduta. */
	.s-page-cta--desk .s-page-cta__figure .character,
	.s-page-cta--desk .s-page-cta__figure .character__img,
	.s-page-cta--desk .s-page-cta__figure .character__video {
		width: min(15rem, 64vw);
	}

	.s-page-cta--standing .s-page-cta__figure .character,
	.s-page-cta--standing .s-page-cta__figure .character__img,
	.s-page-cta--standing .s-page-cta__figure .character__video {
		width: min(7.5rem, 34vw);
	}

	@media (min-width: 840px) {
		.s-page-cta--desk .s-page-cta__card {
			--cta-fig-w: clamp(15rem, 26vw, 24rem);
			--cta-fig-left: clamp(1rem, 3vw, 3rem);
			min-height: calc(var(--cta-fig-w) * 844 / 760 + var(--space-48));   /* rapporto di character-tps-cta.webp */
		}

		.s-page-cta--standing .s-page-cta__card {
			--cta-fig-w: clamp(10rem, 15vw, 14rem);
			--cta-fig-left: clamp(2rem, 5vw, 5rem);
		}

		.s-page-cta--desk .s-page-cta__figure,
		.s-page-cta--standing .s-page-cta__figure {
			left: var(--cta-fig-left);
			bottom: 0;
			width: var(--cta-fig-w);
			transform: none;
		}

		/* Fase 17 (richiesta Federico): il mezzo busto al portatile è CENTRATO in
		   verticale nella card, non più appoggiato al bordo basso. La card è alta
		   almeno quanto la figura + --space-48 (min-height sopra), quindi restano
		   ≥24px sopra e sotto. Solo desktop e solo --desk: --standing resta a terra.
		   Centrata con top/bottom 0 + margin auto su un'altezza ESPLICITA (stesso
		   rapporto del min-height), NON con translateY(-50%): la figura è un
		   [data-reveal], e sia l'ingresso GSAP (y) sia il reset del movimento ridotto
		   (transform:none !important) sovrascrivono il transform. */
		.s-page-cta--desk .s-page-cta__figure {
			top: 0;
			bottom: 0;
			height: calc(var(--cta-fig-w) * 844 / 760);
			margin-block: auto;
		}

		.s-page-cta--desk .s-page-cta__figure .character,
		.s-page-cta--desk .s-page-cta__figure .character__img,
		.s-page-cta--desk .s-page-cta__figure .character__video,
		.s-page-cta--standing .s-page-cta__figure .character,
		.s-page-cta--standing .s-page-cta__figure .character__img,
		.s-page-cta--standing .s-page-cta__figure .character__video {
			width: 100%;
		}

		/* margin-left si misura dal bordo del CONTENUTO della card, la figura dal
		   bordo della card: si toglie il padding sinistro (vedi .s-page-cta__card). */
		.s-page-cta--desk .s-page-cta__body,
		.s-page-cta--standing .s-page-cta__body {
			margin-left: calc(var(--cta-fig-w) + var(--cta-fig-left) - clamp(3rem, 6vw, 5rem) + var(--space-32));
		}
	}

	/* --------------------------------------------- FAQ (continua il navy) --- */
	/* CTA e FAQ condividono il navy di .s-vef-navy--round-top: la FAQ scorre subito
	   sotto la CTA senza stacco, il suo sfondo proprio è trasparente (niente doppio
	   layer né doppio "respiro" — lo porta .s-vef-navy__bg). */
	.s-vef .s-faq {
		margin-top: 0;
		/* stacco ampio dalla CTA: le gambe della donna seduta scendono in questo spazio. */
		padding-top: var(--vef-gap-lg);
	}

	.s-vef .s-faq__bg,
	.s-tps .s-faq__bg,
	.s-comp .s-faq__bg {
		background: transparent;
		border-radius: 0;
	}

	.s-vef .s-faq__bg .navy-band__glow,
	.s-tps .s-faq__bg .navy-band__glow,
	.s-comp .s-faq__bg .navy-band__glow {
		display: none;
	}

	/* ===================================================================
	   Pagina "Test Psicometrico" (page-test-psicometrico.php)
	   Ricostruzione dall'artboard XD "Test psicometrico" (aggiornato 15/09/2026).
	   Stesso pattern architetturale della Verifica Efficacia Formazione (Fase 8):
	   riusa i token e i componenti condivisi (.btn, .cta-demo, .s-faq*, .faq-item*,
	   .character--*); qui solo il layout specifico delle sezioni, pixel-fedele a
	   QUESTO artboard (badge a cerchio + glow radiale in "Come funziona" sono un
	   disegno nuovo, diverso dai "6 punti" di Verifica — confermato con Federico).
	   =================================================================== */

	/* Competenze (artboard XD #4) ha lo stesso impianto: le regole di questo
	   blocco valgono anche per .s-comp*, e --tps-gap è la variabile di entrambe. */
	.s-tps,
	.s-comp {
		position: relative;
		background: var(--c-white);

		--tps-gap: var(--section-gap);
		--tps-gap-lg: var(--section-gap-lg);
	}

	.s-tps :where(h1, h2, h3),
	.s-comp :where(h1, h2, h3) {
		text-wrap: balance;
	}

	/* --- blocco navy condiviso: UN solo layer di sfondo per hero+intro+passi e per
	   CTA+FAQ, stesso meccanismo di .s-vef-navy (breathe-bg.js, [data-breathe]). --- */
	

	

	/* Raggio dell'XD della pagina Test Psicometrico: 100px, come Verifica. */
	

	

	

	

	.s-tps-hero__inner,
	.s-tps-intro__inner,
	.s-tps-passi__inner,
	.s-comp-hero__inner,
	.s-comp-intro__inner,
	.s-comp-passi__inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	

	
	

	/* ---------------------------------------------------------------- HERO --- */
	.s-tps-hero,
	.s-comp-hero {
		position: relative;
		--tps-hero-inset: clamp(var(--space-28), 8vw, 8rem);   /* XD 128, vedi --vef-hero-inset */
		padding-block: var(--space-hero-top) var(--tps-gap);
	}

	.s-tps-hero__inner,
	.s-comp-hero__inner {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-32);
		align-items: center;
	}

	.s-tps-hero__kicker,
	.s-comp-hero__kicker {
		margin: 0 0 var(--space-20);
		padding-left: var(--tps-hero-inset);
		color: var(--c-white);
		font-size: var(--fs-label);   /* Fase 16: kicker/eyebrow (era --fs-h4) */
		font-weight: var(--fw-semibold);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	.s-tps-hero__pill,
	.s-comp-hero__pill {
		position: relative;
		z-index: 2;
		background: var(--c-lime);
		color: var(--c-ink);
		border-radius: var(--radius-hero-pill);
		padding: var(--space-hero-pill-y) clamp(var(--space-24), 6vw, 4rem) var(--space-hero-pill-y) var(--tps-hero-inset);
		overflow: visible;
		padding-bottom: clamp(10rem, 40vw, 12rem);
	}

	

	

	

	

	@media (min-width: 900px) {
		.s-tps-hero,
		.s-comp-hero {
			overflow: visible;
		}

		.s-tps-hero__inner,
		.s-comp-hero__inner {
			padding-bottom: 0;
		}

		.s-tps-hero__pill,
		.s-comp-hero__pill {
			border-radius: var(--radius-pill);
			/* riserva calcolata dalle misure di .s-tps-hero__figure — vedi .s-vef-hero__pill */
			padding-right: calc(clamp(13rem, 20vw, 19rem) + clamp(-1rem, 2vw, 3rem) + var(--space-32));
			padding-bottom: var(--space-hero-pill-y);
		}

		

		.s-tps-hero__figure,
		.s-comp-hero__figure {
			left: auto;
			right: clamp(-1rem, 2vw, 3rem);
			bottom: -6%;
			width: clamp(13rem, 20vw, 19rem);
			max-width: none;
			transform: translateY(14%);
		}
	}

	/* Pose "appoggiate" (2026-09-22, personaggi forniti da Federico): la base della
	   figura poggia sul bordo basso INTERNO della pillola (bottom:0, nessuna
	   traslazione) e la figura sale verso l'alto — niente gambe che pendono sotto,
	   a differenza della donna seduta di Verifica.
	     --desk     (Test Psicometrico) mezzo busto al portatile: poggia il portatile.
	     --standing (Competenze) figura intera in piedi: poggia i piedi.
	   --hero-fig-w è la larghezza della figura e governa anche la riserva di spazio
	   del testo; --hero-fig-ratio è altezza/larghezza dell'immagine ritagliata
	   (chi cambia l'immagine aggiorna il rapporto).
	   Mobile: la figura sta al centro in una banda in fondo alla pillola. */
	.s-tps-hero--desk .s-tps-hero__pill {
		--hero-fig-w: min(16rem, 66vw);
		--hero-fig-ratio: 937 / 760;      /* character-tps-hero.webp */
	}

	.s-comp-hero--standing .s-comp-hero__pill {
		--hero-fig-w: min(7rem, 30vw);
		--hero-fig-ratio: 1300 / 403;     /* character-comp-hero.webp */
	}

	.s-tps-hero--desk .s-tps-hero__pill,
	.s-comp-hero--standing .s-comp-hero__pill {
		padding-bottom: calc(var(--hero-fig-w) * var(--hero-fig-ratio) + var(--space-16));
	}

	.s-tps-hero--desk .s-tps-hero__figure,
	.s-comp-hero--standing .s-comp-hero__figure {
		bottom: 0;
		width: var(--hero-fig-w);
		transform: translateX(-50%);
	}

	/* Desktop: sulla destra della pillola, dentro il tratto DRITTO del bordo basso
	   (--hero-fig-right sta prima dell'inizio della curva dello "stadio", altrimenti
	   la base della figura sporgerebbe sul navy). La figura in piedi è più alta della
	   pillola: la testa esce sopra il bordo alto, nello spazio accanto al kicker. */
	@media (min-width: 900px) {
		.s-tps-hero--desk .s-tps-hero__pill {
			/* Fase 17 (richiesta Federico): leggermente più grande di prima (era
			   11/20vw/25rem). Solo questa figura, non .s-comp-hero--standing. */
			--hero-fig-w: clamp(12rem, 22vw, 27rem);
			--hero-fig-right: clamp(3rem, 8vw, 10rem);
		}

		.s-comp-hero--standing .s-comp-hero__pill {
			--hero-fig-w: clamp(8rem, 10vw, 9.5rem);   /* tetto: la testa resta sotto l'header */
			--hero-fig-right: clamp(6rem, 13vw, 15rem);   /* piedi fuori dalla curva */
		}

		.s-tps-hero--desk .s-tps-hero__pill,
		.s-comp-hero--standing .s-comp-hero__pill {
			padding-right: calc(var(--hero-fig-w) + var(--hero-fig-right) + var(--space-24));
			padding-bottom: var(--space-hero-pill-y);
		}

		.s-tps-hero--desk .s-tps-hero__figure,
		.s-comp-hero--standing .s-comp-hero__figure {
			right: var(--hero-fig-right);
			bottom: 0;
			transform: none;
		}

		/* Fase 17 (richiesta Federico): SOLO il personaggio dell'hero del Test
		   Psicometrico, centrato in verticale sulla pillola invece che appoggiato al
		   bordo basso. `.s-comp-hero--standing` (Competenze, la donna in piedi) non è
		   toccata: resta a terra. Nessun [data-reveal] su questa figura (above-the-fold,
		   niente ingresso GSAP) → translateY va bene, non serve la tecnica
		   top/bottom/margin-auto usata per la CTA (quella sì animata). */
		.s-tps-hero--desk .s-tps-hero__figure {
			top: 50%;
			bottom: auto;
			transform: translateY(-50%);
		}
	}

	/* Niente gambe che scendono sotto la pillola → niente riserva d'overhang.
	   Fase 18 (#4): lo stacco dall'hero lo dà già il `padding-bottom` dell'hero
	   (--tps-gap); con un altro --tps-gap qui si sommavano due stacchi di sezione
	   nella stessa fascia (230px a 1440 contro i 115 dello standard). */
	.s-tps-hero--desk + .s-tps-intro,
	.s-comp-hero--standing + .s-comp-intro {
		/* Fase 19 (#2): solo la differenza fra --space-intro e lo stacco dell'hero */
		padding-top: calc(var(--space-intro) - var(--tps-gap));
	}

	.s-tps-intro + .s-tps-passi,
	.s-comp-intro + .s-comp-passi {
		padding-top: var(--space-intro);   /* Fase 19 (#2): simmetrico a quello sopra */
	}

	/* -------------------------------------------------------- INTRODUZIONE --- */
	.s-tps-intro,
	.s-comp-intro {
		/* position:relative: contenitore del campo decori procedurale (deco-field.js). */
		position: relative;
		/* Fase 18 (#4): in basso niente padding, lo stacco verso i passi è il
		   `padding-top` di `.s-tps-passi` (uno stacco solo, non due sommati). */
		padding-block: var(--tps-gap-lg) 0;
	}


	

	


	/* ------------------------------------------ COME FUNZIONA, 5 PASSI ------ */
	.s-tps-passi,
	.s-comp-passi {
		position: relative;
		padding-block: var(--tps-gap) var(--tps-gap-lg);
		overflow: clip;
	}

	/* La sfumatura di questi "passi" è ora `.navy-band__glow`, dentro `.s-tps-navy__bg`
	   / `.s-comp-navy__bg` (Fase 16, #6/#9): qui era un fratello del layer che
	   respira, restava a piena larghezza quando il navy si restringeva. */

	

	.s-tps-passi__grid,
	.s-comp-passi__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(var(--space-48), 10vw, 8rem) clamp(var(--space-32), 4vw, var(--space-48));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	

	

	.s-tps-passo__title,
	.s-page-step__title {
		grid-area: title;
		align-self: center;
		margin: 0;
		color: var(--c-white);
		font-size: var(--fs-body-lg);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
	}

	

	.s-tps-passo__text,
	.s-comp-passo__text {
		grid-area: text;
		margin: clamp(var(--space-20), 3vw, var(--space-32)) 0 0;
		max-width: 40ch;
		color: var(--color-text-soft);
		font-size: var(--fs-body);
		font-weight: var(--fw-semibold);
	}

	@media (min-width: 700px) {
		.s-tps-passi__grid,
		.s-comp-passi__grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* Fase 18 (#5, Federico: con 5 passi l'ultima riga lasciava un posto vuoto a
	   destra). Griglia a 6 colonne in cui ogni passo ne occupa 2: le 3 colonne
	   restano identiche, ma una riga incompleta può partire da metà colonna e
	   finire centrata. Vale per qualunque numero di passi (il cliente ne può
	   mettere fino a 8): 2 passi soli sull'ultima riga → colonne 2-5, 1 solo →
	   colonne 3-4. */
	@media (min-width: 1024px) {
		.s-tps-passi__grid {
			grid-template-columns: repeat(6, 1fr);
		}

		.s-tps-passi__grid > li {
			grid-column: span 2;
		}

		.s-tps-passi__grid > li:nth-child(3n + 1):nth-last-child(2) {
			grid-column: 2 / span 2;
		}

		.s-tps-passi__grid > li:nth-child(3n + 1):last-child {
			grid-column: 3 / span 2;
		}
	}


	

	

	

	

	

	


	/* --------------------------------------------- FAQ (continua il navy) --- */
	.s-tps .s-faq,
	.s-comp .s-faq {
		margin-top: 0;
		padding-top: var(--tps-gap-lg);
	}

	/* dopo una CTA in posa "appoggiata" nessuna gamba scende nello stacco */
	.s-page-cta--desk + .s-faq,
	.s-page-cta--standing + .s-faq {
		padding-top: var(--section-gap);
	}

	/* ===================================================================
	   Pagina "Competenze" (page-competenze.php)
	   Artboard XD #4 "Competenze" (2026-09-18). Hero, introduzione, CTA e
	   FAQ hanno le coordinate del Test Psicometrico e stanno nelle liste di
	   selettori qui sopra; qui SOLO quello che l'artboard disegna in modo diverso:
	   il sottotitolo "Come funziona" e i 4 passi senza titolo, col trattino lime
	   ACCANTO al badge invece che sotto.
	   =================================================================== */

	/* XD: il titolo di sezione sta su UNA riga a 1920 (43 caratteri): il cap di 34ch
	   della regola condivisa è tarato sul titolo più corto del Test Psicometrico. */
	.s-comp-passi__title {
		max-width: 46ch;
	}

	/* XD: "Come funziona" SegoeUI-Semibold 30, centrato, ~240px sotto il titolo di
	   sezione (50) e ~110px sopra i badge. Padding e non margin: il margine del
	   titolo (--space-block) collasserebbe col suo. */
	.s-comp-passi__subtitle {
		margin: 0 0 var(--space-section);
		padding-top: var(--space-section-lg);
		color: var(--c-white);
		font-size: var(--fs-h4);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
		text-align: center;
	}

	/* XD: i grassetti del docx, più marcati del testo attorno (come Verifica) */
	.s-comp-intro__text strong,
	.s-comp-passo__text strong {
		font-weight: var(--fw-bold);
	}

	/* XD: badge (d64) e trattino lime sulla STESSA riga, trattino centrato sul badge a
	   ~21px; il testo scende sotto, allineato all'inizio del trattino. Da 840px in su:
	   sotto, il passo si impila centrato come tutti gli altri (blocco mobile in fondo). */
	@media (min-width: 840px) {
		.s-comp-passo {
			grid-template-areas:
				"num rule"
				"gap text";
			column-gap: var(--space-20);
		}

		.s-comp-passo__rule {
			align-self: center;
			margin-top: 0;
		}
	}

	/* XD: 4 passi su una riga. 2 colonne da 700px (soglia dei passi), 4 da 1200px
	   (scala di riferimento): a 3 colonne il quarto passo resterebbe da solo. */
	@media (min-width: 1200px) {
		.s-comp-passi__grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	

	/* ===================================================================
	   PAGINE SECONDARIE — componenti condivisi (Fase 13)
	   Contatti · Richiedi una demo · archivio blog · archivi · ricerca ·
	   singolo articolo.

	   Fonte: artboard XD "Contatti" (#4) — l'unica pagina-con-modulo davvero
	   disegnata; l'artboard "Demo" (#5) è ancora il template generico.
	   Geometria in scratch-xd/f13/contatti-coords.txt (artboard 1920):

	     fascia navy   y=11   1914×1458  r 0 0 100 100
	     pillola lime  y=449  x=176  1568×207  r540 (stadio)
	     titolo        y=512  x=304 → rientro 128px dal bordo pillola, Black 60
	     intro 2 col   y=1122 titolo 80 (sx) · y=1160 testo 24 (dx)
	     modulo        y=1615 x=459  1033×750  (segnaposto grigio)
	     FAQ navy      y=2492 1920×1514 r 50 50 0 0

	   Un solo set di regole per tutte e sei le pagine: il markup viene dai
	   partial condivisi (page-hero / page-steps / page-form / page-faq /
	   blog-list), quindi qui NON esistono varianti per pagina — solo
	   modificatrici (CLAUDE.md §centralizzazione degli stili).
	   =================================================================== */
	.s-page {
		position: relative;
		background: var(--c-white);

		/* Ritmo verticale della pagina. --page-gap è lo stacco standard fra blocchi;
		   --page-gap-lg è lo stacco sotto la pillola quando ci scende un personaggio
		   seduto (XD: pillola a y=656, introduzione a y=1122 → 466px @1920). */
		--page-gap: var(--section-gap);
		/* minimo 9rem: su mobile il personaggio seduto scende ~113px sotto la pillola
		   e con meno spazio finirebbe addosso al titolo dell'introduzione. */
		/* Fase 16 (#3): minimo 11rem = overhang misurato (~113px) + --space-section (64)
		   a 390px → stacco visibile gambe→titolo ≈ 64px (con 9rem era 31px). */
		--page-gap-lg: clamp(11rem, 24vw, 29rem);

		/* Rientro del testo dal bordo della pillola "a stadio": sotto questo valore il
		   testo finisce sulla curva. XD: pillola x=176, testo x=304 → 128px. */
		--page-hero-inset: clamp(var(--space-28), 8vw, 8rem);
	}

	.s-page :where(h1, h2, h3) {
		text-wrap: balance;
	}

	/* --- fascia navy: UN solo layer di sfondo per hero + eventuali sezioni che
	   proseguono sul navy (i "passi" della pagina Demo). È lui a ricevere il
	   "respiro" (breathe-bg.js, [data-breathe]) e gli angoli verso il bianco:
	   dove c'è un raggio c'è una cucitura, e il JS lo legge dal CSS
	   (CLAUDE.md §fasce navy ↔ bianco). --- */
	.s-page-navy {
		position: relative;
		/* il bagliore magenta e i decori restano dentro la fascia */
		overflow: clip;
	}

	/* La sfumatura è `.navy-band__glow`, condivisa con home-intro/VEF/TPS/Competenze
	   (Fase 16, #6/#9) — parametri della sfumatura di Demo, il riferimento di
	   Federico. Definita una sola volta accanto al contratto `[data-breathe]`. */

	/* ---------------------------------------------------------------- HERO --- */
	.s-page-hero {
		position: relative;     /* contenitore del campo decori procedurale */
		z-index: 1;
		color: var(--c-white);
		padding-block: var(--space-hero-top) var(--page-gap);
	}

	/* Fase 18 (#3/#9, Federico: «hero coerenti per dimensione, forma e spaziature»):
	   non c'è più una riserva sopra la pillola per la testa del personaggio (era
	   `padding-top: clamp(5rem, 16vw, 19rem)`, pillola 76px più in basso che nei
	   moduli a 1440px). Come negli hero di Verifica/TPS/Competenze il personaggio sta
	   dentro la pillola, e la pillola parte sempre a --space-hero-top dall'header.
	   Resta solo, con la posa seduta, lo spazio per le gambe che pendono SOTTO la
	   pillola: altrimenti finirebbero oltre il bordo della fascia navy.
	   character-seated.webp: altezza = 1.512 × larghezza, seduta al 52% dall'alto →
	   sotto il bordo scende il 48% dell'altezza = 0.726 × larghezza. */
	.s-page-hero--figure-seated {
		--ph-seat-w: min(11rem, 40vw);
		padding-bottom: calc(var(--ph-seat-w) * 0.726 + var(--page-gap));
	}

	.s-page-hero__inner {
		position: relative;
		z-index: 2;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	/* decori: set fisso di fallback, deco-field.js lo sostituisce col campo orbitale.
	   Posizioni e diametri in % dall'XD (magenta d51 @550,262 · bianco d22 @333,897 ·
	   magenta d26 @1706,897 su artboard 1920×1458). */
	

	/* Posizioni tenute nella fascia perimetrale, non sulle coordinate esatte dell'XD:
	   questo set è solo il fallback senza JS (la fedeltà dei decori non è richiesta —
	   sono procedurali, decisione Federico 2026-09-04) e sulle pagine di testo un
	   pallino a metà colonna finirebbe dentro una parola. */
	.s-page-hero__deco--a { left: 6%; top: 14%; width: 2.6%; background: var(--c-magenta); }
	/* Fase 16 (#2): a 8%/82% finiva sotto il titolo dell'introduzione a due colonne
	   (`.s-page-hero__intro-title`, che parte dallo stesso inset di kicker/pillola) —
	   spostato più a sinistra, oltre l'inset, e più in basso, nel margine di sezione. */
	.s-page-hero__deco--b { left: 2%; top: 92%; width: 1.15%; background: var(--c-white); }
	.s-page-hero__deco--c { left: 94%; top: 46%; width: 1.35%; background: var(--c-magenta); }

	/* Sotto i 900px i decori del mockup spariscono in tutto il sito (il layout passa a
	   flusso verticale e deco-field.js non si monta): qui vale lo stesso, altrimenti i
	   pallini in % finirebbero addosso al testo impilato. */
	@media (max-width: 899px) {
		.s-page-hero__deco {
			display: none;
		}
	}

	.s-page-hero__kicker {
		margin: 0 0 var(--space-20);
		padding-left: var(--page-hero-inset);
		color: var(--c-white);
		font-size: var(--fs-label);   /* Fase 16: kicker/eyebrow (era --fs-h4) */
		font-weight: var(--fw-semibold);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	/* .s-page-hero__stage = pillola + personaggio. Esiste perché il personaggio "a
	   mezzo busto" (pagina Demo) deve stare DIETRO la pillola: dentro la pillola non
	   potrebbe, un figlio con z-index negativo resta comunque sopra lo sfondo del
	   proprio contesto di impilamento. */
	

	.s-page-hero__pill {
		position: relative;
		z-index: 2;
		overflow: visible;
		background: var(--c-lime);
		color: var(--c-ink);
		border-radius: var(--radius-hero-pill);
		padding: var(--space-hero-pill-y) clamp(var(--space-24), 6vw, 4rem) var(--space-hero-pill-y) var(--page-hero-inset);
	}

	.s-page-hero__title {
		margin: 0;
		max-width: 28ch;
		color: var(--c-ink);
		/* Fase 16: h1 di pagina (era --fs-h2/XD 50, XD dava 60 — scala priva di quello
		   step). Peso Black dell'XD → --fw-bold (700), il massimo in uso nel sito. */
		font-size: var(--fs-h1);
		font-weight: var(--fw-bold);
		line-height: var(--lh-snug);
		letter-spacing: 0;
	}

	/* titoli lunghi (titolo di un articolo, query di ricerca): uno step più giù, e
	   nessun limite in ch — la larghezza la governa già la pillola. */
	.s-page-hero__title--compact {
		max-width: 34ch;
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
	}

	/* Fase 16 (#10): quando il componente ha anche `intro_title`, la pillola scende a
	   <p> e il vero h1 della pagina è `.s-page-hero__intro-title` — questa non deve più
	   essere la scritta più grande della pagina, un solo step sotto (etichetta, non h1). */
	.s-page-hero__title--label {
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
	}

	/* Fase 18 (#3): stesso stacco e stesso peso del sottotitolo degli hero dei moduli
	   (`.s-vef-hero__sub` & co.), prima semibold con uno stacco più corto. */
	.s-page-hero__sub {
		margin: clamp(var(--space-24), 3.2vw, var(--space-48)) 0 0;
		max-width: 52ch;
		color: var(--c-navy);
		font-size: var(--fs-body-lg);
		font-weight: var(--fw-bold);
	}

	.s-page-hero__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 var(--space-8);
		margin-top: clamp(var(--space-20), 3vw, var(--space-32));
		padding-left: var(--page-hero-inset);
		color: var(--color-text-muted);
		font-size: var(--fs-label);
		font-weight: var(--fw-semibold);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	/* --- personaggio ------------------------------------------------------- */
	.s-page-hero__figure {
		position: absolute;
	}

	.s-page-hero__figure .character,
	.s-page-hero__figure .character__img,
	.s-page-hero__figure .character__video {
		display: block;
		width: 100%;
		height: auto;
	}

	/* seduto sul bordo interno inferiore della pillola (XD Contatti): il sedere è a
	   filo del bordo, le gambe scendono sul navy sotto. Base = mobile: siede al
	   centro e la pillola riserva la banda in basso. */
	.s-page-hero__stage--seated .s-page-hero__pill {
		padding-bottom: clamp(10rem, 40vw, 12rem);
	}

	.s-page-hero__stage--seated .s-page-hero__figure {
		left: 50%;
		bottom: 0;
		z-index: 3;
		width: var(--ph-seat-w);
		/* character-seated.webp (1199×1813): la linea di seduta cade al ~52% dall'alto,
		   cioè al 48% dal basso — con bottom:0 e translateY(48%) il sedere finisce
		   esattamente sul bordo della pillola e sotto scendono solo le gambe. */
		transform: translate(-50%, 48%);
	}

	/* Personaggio DENTRO la pillola, a mezzo busto (pagina Demo) — riscritto in Fase 17
	   su segnalazione di Federico: prima stava per lo più SOPRA la pillola (sul navy,
	   `top:0` nel padding-top riservato dallo stage, `z-index:0` per nascondere solo il
	   taglio netto sul fondo dell'immagine dietro il bordo alto) — «dentro la pillola
	   verde come le altre, non sopra». Ora stessa logica di `--stage--seated`: siede
	   DENTRO la pillola (`bottom:0`, contenuto nel `padding-bottom` riservato) con
	   `z-index:3`, sopra lo sfondo lime — non più dietro (quello, `z-index:0`, è ciò
	   che lo rendeva invisibile: un fratello di `.s-page-hero__pill`, non un suo figlio
	   come nell'hero di TPS/Competenze, dipende SEMPRE da un z-index esplicito per
	   stare sopra il lime). */
	.s-page-hero__stage--behind {
		padding-top: 0;
	}

	.s-page-hero__stage--behind .s-page-hero__pill {
		/* character-tablet.webp, rapporto 1600/1560 */
		padding-bottom: calc(min(12rem, 46vw) * (1600 / 1560) + var(--space-24));
	}

	.s-page-hero__stage--behind .s-page-hero__figure {
		left: 50%;
		bottom: 0;
		z-index: 3;
		width: min(12rem, 46vw);
		transform: translateX(-50%);
	}

	/* --- introduzione (Fase 18 #4: impilata e centrata, vedi .s-vef-pratica__intro) --- */
	.s-page-hero__intro {
		margin-top: var(--space-intro);   /* Fase 19 (#2): era --page-gap */
	}

	/* Solo con il personaggio SEDUTO: sotto la pillola scendono le gambe e serve
	   lo spazio dell'XD (pillola a y=656, introduzione a y=1122 → 466px @1920).
	   Col mezzo busto (Fase 17: dentro la pillola, contenuto nel suo padding-bottom/
	   -right, non più sporgente) non c'è overhang da riservare: quello spazio
	   resterebbe vuoto. */
	.s-page-hero--figure-seated .s-page-hero__intro {
		margin-top: var(--page-gap-lg);
	}

	.s-page-hero__intro-title {
		margin: 0;
		color: var(--c-white);
		/* Fase 16 (#10): è sempre l'h1 vero della pagina quando presente (vedi
		   page-hero.php, $skimup_ph_intro_tag) — deve restare la scritta più grande
		   (era --fs-h2/--fs-display XD 80, che la rendeva più piccola della pillola). */
		font-size: var(--fs-h1);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-tight);
		/* self-contained: quando è l'h1 della pagina (vedi page-hero.php) non deve
		   ereditare il letter-spacing dell'h1 di base (--tracking-tight). */
		letter-spacing: 0;
	}

	

	.s-page-hero__intro-text p {
		margin: 0 0 var(--space-16);
	}

	.s-page-hero__intro-text p:last-child {
		margin-bottom: 0;
	}

	/* ------------------------------------------------------------- PASSI --- */
	/* Componente dell'artboard XD "Demo": badge cerchio magenta d64 + titolo 24 +
	   trattino lime 68×13 r7 + testo 18, su 3 colonne. */
	.s-page-steps {
		position: relative;
		z-index: 1;
		color: var(--c-white);
		padding-block: 0 var(--page-gap);
	}

	/* La sfumatura di questo componente (Demo) è la sorgente dei parametri di
	   `.navy-band__glow` (Fase 16, #6/#9), ora dentro `.s-page-navy__bg`: qui era un
	   fratello del layer che respira, restava a piena larghezza quando il navy si
	   restringeva. */

	.s-page-steps__inner {
		position: relative;
		z-index: 2;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	.s-page-steps__title {
		margin: 0 auto var(--space-block);
		max-width: 34ch;
		color: var(--c-white);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
		text-align: center;
	}

	.s-page-steps__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(var(--space-48), 8vw, 6rem) clamp(var(--space-32), 4vw, var(--space-48));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	

	.s-page-step__badge {
		grid-area: num;
		align-self: start;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		background: var(--c-magenta-ink);
		color: var(--c-white);
		font-size: var(--fs-h4);
		font-weight: var(--fw-bold);
		line-height: 1;
	}

	

	.s-page-step__rule {
		grid-area: rule;
		width: 4.25rem;
		height: 0.8125rem;
		/* XD: 131px fra la base del titolo e il trattino (artboard 1920) */
		margin-top: clamp(var(--space-24), 6.8vw, 6.8rem);
		border-radius: var(--radius-pill);
		background: var(--c-lime);
		transform-origin: 0% 50%;
	}

	.s-page-step__text {
		grid-area: text;
		/* XD: 52px fra il trattino e il testo (artboard 1920) */
		margin: clamp(var(--space-20), 3.2vw, 3.25rem) 0 0;
		max-width: 40ch;
		color: var(--color-text-soft);
		font-size: var(--fs-body);
	}

	/* -------------------------------------------------------- MODULO --- */
	.s-page-form {
		position: relative;
		z-index: 1;
		background: var(--c-white);
		color: var(--c-ink);
		padding-block: var(--page-gap) var(--space-section);
	}

	.s-page-form__inner {
		/* XD: blocco modulo 1033px su artboard 1920 (~54%) → 64rem. */
		max-width: 64rem;
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	.s-page-form__title {
		margin: 0 0 var(--space-block);
		color: var(--c-ink);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
		text-align: center;
	}

	/* Il rettangolo grigio dell'XD (#EBEBEB) è il segnaposto del modulo: qui diventa
	   il contenitore reale. Superficie appena staccata dal bianco, così i campi
	   (bianchi) restano l'elemento più chiaro del blocco e si capisce dove comincia
	   e dove finisce l'area di compilazione. */
	.s-page-form__card {
		background: var(--c-surface-soft);
		border-radius: var(--radius-card);
		padding: clamp(var(--space-24), 5vw, var(--space-64));
	}

	.s-page-form__note {
		margin: 0 0 var(--space-24);
		color: var(--c-ink-muted);
		font-size: var(--fs-label);
	}

	

	.s-page-form__fallback a {
		color: var(--c-navy);
		font-weight: var(--fw-semibold);
	}

	/* --- Forminator: aggancio allo stile del sito (cform-color-option: theme) --- */
	.s-page-form .forminator-ui.forminator-custom-form {
		--forminator-accent: var(--c-magenta);
	}

	.s-page-form .forminator-row {
		margin-bottom: var(--space-20);
	}

	.s-page-form .forminator-label,
	.s-page-form .forminator-field label {
		color: var(--c-ink);
		font-size: var(--fs-label);
		font-weight: var(--fw-semibold);
	}

	.s-page-form input.forminator-input,
	.s-page-form textarea.forminator-textarea,
	.s-page-form select.forminator-select,
	.s-page-form .forminator-select .select2-selection {
		border: 1px solid var(--border-hairline-strong);
		border-radius: var(--radius-md);
		padding: var(--space-12) var(--space-16);
		/* 16px minimo: sotto, iOS zooma automaticamente sul focus (CLAUDE.md) */
		font-size: var(--fs-body);
		color: var(--c-ink);
		background: var(--c-white);
	}

	.s-page-form textarea.forminator-textarea {
		min-height: 8rem;
	}

	.s-page-form input.forminator-input:focus,
	.s-page-form textarea.forminator-textarea:focus,
	.s-page-form select.forminator-select:focus {
		border-color: var(--c-navy);
		outline: 3px solid var(--color-focus);
		outline-offset: 1px;
	}

	/* Il CSS di Forminator (forminator-form-default.base.min.css, e la sua variante
	   generata per-form in wp-content/uploads/forminator/…) non è mai dentro un
	   @layer: qualunque nostra dichiarazione qui, essendo nel layer `sections`, perde
	   SEMPRE contro di lui a parità o perfino a specificità inferiore (un layer
	   nominato è sempre "prima", quindi più debole, di uno stile non in layer — stessa
	   regola già documentata sopra per `.s-vef-fork__lane-title`). Verificato: senza
	   `!important` il bottone restava 2px/10px/14px/500 di Forminator anche con questa
	   regola presente. Radius/padding/tipografia vengono già dalla base condivisa dei
	   bottoni sopra (Fase 16 #20): qui si ripetono SOLO per poterle forzare. */
	.s-page-form .forminator-button-submit,
	.s-page-form button.forminator-button,
	.s-page--mailpoet .mailpoet_submit {
		min-height: var(--touch-target) !important;
		padding: var(--space-12) var(--space-24) !important;
		border-radius: var(--radius-pill) !important;
		font-weight: var(--fw-bold) !important;
		font-size: var(--fs-nav) !important;
		letter-spacing: var(--tracking-wide) !important;
		text-transform: uppercase !important;
		background: var(--c-magenta-ink) !important;
		border: 0 !important;
		color: var(--c-white) !important;
		cursor: pointer;
		transition: background-color var(--dur-hover) var(--ease-out);
	}

	/* Mai un hover che porta a bianco su superficie chiara (CLAUDE.md): qui va a navy. */
	.s-page-form .forminator-button-submit:hover,
	.s-page-form button.forminator-button:hover,
	.s-page--mailpoet .mailpoet_submit:hover {
		background: var(--c-navy) !important;
		color: var(--c-white);
	}

	.s-page-form .forminator-checkbox-label,
	.s-page-form .forminator-consent__label,
	.s-page-form .forminator-consent label {
		font-weight: var(--fw-regular);
		font-size: var(--fs-label);
		color: var(--c-ink-muted);
		line-height: var(--lh-normal);
	}

	.s-page-form .forminator-consent__label a,
	.s-page-form .forminator-consent a,
	.s-page-form .forminator-checkbox-label a {
		color: var(--c-navy);
		font-weight: var(--fw-semibold);
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	

	/* messaggi di errore/successo: leggibili sulla superficie chiara della card */
	.s-page-form .forminator-error-message,
	.s-page-form .forminator-response-message {
		font-size: var(--fs-label);
		font-weight: var(--fw-semibold);
	}

	/* ============================================================ BLOG ===== */
	/* Archivio, archivi per categoria/tag/autore/data, risultati di ricerca.
	   Nessun mockup XD: stessi componenti delle altre pagine interne + una griglia
	   di card (non il carosello della home: qui gli articoli si scandiscono, non si
	   sfogliano — e senza JS resta tutto raggiungibile). */
	.blog-archive {
		position: relative;
		z-index: 1;
		background: var(--c-white);
		color: var(--c-ink);
		padding-block: var(--page-gap) var(--space-section);
	}

	.blog-archive__inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}
	/* --- corpo delle viste generiche: Pagina (page.php) e 404 (404.php) ---------
	   Fino alla Fase 15 quelle due viste cadevano su index.php. Ora si aprono con la
	   stessa fascia navy e lo stesso hero condiviso di Contatti/Demo/blog, e il corpo
	   sta in una colonna di lettura larga --measure. La tipografia del contenuto
	   renderizzato da the_content() non e' ridichiarata qui: .s-page-content__body sta
	   nelle stesse liste di .post-article__body / .content-fallback__body, piu' sopra. */
	.s-page-content {
		position: relative;
		z-index: 1;
		background: var(--c-white);
		color: var(--c-ink);
		padding-block: var(--page-gap) var(--space-section);
	}

	.s-page-content__inner {
		max-width: var(--measure);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	/* --- pagine di MailPoet (single-mailpoet_page.php): conferma, gestione e
	   disiscrizione. Il modulo "Gestisci la tua iscrizione" lo genera MailPoet con
	   il suo foglio (mailpoet-public.css), fuori da ogni @layer: come per Forminator,
	   qui si vince solo con !important. Gli accenti blu di WordPress diventano quelli
	   del sito; i testi da 15px salgono a 16 (minimo del corpo). --- */
	.s-page-mailpoet__actions {
		margin-top: var(--space-block);
	}

	.s-page--mailpoet .mailpoet-manage-subscription {
		max-width: none !important;
		color: var(--c-ink) !important;
	}

	.s-page--mailpoet .mailpoet-manage-subscription h2,
	.s-page--mailpoet legend.mailpoet_segment_label {
		margin: 0 0 var(--space-8) !important;
		color: var(--c-navy) !important;
		font-size: var(--fs-h4) !important;
		font-weight: var(--fw-semibold) !important;
		line-height: var(--lh-snug) !important;
	}

	.s-page--mailpoet :is(.mailpoet-manage-subscription-section-description, .mailpoet-manage-subscription-lists-description, .mailpoet_field_description, .mailpoet-change-email-info) {
		color: var(--c-ink-muted) !important;
		font-size: var(--fs-body) !important;
		line-height: var(--lh-normal) !important;
	}

	.s-page--mailpoet :is(.mailpoet_text_label, .mailpoet_select_label) {
		color: var(--c-ink) !important;
		font-size: var(--fs-label) !important;
		font-weight: var(--fw-semibold) !important;
	}

	.s-page--mailpoet .mailpoet-manage-subscription-email strong,
	.s-page--mailpoet .mailpoet_select {
		border: 1px solid var(--border-hairline-strong) !important;
		border-radius: var(--radius-md) !important;
		padding: var(--space-12) var(--space-16) !important;
		min-height: var(--touch-target) !important;
		height: auto !important;
		font-size: var(--fs-body) !important;
		color: var(--c-ink) !important;
	}

	.s-page--mailpoet .mailpoet-manage-subscription-email strong {
		background: var(--c-surface-soft) !important;
		font-weight: var(--fw-semibold) !important;
		overflow-wrap: anywhere;
	}

	.s-page--mailpoet .mailpoet_select {
		background-color: var(--c-white) !important;
	}

	.s-page--mailpoet .mailpoet_select:focus {
		border-color: var(--c-navy) !important;
		outline: 3px solid var(--color-focus) !important;
		outline-offset: 1px;
		box-shadow: none !important;
	}

	/* scelta Sì/No per lista: pillole; quella selezionata è lime con testo navy
	   (stesso trattamento della voce attiva del menu mobile) */
	.s-page--mailpoet .mailpoet-manage-subscription-choice-label {
		min-height: var(--touch-target) !important;
		border: 1px solid var(--border-hairline-strong) !important;
		border-radius: var(--radius-pill) !important;
		background: var(--c-white) !important;
		color: var(--c-navy) !important;
		font-size: var(--fs-label) !important;
		font-weight: var(--fw-semibold) !important;
		align-items: center;
	}

	.s-page--mailpoet .mailpoet-manage-subscription-choice-label:has(input:checked) {
		border-color: var(--c-navy) !important;
		background: var(--c-lime) !important;
		color: var(--c-navy) !important;
	}

	.s-page--mailpoet .mailpoet-manage-subscription-choice-label:has(input:focus-visible) {
		outline: 3px solid var(--c-navy) !important;
		outline-offset: 2px;
	}

	.s-page--mailpoet .mailpoet_radio {
		accent-color: var(--c-navy);
	}

	.s-page--mailpoet .mailpoet-manage-subscription-list-name {
		color: var(--c-ink) !important;
		font-size: var(--fs-body) !important;
		font-weight: var(--fw-semibold) !important;
	}

	/* le tre vie d'uscita del 404, sotto il campo di ricerca */
	.s-page-404__links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-16);
		margin-top: var(--space-32);
	}

	.s-page-404__link,
	.s-page-mailpoet__back {
		display: inline-flex;
		align-items: center;
		background: var(--c-navy);
		color: var(--c-white);
		text-decoration: none;
	}

	/* hover: NON va a bianco — la sezione sotto e' bianca e il bottone sparirebbe
	   (regola di CLAUDE.md, bug gia' corretto una volta sul bottone "VEDI TUTTI"). */
	.s-page-404__link:hover,
	.s-page-404__link:focus-visible,
	.s-page-mailpoet__back:hover,
	.s-page-mailpoet__back:focus-visible {
		background: var(--c-magenta-ink);
		color: var(--c-white);
	}

	/* --- filtro per categoria (link veri, non un <select>) --- */
	.blog-filter {
		margin-bottom: var(--space-block);
	}

	.blog-filter__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-12);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.blog-filter__pill {
		display: inline-flex;
		align-items: center;
		min-height: var(--touch-target);
		padding: var(--space-8) var(--space-20);
		border: 1px solid var(--border-hairline);
		border-radius: var(--radius-pill);
		background: var(--c-white);
		color: var(--c-navy);
		font-size: var(--fs-nav);
		font-weight: var(--fw-bold);
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
	}

	/* hover → navy, MAI bianco: la sezione sotto è già bianca (CLAUDE.md) */
	.blog-filter__pill:hover,
	.blog-filter__pill:focus-visible {
		background: var(--c-navy);
		border-color: var(--c-navy);
		color: var(--c-white);
	}

	/* categoria attiva: lime + inchiostro (≈13:1). Non magenta+bianco: 3,8:1, sotto
	   l'AA per testo di questa dimensione — stessa ragione già annotata in Fase 7
	   per .back-link:hover. */
	.blog-filter__pill.is-current {
		background: var(--c-lime);
		border-color: var(--c-lime);
		color: var(--c-ink);
	}

	.blog-list__grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
		gap: clamp(var(--space-24), 3vw, var(--space-48)) var(--space-32);
		margin: 0 0 var(--space-block);
		padding: 0;
		list-style: none;
	}

	/* --- stato vuoto: un elenco vuoto senza spiegazione è un vicolo cieco --- */
	.blog-empty {
		max-width: 52ch;
		margin-inline: auto;
		padding-block: var(--space-block);
		text-align: center;
	}

	.blog-empty__title {
		margin: 0 0 var(--space-16);
		color: var(--c-ink);
		font-size: var(--fs-h2);   /* Fase 16: coerente col tag h2 (era --fs-h3, mismatch) */
		font-weight: var(--fw-semibold);
	}

	.blog-empty__text {
		margin: 0 0 var(--space-24);
		color: var(--c-ink-muted);
	}

	.blog-empty__action {
		margin: 0;
	}

	/* --- campo di ricerca (search.php): correggere la query dove si vede il
	   risultato, non tornando indietro --- */
	.search-form {
		max-width: 40rem;
		margin: 0 auto var(--space-block);
	}

	.search-form__label {
		display: block;
		margin-bottom: var(--space-8);
		color: var(--c-ink-muted);
		font-size: var(--fs-label);
		font-weight: var(--fw-semibold);
	}

	.search-form__bar {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-8);
	}

	.search-form__input {
		flex: 1 1 14rem;
		min-height: var(--touch-target);
		padding: var(--space-12) var(--space-20);
		border: 1px solid var(--border-hairline-strong);
		border-radius: var(--radius-pill);
		background: var(--c-white);
		color: var(--c-ink);
		font-family: inherit;
		font-size: var(--fs-body);
	}

	.search-form__input:focus {
		border-color: var(--c-navy);
		outline: 3px solid var(--color-focus);
		outline-offset: 1px;
	}

	.search-form__submit {
		border: 0;
		background: var(--c-navy);
		color: var(--c-white);
		font-family: inherit;
		cursor: pointer;
		transition: background-color var(--dur-hover) var(--ease-out);
	}

	.search-form__submit:hover {
		background: var(--c-magenta-ink);
	}

	/* --- variante "pillola" della barra di ricerca dentro blog-list.php (elenco
	   articoli, sopra il filtro categorie): campo + bottone UNITI come .newsletter-bar,
	   ma su fondo bianco — qui la lista sta sempre su una sezione bianca, mai sotto una
	   fascia navy. MAI hover bianco su bianco: il bottone parte magenta e va a navy
	   (qui l'opposto della variante sopra, che parte navy perché vive già su bianco ma
	   sceglie il tono di riposo diverso — nessuna delle due passa mai per il bianco). */
	.blog-list__search {
		margin-bottom: var(--space-block);
	}

	.search-form--blog {
		max-width: 36rem;
		margin: 0 auto;
	}

	.search-form--blog .search-form__bar {
		flex-wrap: nowrap;
		gap: 0;
		border: 1px solid var(--border-hairline-strong);
		border-radius: var(--radius-pill);
		overflow: hidden;
	}

	.search-form--blog .search-form__input {
		border: 0;
		border-radius: 0;
	}

	.search-form--blog .search-form__input:focus {
		/* overflow:hidden sul contenitore taglia l'outline outset di default — stessa
		   tecnica già usata per .newsletter-bar__submit:focus-visible sopra. */
		outline-offset: -3px;
	}

	.search-form--blog .search-form__submit {
		border-radius: 0;
		background: var(--c-magenta-ink);
	}

	.search-form--blog .search-form__submit:hover,
	.search-form--blog .search-form__submit:focus-visible {
		background: var(--c-navy);
	}

	/* sotto 480px: stesso schema di .newsletter-bar a questa soglia — una pillola unica
	   non regge un a-capo, quindi campo e bottone tornano ognuno una pillola propria su
	   due righe. */
	@media (max-width: 480px) {
		.search-form--blog .search-form__bar {
			flex-wrap: wrap;
			gap: var(--space-8);
			border: 0;
			border-radius: 0;
			overflow: visible;
		}

		.search-form--blog .search-form__input,
		.search-form--blog .search-form__submit {
			flex: 1 1 100%;
			border-radius: var(--radius-pill);
		}

		.search-form--blog .search-form__input {
			border: 1px solid var(--border-hairline-strong);
		}
	}

	/* --- card: variante con meta (archivio/ricerca/correlati). Nel carosello della
	   home la card resta immagine+titolo+estratto, fedele al mockup (Fase 5). --- */
	/* Una riga sola (categoria troncata se lunga): se la meta va a capo su una card
	   e non sulle altre, i titoli della griglia si disallineano e l'elenco perde la
	   linea di base su cui l'occhio scorre. */
	.blog-card__meta {
		display: flex;
		flex-wrap: nowrap;
		align-items: baseline;
		gap: 0 var(--space-8);
		min-width: 0;
		margin-bottom: var(--space-8);
		color: var(--c-ink-muted);
		font-size: var(--fs-label);
		font-weight: var(--fw-semibold);
	}

	.blog-card__cat {
		min-width: 0;
		overflow: hidden;
		color: var(--c-navy);
		text-overflow: ellipsis;
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		white-space: nowrap;
	}

	/* ================================================ SINGOLO ARTICOLO ===== */
	/* Barra di avanzamento della lettura: segue lo scroll 1:1, nessuna transizione
	   CSS. Non è un'animazione (è la posizione, rappresentata) → resta attiva anche
	   con movimento ridotto: toglierla significherebbe togliere un'informazione. */
	.reading-progress {
		position: fixed;
		inset: 0 0 auto;
		z-index: calc(var(--z-header) + 1);
		height: 4px;
		background: transparent;
		pointer-events: none;
	}

	.reading-progress__bar {
		display: block;
		width: 100%;
		height: 100%;
		background: var(--c-lime);
		transform: scaleX(0);
		transform-origin: 0 50%;
	}

	/* L'articolo è una colonna di lettura: pillola del titolo, immagine e testo devono
	   condividere lo stesso bordo, altrimenti l'apertura (larga quanto la pagina) e il
	   corpo sembrano due impaginati diversi. Colonna a 80ch (non 65 come le altre pagine
	   secondarie, --measure resta 65ch ovunque altro): decisione Federico, l'articolo
	   deve leggersi più largo. Tutto centrato, non a bandiera come le altre pagine. */
	.s-page--post .s-page-hero__inner,
	.s-page--post .post-article__back-row {
		max-width: var(--measure);
		text-align: center;
	}

	.s-page--post {
		--page-hero-inset: clamp(var(--space-24), 4vw, var(--space-48));
		--measure: 80ch;
	}

	.s-page--post .s-page-hero__title,
	.s-page--post .s-page-hero__title--compact {
		margin-inline: auto;
		text-align: center;
	}

	/* padding simmetrico: senza kicker (rimosso su questa pagina) non c'è più motivo di
	   tenere l'incasso a sinistra pensato per allinearci il sopratitolo */
	.s-page--post .s-page-hero__pill {
		padding-inline: clamp(var(--space-24), 6vw, 4rem);
		text-align: center;
	}

	.s-page--post .s-page-hero__meta {
		justify-content: center;
		padding-left: 0;
	}

	.post-article__back-row {
		position: relative;
		z-index: 2;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
		padding-top: clamp(var(--space-24), 4vw, var(--space-48));
	}

	/* il link di ritorno vive sul navy: il componente .back-link è tarato sul bianco */
	.post-article__back {
		color: var(--c-white);
	}

	.post-article__back:hover {
		color: var(--c-lime);
	}

	.post-article__back--end {
		color: var(--c-navy);
	}

	.post-article__back--end:hover {
		color: var(--c-magenta);
	}

	.post-article {
		position: relative;
		z-index: 2;
		background: transparent;
		color: var(--c-ink);
		padding-block: var(--page-gap) var(--space-section);
	}

	/* Il testo è a bandiera sinistra (decisione Federico, 2026-09-24: prima era tutto
	   centrato, corpo compreso). L'hero sopra resta centrato come nelle altre pagine
	   interne: la colonna di lettura è comunque centrata nella pagina. */
	.post-article__inner {
		max-width: var(--measure);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	/* Stacco immagine in evidenza → indice → testo. Lo stacco dalla fascia navy sta sul
	   padding di `.post-article`; quello sotto l'immagine è un margine, quindi serve
	   `!important` contro la regola di WP core `:where(figure){margin:0 0 1em}` (fuori
	   dai @layer): senza, l'immagine restava a 17px dal testo. */
	.post-article__image {
		margin: 0 0 var(--space-block) !important;
		border-radius: var(--radius-card);
		overflow: hidden;
		box-shadow: var(--shadow-card);
	}

	.post-article__image:last-child {
		margin-bottom: 0 !important;
	}

	/* Da 1360px (soglia della nav completa) l'indice esce dal flusso e diventa una
	   colonna laterale: griglia a tre colonne con la colonna di lettura AL CENTRO,
	   così immagine e testo restano allineati all'hero come sotto la soglia. L'indice
	   sta nella colonna sinistra sulla stessa riga del corpo: essendo un elemento della
	   griglia, lo sticky si ferma da solo alla fine dell'articolo (categoria e link di
	   ritorno compresi: lì la colonna sinistra è vuota, nessuna sovrapposizione). */
	@media (min-width: 1360px) {
		.post-article__inner {
			display: grid;
			grid-template-columns:
				minmax(0, 1fr)
				min(100%, calc(var(--measure) - 2 * var(--container-pad)))
				minmax(0, 1fr);
			grid-template-areas:
				".   image ."
				"toc body  ."
				".   end   .";
			column-gap: var(--space-48);
			max-width: var(--container-max);
		}

		.post-article__image {
			grid-area: image;
		}

		.post-article__body {
			grid-area: body;
		}

		.post-article__end {
			grid-area: end;
		}

		/* colonna laterale: niente riquadro, resta sotto l'header scorrendo; se l'indice
		   è più alto dello schermo scorre da sé, senza trascinare la pagina */
		.post-toc {
			grid-area: toc;
			position: sticky;
			top: calc(var(--header-height) + var(--space-24));
			align-self: start;
			justify-self: end;
			width: min(100%, 18rem);
			max-height: calc(100vh - var(--header-height) - var(--space-48));
			margin: 0;
			padding: 0;
			overflow-y: auto;
			overscroll-behavior: contain;
			background: transparent;
			border-radius: 0;
		}

		.post-toc__head {
			min-height: 0;
			margin-bottom: var(--space-8);
		}

		.post-toc__toggle {
			display: none;
		}

		.post-toc__link {
			font-size: var(--fs-label);
		}
	}

	.post-article__image img {
		display: block;
		width: 100%;
		height: auto;
	}

	.post-article__pages {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-8);
		margin-top: var(--space-block);
		font-weight: var(--fw-bold);
	}

	.post-article__pages-label {
		color: var(--c-ink-muted);
		font-weight: var(--fw-semibold);
	}

	.post-article__tax {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-8);
		/* è un <p>: senza, il max-width in `ch` della base (su un font di 14px) accorciava
		   il filetto rispetto alla colonna del testo */
		max-width: none;
		margin: var(--space-block) 0 var(--space-32);
		padding-top: var(--space-24);
		border-top: 1px solid rgb(var(--c-navy-rgb) / 0.12);
		font-size: var(--fs-label);
	}

	.post-article__tax-label {
		color: var(--c-ink-muted);
		font-weight: var(--fw-semibold);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	.post-article__cat {
		color: var(--c-navy);
		font-weight: var(--fw-bold);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		text-decoration: none;
	}

	.post-article__cat:hover {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	/* --- "Continua a leggere" --- */
	.post-related {
		position: relative;
		z-index: 1;
		background: var(--c-white);
		color: var(--c-ink);
		padding-block: var(--space-section-sm);
	}

	.post-related__inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	.post-related__title {
		margin: 0 0 var(--space-block);
		color: var(--c-ink);
		font-size: var(--fs-h2);
		font-weight: var(--fw-semibold);
		text-align: center;
	}

	.post-related__grid {
		display: grid;
		/* auto-fit e non auto-fill: i correlati sono sempre 3 e devono riempire la riga
		   invece di ammucchiarsi a sinistra lasciando tracce vuote. Il tetto di 24rem
		   evita che su schermi larghi diventino tre lastroni con immagini alte 500px. */
		grid-template-columns: repeat(auto-fit, minmax(17rem, 24rem));
		justify-content: center;
		gap: clamp(var(--space-24), 3vw, var(--space-48)) var(--space-32);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* ------------------------------------------------------- ≥ 700px ------ */
	@media (min-width: 700px) {
		.s-page-steps__grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* ------------------------------------------------------- ≥ 900px ------ */
	@media (min-width: 900px) {
		.s-page-hero__pill {
			border-radius: var(--radius-pill);   /* XD: stadio, r540 */
		}

		/* Fase 18 (#3): stessa larghezza della pillola dei moduli (`.s-vef-hero__col`:
		   min(80rem, 90%)), prima 82rem/92% — 26px di differenza a 1440px. */
		.s-page-hero__stage {
			max-width: min(80rem, 90%);
			margin-inline: auto;   /* Fase 19 (#1): centrata come quella dei moduli */
		}

		/* Con un'altezza minima (personaggi) il testo resta centrato in verticale. */
		.s-page-hero__pill {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		/* seduto sul bordo DESTRO della pillola: sedere sul bordo, gambe che pendono.
		   Fase 18 (#3): stessa misura del personaggio seduto di Verifica, e la pillola
		   è alta almeno quanto la parte di figura che sta SOPRA il bordo (52% di
		   un'altezza pari a 1.512 × larghezza = 0.786 × larghezza) più un margine:
		   la testa non esce più sopra la pillola. Riserva a destra calcolata come in
		   `.s-vef-hero__pill`: larghezza + scostamento + respiro. */
		.s-page-hero--figure-seated {
			--ph-seat-w: clamp(13rem, 20vw, 19rem);
			--ph-seat-right: clamp(0rem, 3vw, 4rem);
		}

		.s-page-hero__stage--seated .s-page-hero__pill {
			min-height: calc(var(--ph-seat-w) * 0.786 + var(--space-48));
			padding-right: calc(var(--ph-seat-w) + var(--ph-seat-right) + var(--space-32));
			padding-bottom: var(--space-hero-pill-y);
		}

		.s-page-hero__stage--seated .s-page-hero__figure {
			left: auto;
			right: var(--ph-seat-right);
			bottom: 0;
			transform: translateY(48%);
		}

		/* Fase 17 — riscritto tre volte sullo stesso punto, segnalazioni successive di
		   Federico. Prima («l'immagine è dietro alla pillola, non si vede»): `bottom:
		   42%` era una percentuale dell'ALTEZZA DELLO STAGE (qui coincide con quella
		   della pillola, niente più `padding-top` come su mobile) — con un personaggio
		   alto quanto o più della pillola lasciava fuori solo la testa. Poi corretto con
		   un `top` negativo che faceva SPORGERE il personaggio sopra la pillola (sul
		   navy) — ma Federico voleva l'opposto: «dentro la pillola verde come le altre,
		   non sopra». Messo DENTRO con la base sul bordo basso (`bottom: 0`, come
		   `.s-tps-hero--desk`). Infine («centralo verticalmente sulla pillola e
		   rendilo leggermente più grande — usa come esempio il Test Psicometrico»):
		   stessa tecnica di `.s-tps-hero--desk .s-tps-hero__figure` sopra —
		   `top: 50%` + `translateY(-50%)` invece di `bottom: 0`, nessun [data-reveal]
		   su questa figura quindi il transform è sicuro. `--demo-fig-w` sale da
		   clamp(11rem,19vw,20rem) a clamp(12rem,21vw,22rem), stesso ordine di
		   grandezza dell'aumento dato al personaggio del Test Psicometrico
		   (clamp(11rem,20vw,25rem) → clamp(12rem,22vw,27rem)). */
		/* Le custom property vanno sullo STAGE, non sulla pillola: `.s-page-hero__figure`
		   è un FRATELLO di `.s-page-hero__pill` (entrambi figli dello stage), non un suo
		   figlio come in `.s-tps-hero__figure` — dichiarate sulla pillola non arrivavano
		   per eredità alla figura, `var()` cadeva su "invalid at computed-value time" e
		   `width`/`right` tornavano al loro valore iniziale (`auto`): il personaggio
		   riempiva lo stage alla sua dimensione intrinseca, enorme e fuori misura
		   (bug trovato in questo stesso giro, prima di pubblicarlo). */
		.s-page-hero__stage--behind {
			padding-top: 0;
			--demo-fig-w: clamp(12rem, 21vw, 22rem);      /* character-tablet.webp */
			--demo-fig-right: clamp(1rem, 5vw, 7rem);
		}

		/* Fase 18 (#9): il `padding-bottom` del mobile (spazio per il personaggio SOTTO
		   il testo, 221px a 1440) restava attivo anche qui, dove il personaggio sta a
		   DESTRA: la pillola di Demo era alta 435px contro i 174 di Contatti. Ora il
		   padding è quello di tutti gli hero, e l'altezza minima è quella del
		   personaggio (rapporto 1600/1560) più un respiro sopra e sotto. */
		.s-page-hero__stage--behind .s-page-hero__pill {
			min-height: calc(var(--demo-fig-w) * (1600 / 1560) + var(--space-48));
			padding-right: calc(var(--demo-fig-w) + var(--demo-fig-right) + var(--space-24));
			padding-bottom: var(--space-hero-pill-y);
		}

		/* Fase 18 (#6): variante centrata (archivio del blog: solo titolo + sottotitolo).
		   Stessa pillola, stessa larghezza massima, ma al centro della pagina, col
		   rientro simmetrico e il testo centrato. */
		.s-page-hero--center .s-page-hero__stage {
			margin-inline: auto;
		}

		.s-page-hero--center .s-page-hero__pill {
			align-items: center;
			padding-inline: var(--page-hero-inset);
			text-align: center;
		}

		.s-page-hero--center .s-page-hero__kicker,
		.s-page-hero--center .s-page-hero__meta {
			padding-left: 0;
			justify-content: center;
			text-align: center;
		}

		.s-page-hero__stage--behind .s-page-hero__figure {
			left: auto;
			top: 50%;
			bottom: auto;
			right: var(--demo-fig-right);
			width: var(--demo-fig-w);
			transform: translateY(-50%);
		}
	}

	/* ------------------------------------------------------ ≥ 1024px ------ */
	@media (min-width: 1024px) {
		.s-page-steps__grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* ------------------------------------------ movimento ridotto / no-JS ---
	   Reset difensivo: gli ingressi fade+blur (verifica-efficacia.js / home.js) girano
	   dentro SkimupMotion.onMotion e non partono con movimento ridotto — ma se il
	   toggle viene spento a metà animazione la cleanup potrebbe lasciare uno stato
	   sporco. Qui si forza la visibilità. Fase 10: aggiunti footer e personaggi home. */
	/* L'elenco copre OGNI selettore animato dai preset d'ingresso (motion-presets.js:
	   revealFade + molla dei numeri). Quando si aggiunge una sezione con [data-reveal],
	   va aggiunta anche qui. */
	:where(.no-js, :root[data-reduced-motion="reduce"]) :is(
		.s-home-intro [data-reveal],
		.s-home-intro .home-figure,
		.s-faq [data-reveal],
		.s-home-modules [data-reveal],
		.s-blog [data-reveal],
		.s-vef [data-reveal],
		.s-vef [data-vef-piece],
		.s-vef [data-vef-add],
		.s-vef [data-vef-number],
		.s-vef [data-vef-rule],
		.s-tps [data-reveal],
		.s-tps [data-tps-number],
		.s-tps [data-tps-rule],
		.s-comp [data-reveal],
		.s-comp [data-comp-number],
		.s-comp [data-comp-rule],
		.s-page [data-reveal],
		.post-related [data-reveal],
		.s-newsletter [data-reveal],
		[data-step-number],
		[data-step-rule],
		.site-footer [data-reveal]
	) {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		visibility: visible !important;
	}

	/* ==================================================================
	   Fase 10 · C7 + C8 — Mobile: contenuti e testo centrati
	   Richiesta Federico: sotto la soglia di impilamento l'affiancamento
	   sinistra/destra non esiste più → ogni blocco di testo va centrato,
	   e il footer si compatta in colonna centrata (desktop invariato).
	   ================================================================== */
	@media (max-width: 899px) {
		/* home-intro a flusso verticale: le tre card testo */
		.text-box,
		.text-box__title,
		.text-box__body {
			text-align: center;
		}
	}

	/* Gli hero (Verifica, Test Psicometrico, pagine secondarie) passano al layout
	   desktop a ≥900px, non a ≥840: la loro centratura mobile deve arrivare fino a
	   899.98px, altrimenti fra 841 e 899 restano in versione mobile ma allineati a
	   sinistra, con il rientro asimmetrico della pillola ancora attivo. */
	@media (max-width: 899.98px) {
		/* --- hero delle pagine interne (Verifica, Test Psicometrico) --- */
		.s-vef-hero__inner,
		.s-tps-hero__inner,
		.s-comp-hero__inner {
			justify-items: center;
			text-align: center;
		}

		.s-vef-hero__kicker,
		.s-tps-hero__kicker,
		.s-comp-hero__kicker {
			padding-left: 0;            /* niente più rientro asimmetrico */
			/* Fase 19 (#6): `p` ha max-width: --measure (base) — fra 600 e 899px il
			   kicker è più stretto della colonna e restava a sinistra (200px a 768). */
			margin-inline: auto;
		}

		.s-vef-hero__pill,
		.s-tps-hero__pill,
		.s-comp-hero__pill,
		.s-page-hero__pill {
			padding-left: clamp(var(--space-24), 6vw, 4rem);   /* simmetrico a destra */
		}

		.s-vef-hero__title,
		.s-tps-hero__title,
		.s-comp-hero__title {
			max-width: none;
		}

		/* --- Verifica: "Verifica dell'Efficacia" + "Eh già…" --- */
		.s-vef-pratica__intro,
		.s-vef-pratica__intro-title,
		.s-vef-pratica__intro-text {
			text-align: center;
		}

		/* --- Test Psicometrico: hero --- */
		

		

		

		

		/* --- Test Psicometrico: introduzione --- */
		.s-tps-intro__inner,
		.s-tps-intro__title,
		.s-tps-intro__text,
		.s-comp-intro__inner,
		.s-comp-intro__title,
		.s-comp-intro__text {
			text-align: center;
		}

		/* --- Pagine secondarie (Contatti, Demo, blog, articolo): hero e passi
		   centrati. Sotto la soglia di impilamento l'affiancamento sinistra/destra
		   non esiste più, e il rientro asimmetrico della pillola "a stadio" non ha
		   più motivo di esistere (su mobile la pillola è un rettangolo arrotondato). */
		.s-page-hero__inner {
			text-align: center;
		}

		.s-page-hero__kicker,
		.s-page-hero__meta {
			padding-left: 0;
			justify-content: center;
		}

		

		.s-page-hero__title,
		.s-page-hero__sub,
		.s-page-hero__intro-text {
			max-width: none;
			margin-inline: auto;
		}

		.s-page-hero__intro,
		.s-page-hero__intro-title,
		.s-page-hero__intro-text {
			text-align: center;
		}

		/* --- righe «perché» (Verifica + Test Psicometrico + Competenze) — Fase 16
		   #17: spostata da 839.98 a 899.98 per chiudere il buco con la soglia a
		   900px di @media (min-width: 900px) sopra (.s-page-reasons__row). */
		.s-page-reasons__row {
			justify-items: center;
			text-align: center;
		}

		/* --- moduli / passi (numero sopra, poi titolo/riga/testo, centrati) —
		   Fase 16 #17: stesso buco 840-899.98 delle righe «perché». Lo stile di
		   riga (badge a sinistra, titolo/testo a destra) è quello DI BASE
		   (mobile-first) della regola in fondo a questo file — restava attivo
		   fra 840 e 899.98 perché l'override "impilato e centrato" scattava solo
		   sotto 840px, mentre l'hero della stessa pagina resta in versione
		   mobile fino a 900px. Spostato qui da @media (max-width: 839.98px).
		   ESCLUSO `.s-comp-passo`: da 840px ha un layout proprio e documentato
		   (badge+trattino accanto, testo allineato all'inizio del trattino —
		   non è un buco ma una scelta d'XD, vedi il blocco @media (min-width:
		   840px) di .s-comp-passo più sopra), resta sul suo breakpoint a 840. */
		.s-vef-module,
		.s-tps-passo,
		.s-page-step {
			grid-template-columns: 1fr;
			grid-template-areas:
				"num"
				"title"
				"rule"
				"text";
			justify-items: center;
			text-align: center;
		}

		.s-vef-module__rule,
		.s-tps-passo__rule,
		.s-page-step__rule {
			transform-origin: 50% 50%;
		}

		.s-vef-module__text,
		.s-tps-passo__text,
		.s-page-step__text {
			max-width: 42ch;
		}
	}

	/* `.s-comp-passo` impilato/centrato resta sotto 840px (invariato): da 840px
	   il layout badge+trattino-accanto è intenzionale (vedi sopra). */
	@media (max-width: 839.98px) {
		.s-comp-passo {
			grid-template-columns: 1fr;
			grid-template-areas:
				"num"
				"title"
				"rule"
				"text";
			justify-items: center;
			text-align: center;
		}

		.s-comp-passo__rule {
			transform-origin: 50% 50%;
		}

		.s-comp-passo__text {
			max-width: 42ch;
		}
	}

	@media (max-width: 839.98px) {
		/* --- newsletter: testo sopra il form, centrato --- */
		.s-newsletter__inner {
			flex-direction: column;
			align-items: stretch;
			text-align: center;
		}

		/* Fase 19 (#6): più stretto del form per via del max-width base di `p`,
		   a 768px restava 56px più a sinistra del resto. */
		.newsletter-form__disclaimer {
			margin-inline: auto;
		}

		/* #16: `flex: 1 1 20rem` / `1 1 26rem` (desktop, asse orizzontale) diventano un
		   flex-basis in ALTEZZA appena l'asse si impila in colonna — 20rem/26rem di
		   altezza minima anche se il contenuto è più basso, da cui gli spazi enormi fra
		   testo e form. `flex: 0 0 auto`: l'altezza segue solo il contenuto; l'`align-
		   items: stretch` sopra li fa comunque combaciare in larghezza col contenitore
		   (il testo resta centrato dal `text-align`, non dall'allineamento flex). */
		.s-newsletter__text,
		.s-newsletter__form-col {
			flex: 0 0 auto;
		}

		.s-newsletter__text {
			max-width: none;
		}

		/* --- card CTA finale (Verifica + Test Psicometrico) --- */
		.s-page-cta__card {
			justify-items: center;
			text-align: center;
		}

		.s-page-cta__text {
			max-width: none;
		}


		/* --- Test Psicometrico: 5 passi (badge sopra, poi titolo/riga/testo, centrati) --- */
		

		

		


		

		

		

		

		/* --- C8 · footer compatto e centrato (desktop: brand sx / menu dx) --- */
		.site-footer__inner {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		.site-footer__brand {
			max-width: none;
		}

		.site-footer__logo {
			margin-inline: auto;   /* img è display:block → centrata */
		}

		.footer-nav__list {
			grid-auto-flow: row;
			grid-template-columns: 1fr;
			grid-template-rows: none;
			justify-items: center;
			gap: var(--space-8);
		}

		.site-footer__bottom {
			justify-content: center;
			text-align: center;
		}
	}
}