/* ==========================================================================
   MAIN — struttura e componenti
   ==========================================================================
   Nessun colore letterale qui dentro: tutto viene da tokens.css.
   Nessuna animazione a scorrimento qui dentro: quella sta in motion.css.
   Questo file descrive come il sito e' fatto, non come si muove.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
}

/* Lo scorrimento fluido nativo resta solo quando il livello animato NON e'
   partito: a motore acceso i salti alle ancore li fa engine.js, con l'offset
   della testata. La classe la mette engine.js. */
html:not(.motion-on) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* IL FONDO DELLA PAGINA E' IL GRIGIO FRA I BLOCCHI, non il bianco: il bianco
   e' il fondo dei blocchi chiari (§ 3). */
body {
	margin: 0;
	background-color: var(--pagina);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--track-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

img, svg {
	display: block;
	max-width: 100%;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Un anello di focus visibile e coerente, ovunque. Non rimuoverlo: e' l'unico
   modo che ha chi naviga da tastiera per sapere dove si trova. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--radius);
}

::selection {
	background-color: rgba(var(--accent-rgb), 0.22);
}

/* --------------------------------------------------------------------------
   2. Tipografia
   --------------------------------------------------------------------------
   Ogni cifra della pagina passa dal mono. Non e' un vezzo: cifre tabulari
   significa che i numeri incolonnati si allineano e che un contatore animato
   non fa saltare il testo attorno mentre scorre.
   -------------------------------------------------------------------------- */

/* I titoli sono l'unico posto in cui si vede Space Grotesk, ed e' il punto:
   il corpo del testo resta in Geist, che si legge senza farsi notare.
   Peso 500 e non 600 — Space Grotesk e' gia' robusto di suo, e a 600 su
   quarantotto pixel diventa pesante. */
h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: var(--track-heading);
	line-height: var(--lh-heading);
	text-wrap: balance;
}

h2 {
	font-size: var(--fs-h2);
	max-width: 26ch;
}

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

h4 {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-faint);
}

p {
	text-wrap: pretty;
}

/* L'occhiello: etichetta mono, minuscola, spaziata. Nomina l'argomento in
   parole piane — mai un numero di sezione, mai un'etichetta di versione. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-faint);
}

/* Il trattino che precede l'occhiello: primo assaggio della scala graduata. */
.eyebrow::before {
	content: '';
	width: var(--space-6);
	height: var(--hairline);
	background-color: currentColor;
}

.section__intro {
	max-width: var(--measure);
	margin-top: var(--space-4);
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--text-muted);
}

.section__closing {
	max-width: var(--measure);
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: var(--hairline) solid var(--line);
	font-size: var(--fs-lead);
	color: var(--text);
}

.prose {
	max-width: var(--measure);
	margin-top: var(--space-6);
	color: var(--text-muted);
}

.prose p + p {
	margin-top: var(--space-5);
}

/* CHI SIAMO SU DUE COLONNE, da 1000px: titolo a sinistra, testo a destra, come
   nei capitoli di auxia.io. In colonna unica il blocco lasciava vuota la meta'
   destra per tutta la sua altezza: due paragrafi lunghi stretti a 68 caratteri
   dentro un riquadro largo il doppio. */
@media (min-width: 1000px) {
	#chi-siamo .container {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--space-9);
		align-items: start;
	}

	#chi-siamo .prose {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   3. Impianto: contenitore e blocchi
   --------------------------------------------------------------------------
   DAL 2026-10-13 OGNI SEZIONE DOPO L'HERO E' UN BLOCCO: un riquadro con gli
   angoli tondi e un'ombra larga, staccato dai bordi della finestra e dal
   blocco dopo. Chiari e scuri si alternano dalla fascia dei numeri in giu'
   (la classe .blocco--scuro nel markup, i token ribaltati in tokens.css).
   L'hero no: sta sul grigio della pagina, senza riquadro (§ 6). Riferimenti
   di Pietro: antoniobatticciotto.com per i riquadri e le ombre, auxia.io per
   una pagina ordinata senza divisioni nette fra i capitoli.

   LA CORSIA (2026-10-14). Un blocco che la linea guida passa A LATO e' piu'
   stretto della pagina di --corsia (12%, fra 44 e 160px: tokens.css) e
   lascia libera una striscia su un lato, alternando: la fascia dei numeri a
   sinistra, per chi no a destra, e cosi' via. Nella striscia scende la
   linea, che fra un blocco e l'altro attraversa la pagina nello stacco
   (motion.css § 4b), come in auxia.io. Un blocco che la linea passa SOPRA o
   SOTTO (data-guida) e' largo quanto la cornice, come la testata: dal
   2026-10-17, su richiesta di Pietro. <main> e' il riferimento delle
   posizioni della linea (position: relative).

   LA CORNICE e' il blocco piu' la corsia: e' larga quanto <main>, e oltre i
   1632px (1472 + 160) resta di quella misura e si centra. Testata e piede
   hanno la stessa larghezza, cosi' i bordi di tutta la pagina si allineano.
   -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	position: relative;
	/* Un contesto di impilamento per blocco: il pannello della FAQ aperta e'
	   uno pseudo-elemento a indice negativo, e senza questo finirebbe SOTTO il
	   fondo del blocco invece che sopra. */
	isolation: isolate;
	max-width: var(--blocco-max);
	margin-inline: auto;
	/* La cornice comune ai blocchi: il blocco piu' la corsia, centrati. Le
	   regole qui sotto spostano un blocco a lato verso un lato della cornice,
	   o lo allargano a tutta cornice. */
	--cornice: min(100%, var(--blocco-max) + var(--corsia));
	padding-block: var(--section-y);
	border-radius: var(--radius-blocco);
	background-color: var(--bg);
	box-shadow: var(--ombra-blocco);
	color: var(--text);
}

/* Il margine dai bordi della finestra sta sul contenitore e non sul blocco:
   sul blocco si sommerebbe al centraggio e sotto i 1472px non si vedrebbe. */
