@import "style.css";

/* =========================================================
   HERO HOME
   Figma: Mockup, node 1259-4697 "Hero Home FallBack"
   ========================================================= */

/* Hero statica (gradiente sfocato fisso, --sfondo-hero — stessa tecnica/
   variabile di /agenzia/ e /madsuite/, su richiesta esplicita al posto
   del vecchio pin-spacer/scroll-jacking a 350vh). Hero alta almeno 100vh
   (min-height: cresce se il contenuto e' piu' alto), gradiente con
   ellisse in PERCENTUALE (non svh) cosi' si adatta sempre all'altezza
   reale della sezione — fondendosi comunque con Risultati subito sotto
   senza stacco (vedi margin-top su .mm-risultati piu' in basso in
   questo file). */
.mm-hero-home {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	isolation: isolate;
	--mm-hero-blur: min(125px, 8svh);
	--mm-hero-ext:  calc(var(--mm-hero-blur) * 2.4);
	--sfondo-hero: radial-gradient(
		220% 220% at 100% var(--mm-hero-ext),
		var(--colori-pieni-rosso-default, #D24A5D) -10%,
		var(--colori-pieni-blu-default, #162640) 50%,
		var(--colori-pieni-blu-default, #162640) 100%
	);
	background-color: var(--colori-pieni-blu-default, #162640);
}

.mm-hero-home::before {
	content:  "";
	position: absolute;
	inset: calc(var(--mm-hero-ext) * -1) calc(var(--mm-hero-ext) * -1) 0 calc(var(--mm-hero-ext) * -1);
	z-index:  -2;
	background: var(--sfondo-hero);
	filter: blur(var(--mm-hero-blur));
	transform: translateZ(0); /* aiuta Safari con blur grandi */
}


/* Bagliore rosso + bianco: asset reali esportati da Figma (Animazioni,
   node 1:1659 "Hero Generica", step 02) — non gradienti CSS ma ellisse/
   cerchio sfocati gia' pronti, posizionati con le stesse proporzioni esatte
   del frame originale (1512x982) cosi' l'effetto e' identico. Concentrici,
   ancorati allo stesso centro verticale (92.59vw dall'alto dello stage).
   Allo scroll crescono via transform:scale (vedi homepage.js). */
.mm-hero-home__glow-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.mm-hero-home__glow-pos {
	position: absolute;
	left: 50%;
	top: 92.59vw;
	transform: translate(-50%, -50%);
}

.mm-hero-home__glow {
	display: block;
	max-width: none;
}

.mm-hero-home__glow--red {
	width: 232.28vw;
	height: 166.14vw;
}

.mm-hero-home__glow--white {
	width: 92.59vw;
	height: 92.59vw;
}

/* Grana (.mm-bg-grain, stile base condiviso in _utilities.css): qui in
   piu' la maschera la fa sparire prima del bianco finale, cosi' non
   resta texture sul fondo (Risultati non ce l'ha e si vedrebbe lo
   stacco) — stessa tecnica di /agenzia/ e /madsuite/. */
.mm-hero-home > .mm-bg-grain {
	z-index: -1;
	-webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 85%);
	        mask-image: linear-gradient(to bottom, #000 65%, transparent 85%);
}

.mm-hero-home__inner {
	position: relative;
	z-index: 1;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--spacing-16);
	padding-top: var(--spacing-80, 80px);
	padding-bottom: var(--spacing-40);
}


.mm-suite-home__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	padding-left: var(--spacing-8, 8px);
	padding-right: var(--spacing-8, 8px);
	padding-top: var(--spacing-80);
	padding-bottom: var(--spacing-80);
}

/* ---------- TITOLO ---------- */
.mm-hero-home__title {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.mm-hero-home__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
}

.mm-hero-home__line {
	color: var(--colori-pieni-bianco-default);
	margin: 0;
}

/* Riga 1/2 a due colonne con percentuali (solo da 1081px in su, vedi
   @media(min-width:1081px) piu' sotto: .mm-hero-home__row > .mm-hero-home__line
   / .google-rating / .mm-hero-home__row--sub > .mm-hero-home__sub-col /
   .mm-hero-home__line--right) — qui sotto solo cio' che vale SEMPRE:
   niente piu' nowrap forzato, cosi' il testo puo' andare a capo quando
   non ci sta nella sua colonna, a qualunque larghezza. */
.mm-hero-home__line {
	white-space: normal;
}

.mm-hero-home__line--right {
	text-align: right;
	white-space: normal;
}

/* Parola rotante dentro "IN MODO ___" (stesso meccanismo di
   .mm-madsuite-card__rotator, vedi homepage.php/js): crossfade via la
   classe .is-active. A differenza della card MadSuite (dove il
   contenitore e' gia' largo quanto la colonna), qui vive in mezzo al
   testo e deve "sapere" da solo quanto e' larga la parola piu' lunga tra
   quelle nel ciclo — niente stima approssimativa in ch (tagliava le
   parole piu' larghe del previsto, vedi commit precedente): con
   inline-grid e tutte le parole nella STESSA cella (grid-row/column: 1),
   la colonna della grid si dimensiona da sola sulla larghezza reale
   (misurata dal browser sul font vero) della parola piu' larga tra
   quelle presenti — esatto per qualunque font/parola, anche future. */
.mm-hero-home__rotator {
	display: inline-grid;
	overflow: hidden;
	min-height: var(--h1-line);
	vertical-align: bottom;
}

.mm-hero-home__rotator-item {
	grid-row: 1;
	grid-column: 1;
	margin: 0;
	white-space: nowrap;
	pointer-events: none;
	transform: translateY(100%);
}

.mm-hero-home__rotator-item.is-active {
	transform: translateY(0%);
	pointer-events: auto;
}

/* Allinea la base del paragrafo (body-medium) con la base di "with you"
   (h1, enormemente piu' grande) invece di centrarli sull'asse verticale:
   con differenze di font-size cosi' marcate, align-items:center (ereditato
   da .mm-hero-home__row) li faceva sembrare scentrati/appoggiati a caso. */
.mm-hero-home__row--sub {
	align-items: flex-end;
}

.mm-hero-home__subtitle {
	color: var(--colori-pieni-blu-50);
	margin: 0;
	max-width: 400px;
}

@media (max-width: 1080px) {
	.mm-hero-home__row--sub {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-16);
	}
	.mm-hero-home__line--right {
		text-align: left;
		order: 1;
	}
	.mm-hero-home__sub-col {
		order: 2;
	}
}

@media (max-width:1080px) {
	.mm-hero-home__line--right {
		text-align: left;
		order: 1;
	}
	.mm-hero-home__sub-col {
		order: 2;
	}
}

@media (max-width: 767px) {
	.mm-hero-home__line { white-space: normal; text-align: center; }
	.mm-hero-home__row { flex-direction: column; align-items: flex-start; gap: var(--spacing-16); }
	.mm-hero-home__row--sub { align-items: center; }
	.mm-hero-home__line--right { text-align: center; }
	.mm-hero-home__subtitle { text-align: center; max-width: none; }

	.mm-hero-home__title {
		width: 100%;
		align-items: center;
		text-align: center;
	}


	.mm-hero-home__row {
		width: 100%;
		align-items: left;
	}

	.mm-hero-home__inner {
		padding-left: var(--spacing-20, 20px);
		padding-right: var(--spacing-20, 20px);
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		gap: 0px;
		padding-bottom: var(--spacing-80, 80px);
	}
	

	.mm-cs__inner {
	gap: var(--spacing-40, 40px) !important;
	padding-block: var(--spacing-80, 80px) !important;
}

.mm-cs__buttons .btn {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    text-align: center;
}
.mm-suite-home__inner{
    padding-top: var(--spacing-8, 8px) !important;
	padding-bottom: var(--spacing-8, 8px) !important;
}


	/* Stesso ordine del tablet (su richiesta esplicita), ma centrato
	   invece che allineato a sinistra: rating, poi il testo completo del
	   titolo (riga 1 + riga 2 — riga 2 gia' ordinata cosi' dalla regola
	   @media(max-width:1080px) piu' sopra), poi sottotitolo+bottoni per
	   ultimo. */
	.mm-hero-home__row:not(.mm-hero-home__row--sub) {
		align-items: center;
		gap: 40px;
	}

	.mm-page-agenzia .mm-hero-home__title > .mm-hero-home__row:not(.mm-hero-home__row--sub) {
	align-items: flex-start;
}

	.mm-hero-home__row:not(.mm-hero-home__row--sub) > .google-rating {
		order: 1;
	}
	.mm-hero-home__row:not(.mm-hero-home__row--sub) > .mm-hero-home__line:not(.mm-hero-home__line--right) {
		order: 2;
	}

	/* Bottoni: stessa larghezza di titolo/paragrafo (che occupano gia'
	   tutta la larghezza disponibile dentro .mm-hero-home__inner) invece
	   di restare stretti al contenuto come su desktop, e ognuno pieno
	   100% invece che affiancati. Il rating NON e' piu' qui dentro (e'
	   nella riga 1 insieme al primo pezzo di titolo, vedi
	   .mm-hero-home__row/.mm-hero-home__title .google-rating sotto):
	   niente piu' da riordinare tra bottoni e rating con "order". */
	.mm-hero-home__sub-col {
		align-self: stretch;
		width: 100%;
		gap: var(--spacing-20, 20px);
	}

	.mm-hero-home__buttons {
		flex-direction: column;
		align-self: stretch;
		width: 100%;
	}

	.mm-hero-home__buttons .btn {
		flex: 1 1 100%;
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* Rating: stessa logica di bottoni/titolo — stretch a piena larghezza
	   cosi' che l'align-items:center gia' impostato su .google-rating per
	   mobile (vedi components.css) lo centri sull'intera larghezza della
	   hero invece che solo dentro il proprio box shrink-to-fit. */
	.mm-hero-home__title .google-rating {
		align-self: stretch;
		width: 100%;
		text-align: center;
		align-items: center !important;
	}

	.mm-hero-home__title .google-rating__avatars {
		justify-content: center;
	}
}

/* ---------- SOTTOTITOLO+BOTTONI (riga 2) e RATING (riga 1) ----------
   Struttura a righe/colonne (Figma): riga 1 = primo pezzo di titolo +
   rating Google; riga 2 = (sottotitolo + bottoni) + secondo pezzo di
   titolo. Non c'e' piu' un footer separato sotto il titolo: rating e
   bottoni sono entrambi dentro .mm-hero-home__title ora. */
.mm-hero-home__sub-col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24, 24px);
	/* Container query context per i bottoni qui sotto (stessa tecnica di
	   .mm-madsuite-card__side): "non ci stanno su una riga" si valuta
	   sulla larghezza REALE di questa colonna (40% della riga, vedi
	   @media(min-width:1081px) piu' sopra), non sulla finestra. */
	container-type: inline-size;
}