main {
	position: relative;
	display: flow-root;
	padding-inline: var(--blocco-margine);
}

.section + .section {
	margin-block-start: var(--blocco-stacco);
}

/* I BLOCCHI DOPO L'HERO, in due misure secondo come li attraversa la linea
   guida (2026-10-17, Pietro: "a grandezza standard" quelli che la linea passa
   sotto o sopra, "a grandezza ridotta" solo quelli che passa a lato).

   A LATO, cioe' senza data-guida: piu' stretti della corsia, che lasciano da
   un lato. Si alternano FRA LORO: la fascia dei numeri a sinistra, per chi no
   a destra, il metodo a sinistra, l'ingaggio a destra, le FAQ a sinistra.
   Qui sotto la corsia a sinistra; la regola dopo la sposta a destra un
   blocco a lato su due, contando solo i blocchi a lato (`of`). Un browser
   che non capisce `of` lascia tutti la corsia a sinistra.

   Le percentuali di margine si riferiscono alla larghezza di <main>, come
   quella della cornice. */
main > .section:not(.hero) {
	width: min(100% - var(--corsia), var(--blocco-max));
	max-width: none;
	margin-inline-start: calc((100% - var(--cornice)) / 2 + var(--corsia));
	margin-inline-end: 0;
}

main > .section:nth-child(even of .section:not(.hero, [data-guida="sopra"], [data-guida="sotto"])) {
	margin-inline-start: calc((100% - var(--cornice)) / 2);
}

/* SOPRA O SOTTO: larghi quanto la cornice, cioe' quanto la testata. La linea
   corre nel loro margine o dietro di loro, e la corsia non serve. */
main > .section[data-guida="sopra"],
main > .section[data-guida="sotto"] {
	width: var(--cornice);
	margin-inline-start: calc((100% - var(--cornice)) / 2);
}

.section h2 + .section__intro {
	margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   4. Testata
   --------------------------------------------------------------------------
   Una barra flottante, staccata dai bordi come i blocchi e con gli stessi
   angoli: e' il tredicesimo blocco, quello che resta. FONDO PIENO e niente
   `backdrop-filter`: la sfocatura di cio' che passa sotto andava ricalcolata a
   ogni fotogramma di scorrimento, ed era uno dei pesi della pagina.
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: var(--blocco-margine) var(--blocco-margine) 0;
	/* Il margine intorno alla barra ha il fondo della pagina: cio' che scorre
	   sparisce sotto il bordo basso della barra, e la linea guida o la cima
	   di un blocco non spuntano piu' sopra la testata (Pietro, 2026-10-17). */
	background-color: var(--pagina);
	/* La testata e' alta quanto la barra piu' il margine sopra, ma solo la
	   barra deve prendersi i clic: nel margine si clicca la pagina. */
	pointer-events: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	width: 100%;
	/* Larga quanto la cornice dei blocchi (§ 3): oltre i 1632px la corsia e'
	   al suo massimo, 10rem. */
	max-width: calc(var(--blocco-max) + 10rem);
	margin-inline: auto;
	padding: 10px var(--gutter) 10px var(--space-5);
	border-radius: var(--radius-blocco);
	background-color: var(--bg);
	box-shadow: var(--shadow-sm);
	pointer-events: auto;
	transition: box-shadow var(--dur-ui) var(--ease-hover);
}

/* Staccata dall'inizio: sotto scorrono i blocchi, e la barra prende la stessa
   ombra larga che hanno loro. La classe la mette il livello animato. */
.site-header.is-stuck .site-header__inner {
	box-shadow: var(--ombra-blocco);
}

.site-header__logo {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 44px;
	margin-inline-end: auto;
	font-weight: 600;
	letter-spacing: var(--track-heading);
	line-height: 1.2;
}

.site-header__testo {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Il nome intero e' largo 318px: su un telefono, accanto al cervello, non ci
   sta in una riga e la pagina scorreva di lato. `min-width: 0` lascia che il
   gruppo si stringa e il nome vada a capo; superato l'hero diventa PGCG. */
.site-header__logo,
.site-header__testo {
	min-width: 0;
}

/* IL CERVELLO A INGRANAGGI. Alto 68px, cioe' tutta l'altezza utile della barra
   e non di piu' (richiesta di Pietro: "grande al massimo come l'header"; il
   2026-10-14 header e logo sono cresciuti insieme, da 56 a 68).
   Il disegno e' 128 x 100: la larghezza segue. Lo genera
   tools/logo-cervello.js; la rotazione delle ruote sta in motion.css § 6. */
.cervello {
	flex: none;
	width: auto;
	height: var(--logo-alto);
	overflow: visible;
}

.cervello__sagoma {
	fill: var(--bg);
	stroke: var(--logo-bordo);
	stroke-width: var(--logo-tratto-bordo);
	stroke-linejoin: round;
}

.cervello__bordo {
	fill: none;
	stroke: var(--logo-bordo);
	stroke-width: var(--logo-tratto-bordo);
	stroke-linejoin: round;
}

/* Il cerchio invisibile che tiene centrato il riquadro di ogni ruota. */
.cervello__ingombro {
	fill: none;
}

/* LE DODICI RUOTE, GRIGIO CHIARO FINCHE' NON SI ACCENDONO (2026-10-14).
   Ognuna ha la sua sezione (data-sezione, dal generatore): quando la linea
   guida raggiunge la tappa di quella sezione, guida.js le mette .is-accesa e
   la ruota si colora di rosso, direttamente, senza nero. Le finestre fra le
   razze bucano davvero (evenodd): attraverso si vede il bianco del cervello.
   Senza livello animato restano grigie. */
.cervello__corpo {
	fill: var(--logo-ruota-spenta);
	fill-rule: evenodd;
	stroke: var(--logo-tratto);
	stroke-width: var(--logo-tratto-ruote);
	stroke-linejoin: round;
	transition: fill var(--dur-panel) var(--ease-hover);
}

.cervello__ruota.is-accesa .cervello__corpo {
	fill: var(--logo-ruota-accesa);
}

.cervello__dettaglio {
	fill: none;
	stroke: var(--logo-tratto);
	stroke-width: calc(var(--logo-tratto-ruote) * 0.7);
}

@media (max-width: 640px) {
	.cervello {
		height: var(--logo-alto-stretto);
	}
}

.site-header__motto {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 400;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--text-faint);
}

.site-header__nav {
	display: flex;
	gap: var(--space-6);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.site-header__nav a {
	position: relative;
	padding-block: var(--space-1);
	transition: color var(--dur-ui) var(--ease-hover);
}

/* Il sottolineato cresce dal basso invece di comparire. Solo su puntatore
   fine: su touch il primo tocco lascerebbe lo stato appiccicato. */
.site-header__nav a::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: var(--hairline);
	background-color: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.site-header__nav a:hover {
		color: var(--text);
	}

	.site-header__nav a:hover::after {
		transform: scaleX(1);
	}
}

/* Il menu sparisce sotto i 1080px, non piu' sotto gli 860: dal 2026-10-13
   accanto al nome c'e' il cervello, e fra 860 e 1080 il nome intero toccava
   il menu e il bottone andava a capo. Misurato: logo, nome, menu e bottone
   chiedono 990px di barra. */
@media (max-width: 1080px) {
	.site-header__nav {
		display: none;
	}
}

/* Un bottone che va a capo e' un bottone rotto: nella testata resta su una
   riga, e sotto i 640px sparisce (qui sotto). */
.site-header .btn {
	white-space: nowrap;
}

/* Sotto i 640px l'etichetta "Prenota un primo confronto" non sta su una riga,
   e un bottone che va a capo tre volte e' un bottone rotto. L'etichetta non si
   puo' accorciare — vincolo V1 — quindi si toglie il bottone: la stessa CTA,
   con la stessa etichetta, e' trecento pixel piu' sotto nell'hero.
   Non si perde nessun percorso di conversione, e la testata appiccicata
   smette di rubare un terzo dello schermo. */
@media (max-width: 640px) {
	.site-header .btn {
		display: none;
	}

	.site-header__inner {
		padding: var(--space-2) var(--space-4);
	}
}

@media (max-width: 400px) {
	.site-header__motto {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   5. Bottoni
   --------------------------------------------------------------------------
   Proprieta' elencate una per una: mai `transition: all`, che animerebbe
   anche cio' che non deve, fuori dalla GPU.
   Ogni bottone affonda quando lo premi. Su una pagina in cui le due azioni
   principali sono "apri la FAQ" e "prenota", era il vuoto piu' evidente.

   FORMA A PILLOLA. Vedi la nota di sostituzione in tokens.css: la vecchia
   regola imponeva 4px squadrati ovunque. Con i blocchi neri a tutta pagina e
   i titoli grandi, la pillola e' l'unico elemento morbido di una
   composizione rigida — contrasto voluto, non incoerenza.

   LA FRECCIA CHE GIRA INTORNO. Al passaggio del mouse esce dal lato destro,
   si teletrasporta fuori campo a sinistra e rientra. E' un ciclo, non un
   andirivieni: l'occhio lo legge come "va avanti", che e' cio' che il
   bottone fa. E' disegnata con due bordi ruotati, non con un carattere:
   un carattere dentro ::after finirebbe letto ad alta voce dai lettori di
   schermo, e questo non e' contenuto.
   -------------------------------------------------------------------------- */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-6);
	border: var(--hairline) solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: -0.005em;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--dur-ui) var(--ease-hover),
	            border-color var(--dur-ui) var(--ease-hover),
	            color var(--dur-ui) var(--ease-hover),
	            opacity var(--dur-ui) var(--ease-hover),
	            transform var(--dur-press) var(--ease-out);
}

.btn:active {
	transform: scale(var(--press-scale));
}

/* SPENTO: dopo un invio del modulo il bottone resta disattivato per due
   minuti (main.js). Deve VEDERSI spento, o sembra un bottone rotto: piu'
   tenue, senza affondare alla pressione e con il cursore che lo dice. */
.btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.btn:disabled:active {
	transform: none;
}