.mm-hero-home__buttons {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	flex-wrap: wrap;
	width: 100%;
}

/* Sotto questa soglia i due bottoni non entrano piu' affiancati alla loro
   dimensione naturale su desktop: oltre ad andare a capo (flex-wrap:wrap
   qui sopra), ciascuno deve allargarsi al 100% della colonna invece di
   restare piccolo e allineato a sinistra — stesso meccanismo/soglia di
   .mm-madsuite-card__buttons (vedi piu' sotto in questo file). Su
   tablet/mobile i bottoni vanno gia' sempre a piena larghezza per altra
   via (vedi i rispettivi @media), quindi questa regola conta solo su
   desktop quando la colonna 40% diventa stretta. */
@container (max-width: 560px) {
	.mm-hero-home__buttons .btn {
		flex: 1 1 100%;
		width: 100%;
	}
}

.mm-hero-home__title .google-rating {
	align-items: flex-end;
}
.mm-hero-home__title .google-rating__score,
.mm-hero-home__title .google-rating__label {
	color: var(--colori-pieni-bianco-default);
}

/* =========================================================
   RISULTATI
   Figma: Mockup, node 1259-4754 "Risultati"
   ========================================================= */
/* La hero sopra e' ora statica (140svh, coda gia' bianca — vedi
   .mm-hero-home piu' sopra): margin-top negativo leggero solo per
   sovrapporsi di poco alla coda bianca della hero, stessa tecnica/
   valore gia' usata da .mm-agenzia-intro in page-agenzia.css, cosi' non
   resta uno stacco visibile fra le due sezioni. Il contenuto e' sempre
   in flusso normale, sempre visibile (niente piu' overlay fisso/fade in
   pilotato dallo scroll della hero, vedi sotto). */
.mm-risultati {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid var(--colori-pieni-bianco-default);
}

/* Classe NON piu' applicata da nessun JS (la hero non pilota piu' un
   overlay/fade in su Risultati): resta qui solo perche' innocua se
   inutilizzata, non e' stata rimossa per non rompere eventuali
   riferimenti residui altrove. */
.mm-risultati--overlay {
	position: fixed;
	inset: 0;
	margin-top: 0;
	overflow: hidden;
	pointer-events: none;
}

@media(min-width:1081px){
	.mm-risultati__inner{
		min-height: 100vh;
		padding-block: var(--spacing-320, 320px);
		padding-top: 0px;
	}
	/* Numero in alto (.mm-risultati__item--top): tolto lo spazio vuoto
	   sopra il numero dovuto alla metrica del font, su richiesta esplicita
	   con un aggiustamento manuale invece di text-box-trim (provato ma non
	   risolveva). */
	.mm-risultati__item--top .mm-risultati__number {
		margin-top: -30px;
		text-box: none;
	}

	.mm-hero-home__row > .mm-hero-home__line:not(.mm-hero-home__line--right) {
    width: 65%;
}
	/* Riga 1 — 60% testo / 40% rating; riga 2 — 40% sottotitolo+bottoni /
	   60% secondo pezzo di titolo (percentuali su richiesta esplicita,
	   solo da qui in su: sotto i 1080px le righe sono gia' impilate in
	   colonna, vedi @media(max-width:1080px) piu' sopra). flex-basis in
	   %, non larghezza fissa: il testo va a capo da solo (vedi
	   white-space:normal su .mm-hero-home__line/--right piu' sopra) se
	   non ci sta nella sua colonna, invece di sbordare o schiacciare
	   l'altra colonna. */
	.mm-hero-home__row > .mm-hero-home__line {
		flex: 0 1 75%;
		min-width: 0;
	}
	.mm-hero-home__row > .google-rating {
		flex: 0 1 15%;
		min-width: 0;
		padding-bottom: 22px;
	}
	.mm-hero-home__row--sub > .mm-hero-home__sub-col {
		flex: 0 1 25%;
		min-width: 0;
	}
	.mm-hero-home__line--right{
		text-box: trim-both cap alphabetic;
		flex: 0 1 70%;
		min-width: 0;
	}
	.mm-hero-home__title{
		gap: var(--spacing-40, 40px);
	}

/* Agenzia: nessun gap tra le righe del titolo hero */
.mm-page-agenzia .mm-hero-home__title {
	gap: 0;
}
	.mm-hero-home__subtitle{
		max-width: none;
	}
	
}

.mm-risultati__inner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-160, 160px);
	padding-block: var(--spacing-80, 80px);
    background-color: var(--colori-pieni-bianco-default);
}

.mm-risultati__title {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--spacing-24, 24px);
}

.mm-risultati__heading {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--colori-pieni-blu-default, #162640);
}

.mm-risultati__certifications {
	display: flex;
	align-items: center;
	gap: var(--spacing-8, 8px);
	flex-shrink: 0;
}

.mm-risultati__cert {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-16, 16px);
	border: 1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
	border-radius: var(--mm-radius-md, 8px);
}

.mm-risultati__cert img {
	display: block;
	height: 32px;
	width: auto;
}

.mm-risultati__numbers {
	display: flex;
	width: 100%;
}

.mm-risultati__item {
	position: relative;
	/* flex-basis 240px come "preferenza" ma senza min-width fisso: con 4
	   colonne, un min-width di 240px richiede almeno 960px di contenitore
	   — a viewport intermedi (es. tablet, ~944px di contenuto reale) il
	   quarto item sborda a destra. min-width:0 lascia che si restringano
	   davvero se serve, invece di forzare l'overflow. */
	flex: 1 1 240px;
	min-width: 0;
	min-height: 320px;
	display: flex;
	flex-direction: column-reverse; /* di default: testo in alto, numero in basso */
	justify-content: space-between;
	gap: var(--spacing-40, 40px);
	padding: var(--spacing-16, 16px) var(--spacing-80, 80px) var(--spacing-16, 16px) var(--spacing-16, 16px);
	box-sizing: border-box;
}

.mm-risultati__line {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 1px;
	background: var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
	transform: scaleY(0);
	transform-origin: top;
}

.mm-risultati__item--top {
	flex-direction: column; /* numero in alto, testo in basso */
}