/* La punta della freccia: due lati di un quadrato, ruotati. */
.btn::after {
	content: '';
	flex: 0 0 auto;
	width: 0.4em;
	height: 0.4em;
	margin-inline-start: calc(var(--space-1) * -1);
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.btn--primary {
	background-color: var(--accent);
	color: var(--on-accent);
}

.btn--secondary {
	border-color: var(--line-strong);
	background-color: transparent;
	color: var(--text);
}

@media (hover: hover) and (pointer: fine) {
	.btn--primary:hover:not(:disabled) {
		background-color: var(--accent-strong);
	}

	.btn--secondary:hover:not(:disabled) {
		border-color: var(--text);
		background-color: rgba(var(--text-rgb), 0.05);
	}

	/* Il giro della freccia. Un keyframe e non una transizione, proprio
	   perche' NON deve ripuntare a meta': o fa il giro intero o non lo fa.
	   E' l'eccezione consentita alla regola "transizioni, non keyframes". */
	.btn:hover:not(:disabled)::after {
		animation: freccia-giro 460ms var(--ease-scan);
	}
}

@keyframes freccia-giro {
	0%   { transform: rotate(45deg) translate(0, 0);          opacity: 1; }
	45%  { transform: rotate(45deg) translate(0.7em, -0.7em); opacity: 0; }
	46%  { transform: rotate(45deg) translate(-0.7em, 0.7em); opacity: 0; }
	100% { transform: rotate(45deg) translate(0, 0);          opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.btn:hover::after {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   6. Hero — cinque righe, senza riquadro
   --------------------------------------------------------------------------
   NEUTRO (Pietro, 2026-10-13): nessun riquadro, nessuna ombra, nessun
   angolo, sul grigio della pagina. Per qualche ora era un blocco scuro come
   nell'immagine di riferimento; e' sembrato troppo. Le cinque frasi sono
   FERME; l'ingresso al caricamento e' in motion.css § 3. Sotto i bottoni
   comincia la linea guida (motion.css § 4b).
   Fino al 2026-10-13 sotto il titolo girava il meccanismo a ingranaggi: sta in
   git (bf0bfc8) e in ~/Desktop/ingranaggi-sfondo/.
   -------------------------------------------------------------------------- */

/* L'ALTEZZA E IL RESPIRO STANNO QUI, non sui blocchi interni.

   L'hero e' alta una finestra e centra tutto il proprio contenuto: occhiello,
   titolo, sottotitolo e bottoni stanno nella prima schermata insieme. Prima
   l'altezza stava sul palco e la chiusura veniva dopo, spinta giu' da un
   margine di 12vh: il risultato era mezza schermata vuota fra il titolo e il
   sottotitolo, e i bottoni appoggiati sul bordo della fascia nera.

   IL PADDING E' UN MINIMO GARANTITO, non la spaziatura vera. Su uno schermo
   alto l'aria la fa il centraggio ed e' molto di piu'; su uno basso il
   padding e' cio' che resta, e impedisce al titolo di toccare la testata e ai
   bottoni di toccare il nero. Sovrascrive il padding di .section, che qui e'
   troppo poco sopra e troppo sotto. */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Una schermata MENO la testata, che e' sticky e quindi occupa il proprio
	   spazio sopra di qui. Il blocco intero nella prima schermata, compreso il suo bordo tondo in
	   basso: la finestra meno la testata, il margine sopra e quello sotto. */
	min-height: calc(100svh - var(--header-h) - 2 * var(--blocco-margine));
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	margin-block-start: var(--blocco-margine);
	padding-block: var(--hero-y-inizio) var(--hero-y-fine);
	/* Le righe possono essere piu' larghe della colonna: si tagliano qui
	   invece di far scorrere la pagina in orizzontale. */
	overflow: hidden;
}

/* IL PALCO — occhiello piu' titolo, tenuti insieme.

   Non ha piu' un'altezza propria: quella sta sull'hero, che centra tutto.
   Serve ancora perche' le due cose che contiene formano un blocco solo, con
   il proprio stacco interno, mentre il sottotitolo appartiene al gruppo dopo. */
.hero__palco {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* --- le righe -------------------------------------------------------------- */

.hero__righe {
	display: flex;
	flex-direction: column;
	gap: 0.06em;
	margin: 0;
	/* Fuori dal contenitore: le righe occupano tutta la larghezza della
	   finestra, non i 1152px del testo normale. E' cio' che permette alla
	   deriva di avere spazio in cui succedere. */
	width: 100%;
	/* COMPOSTO COME karolinahess.com, dal 2026-10-10: maiuscole e minuscole,
	   peso regolare, spaziatura stretta di -0.04em, righe quasi a contatto.
	   L'originale usa 0.8 di interlinea su due parole corte; qui sono cinque
	   frasi, e a 0.8 le gambe della g e della p di una riga toccano le
	   maiuscole della successiva: 0.98 e' il minimo che le tiene staccate. */
	font-family: var(--font-titolo);
	font-size: var(--fs-righe);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.04em;
}

/* LA RIGA E' LA MASCHERA, il testo dentro di lei e' cio' che sale (motion.css
   § 3). Senza livello animato la riga e' un blocco come un altro. */
.hero__riga {
	display: block;
	white-space: nowrap;
	padding-inline: 0;
}

/* IL TITOLO E' CENTRATO, e tiene il margine del resto della pagina: una riga
   attaccata al bordo si legge come un testo tagliato.

   Fino al 2026-08-31 il centraggio valeva SOLO per le righe del titolo, e
   occhiello, sottotitolo e bottoni restavano a sinistra "dove sta la lettura".
   Adesso e' centrato tutto l'hero, su richiesta esplicita di Pietro: la
   colonna di lettura sparisce e resta un blocco simmetrico. Il resto della
   pagina non cambia — dalla fascia dei numeri in giu' si legge da sinistra
   come prima. */
.hero__riga {
	padding-inline: var(--gutter);
	text-align: center;
}

/* Le righe alternate piene e in contorno sono uscite il 2026-10-10 con il
   maiuscolo: il riferimento nuovo e' tutto pieno. Stanno in git. */

.hero__riga-testo {
	display: block;
}

/* --- apertura e chiusura ---------------------------------------------------- */

/* TUTTO CENTRATO SOTTO IL TITOLO — occhiello, sottotitolo, bottoni.

   Fino al 2026-08-31 solo il titolo era centrato e il resto restava allineato
   a sinistra, "dove sta la lettura". Il centraggio completo e' una richiesta
   esplicita di Pietro, e cambia il baricentro dell'hero: la colonna di lettura
   sparisce e resta un blocco simmetrico. Se un giorno si volesse tornare
   indietro, la riga da togliere e' align-items qui sotto — non altre. */
.hero__apertura,
.hero__chiusura {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
}

/* Un respiro dal titolo, non mezza schermata: erano 12vh — su un monitor da
   1080 fanno 130px di vuoto fra il titolo e la frase che lo spiega, e i due
   blocchi smettevano di leggersi come una cosa sola.

   Da 48 a 40 il 2026-08-31, e sono otto pixel spesi bene: con tutto centrato i
   due blocchi stanno gia' sullo stesso asse e non serve altrettanto stacco per
   separarli, e otto pixel sono esattamente quello che manca perche' il
   contenuto dell'hero — alto 578 — stia in una finestra da 700 di altezza
   invece che da 703. Misurato su 1366x700, che e' un portatile da 768 con la
   barra dei segnalibri aperta. */
.hero__chiusura {
	margin-block-start: var(--space-7);
}

.hero__sub {
	max-width: 54ch;
	text-align: center;
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--text-muted);
}

/* I DUE BOTTONI, UNO A LATO DELL'ALTRO E EQUIDISTANTI DAL CENTRO.

   Due colonne uguali e uno stacco in mezzo: il primo bottone si appoggia al
   centro da sinistra, il secondo da destra. Il confine fra le due colonne cade
   esattamente sul centro della sezione, quindi i due bordi interni distano
   altrettanto da li' — mezzo stacco per uno.

   PERCHE' NON UN FLEX CENTRATO, che sembrerebbe la strada ovvia: i due bottoni
   NON sono larghi uguale (216 e 280, e le etichette non si toccano, V1).
   Centrando il gruppo si centra la somma, e lo spazio in mezzo finisce
   trentadue pixel a sinistra del centro vero. Con due colonne uguali il centro
   e' il centro. */
.hero__ctas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-8);
}

.hero__ctas > .btn:first-child {
	justify-self: end;
}

.hero__ctas > .btn:last-child {
	justify-self: start;
}

@media (max-width: 700px) {
	/* Su telefono l'altezza piena costringerebbe a scorrere prima di vedere
	   qualunque cosa oltre il titolo, e su uno schermo alto e stretto e'
	   fastidioso invece che elegante: qui l'hero e' alta quanto le serve. */
	.hero {
		min-height: auto;
		padding-block: var(--space-8) var(--space-9);
	}

	.hero__chiusura {
		margin-block-start: var(--space-7);
	}

	/* Su 375px la frase piu' lunga non entra e va mandata a capo, altrimenti
	   sporge e basta. */
	.hero__riga {
		white-space: normal;
	}

	/* I due bottoni affiancati non ci stanno: 216 piu' 280 piu' lo stacco
	   fanno 544, e uno schermo da 375 ne offre 335. Si incolonnano, centrati
	   come tutto il resto. Restano sotto il testo, dove erano. */
	.hero__ctas {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-3);
	}

	/* Gli stessi due selettori di sopra, e non uno piu' corto: `.btn` da solo
	   perde contro `.btn:first-child`, e il primo bottone restava incollato a
	   destra mentre il secondo si centrava. */
	.hero__ctas > .btn:first-child,
	.hero__ctas > .btn:last-child {
		justify-self: center;
	}
}

/* --------------------------------------------------------------------------
   7. Statistiche
   --------------------------------------------------------------------------
   Quattro numeri, subito sotto l'hero.

   UNA RIGA SOLA DA 1320px (dal 2026-10-14: con la corsia il blocco e' l'88%
   della pagina, e a 1280 "30 anni" sbordava di 3px; prima dei blocchi la
   soglia era 1100). Dal 2026-10-10. Fino ad allora la fascia stava su
   due righe da due, ed era una scelta misurata: con quattro colonne il
   valore piu' lungo, "180M€ ???", andava a capo sotto i 48px. Tolti i punti
   di domanda (Pietro), il piu' lungo e' "30 anni", e a 52px sta nella
   colonna piu' stretta. Risultato misurato a 1440: la fascia da 596px di
   altezza scende a meno della meta' — quattro numeri non valgono una
   schermata e mezza di scorrimento.

   Il padding verticale della fascia e' piu' corto di quello delle sezioni
   (64px invece di 144): e' una fascia di dati fra l'hero e il primo
   argomento, non un capitolo.
   -------------------------------------------------------------------------- */

#social-proof {
	padding-block: var(--space-9);
}

.stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-9) var(--space-8);
}

@media (min-width: 1320px) {
	.stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--space-6);
	}

	.stats .stat__number {
		font-size: var(--fs-num-riga);
		white-space: nowrap;
	}
}

.stats > li {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-inline-start: var(--space-5);
	border-inline-start: var(--hairline) solid var(--line-strong);
}

.stat__number {
	font-family: var(--font-mono);
	font-size: var(--fs-num);
	font-weight: 500;
	/* Le cifre tabulari non sono un vezzo: il contatore riscrive questa
	   stringa sessanta volte al secondo, e senza larghezza fissa i numeri
	   ballerebbero orizzontalmente per tutta la corsa. */
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--track-num);
	line-height: 1;
	color: var(--text);
}

.stat__label {
	max-width: 34ch;
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--text-muted);
}

/* SUL TELEFONO DUE PER DUE, non una colonna: in colonna unica la fascia era
   alta 601px — quasi una schermata per quattro numeri. In due colonne la
   colonna utile e' di 143px, e "30 anni" a 34px ne occupa 133. */
@media (max-width: 700px) {
	.stats {
		gap: var(--space-7) var(--space-5);
	}

	.stats > li {
		padding-inline-start: var(--space-3);
	}

	.stats .stat__number {
		font-size: var(--fs-num-stretta);
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   8. Problema — tre sintomi, non tre schede
   --------------------------------------------------------------------------
   Le tre colonne uguali con la card sono il pattern che tradisce piu' di ogni
   altro la generazione automatica, e qui non servono: questi non sono oggetti
   sollevati da confrontare, sono tre sintomi da leggere.
   Diventano voci di un referto tecnico: filetto in alto, titolo a sinistra,
   testo a destra. Il markup non cambia di una riga.
   -------------------------------------------------------------------------- */

.cards--3 {
	margin-top: var(--space-9);
	counter-reset: sintomo;
}

.cards--3 > .card {
	display: grid;
	grid-template-columns: minmax(0, 24ch) minmax(0, 1fr);
	gap: var(--space-5) var(--space-8);
	padding-block: var(--space-6);
	border-top: var(--hairline) solid var(--line);
	counter-increment: sintomo;
}

.cards--3 > .card:last-child {
	border-bottom: var(--hairline) solid var(--line);
}

.cards--3 > .card h3 {
	align-self: start;
	font-size: var(--fs-lead);
	line-height: 1.3;
}

/* Il numero d'ordine, in mono, staccato sopra il titolo. */
.cards--3 > .card h3::before {
	content: counter(sintomo, decimal-leading-zero);
	display: block;
	margin-bottom: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-label);
	color: var(--text-faint);
}

.cards--3 > .card p {
	max-width: 62ch;
	color: var(--text-muted);
}

@media (max-width: 760px) {
	.cards--3 > .card {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-3);
	}
}