.mm-risultati__number {
	margin: 0;
	line-height: 1;
	font-family: var(--font-mono);
	font-weight: var(--weight-regular);
	color: var(--colori-pieni-blu-default, #162640);
	text-box: trim-both cap alphabetic;
}

/* Titolo facoltativo sopra il testo descrittivo (entrambi facoltativi,
   vedi $mm_risultati in homepage.php, stesso div .mm-risultati__desc):
   stesso identico stile del testo sotto (body-medium), cambia solo il
   colore (blu-default invece del grigio-blu). */
.mm-risultati__item-title {
	margin: 0;
	color: var(--colori-pieni-blu-default, #162640);
}

.mm-risultati__text {
	margin: 0;
	color: var(--colori-pieni-blu-300, #616B7D);
}

/* Parole in grassetto dentro il testo (vedi mm_bold_text() in
   inc/template-functions.php, sintassi **parola**). */
.mm-risultati__text strong {
	font-weight: 600;
}

@media (max-width: 767px) {
	.mm-risultati__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-40, 40px);
		padding: var(--spacing-80, 80px) var(--spacing-20, 20px);
	}
	.mm-hero-home__buttons{
		align-items: center;
	}
	/* display:contents: il titolo smette di essere un box proprio e i suoi
	   figli (heading + loghi) diventano item flex diretti di
	   .mm-risultati__inner, cosi' possiamo riordinarli rispetto a
	   .mm-risultati__numbers (che e' un fratello, non un figlio del
	   titolo) solo con "order" — altrimenti i loghi, annidati dentro il
	   titolo, non potrebbero mai finire visivamente DOPO i numeri. */
	.mm-risultati__title {
		display: contents;
	}

	.mm-risultati__heading {
		order: 1;
		width: 100%;
		text-align: center;
	}

	.mm-risultati__numbers {
		order: 2;
		flex-direction: column;
		gap: var(--spacing-40, 40px);
	}

	.mm-risultati__certifications {
		order: 3;
		width: 100%;
		justify-content: center;
	}

	/* Righe orizzontali testo/numero, alternate: l'ordine nel DOM resta
	   sempre [numero, testo] (vedi homepage.php) — su mobile l'alternanza
	   si ottiene con row-reverse/row invece di column-reverse/column
	   usate su desktop, stessa tecnica, solo sull'asse orizzontale. */
	.mm-risultati__item {
		flex: 1 1 100%;
		flex-direction: row-reverse;
		align-items: flex-end;
		justify-content: flex-start;
		min-height: 0;
		gap: var(--spacing-40, 40px);
		padding: 0 0 var(--spacing-40, 40px) 0;
		border-bottom: 1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
	}

	.mm-risultati__item--top {
		flex-direction: row;
	}

	.mm-risultati__item:last-child {
		border-bottom: none;
		padding-bottom: var(--spacing-0, 0px);
	}

	.mm-risultati__line {
		display: none;
	}

	.mm-risultati__number {
		flex-shrink: 0;
	}

	.mm-risultati__text {
		flex: 1 1 0;
		min-width: 0;
	}

	.mm-risultati__certifications {
		gap: var(--spacing-8, 8px);
	}
}

/* Tablet (768-1080px): il layout dei "Numeri" resta quello da desktop
   (4 colonne affiancate, nessuna modifica qui), cambia solo la
   posizione dei loghi partner rispetto al mobile qui sopra: anche qui
   vanno sotto la sezione Numeri invece che accanto al titolo — stessa
   tecnica display:contents + order (vedi commento nel blocco mobile). */
@media (min-width: 768px) and (max-width: 1080px) {
	.mm-risultati__title {
		display: contents;
	}

	.mm-risultati__heading {
		order: 1;
	}
	.mm-hero-home__row.mm-hero-home__row--sub{
		align-items: flex-start !important;
	}

	.mm-hero-home__title{
		justify-content: flex-end;
		gap: 0px;
	}
	/* Ordine su tablet (su richiesta esplicita): rating, poi il testo
	   completo del titolo (riga 1 + riga 2), poi sottotitolo+bottoni per
	   ultimo. Riga 1 va in colonna (invece del wrap di default) cosi'
	   l'ordine rating-poi-testo e' esplicito, non legato a quanto spazio
	   resta sulla riga. La riga 2 (sottotitolo+bottoni / secondo pezzo di
	   titolo) e' gia' ordinata cosi' dalla regola @media(max-width:1080px)
	   piu' sopra (line--right prima di sub-col). */
	.mm-hero-home__row:not(.mm-hero-home__row--sub) {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}
	.mm-hero-home__row:not(.mm-hero-home__row--sub) > .google-rating {
		order: 1;
		align-items: flex-start;
	}
	.mm-hero-home__row:not(.mm-hero-home__row--sub) > .mm-hero-home__line:not(.mm-hero-home__line--right) {
		order: 2;
	}

	/* Bottoni: quando stanno affiancati su una riga sola (c'e' spazio a
	   sufficienza, a differenza di mobile dove vanno in colonna), devono
	   occupare tutta la larghezza disponibile invece di restare stretti
	   al loro contenuto con vuoto a destra. */
	.mm-hero-home__sub-col {
		align-self: stretch;
		width: 100%;
	}
	.mm-hero-home__buttons {
		align-self: stretch;
		width: 100%;
	}
	.mm-hero-home__buttons .btn {
		flex: 1 1 0;
	}

	.mm-risultati__numbers {
		order: 2;
	}

	.mm-risultati__certifications {
		order: 3;
		justify-content: center;
	}

	/* Layout riga orizzontale testo+numero (Figma node 1898:7353),
	   stessa alternanza row/row-reverse usata su mobile ma con gap
	   piu' largo e senza padding-top (solo padding-bottom + bordo). */
	.mm-risultati__numbers {
		flex-direction: column;
	}


	.mm-risultati__item {
		flex: 1 1 100%;
		flex-direction: row-reverse;
		align-items: flex-end;
		justify-content: flex-start;
		min-height: 0;
		gap: var(--spacing-160, 160px);
		padding: 0 var(--spacing-16, 16px) var(--spacing-40, 16px);
		border-bottom: 1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
		padding-top: var(--spacing-80, 80px);
	}
	.mm-risultati__item--top {
		flex-direction: row;
	}
	.mm-risultati__item:last-child {
		border-bottom: none;
	}
	.mm-risultati__line {
		display: none;
	}
	.mm-risultati__number {
		flex-shrink: 0;
		text-box: trim-both cap alphabetic;
	}
	.mm-risultati__text {
		flex: 1 1 0;
		min-width: 0;
	}
	.mm-cs__inner{
		padding-top: var(--spacing-80, 80px);
		padding-block: var(--spacing-80, 80px) !important; 
		gap: var(--spacing-40, 40px);
	}
	.mm-cs-feature__media{
		flex: 1 1 0;
	}
	.mm-cs-feature__panel{
		flex: 1 1 0;
	}
}

/* =========================================================
   RECENSIONI
   Card: Design System, node 1067:593 "Recensione"
   ========================================================= */
.mm-reviews__inner {
	display:        flex;
	flex-direction: column;
	gap:            var(--spacing-32, 32px);
	padding-block:  var(--spacing-80, 80px);
	background-color: var(--colori-pieni-bianco-default);
}

.mm-reviews__title {
	margin: 0;
	color:  var(--colori-pieni-blu-default, #162640);
}

/* overflow-x soltanto (non "overflow: hidden" su entrambi gli assi): serve
   solo a nascondere le slide adiacenti durante lo scorrimento orizzontale
   del carosello. Con overflow:hidden su entrambi gli assi, l'ombra della
   card (.mm-review, vedi components.css) veniva tagliata di netto sopra e
   sotto perche' la card non ha margine verticale dentro la slide — proprio
   li' dove l'ombra e' piu' visibile (angoli arrotondati), sparendo del
   tutto o sembrando "squadrata". overflow-y:visible lascia che l'ombra
   sfumi liberamente in verticale, senza riattivare lo scroll orizzontale
   libero (quello resta bloccato da overflow-x). */
.mm-reviews__track {
	overflow-x: hidden;
	overflow-y: visible;
	box-shadow: var(--mm-shadow-card);
    border-radius: var(--mm-radius-xl, 24px);
}

.mm-reviews__track-inner {
	display:    flex;
	transition: transform 0.5s var(--mm-ease, ease);
}

.mm-reviews__slide {
	flex:      0 0 100%;
	min-width: 0;
}

.mm-reviews__nav {
	display:         flex;
	justify-content: flex-end;
	gap:             var(--spacing-8, 8px);
}

/* Il componente icona di default punta "avanti" (>) — per "indietro"
   basta specchiarlo, stessa icona riutilizzata senza duplicarla. */
.mm-reviews__prev .btn-icon__icon {
	transform: scaleX(-1);
}

@media (max-width: 767px) {
	.mm-reviews__inner {
		gap:           var(--spacing-24, 24px);
		padding-block: var(--spacing-80, 80px);
	}
	.mm-reviews__title{
		text-align: center;
	}
}

/* Recensioni + Footer: animazione (stage pinnato con sub-scroll + reveal
   a ellisse) rimossa del tutto su richiesta esplicita — usata sia da
   Home che da MadSuite (stessi id/classe .mm-reviews__stage/#mmFooter).
   Recensioni e Footer sono ora sezioni normali in flusso, niente piu'
   pin/overlay, su nessun dispositivo. Il blocco IIFE dedicato in
   homepage.js e' stato rimosso (era comunque gia' inutilizzato: Home,
   MadSuite, Casi Studio e Manifesto uscivano tutte prima di eseguirlo).
   I layer decorativi (#mmFooterScrollBg/RevealBg/Grain, ancora nel
   markup) restano semplicemente nascosti qui sotto. */
.mm-reviews__stage > .mm-bg-grain,
.mm-reviews__stage .mm-scroll-bg,
.mm-reviews__stage .mm-scroll-bg--reveal {
	display: none !important;
}
.mm-reviews__stage #mmFooter {
	/* position:relative + isolation:isolate servono al layer sfocato
	   ::before di .mm-footer (footer.css) per il proprio gradiente —
	   NON position:static, altrimenti si romperebbe. Il colore di base
	   (background-color) e' gia' quello di riserva di .mm-footer stessa,
	   niente da impostare qui. */
	position: relative;
	isolation: isolate;
}


/* =========================================================
   CASI STUDIO
   Figma: Mockup, node 1281-5689 "Casi Studio"
   Card: Design System, node 1041-2060 "Caso Studio"

   Sezione piu' alta di 100vh, ma pinnata a schermo intero per tutta la sua
   durata con sub-scroll interno (vedi commento in homepage.php e
   homepage.js): #mm-cs riceve un'altezza 100vh + extra via
   --mm-cs-sub-distance (calcolata in JS in base al contenuto reale),
   #mmCasiStudioStage resta sticky/fermo, #mmCasiStudioWindow taglia il
   contenuto (overflow:hidden + sfumatura ai bordi) e #mm-cs__inner trasla
   verticalmente al suo interno.
   ========================================================= */
.mm-cs {
	position: relative;
	/* 100vh (pin) + sub-distance (sub-scroll interno) + 350vh (100vh ingresso
	   ellisse verso MadSuite + 250vh uscita verso il Manifesto, ex altezza
	   di #mm-manifesto-hero, ora fuso in un unico stage — vedi homepage.js) */
	height: calc(100vh + var(--mm-cs-sub-distance, 0px) + 350vh);
}

.mm-cs__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.mm-cs__window {
	overflow: hidden;
	/* Assoluta e leggermente piu' alta della finestra visibile (bleed verticale
	   3% sopra/sotto, come i layer di sfondo sfocati .mm-scroll-bg): cosi' il
	   suo bordo rettangolare (bianco pieno) cade sempre FUORI dallo schermo,
	   invece di tagliare in modo netto lo sfondo di MadSuite sotto quando la
	   finestra diventa semi-trasparente durante il crossfade (senza questo
	   bleed si vedeva uno "stacco" netto proprio all'altezza del suo bordo). */
	position: absolute;
	/* Bleed ASIMMETRICO: 3% sopra (invariato), 25% sotto — la finestra
	   trasla verso l'ALTO di pushDistance (18% di 100vh, vedi homepage.js)
	   durante il crossfade verso MadSuite: questo sposta il bordo
	   INFERIORE verso l'alto, dentro lo schermo, se il bleed sotto non e'
	   maggiore della traslazione massima. Con solo 3% il bordo bianco
	   pieno rientrava a meta'/fine transizione, creando una riga netta
	   sopra lo sfondo sfocato di MadSuite. 25% > 18% + margine sicurezza. */
	inset: -3% 0 -25% 0;
	z-index: 2;
	/* copertura bianca piena della finestra, non solo del contenuto interno
	   (.mm-cs__inner): se il contenuto e' piu' corto della finestra (poche
	   card, niente sub-scroll) non deve lasciar intravedere lo sfondo
	   MadSuite sottostante a riposo. */
	background-color: var(--colori-pieni-bianco-default);
}

.mm-cs__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-80, 80px);
	padding-block: var(--spacing-160, 160px);
	background-color:  var(--colori-pieni-bianco-default);;
	padding-bottom: 80px;
	padding-bottom: 160px !important;
	will-change: transform;
}

.mm-cs__title {
	margin: 0;
	text-align: center;
	color: var(--colori-pieni-blu-default, #162640);
}

/* Le card "Caso Studio" (.mm-cs-feature, componente riutilizzabile in
   components.css) sono grandi quanto il contenitore: si impilano in
   colonna, una sotto l'altra, invece della vecchia griglia a 2 colonne. */
.mm-cs__grid {
	display:        flex;
	flex-direction: column;
	gap:var(--spacing-16, 16px);
	width:          100%;
}

.mm-cs__buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8, 8px);
	flex-wrap: wrap;
	border-radius: var(--spacing-40, 40px) !important;
}

/* MadSuite e' sovrapposta a Casi Studio nello STESSO stage sticky
   (#mmCasiStudioStage, vedi homepage.php/js): niente piu' due pin in
   sequenza, i layer di sfondo/testo di MadSuite stanno sotto/sopra quelli
   di Casi Studio nella stessa posizione a schermo, cosi' il passaggio e'
   un vero crossfade invece di un cambio di sezione con uno scroll "vuoto"
   in mezzo. */
/* niente "position: relative" qui: .mm-cs__stage e' gia' sticky (vedi
   regola sopra), che stabilisce comunque il contesto di posizionamento per
   i figli assoluti sottostanti — ridichiararla romperebbe il pin. */
.mm-cs__stage .mm-scroll-bg,
.mm-cs__stage .mm-scroll-bg--reveal {
	z-index: 0;
}

.mm-cs__stage > .mm-bg-grain {
	z-index: 1;
}

.mm-cs__stage .mm-suite-home__inner {
	position: absolute;
	inset: 0;
	z-index: 3;
	justify-content: center;
	/* a riposo (Casi Studio ancora in vista) non deve intercettare i click:
	   homepage.js alterna pointer-events "auto" solo quando e' visibile */
	pointer-events: none;
}

/* =========================================================
   MANIFESTO
   Figma: Mockup, node 1319:1854 "Manifesto"
   ========================================================= */
/* Il Manifesto prende il posto di "Risultati" dopo la hero: in origine
   restava un overlay fisso e invisibile finche' il bagliore della sezione
   "Transizione verso il Manifesto" non copriva tutto di bianco, poi si
   sovrapponeva/appariva — stesso meccanismo di .mm-risultati--overlay
   dopo la vera hero (vedi homepage.js). Quel meccanismo vive nella IIFE
   "Casi Studio -> MadSuite -> Manifesto" di homepage.js, ora scollegata
   (return anticipata, vedi nota in homepage.php): il margin-top:-100vh
   qui sotto serviva a "risucchiare" il Manifesto sopra lo stage pinnato
   precedente, contando sul JS per rimetterlo a posto via classe
   .mm-manifesto--overlay. Con Casi Studio/MadSuite tornate sezioni
   normali quel margin negativo non viene piu' compensato da nessuno e
   trascinerebbe il Manifesto sopra la sezione MadSuite, coprendola —
   quindi RIMOSSO. .mm-manifesto--overlay resta sotto (dormiente, la
   classe non viene piu' applicata) per lo stesso motivo delle altre
   regole dormienti in questo file. */
.mm-manifesto {
	position: relative;
	z-index: 2;
	overflow: hidden;
	isolation: isolate;
}

.mm-manifesto--overlay {
	position: fixed;
	inset: 0;
	margin-top: 0;
	pointer-events: none;
}

.mm-manifesto__inner {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-40, 40px);
	padding-block: var(--spacing-80, 80px);
	text-align: center;
	background-color: var(--colori-pieni-bianco-default);
}

.mm-manifesto__text {
	margin: 0;
	max-width: none;
	width: 80%;
	color: var(--colori-pieni-blu-default, #162640);
}

/* Porting vanilla dello "ScrollReveal" di React Bits: ogni parola in un
   proprio span (equivalente di <span class="word">), animato via GSAP in
   homepage.js. display:inline-block necessario perche' l'opacity/transform
   per-parola funzioni mantenendo l'a-capo naturale del testo; l'origine
   della rotazione del contenitore e' impostata via JS (transformOrigin). */
/* Contenitore "nowrap" di ogni parola: le singole lettere animate al suo
   interno restano sempre unite, senza spezzarsi a meta' andando a capo. */
.mm-manifesto__word-group {
	display: inline-block;
	white-space: nowrap;
}

.mm-manifesto__word {
	display: inline-block;
	will-change: opacity, filter;
}

/* Di default (gia' nel CSS, non solo via JS) le parole sono invisibili:
   l'animazione parte con data-mm-play-on-event (vedi mm-animations.js),
   quindi se per qualche motivo il JS tardasse a partire non deve
   comparire per un istante tutto il testo gia' a piena opacita'. */
[data-mm-play-on-event] .mm-manifesto__word {
	opacity: 0;
}

.mm-manifesto__buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8, 8px);
	flex-wrap: wrap;
}