/* --------------------------------------------------------------------------
   9. Servizi — quattro schede, qui la scheda serve davvero
   --------------------------------------------------------------------------
   Sono quattro offerte da confrontare per prezzo e durata: l'elevazione
   comunica una gerarchia reale, quindi la card e' giustificata.
   Il prezzo e' l'ancora visiva.
   -------------------------------------------------------------------------- */

.cards--4 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-9);
}

.card--service {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	border: var(--hairline) solid var(--line);
	border-radius: var(--radius);
	background-color: var(--surface);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--dur-ui) var(--ease-hover),
	            box-shadow var(--dur-ui) var(--ease-hover),
	            transform var(--dur-ui) var(--ease-out);
}

.card--service h3 {
	font-size: var(--fs-h3);
}

.card__price {
	font-family: var(--font-mono);
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	color: var(--text);
}

.card__meta {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-faint);
}

.card--service p {
	font-size: var(--fs-small);
	color: var(--text-muted);
}

/* La garanzia e' l'argomento piu' forte di ogni scheda: va staccata e
   marcata, non annegata nel paragrafo. */
.card__guarantee {
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: var(--hairline) solid var(--line);
	font-size: var(--fs-small);
	color: var(--positive);
}

.card--service .card__guarantee {
	color: var(--positive);
}

@media (hover: hover) and (pointer: fine) {
	.card--service:hover {
		border-color: var(--line-strong);
		box-shadow: var(--shadow-md);
		transform: translateY(-2px);
	}
}

@media (max-width: 820px) {
	.cards--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   10. Lista di esclusione
   -------------------------------------------------------------------------- */

.exclusion-list {
	display: grid;
	gap: var(--space-1);
	max-width: 74ch;
	margin-top: var(--space-8);
}

.exclusion-list > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
	align-items: baseline;
	padding-block: var(--space-4);
	border-bottom: var(--hairline) solid var(--line);
	color: var(--text-muted);
}

.exclusion-list .mark {
	font-family: var(--font-mono);
	font-size: var(--fs-small);
	color: var(--negative);
}

/* --------------------------------------------------------------------------
   11. Metodo — la timeline delle cinque fasi
   --------------------------------------------------------------------------
   Qui il concetto diventa letterale: un binario verticale, cinque tacche,
   il progetto che avanza. Il binario e' fermo: il movimento della sezione e'
   il diagramma sopra (motion.css § 5b).
   -------------------------------------------------------------------------- */

.steps {
	position: relative;
	margin-top: var(--space-9);
	padding-inline-start: var(--space-8);
}

/* Il binario spento. */
.steps::before {
	content: '';
	position: absolute;
	inset-block: var(--space-6) var(--space-8);
	inset-inline-start: 0;
	width: 2px;
	background-color: var(--line);
}

.step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-2) var(--space-5);
	padding-block: var(--space-6);
}

.step + .step {
	border-top: var(--hairline) solid var(--line);
}

.step__num {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--track-label);
	color: var(--text-faint);
	transition: color var(--dur-ui) var(--ease-hover);
}

/* La tacca sul binario, all'altezza di ogni fase. */
.step::before {
	content: '';
	position: absolute;
	inset-block-start: calc(var(--space-6) + 0.4em);
	inset-inline-start: calc((var(--space-8) + 3px) * -1);
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background-color: var(--line-strong);
	transition: background-color var(--dur-ui) var(--ease-hover),
	            transform var(--dur-ui) var(--ease-out);
}

.step p {
	max-width: 64ch;
	color: var(--text-muted);
}

@media (max-width: 640px) {
	.steps {
		padding-inline-start: var(--space-5);
	}

	.step::before {
		inset-inline-start: calc((var(--space-5) + 3px) * -1);
	}

	.step {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   12. Casi
   --------------------------------------------------------------------------
   Ogni caso e' una riga: settore a sinistra come intestazione, i tre blocchi
   contesto/intervento/risultato a destra. Nessuna card: sono referti.
   -------------------------------------------------------------------------- */

.cases {
	display: grid;
	gap: var(--space-8);
	margin-top: var(--space-9);
}

.case {
	display: grid;
	grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
	gap: var(--space-6) var(--space-8);
	padding-top: var(--space-6);
	border-top: var(--hairline) solid var(--line-strong);
}

.case__sector {
	align-self: start;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-label);
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--text-faint);
}

.case__block + .case__block {
	margin-top: var(--space-5);
}

.case__block p {
	margin-top: var(--space-2);
	max-width: 68ch;
	color: var(--text-muted);
}

/* Il risultato e' l'unico blocco che merita enfasi. */
.case__block:last-child p {
	color: var(--text);
}

@media (max-width: 820px) {
	.case {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}
}

/* --------------------------------------------------------------------------
   13. Modalita' di ingaggio
   --------------------------------------------------------------------------
   Quattro passi in fila: e' un percorso, non un elenco.
   -------------------------------------------------------------------------- */

.engagement-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-6);
	margin-top: var(--space-9);
}

.engagement-steps > li {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-6);
	border-top: var(--hairline) solid var(--line);
}

/* Il pallino numerato: unico elemento a raggio pieno del sito, perche' e' un
   indicatore circolare — la regola dei raggi lo prevede espressamente. */
.engagement-steps .dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border: var(--hairline) solid var(--line-strong);
	border-radius: var(--radius-full);
	background-color: var(--surface);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}

.engagement-steps h3 {
	font-size: var(--fs-h3);
}

.engagement-steps p {
	font-size: var(--fs-small);
	color: var(--text-muted);
}

@media (max-width: 900px) {
	.engagement-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.engagement-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}
}

/* --------------------------------------------------------------------------
   14. Verifica preliminare
   -------------------------------------------------------------------------- */

.verifica-grid,
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-9);
	align-items: start;
}

.verifica-grid .btn {
	margin-top: var(--space-7);
}