@media (max-width: 767px) {
	.mm-manifesto__inner {
		padding-block: var(--spacing-80, 80px);
		padding-bottom: var(--spacing-80, 80px);
		gap: var(--spacing-24, 24px);
	}


	.mm-manifesto__buttons {
		flex-direction: column;
		width: 100%;
	}

	.mm-manifesto__buttons .btn {
		flex: 1 1 100%;
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* =========================================================
   IMMAGINE (placeholder)
   Figma: Mockup, node 2041:16898 "Immagine" — blocco vuoto, spazio
   riservato per un'immagine futura, sotto il Manifesto. Altezza fissa
   per breakpoint (su richiesta esplicita), niente object-fit/contenuto
   reale per ora.
   ========================================================= */
.mm-home-image {
	padding-block: var(--spacing-80, 80px);
}
.mm-home-image__box {
	width: 100%;
	height: 100vh;
	border-radius: var(--mm-radius-lg, 16px);
	/* Grigio pieno, stesso trattamento gia' usato per gli altri spazi
	   d'attesa di una foto sul sito (es. .mm-madsuite-card__media). */
	background-color: var(--colori-pieni-grigio-200, #E2DED9);
	overflow: hidden;
}
/* Variante con immagine reale selezionata (solo pagine Soluzione per
   ora): stesso box/altezze del placeholder, ma con una foto che lo
   riempie invece del grigio pieno. */
.mm-home-image__box--media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (min-width: 2560px) {
	.mm-home-image__box {
		height: 100vh;
	}
}
@media (max-width: 1080px) {
	.mm-home-image__box {
		height: 480px;
	}
}
@media (max-width: 767px) {
	.mm-home-image {
		padding-block: var(--spacing-40, 40px);
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.mm-home-image__box {
		height: 480px;
	}
}

/* =========================================================
   MADSUITE
   Figma: Mockup, node 1539:2950 "MadSuite"
   ========================================================= */
/* MadSuite "pinnata": stesso identico pattern pin-spacer + stage sticky
   della hero (vedi .mm-hero-home/.mm-hero-home__stage) — un'ellisse rossa
   e un cerchio col gradiente brand (al posto del bianco) crescono via
   scale esattamente come nella hero, il gradiente cosi' tanto da coprire
   tutto lo schermo, rivelando poi il contenuto di MadSuite (rating,
   titolo, testo, bottoni, foto).
   UNICA differenza dalla hero: i due cerchi sono ancorati al bordo
   SUPERIORE dello stage (non al centro come nella hero) — appena parte lo
   scroll la sezione si porta in cima (sticky, come sempre) e i cerchi si
   espandono verso IL BASSO, non simmetricamente in ogni direzione. */
.mm-madsuite {
	position: relative;
	height: 300vh;
}

.mm-madsuite__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Sfondo bianco di partenza: e' il pallino con la sfumatura (vedi
	   .mm-madsuite__glow--gradient) che, ingrandendosi via scale, arriva a
	   coprire per intero lo stage e a "diventare" lo sfondo — non c'e' un
	   blu pieno gia' presente sotto. */
	background: var(--colori-pieni-blu-default);
}

.mm-madsuite__glow-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* IDENTICO meccanismo della hero (vedi .mm-hero-home__glow-pos), solo
   speculare in verticale: la' il centro del pallino e' ancorato vicino al
   FONDO dello stage (top: 92.59vw, translate(-50%,-50%)) cosi' quando
   cresce simmetricamente (transform-origin di default, 50% 50%) e' la sua
   meta' SUPERIORE che sale a coprire lo schermo; qui il centro e' vicino
   al bordo SUPERIORE dello stage (top: 7.41vw = 100% - 92.59%, stesso
   translate(-50%,-50%)), cosi' quando cresce e' la sua meta' INFERIORE
   che scende a coprire lo schermo — nessun transform-origin custom,
   stesso identico meccanismo, solo il punto di ancoraggio e' speculare. */
.mm-madsuite__glow-pos {
	position: absolute;
	left: 50%;
	top: 7.41vw;
	transform: translate(-50%, -50%);
}

.mm-madsuite__glow {
	display: block;
	max-width: none;
}

/* Pallino "gradiente": non e' un asset esportato da Figma come il
   bagliore bianco della hero (non esiste un equivalente gradiente), ma un
   cerchio CSS pieno di colore (background-image: gradient-brand) — stesse
   identiche proporzioni del bianco della hero, cosi' lo scale a 4.5 lo fa
   crescere abbastanza da coprire per intero lo stage. */
/* Stesso identico effetto del pallino bianco della hero (asset SVG con
   feGaussianBlur stdDeviation:125 su un cerchio pieno — una sfumatura
   morbida che dissolve verso il trasparente, non un bordo netto), ma qui
   ottenuto in CSS puro sfumando il colore stesso verso "transparent"
   dentro il radial-gradient, invece che con una mask separata (che dava
   un bordo troppo duro, effetto "pallina lucida" invece che bagliore
   diffuso).
   Colore: non var(--gradient-brand) (diagonale blu->rosso, usato altrove
   nel sito per bottoni/badge) ma un radiale verticale dedicato — bagliore
   chiaro/rosato in alto al centro che sfuma a bordeaux e poi a blu scuro
   e infine a trasparente, come nel mockup Figma "Hero Home/Step6" del
   cerchio gia' espanso a tutto schermo. */
/* Stesse identiche dimensioni (92.59vw) e sfumatura del pallino bianco
   della hero (.mm-hero-home__glow--white): la' e' un asset SVG con un
   cerchio pieno sfumato da feGaussianBlur stdDeviation:125 su un raggio
   di 450 in viewBox 1400 (~27% del raggio sfocato); qui e' un div CSS
   pieno di colore, quindi lo stesso identico blur e' ottenuto con
   filter: blur() sull'elemento interno .mm-madsuite__glow--gradient-fill
   (non su .mm-madsuite__glow--gradient stesso, che e' l'elemento animato
   via transform:scale da homepage.js — un filter: blur() li' andrebbe
   bene, ma il box del filtro seguirebbe lo scale creando un blur che
   "respira" in modo innaturale; separandolo in un figlio non animato la
   sfumatura resta costante in vw a ogni istante dello scroll, identica a
   un asset raster). */
.mm-madsuite__glow--gradient {
	width: 92.59vw;
	height: 92.59vw;
}

.mm-madsuite__glow--gradient-fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-image: radial-gradient(
		circle at 50% 30%,
		var(--colori-pieni-bianco-default) 0%,
		var(--colori-pieni-rosso-default) 35%,
		var(--colori-pieni-blu-default) 100%
	);
	filter: blur( 8.93vw );
}

.mm-madsuite__stage > .mm-bg-grain {
	z-index: 0;
}

.mm-madsuite__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--spacing-80, 80px);
	padding-top: calc(var(--mm-header-actual-h, 108px) + var(--spacing-40));
	padding-bottom: var(--spacing-160);
	/* Niente piu' max-height:100% + overflow:hidden: con rating + titolo +
	   testo + bottoni + foto il contenuto puo' superare facilmente i 100vh
	   dello stage (soprattutto su schermi bassi), e quell'overflow tagliava
	   la foto a meta'. Il contenuto ora puo' eccedere l'altezza dello stage
	   senza essere clippato — resta leggibile per intero. */
	width: 100%;
	overflow-y: auto;
}

/* ---------- 1. Rating (avatar + label) ---------- */
.mm-madsuite__rating .mm-madsuite__rating-inner.google-rating {
	align-items: center;
}

.mm-madsuite__rating .google-rating__avatar img {
	border-color: var(--colori-opacizzati-bianco-10);
}

.mm-madsuite__rating .google-rating__score {
	display: none;
}

.mm-madsuite__rating .google-rating__bottom {
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
}

.mm-madsuite__rating .google-rating__label {
	color: var(--colori-opacizzati-bianco-50);
}

/* ---------- 2. Corpo (titolo + testo + bottoni) ---------- */
.mm-madsuite__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.mm-madsuite__title {
	margin: 0;
	color: var(--colori-pieni-bianco-default);
}

.mm-madsuite__desc {
	margin: var(--spacing-16, 16px) 0 0;
	color: var(--colori-opacizzati-bianco-50);
}

.mm-madsuite__buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8, 8px);
	flex-wrap: wrap;
	margin-top: var(--spacing-40, 40px);
}

/* ---------- 3. Foto ---------- */
.mm-madsuite__photo {
	width: 100%;
	max-width: 900px;
	overflow: hidden;
}

.mm-madsuite__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

@media (max-width: 767px) {
	.mm-madsuite__inner {
		padding-block: var(--spacing-80, 80px);
		gap: var(--spacing-40, 40px);
	}
}

/* =========================================================
   MADSUITE (home) — sezione normale, scollegata dal vecchio pin
   condiviso con Casi Studio (vedi nota in homepage.php/js).
   Figma: Mockup, node 1539:2953 "Container" — card con sfondo a
   gradiente (riusa var(--gradient-brand), gia' definito in style.css e
   usato per bottoni/badge nel sito), titolo+testo+bottoni in alto, area
   media in basso predisposta per foto O video (vedi commento in
   homepage.php).
   ========================================================= */

.mm-madsuite-card {
	position:       relative;
	isolation:      isolate;
	display:        flex;
	flex-direction: column;
	gap:            var(--spacing-80, 80px);
	min-height:         100vh;
	padding:        var(--spacing-80, 80px);
	border-radius:  var(--mm-radius-xl, 24px);
	overflow:       hidden;
	background: var(--sfondo-hero);
}

/* Stessa grana (.mm-bg-grain, _utilities.css) usata sopra il gradiente
   del footer/hero blog: sopra allo sfondo della card ma sotto al
   contenuto (header/media), stesso identico ordine li' usato. */
.mm-madsuite-card > .mm-bg-grain {
	z-index: -1;
}

/* Stesso breakpoint "maxi schermo" (>=2560px) usato per le card Caso
   Studio (vedi components.css, .mm-cs-feature): coerenza di scala tra le
   due famiglie di card grandi del sito. */
@media (min-width: 2560px) {
	.mm-madsuite-card {
		height: 70vh;
	}
	.mm-risultati__item{
		gap: var(--spacing-240, 240px);
	}

	.mm-risultati__cert img{
		height: 48px;
	}
	.mm-madsuite-card__title-col {
		width: 70%;
	}

	.mm-madsuite-card__side {
		width: 30%;
	}
	.mm-cs__inner{
		padding-left: var(--spacing-80, 80px);
		padding-right: var(--spacing-80, 80px);
	}
	.mm-manifesto__inner{
		padding-top: var(--spacing-240, 240px);
	}
	.mm-manifesto__text{
		max-width: none;
		width: 80%;
	}
}

.mm-madsuite-card__header {
	display:      flex;
	align-items:  flex-end;
	gap:          var(--spacing-160, 160px);
	width:        100%;
}

/* Split colonna titolo/colonna descrizione: 50vw/50vw su desktop normale,
   70vw/30vw su "maxi schermo" (>=2560px, vedi media query piu' sotto) —
   valori richiesti esplicitamente in vw (non percentuale del contenitore). */