.verifica-questions {
	display: grid;
	gap: var(--space-4);
	counter-reset: domanda;
}

.verifica-questions > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
	padding: var(--space-5);
	border: var(--hairline) solid var(--line);
	border-radius: var(--radius);
	background-color: var(--surface);
	font-size: var(--fs-small);
	color: var(--text-muted);
	counter-increment: domanda;
}

.verifica-questions > li::before {
	content: counter(domanda, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-label);
	color: var(--text-faint);
}

/* --- l'orologio della sezione contatti ---------------------------------------

   Il contenitore e' vuoto nel markup: lo riempie vivo.js con un SVG costruito a
   runtime (V2, nessuna immagine). Senza il livello animato resta un div vuoto
   che non occupa niente, e la colonna torna quella di prima.

   CENTRATO SULLA COLONNA DEL TESTO, non sulla pagina: sta sotto il paragrafo e
   riempie il vuoto che la colonna di sinistra aveva sotto di lui — due righe di
   testo contro un modulo alto tutta la sezione. `margin-inline: auto` lo centra
   rispetto al testo perche' la colonna E' la misura del testo.

   SOTTO GLI 880px SPARISCE, e la soglia non e' scelta qui: e' quella in cui la
   griglia si incolonna, qui sotto. Incolonnati, l'orologio finirebbe fra il
   testo e il modulo — cioe' spingerebbe in basso l'unico punto di conversione
   del sito, su schermi dove ogni schermata costa uno scorrimento. */
.contatti__orologio {
	display: none;
	width: min(28rem, 100%);
	margin-block-start: var(--space-8);
	margin-inline: auto;
}

@media (min-width: 881px) {
	.contatti__orologio {
		display: block;
	}
}

@media (max-width: 880px) {
	.verifica-grid,
	.contact-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}
}

/* --------------------------------------------------------------------------
   15. FAQ
   --------------------------------------------------------------------------
   Un solo sistema anima questo accordion: la transizione su
   grid-template-rows da 0fr a 1fr.

   Perche' non max-height: perche' richiede un'altezza massima inventata, e
   una risposta corta collasserebbe alla velocita' sbagliata. Perche' non
   un'animazione JS: perche' una transizione CSS RIPUNTA dal valore corrente
   se la interrompi a meta', mentre un fromTo ricomincia da zero — e questo
   e' un elemento che si puo' aprire e chiudere due volte in un secondo.
   -------------------------------------------------------------------------- */

.faq-list {
	max-width: 78ch;
	margin-top: var(--space-8);
	border-top: var(--hairline) solid var(--line);
}

/* IL PANNELLO DELLA DOMANDA APERTA sta su uno pseudo-elemento, non su un
   fondo con del padding, e la ragione e' che cosi' APRENDO NON SI SPOSTA
   NIENTE. Un fondo vero avrebbe voluto spazio interno, e quello spazio
   comparendo avrebbe spinto di lato il testo della domanda proprio nel
   momento in cui la si sta leggendo. Il riquadro invece cresce verso
   l'esterno — sporge di --space-5 oltre la colonna del testo — e compare in
   opacita', che si compone sulla GPU e non costa un ridisegno.

   Cresce da solo insieme alla risposta: `inset: 0` segue l'item, che si
   allunga quando il pannello si apre.

   Il pannello e' una superficie del blocco: sul nero della FAQ e' #1c1c1c,
   e il testo della domanda resta a 15.22:1. */
.faq-item {
	position: relative;
	border-bottom: var(--hairline) solid var(--line);
	transition: border-color var(--dur-panel) var(--ease-out);
}

.faq-item::before {
	content: '';
	position: absolute;
	inset: 0 calc(var(--space-5) * -1);
	z-index: -1;
	border-radius: var(--radius);
	background-color: var(--surface);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transition: opacity var(--dur-panel) var(--ease-out);
}

.faq-item[data-open='true']::before {
	opacity: 1;
}

/* I DUE FILETTI CHE TOCCANO IL PANNELLO SI TOLGONO DI MEZZO: quello dell'item
   aperto e quello dell'item subito sopra. Senza, due hairline attraversano
   gli angoli tondi del riquadro e il pannello sembra incollato male invece
   che sollevato. */
.faq-item[data-open='true'] {
	border-bottom-color: transparent;
}

@supports selector(:has(*)) {
	.faq-item:has(+ .faq-item[data-open='true']) {
		border-bottom-color: transparent;
	}
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	width: 100%;
	padding: var(--space-5) 0;
	border: 0;
	background: none;
	font-size: var(--fs-lead);
	font-weight: 500;
	letter-spacing: var(--track-heading);
	text-align: start;
	cursor: pointer;
	transition: color var(--dur-ui) var(--ease-hover),
	            transform var(--dur-press) var(--ease-out);
}

.faq-item__question:active {
	transform: scale(0.995);
}

@media (hover: hover) and (pointer: fine) {
	.faq-item__question:hover {
		color: var(--accent);
	}
}

.faq-item__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	font-family: var(--font-mono);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	color: var(--text-faint);
	transition: color var(--dur-ui) var(--ease-hover),
	            transform var(--dur-panel) var(--ease-out);
}

/* Aperto: l'icona ruota E prende l'accento. E' l'unico momento in cui questa
   sezione ha del colore, ed e' esattamente il momento in cui qualcosa e'
   successo per volonta' di chi legge. */
.faq-item[data-open='true'] .faq-item__icon {
	color: var(--accent);
	transform: rotate(90deg);
}

.faq-item__answer {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows var(--dur-panel) var(--ease-drawer),
	            opacity var(--dur-panel) var(--ease-out);
}