.mm-madsuite-card__title-col {
	display:        flex;
	flex-direction: column;
	gap:            var(--spacing-8, 8px);
	width: 50%;
}

.mm-madsuite-card__title {
	margin: 0;
	color:  var(--colori-pieni-bianco-default, #F0EEEA);
	/* "MadReport" e' una parola sola: non deve mai andare a capo ne' spezzarsi
	   (il reset globale su h1-h6 ha overflow-wrap: break-word). */
	white-space:   nowrap;
	overflow-wrap: normal;
	word-break:    normal;
}

.mm-madsuite-card__side {
	display:        flex;
	flex-direction: column;
	gap:            var(--spacing-40, 40px);
	width: 50%;
	/* Container query context per i bottoni qui sotto: "non ci stanno su
	   una riga" si valuta sulla larghezza REALE di questa colonna (che
	   cambia con 50%/30% nei vari breakpoint), non sulla finestra. */
	container-type: inline-size;
}

/* Parola rotante sotto il titolo, sopra la descrizione (vedi homepage.php
   per l'elenco parole e homepage.js per l'autoplay). Altezza fissa (basata
   sulla line-height di .h3) cosi' il cambio parola non fa "saltare" il
   layout sotto; ogni <span> e' impilato assoluto e va in crossfade tramite
   la classe .is-active — stesso meccanismo delle immagini nelle card Caso
   Studio (vedi components.css / homepage.js). */
.mm-madsuite-card__rotator {
	position:   relative;
	/* Altezza = line-height di .h2 (var(--h2-line), in px), perche' le
	   singole parole hanno la classe h2 (stessa dimensione del titolo
	   "MadSuite" sopra) — non "em": il contenitore non ha lui stesso una
	   classe hX, quindi un valore in em si sarebbe calcolato sulla
	   dimensione del font ereditata (molto piu' piccola), tagliando il
	   testo in overflow:hidden. Se in futuro la classe sulle parole
	   cambia (es. tornasse h3), va aggiornata anche questa variabile. */
	min-height: var(--h2-line);
	overflow:   hidden;
}

.mm-madsuite-card__rotator-item {
	position:   absolute;
	inset:      0;
	margin:     0;
	color:      var(--colori-pieni-blu-50);
	pointer-events: none;
	/* Stato di riposo: parcheggiata sotto, fuori vista (il contenitore ha
	   overflow:hidden). Il ciclo automatico (mmAnimate.wordRotator, vedi
	   mm-animations.js/homepage.js) anima questa transform via GSAP a
	   ogni cambio; questi valori CSS restano validi anche come fallback
	   statico senza JS o con prefers-reduced-motion (mostra solo la
	   parola is-active, ferma, nessun movimento). */
	transform: translateY(100%);
}

.mm-madsuite-card__rotator-item.is-active {
	transform: translateY(0%);
	pointer-events: auto;
}

.mm-madsuite-card__desc {
	margin: 0;
	color:  var(--colori-pieni-bianco-default);
}

.mm-madsuite-card__buttons {
	display:         flex;
	align-items:     center;
	justify-content: flex-start;
	gap:             var(--spacing-8, 8px);
	/* I bottoni occupano la stessa larghezza della colonna descrizione
	   (.mm-madsuite-card__side, 50vw su desktop normale / 30vw su maxi
	   schermo) grazie a width:100%. Se non ci stanno su una riga sola
	   vanno a capo (wrap) come il testo della descrizione qui sopra,
	   invece di restare forzati su una riga con nowrap — stesso
	   comportamento gia' presente su mobile/tablet qui sotto. */
	width:           100%;
	flex-wrap:       wrap;
}

/* Sotto questa soglia i due bottoni non entrano piu' affiancati alla loro
   dimensione naturale: oltre ad andare a capo (flex-wrap:wrap qui sopra),
   ciascuno deve allargarsi al 100% della colonna invece di restare
   piccolo e allineato a sinistra. Soglia = poco sopra la larghezza
   naturale tipica dei due bottoni insieme + gap; se in futuro cambiano i
   testi dei bottoni e la soglia non torna piu' giusta, va solo
   aggiustato questo numero. */
@container (max-width: 560px) {
	.mm-madsuite-card__buttons .btn {
		flex:  1 1 100%;
		width: 100%;
	}
}

/* Placeholder pieno in attesa della foto/video definitivi: quando verra'
   aggiunto un <img>/<video class="mm-madsuite-card__media-el">, questa
   regola gli da' automaticamente lo stesso trattamento (assoluto,
   object-fit:cover) delle card Caso Studio. */
.mm-madsuite-card__media {
	position:      relative;
	flex:          1 0 0;
	min-height:    600px;
	width:         100%;
	border-radius: var(--mm-radius-xl, 24px);
	background:    var(--colori-pieni-blu-50, #BEC2CA);
	overflow:      hidden;
}

.mm-madsuite-card__media-el {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* Video MadReport: larghezza 100%, altezza sempre 16:9 (niente altezza fissa).
   Specificita' maggiore di .mm-madsuite-card__media nei media query. */
.mm-madsuite-card .mm-madsuite-card__media {
	flex:       0 0 auto;
	min-height: 0;
	height:     auto;
	aspect-ratio: 16 / 9;
}

@media (max-width: 1080px) {
	.mm-madsuite-card {
		height: auto;
		padding: var(--spacing-80, 80px) var(--spacing-40, 40px);
		gap: var(--spacing-40, 40px);
	}



	.mm-madsuite-card__header {
		flex-direction: column;
		align-items:    flex-start;
		gap:            var(--spacing-40, 40px);
	}

	.mm-madsuite-card__title-col {
		flex:  0 0 auto;
		width: 100%;
	}

	.mm-madsuite-card__side {
		flex:  0 0 auto;
		width: 100%;
	}

	.mm-madsuite-card__buttons {
		justify-content: center;
		flex-wrap:       wrap;
	}

	.mm-madsuite-card__media {
		height: 400px;
		border-radius: var(--mm-radius-xl, 24px);
	}
}

/* Tablet (768-1079px): titolo MadSuite e parola rotante centrati, e
   descrizione+bottoni spostati sotto l'immagine (nel DOM __side sta
   dentro __header, PRIMA di __media — qui "smontiamo" __header con
   display:contents cosi' title-col/side diventano fratelli diretti di
   __media e riordinabili con order, stessa tecnica display:contents+order
   gia' usata altrove nel file). */

@media (max-width: 1080px) {
	/* Le slide del carosello Recensioni sono tutte affiancate nel DOM
	   (vedi .mm-reviews__track-inner), quindi la riga flex calcola
	   comunque la propria altezza sulla card piu' alta, a prescindere
	   da align-items. flex-start evita solo che le card piu' corte
	   vengano STIRATE a quell'altezza (restano alla propria altezza
	   naturale, in alto nella riga) — l'eccesso di spazio sotto viene
	   poi tagliato dal overflow-y:hidden + altezza esplicita impostati
	   qui sotto su .mm-reviews__track (vedi script di sync in
	   homepage.js, che misura la card corrente e imposta l'altezza).
	   Sacrifichiamo il bleed verticale dell'ombra della card (visibile
	   da desktop, vedi overflow-y:visible piu' sopra) solo qui sotto i
	   1080px, necessario per non farsi trascinare dietro l'altezza
	   delle card nascoste. */
	.mm-reviews__track-inner {
		align-items: flex-start;
	}

	.mm-review__stat{
		flex: 1 1 0;
	}

	.mm-reviews__track {
		overflow-y: hidden;
	}

	/* Hero: NESSUNA regola specifica qui piu' — e' gia' statica su tutti i
	   dispositivi (vedi .mm-hero-home/.mm-hero-home::before piu' sopra in
	   questo file), niente differenza da gestire fra desktop e mobile. */

	/* Meno vh dedicati alle fasi "post sub-scroll" (reveal + uscita per
	   Casi Studio, reveal per Recensioni): il calcolo in homepage.js
	   deriva il totale dal range REALE di ScrollTrigger (self.end -
	   self.start), quindi accorciare qui basta da solo a far completare
	   tutta l'animazione con molto meno scroll fisico — su un telefono
	   350vh/100vh di scroll dedicato SOLO alla transizione si sentivano
	   interminabili (il Manifesto sembrava non arrivare mai). Le
	   proporzioni tra le fasi (definite come frazioni in homepage.js)
	   restano identiche, si accorcia solo la lunghezza assoluta. */
	.mm-cs {
		height: calc(100vh + var(--mm-cs-sub-distance, 0px) + 110vh) !important;
	}
	.mm-reviews__inner{
		gap: var(--spacing-40, 40px);
	}

	.mm-cs__stage {
		/* Gradiente STATICO (nessun filter:blur, nessun aggiornamento per
		   frame): stessa "ricetta" cromatica del layer animato rimosso
		   sopra (ellisse bianca + rossa su base blu), ma disegnato una
		   volta sola e mai piu' toccato durante lo scroll — costo quasi
		   nullo per la GPU rispetto alla versione animata/sfocata. */
		background:
			radial-gradient( ellipse 85% 65% at bottom center, rgba(240, 238, 234, 0.35), transparent 55% ),
			radial-gradient( ellipse 350% 260% at bottom, #D24A5DB0, transparent 45% ),
			var(--colori-pieni-blu-default, #162640);
	}

	.mm-cs__stage > .mm-bg-grain {
		display: none !important;
	}

	.mm-hero-home__row.mm-hero-home__row--sub {
    display: flex;
    flex-direction: column;
    align-content: flex-start !important;
	align-items: center;
	gap: 40px;
}

.mm-hero-home__row--sub{
	align-items: flex-start;
}

.mm-hero-home__subtitle{
	max-width: 100%;
}

.mm-risultati__inner{
	gap: var(--spacing-40, 40px);
	padding-top: var(--spacing-160, 160px);
	padding-bottom: var(--spacing-80, 80px);
}
	/* Promuove finestra/testo entrante al proprio livello di composizione
	   GPU SOLO mentre la relativa sezione e' effettivamente in scroll
	   (classe .mm-will-animate aggiunta/rimossa da homepage.js via
	   ScrollTrigger onEnter/onLeave, solo mobile): un will-change SEMPRE
	   attivo manteneva 4 layer compositor promossi per l'intera durata
	   dello scroll (anche a sezione lontana dallo schermo), pesando sulla
	   GPU di un telefono molto piu' che su desktop — confermato dai dati
	   di profiling reali (costo di composite persistente per tutta la
	   pagina, non solo durante il crossfade). */
	.mm-cs__window.mm-will-animate,
	.mm-suite-home__inner.mm-will-animate {
		will-change: opacity, transform;
	}
}
@media (min-width: 768px) and (max-width: 1080px) {
	.mm-madsuite-card__title-col {
		align-items: center;
	}

	.mm-madsuite-card__title,
	.mm-madsuite-card__rotator,
	.mm-madsuite-card__rotator-item,
	.mm-madsuite-card__desc {
		text-align: center;
	}

	.mm-madsuite-card__rotator {
		width: 100%;
	}

	.mm-madsuite-card__header {
		display: contents;
	}

	.mm-madsuite-card__title-col {
		order: 1;
	}

	.mm-madsuite-card__media {
		order: 2;
	}

	.mm-madsuite-card__side {
		order: 3;
	}
}

/* Hero: nessuna regola specifica per mobile — e' gia' una sezione
   statica su tutti i dispositivi (vedi piu' sopra in questo file),
   stessa altezza/gradiente ovunque, niente pin/scroll-jacking da
   disattivare qui. */

/* Mobile: Figma Mockup node 1930:13775 — layout completamente diverso
   dal tablet/desktop, colonna unica centrata, ordine Titolo -> Video ->
   Descrizione+Bottoni (nel DOM il video viene DOPO l'header, vedi
   homepage.php: qui lo "spostiamo" solo visivamente con display:contents
   + order, stessa tecnica gia' usata per i loghi partner in Risultati). */
@media (max-width: 767px) {
	.mm-madsuite-card {
		min-height: 0;
		align-items: center;
		gap: var(--spacing-40, 40px);
		padding: var(--spacing-80, 80px) var(--spacing-24, 24px);
	}

	.mm-madsuite-card__header {
		display: contents;
	}

	.mm-madsuite-card__title-col {
		order: 1;
		align-items: center;
		text-align: center;
		gap: var(--spacing-16, 16px);
	}

	.mm-madsuite-card__title,
	.mm-madsuite-card__rotator,
	.mm-madsuite-card__rotator-item {
		text-align: center;
	}

	/* .mm-madsuite-card__title-col e' align-items:center qui sopra: senza
	   una larghezza esplicita .mm-madsuite-card__rotator si restringe al
	   contenuto (shrink-to-fit) invece di occupare tutta la colonna — i
	   suoi figli sono pero' "position:absolute; inset:0" (crossfade delle
	   parole), quindi ereditano quella larghezza quasi nulla e il testo
	   spariva (clippato da overflow:hidden). */
	.mm-madsuite-card__rotator {
		width: 100%;
	}

	.mm-madsuite-card__media {
		order: 2;
		flex: 0 0 auto;
		min-height: 0;
		height: auto;
		aspect-ratio: 1920 / 1080;
		border-radius: var(--mm-radius-xl, 24px);
	}

	.mm-madsuite-card__side {
		order: 3;
		align-items: center;
		text-align: center;
	}

	.mm-madsuite-card__desc {
		text-align: center;
	}

	.mm-madsuite-card__buttons {
		flex-direction: column;
		justify-content: center;
		gap: var(--spacing-8, 8px);
	}
}


@media(min-width:1820px) and (max-width: 2559px){
	.mm-manifesto__text{
		max-width: none;
		width: 80%;
	}
}
/* =========================================================
   RECENSIONI — transizione "box fermo" (29/09)
   Le slide sono impilate nella stessa cella di una grid: il box resta
   fermo e alto quanto la recensione piu' lunga (anche sotto i 1080px,
   quindi niente piu' sync dell'altezza in JS). .is-stacked viene
   aggiunta da homepage.js: senza JS resta il layout originale.
   ========================================================= */
.mm-reviews__track.is-stacked {
	overflow: visible;
}

/* Desktop: altezza = recensione piu' alta (le card sono tutte stirate).
   Sotto i 1080px l'altezza la imposta homepage.js sulla sola card
   visibile (vedi mmReviewsSyncHeight). */
@media (min-width: 1081px) {
	.mm-reviews__track.is-stacked {
		height: auto !important;
	}
}

.mm-reviews__track.is-stacked .mm-reviews__track-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* stretch anche sotto i 1080px (li' homepage.css mette flex-start per
	   il vecchio carosello): tutte le card alte quanto la piu' lunga. */
	align-items: stretch;
	transform: none !important;
	transition: none;
}

.mm-reviews__track.is-stacked .mm-reviews__slide {
	grid-area: 1 / 1;
	min-width: 0;
	visibility: hidden;
}

.mm-reviews__track.is-stacked .mm-reviews__slide.is-active {
	visibility: visible;
	z-index: 1;
}

/* Slide in arrivo: sopra quella corrente ma con card e placeholder
   trasparenti, cosi' si vede il box di sotto (fermo) e l'immagine nuova
   si rivela sopra la vecchia. */
.mm-reviews__track.is-stacked .mm-reviews__slide.is-entering {
	visibility: visible;
	z-index: 2;
}
.mm-reviews__slide.is-entering .mm-review {
	background: transparent;
}
.mm-reviews__slide.is-entering .mm-review__media:has(.mm-review__img) {
	background: transparent;
}

.mm-reviews__track.is-stacked .mm-review {
	height: 100%;
}

/* Mobile/tablet (card in colonna): lo spazio in piu' delle recensioni
   corte va dentro la citazione (gia' space-between: cliente in fondo),
   cosi' il risultato resta ancorato in basso come su desktop invece di
   lasciare un vuoto sotto la card. */

@media(min-width: 1081px) and (max-width: 1299px){
	.mm-risultati__item{
		padding-right: 40px;
	}

	/* L'ultima colonna non deve avere lo stesso respiro delle altre verso
	   il bordo del contenitore: su richiesta esplicita, 0px invece dei
	   40px applicati qui sopra a tutte le colonne. */
	.mm-risultati__item:last-child{
		padding-right: 0;
	}
}

/* Da 1215px in su l'ultima colonna ha un respiro ridotto rispetto alle
   altre (che restano a 80px, vedi .mm-risultati__item base): su richiesta
   esplicita, 40px invece di 80px verso il bordo del contenitore. */
@media (min-width: 1300px) {
	.mm-risultati__item:last-child {
		padding-right: 40px;
	}
}

@media (max-width: 1080px) {
	.mm-reviews__track.is-stacked .mm-review__quote {
		flex: 1 0 auto;
	}

	/* Mobile/tablet: ogni card alta quanto il proprio contenuto (non
	   stirata alla piu' alta); il contenitore clippa il resto e la sua
	   altezza segue la card visibile (JS, con animazione al cambio). */
	.mm-reviews__track.is-stacked {
		overflow: hidden;
	}
	.mm-reviews__track.is-stacked .mm-reviews__slide {
		align-self: start;
	}
	.mm-reviews__track.is-stacked .mm-review {
		height: auto;
	}
}

/* Il numerone fa da maschera ai suoi span (+ / 167 / %). In orizzontale
   taglia al bordo della colonna: se il numero non ci sta resta tagliato
   dentro la card invece di uscire e creare overflow-x. Con line-height:1 le cifre curve
   (6, 8, 9...) escono di qualche px sopra/sotto il box: la maschera e'
   allargata di 16px in verticale (vedi offset() in homepage.js). */
.mm-reviews__track.is-stacked .mm-review__stat {
	clip-path: inset(-16px 0 -16px 0);
	/* clip-path taglia solo il disegno, non lo spazio di scroll: senza
	   overflow-x:clip il numero che sborda creerebbe comunque overflow-x
	   sulla pagina. "clip" (non "hidden") lascia overflow-y visibile. */
	overflow-x: clip;
}

.mm-review__img {
	will-change: transform, clip-path;
}

.mm-page-madsuite .mm-hero-home__title{
	display: flex;
	flex-direction: row;
}

.mm-page-madsuite .mm-hero-home__row{
width: 60%;
}

/* ==========================================================================
   Home — Come lavoriamo ai tuoi progetti (Figma 2491:32541)
   ========================================================================== */
.mm-metodo__inner {
	padding: 160px var(--spacing-80, 80px);
	background-color: var(--colori-pieni-bianco-600);
}

.mm-metodo__card {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-40, 40px);
	padding: var(--spacing-80, 80px);
	border-radius: var(--mm-radius-xl, 24px);
	overflow: hidden;
	background: var(--sfondo-hero);
	color: var(--colori-pieni-bianco-default, #F0EEEA);
}

.mm-metodo__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch;
	gap: var(--spacing-40, 40px);
	flex: 0 0 60%;
	min-width: 0;
}

.mm-metodo__title {
	margin: 0;
	color: var(--colori-pieni-bianco-default, #F0EEEA);
}

.mm-metodo__desc {
	margin: 0;
	color: var(--colori-pieni-blu-50, #BEC2CA);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
}

.mm-metodo__steps {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--spacing-16, 16px);
	width: 35%;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-metodo__step {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 80%;
	padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
	border-radius: var(--mm-radius-lg, 16px);
	text-align: center;
	white-space: nowrap;
	color: var(--colori-pieni-bianco-default, #F0EEEA);
	background: var(--colori-opacizzati-bianco-10);
}
.mm-metodo__step .h5 { margin: 0; }

/* sfalsatura a scaletta + opacita' dello sfondo (10 / 20 / 50 / 20 / 10) */
.mm-metodo__step--2 { margin-right: 10%; background: var(--colori-opacizzati-bianco-20); }
.mm-metodo__step--3 { margin-right: 20%; background: var(--colori-opacizzati-bianco-50); }
.mm-metodo__step--4 { margin-right: 10%; background: var(--colori-opacizzati-bianco-20); }

@media (max-width: 1080px) {
	.mm-metodo__card {
		flex-direction: column;
		align-items: stretch;
		padding: var(--spacing-40, 40px);
		gap: var(--spacing-40, 40px);
	}
	.mm-metodo__text { flex-basis: auto; width: 100%; gap: var(--spacing-24, 24px); }
	.mm-metodo__steps { width: 100%; }
	.mm-metodo__step { width: 90%; }
	.mm-metodo__step--2,
	.mm-metodo__step--4 { margin-right: 5%; }
	.mm-metodo__step--3 { margin-right: 10%; }
}

@media (max-width: 767px) {
	.mm-metodo__card { padding: var(--spacing-24, 24px); }
	.mm-metodo__step { width: 94%; }
	.mm-metodo__step--2,
	.mm-metodo__step--4 { margin-right: 3%; }
	.mm-metodo__step--3 { margin-right: 6%; }
}

/* Come lavoriamo – ruota step */
/* Come lavoriamo – ruota step */
.mm-metodo__steps.mm-wheel {
  position: relative;
}
.mm-metodo__steps.mm-wheel .mm-metodo__step {
  position: absolute !important;
  right: 0;
  top: 0;
  margin: 0 !important;
  will-change: transform;
  transition: transform .5s cubic-bezier(.65,0,.35,1), background-color .5s ease, opacity .35s ease !important;
}
.mm-metodo__steps.mm-wheel .mm-metodo__step.is-entering {
  transition: transform .5s cubic-bezier(.65,0,.35,1), opacity .5s ease !important;
}
.mm-metodo__steps.mm-wheel .mm-metodo__step.is-leaving {
  transition: transform .5s cubic-bezier(.65,0,.35,1), opacity .5s cubic-bezier(.75,0,.75,.9) !important;
}
.mm-metodo__steps.mm-wheel .mm-metodo__step.no-tr {
  transition: none !important;
}

@media(min-width: 2560px){
	.mm-suite-home__inner{
		padding-left: 80px;
		padding-right: 80px;
	}
	.mm-metodo__inner{
		padding-left: 80px;
		padding-right: 80px;
	}

	.mm-metodo__text{
		gap: 160px;
	}
	.mm-metodo__step {
		padding: 32px 128px;
		border-radius: 24px;
	}

}

/* ==========================================================================
   Home e Home v-2 — "Come lavoriamo": tablet e mobile (Figma 2507:24375)
   Tutto centrato: testo, ruota degli step (card attiva al centro, larghezze
   in % crescenti verso il centro) e pulsanti. Da desktop i pulsanti stanno sotto il testo.
   ========================================================================== */
/* desktop: pulsanti sotto la descrizione; tablet/mobile: sotto la ruota (vedi sotto) */
.home .mm-metodo__text-bottom {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40, 40px);
}
.home .mm-metodo__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-8, 8px);
}
.home .mm-metodo__buttons--mobile { display: none; }


@media (max-width: 1080px) {
	.mm-metodo__inner{
		padding: 40px 8px;
	}
	.home .mm-metodo__card {
		align-items: center;
		gap: var(--spacing-80, 80px);
		padding: var(--spacing-80, 80px) var(--spacing-40, 40px);
		background: var(--sfondo-hero);
	}
	.home .mm-metodo__text {
		align-items: center;
		text-align: center;
		gap: var(--spacing-16, 16px);
	}
	.home .mm-metodo__steps {
		align-items: center;
		width: 100%;
	}
	.home .mm-metodo__step,
	.home .mm-metodo__step--2,
	.home .mm-metodo__step--3,
	.home .mm-metodo__step--4 {
		margin-right: 0;
		width: 34%;
	}
	.home .mm-metodo__step--2,
	.home .mm-metodo__step--4 { width: 39%; }
	.home .mm-metodo__step--3 { width: 44%; }

	/* ruota: step centrati (left/right 0 + margin auto), larghezza gestita dal JS per posizione */
	.home .mm-metodo__steps.mm-wheel .mm-metodo__step {
		left: 0;
		right: 0;
		margin-left: auto !important;
		margin-right: auto !important;
		transition: transform .5s cubic-bezier(.65,0,.35,1), width .5s cubic-bezier(.65,0,.35,1), background-color .5s ease, opacity .35s ease !important;
	}

	/* il salto istantaneo sotto la ruota (prima del fade in) deve battere la transition sopra */
	.home .mm-metodo__steps.mm-wheel .mm-metodo__step.no-tr { transition: none !important; }

	.home .mm-metodo__buttons--desktop { display: none; }
	.home .mm-metodo__text-bottom { align-items: center; gap: var(--spacing-16, 16px); }
	.home .mm-metodo__buttons--mobile {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--spacing-8, 8px);
		position: relative;
		z-index: 1;
	}
}

@media (max-width: 767px) {
	.home .mm-metodo__card {
		gap: var(--spacing-40, 40px);
		padding: var(--spacing-40, 40px) var(--spacing-16, 16px);
	}
	.home .mm-metodo__step,
	.home .mm-metodo__step--2,
	.home .mm-metodo__step--3,
	.home .mm-metodo__step--4 { width: 64%; }
	.home .mm-metodo__step--2,
	.home .mm-metodo__step--4 { width: 76%; }
	.home .mm-metodo__step--3 { width: 88%; }
}

/* Home principale — "Come lavoriamo" → MadSuite (vedi mm-metodo-suite.js) */
body{
	overflow-x: hidden;
}

/* ==========================================================================
   Home — "Come lavoriamo" + card MadSuite nella stessa sezione
   (vedi homepage.js, blocco "Come lavoriamo" → MadSuite)
   Di base (mobile, tablet, reduced-motion) le due card sono una sotto
   l'altra. Da desktop il JS aggiunge .is-suite-anim alla sezione e la
   card MadSuite si sovrappone alla prima.
   ========================================================================== */

.mm-metodo__stack {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-80, 80px);
}

@media (max-width: 1080px) {
	.mm-metodo__stack { gap: 48px; }
}

/* ---------- desktop animato ---------- */

.home .mm-metodo.is-suite-anim .mm-metodo__stack {
	display: block;
	isolation: isolate;
	border-radius: var(--mm-radius-xl, 24px);
	overflow: hidden;
	will-change: height, margin;
}

/* la card 1 riempie lo stack: e' lo stack che si allarga e arrotonda */
.home .mm-metodo.is-suite-anim .mm-metodo__card {
	height: 100%;
	border-radius: 0;
}

/* card MadSuite sovrapposta, allineata in alto e centrata in orizzontale,
   trasparente: lo sfondo resta quello della card 1. Larghezza = schermo
   intero (impostata dal JS), altezza naturale (min 100vh, immagine min 400px). */
.home .mm-metodo.is-suite-anim .mm-madsuite-card {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	height: auto;
	border-radius: 0;
	background: none;
	visibility: hidden;
	pointer-events: none;
}

.home .mm-metodo.is-suite-anim .mm-madsuite-card > .mm-bg-grain {
	display: none;
}

.home .mm-metodo.is-suite-anim .mm-madsuite-card.is-visible {
	visibility: visible;
	pointer-events: auto;
}

.home .mm-metodo.is-suite-anim .mm-madsuite-card__header {
	flex: 0 0 auto;
}


/* maschera per la parola rotante che entra dal basso */
.home .mm-metodo__suite-mask {
	overflow: hidden;
}

/* sicurezza: niente scroll orizzontale anche se lo stack sborda di qualche px */
.home .mm-metodo.is-suite-anim {
	overflow-x: clip;
}