.faq-item[data-open='true'] .faq-item__answer {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* Il figlio deve poter essere schiacciato a zero: senza questi due, la riga
   di griglia non si contrae e la transizione non si vede. */
.faq-item__answer > * {
	min-height: 0;
	overflow: hidden;
}

.faq-item__answer p {
	max-width: 70ch;
	color: var(--text-muted);
}

/* Lo spazio sotto la risposta NON puo' essere padding sul <p>: il <p> e' il
   figlio di griglia, e il suo padding resta nel box anche con overflow:hidden
   e min-height:0. La riga non scenderebbe mai sotto i 24px e il pannello
   chiuso resterebbe socchiuso.
   Uno spaziatore dentro il contenuto, invece, viene ritagliato insieme al
   testo e collassa a zero. */
.faq-item__answer p::after {
	content: '';
	display: block;
	height: var(--space-5);
}

/* --------------------------------------------------------------------------
   16. Form di contatto
   -------------------------------------------------------------------------- */

/* LO STACCO FRA I CAMPI E' STRETTO, ed e' una misura presa sulla sezione
   intera. I campi sono sei: a 24px di stacco il modulo era alto 876 contro i
   615 della colonna a fianco, e le due metà finivano su due ritmi diversi. A
   16 il modulo scende a 828 e la sezione si legge come una cosa sola.

   Sotto ai 16 non si va: fra un campo e l'etichetta del successivo ci sono
   gia' solo 8px (il `gap` qui sopra), e stringendo ancora l'etichetta
   comincerebbe ad appartenere al campo sbagliato. */
.form-field {
	display: grid;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.form-field label {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: var(--hairline) solid var(--line-strong);
	border-radius: var(--radius);
	background-color: var(--surface-sunk);
	color: var(--text);
	font-size: var(--fs-small);
	transition: border-color var(--dur-ui) var(--ease-hover),
	            background-color var(--dur-ui) var(--ease-hover),
	            box-shadow var(--dur-ui) var(--ease-hover);
}

.form-field textarea {
	resize: vertical;
	min-height: 6rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--accent);
	background-color: var(--surface);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}

/* SU TELEFONO I CAMPI VANNO A 16px, e non e' una preferenza estetica.

   Safari su iOS ingrandisce automaticamente la pagina quando prende il fuoco
   un campo con corpo inferiore a 16px — e non la rimpicciolisce quando esci.
   L'effetto e' una pagina che salta e resta zoomata a meta' compilazione, sul
   modulo che e' l'unico punto di conversione del sito. Gli altri 15px del
   sito restano: il difetto riguarda solo i controlli che prendono il fuoco.

   Le etichette salgono con loro: a 13px su uno schermo da 375px sono
   leggibili ma faticose, e qui si sta chiedendo a qualcuno di lasciare i
   propri dati. */
@media (max-width: 700px) {

	.form-field input,
	.form-field select,
	.form-field textarea {
		font-size: 1rem;
	}

	.form-field label {
		font-size: 0.875rem;
	}
}

/* Il campo trappola per i bot: fuori dal flusso visivo ma non display:none —
   alcuni bot ignorano i campi nascosti in quel modo. */
.form-field--hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.form-note {
	margin-top: var(--space-4);
	font-size: var(--fs-micro);
	line-height: 1.5;
	color: var(--text-faint);
}

/* L'esito: non compare di colpo. E' il momento di massima tensione della
   pagina — chi ha compilato ha appena scoperto se e' qualificato o no.
   Restare su display:none/block sarebbe un teletrasporto. */
.form-message {
	display: grid;
	grid-template-rows: 0fr;
	border-radius: var(--radius);
	opacity: 0;
	transform: translateY(calc(var(--reveal-lift) * -0.4));
	transition: grid-template-rows var(--dur-panel) var(--ease-drawer),
	            opacity var(--dur-panel) var(--ease-out),
	            transform var(--dur-panel) var(--ease-out);
}

.form-message > * {
	min-height: 0;
	overflow: hidden;
}

.form-message.is-visible {
	grid-template-rows: 1fr;
	margin-top: var(--space-5);
	padding: var(--space-5);
	border: var(--hairline) solid rgba(var(--accent-rgb), 0.3);
	background-color: rgba(var(--accent-rgb), 0.07);
	font-size: var(--fs-small);
	opacity: 1;
	transform: translateY(0);
}

.form-message--filtered.is-visible {
	border-color: var(--line-strong);
	background-color: var(--surface-sunk);
	color: var(--text-muted);
}

/* L'errore di invio. E' l'unico messaggio del form che segnala che qualcosa
   NON e' andato, quindi e' anche l'unico che si prende un colore di stato.
   Il testo lo scrive main.js leggendolo dalla risposta del server: nel
   markup questo contenitore e' vuoto. */
.form-message--errore.is-visible {
	border-color: rgba(var(--text-rgb), 0.2);
	background-color: transparent;
	color: var(--negative);
}

/* --------------------------------------------------------------------------
   17. Piede
   -------------------------------------------------------------------------- */

/* Il piede e' l'ultimo blocco, scuro: dopo i contatti chiari l'alternanza
   continua. Stesso riquadro dei blocchi, ma largo quanto la cornice intera
   (§ 3): la linea guida finisce nello stacco sopra di lui, perche' le
   sezioni collegate sono dodici e il piede non e' un capitolo. */
.site-footer {
	margin-block: var(--blocco-stacco) var(--blocco-margine);
	/* Il margine dai bordi, o la meta' di cio' che avanza oltre la cornice
	   piena: e' la stessa larghezza dei blocchi con la loro corsia. */
	margin-inline: max(var(--blocco-margine), (100% - var(--blocco-max) - 10rem) / 2);
	padding-block: var(--space-9);
	border-radius: var(--radius-blocco);
	background-color: var(--bg);
	box-shadow: var(--ombra-blocco);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-5);
	line-height: 1.7;
}

/* Il padding verticale non serve all'aspetto: porta l'area di tocco a 44px,
   la soglia sotto la quale un dito sbaglia bersaglio. */
.site-footer a {
	display: inline-block;
	padding-block: var(--space-3);
	transition: color var(--dur-ui) var(--ease-hover);
}

@media (hover: hover) and (pointer: fine) {
	.site-footer a:hover {
		color: var(--accent);
	}
}