/*
Theme Name: Trovapulizie
Description: Tema custom per il sito marketing Trovapulizie (sito-web, scorporo da portale-transazionale React — ADR-001)
Author: Digital On
Version: 0.61.0
*/

/* Indice dei blocchi (nell'ordine del file). Dettagli di comportamento: docs/homepage.md.
   1. Token (:root) e base
   2. Componenti: bottoni, chip, icona a maschera (.tp-icon-mask), card, phone mockup (.tp-phone)
   3. Navbar
   4. Hero (box, scrim, timelapse, search bar, telefono, canvas 3D)
   5. Come funziona: griglia statica, poi coreografia sotto .motion-ok (pin, step assoluti, --hiw-offset,
      --hiw-text-fade), overlay zoom-through (.hiw-zoom)
   6. Servizi popolari (tab + indicatore, card in crossfade, mascotte, reveal)
   7. Social proof (badge, marquee, card)
   8. Dove siamo attivi (mappa raster, overlay, radar, citta', sequenza d'ingresso)
   9. FAQ (due colonne, accordion, reveal)
   10. CTA finale
   11. Footer
   11-bis. Hub citta' /roma/: hero, verificati, come funziona statica, calcolatore, intro, barra fissa mobile
   (segue: landing Sgrosso, testata landing, form lead, thank-you)
   13. Diventa cleaner (page-cleaner-landing.php): hero, schermi, bento, calcolatore guadagni, per chi e', requisiti
   14. Landing B2B (page-landing-b2b.php): form a un passo, settori con foto, lavori, formule, perche' noi
   15. Contatti (page-contact.php): smistamento a card, canali diretti e dati aziendali
   16. Chi siamo (page-about.php): hero con mappa dei CAP, perche', regole, team, storia
   17. Pagine legali (page-legal.php): colonna di testo, iframe iubenda, tabelle
   18. Blog (home.php, category.php, single.php): indice, card, articolo, box servizio
   19. Landing zanzare (page-landing-zanzare.php): fascia zanzara tigre, cosa facciamo, prezzi, aggiunte al form
   12. prefers-reduced-motion: blocco unico per tutte le sezioni
   Ogni sezione ha la propria media query sotto i 1024px; la soglia e' il token --tp-bp-desktop. */

/* Token da Figma reale — vedi docs/brand-kit.md per provenienza (node-id) */
:root {
	/* Colori */
	/* [ATTENZIONE] Le CTA usano --tp-primary, il verde del marchio (decisione di Guido, 20/10):
	   l'identita' del marchio vince sul contrasto. Col testo bianco sopra sta a 2,16:1, sotto il
	   minimo AA di 4,5:1 — scelta consapevole, non una svista: non va "corretta" in una passata
	   di QA. Se servira' l'AA senza perdere il verde: stesso fondo, testo #191919 (8,12:1). */
	--tp-primary: #00C896;
	/* 25/10/2026, decisione di Guido: un solo verde, quello del marchio, per CTA, badge, numeri dei passi,
	   indicatori, bordi e testo verde. I due token "ink" del 17/10 (#08875F sui fondi con testo bianco,
	   #0A7A4D per il testo verde) restano come nomi, per non toccare 40 regole, ma valgono il verde del
	   marchio: col bianco sopra fanno 2,16:1, sotto l'AA, scelta consapevole come per le CTA del 20/10.
	   Se un giorno servira' l'AA: --tp-primary-ink #08875F e --tp-green-ink #0A7A4D, un cambio qui.
	   --tp-focus e' l'unico verde scuro rimasto: l'anello di focus da tastiera deve staccarsi dal fondo. */
	--tp-primary-ink: #00C896;
	--tp-green-ink: #00C896;
	--tp-focus: #08875F;
	--tp-text: #191919;
	--tp-text-heading: #1F2937;
	--tp-text-body: #6B7280;
	/* I due grigi chiari stavano a 2,9 e 2,5:1 su tutti i fondi del sito: nessun testo li raggiungeva. */
	--tp-text-muted: #5B6472;
	--tp-text-placeholder: #6B7280;
	--tp-text-chip: #474F5C;
	--tp-border: #EBEDF0;
	--tp-border-card: #E5E8EB;
	--tp-bg-soft: #F8FBFA;
	--tp-white: #FFFFFF;

	/* Font */
	--tp-font: 'Poppins', system-ui, -apple-system, sans-serif;

	/* Radius — non uniforme, dipende dal componente */
	--tp-radius-sm: 8px;
	--tp-radius-md: 10px;
	--tp-radius-lg: 12px;
	--tp-radius-xl: 16px;
	--tp-radius-2xl: 24px;
	--tp-radius-pill: 999px;

	/* Ombre */
	--tp-shadow-card: 0 10px 28px -6px rgba(15, 23, 41, 0.1);

	/* Layout */
	--tp-max-width: 1280px;
	--tp-gap: 24px;
	--tp-navbar-h: 72px; /* altezza navbar: da qui derivano il box hero e lo spazio sopra Come funziona */

	/* Soglie (ADR-002 rev. 4). Unica fonte di verita': le media query usano questi stessi valori
	   (il CSS non accetta var() dentro @media) e home-motion.js legge --tp-bp-desktop da :root.
	   fino a 1023 -> layout impilato (telefono compreso), nessuna coreografia
	   da 1024     -> coreografia desktop: pin, GSAP, Three.js
	   I tablet in orizzontale (1024-1279) restano sul desktop, come da ADR-002 rev. 4. */
	--tp-bp-desktop: 1024px;

	/* Phone mockup: dimensioni parametriche, sovrascritte per hero e step su mobile (ADR-002 rev. 4) */
	--tp-phone-w: 294px;
	--tp-phone-h: 608px;
	--tp-phone-radius: 52px;
	--tp-phone-screen-radius: 42px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--tp-font);
	color: var(--tp-text-heading);
	line-height: 1.5;
}

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

a {
	color: var(--tp-green-ink);
	text-decoration: none;
}

/* :where() azzera la specificita': ogni sezione puo' sovrascrivere senza combattere */
:where(main.home, main.hub-roma) > section {
	max-width: var(--tp-max-width);
	margin: 0 auto;
	padding: 48px 20px;
}

/* =========================
   Componenti base
   ========================= */

/* Bottoni (Navbar Accedi/Registrati, CTA Cerca, Prenota) */
.tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--tp-font);
	font-weight: 600;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: var(--tp-radius-sm);
	border: none;
	cursor: pointer;
	white-space: nowrap;
}
.tp-btn--primary {
	background: var(--tp-primary);
	color: var(--tp-white);
}
.tp-btn--secondary {
	background: transparent;
	color: var(--tp-green-ink);
	/* Il bordo e' l'unico confine del bottone: come elemento d'interfaccia vuole 3:1, e il verde
	   pieno su bianco si ferma a 2,16. */
	border: 1.5px solid var(--tp-primary-ink);
}
.tp-btn--lg {
	font-size: 16px;
	font-weight: 700;
	padding: 13px 24px;
	border-radius: var(--tp-radius-lg);
}

/* Chip (es. "Cosa include" nella card servizio) */
.tp-chip {
	display: inline-flex;
	align-items: center;
	background: var(--tp-white);
	border: 1px solid var(--tp-border-card);
	border-radius: var(--tp-radius-md);
	padding: 8px 12px;
	font-family: var(--tp-font);
	font-weight: 500;
	font-size: 13px;
	color: var(--tp-text-chip);
	white-space: nowrap;
}

/* Icona SVG monocromatica: il file e' la maschera, il colore e' currentColor (tab servizi, social footer) */
.tp-icon-mask {
	display: inline-block;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

/* Card (es. card servizio) */
.tp-card {
	background: var(--tp-white);
	border: 1px solid var(--tp-border-card);
	border-radius: var(--tp-radius-2xl);
	padding: 20px;
}
.tp-card__panel {
	background: var(--tp-bg-soft);
	border-radius: var(--tp-radius-xl);
	padding: 18px;
}

/* Phone mockup — Figma node 3743:3095. Volume vero: faccia frontale + 10 strati translateZ (spessore 10px), ruota in prospettiva (ADR-002) */
.tp-phone {
	position: relative;
	width: var(--tp-phone-w);
	height: var(--tp-phone-h);
	transform-style: preserve-3d;
}
.tp-phone__layer,
.tp-phone__face {
	position: absolute;
	inset: 0;
	border-radius: var(--tp-phone-radius);
	backface-visibility: hidden;
}
.tp-phone__layer {
	transform: translateZ(var(--z));
	background: linear-gradient(90deg, #3a3d44 0%, #16181c 18%, #16181c 82%, #3a3d44 100%);
}
.tp-phone__layer:first-child {
	box-shadow: 0 30px 55px 0 rgba(13, 26, 20, 0.3);
}
.tp-phone__face {
	/* proporzionale: la cornice e la tacca devono rimpicciolirsi con --tp-phone-w, altrimenti sulle
	   versioni mobile (150-158px) sembrano enormi */
	padding: calc(var(--tp-phone-w) * 0.041);
	background: #0D0F14;
	transform: translateZ(0);
}
.tp-phone__face::before {
	content: '';
	position: absolute;
	top: calc(var(--tp-phone-w) * 0.068);
	left: 50%;
	transform: translateX(-50%);
	width: calc(var(--tp-phone-w) * 0.313);
	height: calc(var(--tp-phone-w) * 0.088);
	background: #0D0F14;
	border-radius: calc(var(--tp-phone-w) * 0.044);
	z-index: 2;
}
.tp-phone__face::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--tp-phone-radius);
	pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.14) 100%);
	z-index: 3;
}
.tp-phone__screen {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: var(--tp-phone-screen-radius);
	overflow: hidden;
	background: var(--tp-white);
}
.tp-phone__img,
.tp-phone__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Navbar — Figma node 3564:5 */
.navbar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--tp-navbar-h);
	padding: 0 80px;
	background: var(--tp-white);
}
.navbar__logo {
	display: flex;
	align-items: center;
}
.navbar__logo img {
	height: 33px;
	width: auto;
}
.navbar__links {
	display: flex;
	align-items: center;
	gap: 32px;
}
.navbar__links a {
	padding-block: 6px;
	font-family: var(--tp-font);
	font-size: 15px;
	font-weight: 400;
	color: var(--tp-text-body);
	white-space: nowrap;
}
.navbar__links a:hover {
	color: var(--tp-text-heading);
}
.navbar__cta {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Hamburger: compare solo sotto la soglia desktop (Figma 4018:971, 24x24) */
.navbar__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	/* L'elemento resta 24x24 per non spostare la barra, l'area toccabile arriva a 44 con ::before:
	   e' l'unico accesso al menu su mobile e 24px sono sotto la misura minima per il dito. */
	position: relative;
}
.navbar__burger::before {
	content: '';
	position: absolute;
	inset: -10px;
}
.navbar__burger span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--tp-text-heading);
}
.navbar__panel {
	display: none;
	position: sticky;
	top: var(--tp-navbar-h);
	z-index: 9;
	flex-direction: column;
	gap: 4px;
	padding: 12px 20px 20px;
	background: var(--tp-white);
	border-bottom: 1px solid var(--tp-border);
	box-shadow: var(--tp-shadow-card);
}
.navbar__panel a {
	padding: 12px 4px;
	font-size: 16px;
	color: var(--tp-text-heading);
}
.navbar__panel-login {
	margin-top: 8px;
	justify-content: center;
}
/* L'attributo hidden deve vincere su display: flex, altrimenti il pannello resta visibile da chiuso */
.navbar__panel[hidden] {
	display: none;
}

@media (max-width: 960px) {
	.navbar {
		padding: 0 20px;
	}
	.navbar__links {
		display: none;
	}
}

@media (max-width: 1023px) {
	/* La navbar mobile del Figma 4018:965 e' alta 65: si ridefinisce il token, non l'altezza della barra,
	   cosi' seguono anche il box della hero, lo scroll-margin delle sezioni e il top del pannello. */
	:root {
		--tp-navbar-h: 65px;
	}
	.navbar {
		gap: 12px;
	}
	.navbar__logo img {
		height: 28px; /* nel Figma il lockup e' largo 123 */
	}
	.navbar__burger {
		display: flex;
		flex: 0 0 auto;
	}
	.navbar__panel:not([hidden]) {
		display: flex;
	}
	/* Nella barra resta il solo Registrati: Accedi e' nel pannello */
	.navbar__cta .tp-btn--secondary {
		display: none;
	}
}

/* Hero — Figma node 3564:17 */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	padding: 80px 20px 124px;
}

.hero__box {
	position: absolute;
	top: 24px;
	/* 759px da Figma, ma mai oltre la prima schermata: navbar + 24 sopra + 24 sotto */
	height: min(759px, calc(100vh - var(--tp-navbar-h) - 48px));
	max-width: 1360px;
	margin: 0 auto;
	left: 0;
	right: 0;
	border-radius: 40px;
	overflow: hidden;
	background-image: url('assets/img/hero-box.png');
	background-size: cover;
	background-position: center;
	box-shadow: 0 12px 40px -8px rgba(5, 89, 61, 0.06);
}
/* Scrim verde chiaro sopra foto e video (stesso valore del Figma) */
.hero__box::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(234, 250, 244, 0.6), rgba(209, 240, 226, 0.42));
	pointer-events: none;
}
/* Timelapse: invisibile finche' non e' in riproduzione, poi sfuma sopra la foto; a fine clip resta l'ultimo frame (stanza in ordine) */
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.hero__video.is-playing {
	opacity: 1;
}

.hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0; /* senza questo il figlio flex non scende sotto il proprio min-content (TICKET-10) */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 743px;
	text-align: center;
}

.hero .trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.trust-badge__stars {
	color: var(--tp-primary);
	font-size: 15px;
	font-weight: 600;
}
.trust-badge__text {
	font-size: 14px;
	color: var(--tp-text-body);
}

.hero h1 {
	font-size: 48px;
	line-height: 56px;
	font-weight: 800;
	color: var(--tp-text);
	max-width: 560px;
	margin: 0;
}

.hero__subtitle {
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: var(--tp-text-body);
	max-width: 560px;
	margin: 0;
}

.tp-search {
	display: flex;
	align-items: center;
	/* width/max-width invertiti rispetto alla prima stesura: con width: 640px il min-content della
	   colonna hero restava 640 e la pagina scrollava di lato sotto i 640px (TICKET-10) */
	width: 100%;
	max-width: 640px;
	min-width: 0;
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-xl);
	box-shadow: var(--tp-shadow-card);
	padding: 6px;
}
.tp-search__field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px 12px 16px;
	border-radius: var(--tp-radius-lg);
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--tp-font);
}
.tp-search__field--service span {
	font-weight: 700;
	font-size: 15px;
	color: var(--tp-text-heading);
	white-space: nowrap;
}
.tp-search__field--address {
	flex: 1;
	min-width: 0;
}
/* Menu del servizio vero (Home): select nativa senza aspetto del sistema, stesso testo dell'etichetta statica.
   La freccia e' l'icona del tema (la freccia nativa ignora il padding), sopra la select ma senza catturare i click. */
.tp-search__field--service {
	position: relative;
}
.tp-search__select {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	margin: 0 -28px 0 0;
	padding: 0 28px 0 0;
	border: 0;
	background: transparent;
	font-family: var(--tp-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--tp-text-heading);
	cursor: pointer;
}
.tp-search__select:focus {
	outline: none;
}
.tp-search__field--service:focus-within {
	box-shadow: inset 0 0 0 2px var(--tp-primary);
}
.tp-search__select + .tp-search__chevron {
	position: relative;
	pointer-events: none;
}
/* Campo reale della barra (variante mode=input): stesso aspetto del segnaposto della hero. */
/* Link di salto: fuori schermo finche' non prende il focus da tastiera. Primo elemento del body. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--tp-white);
	color: var(--tp-text);
	border-radius: 0 0 var(--tp-radius-md) 0;
	box-shadow: var(--tp-shadow-card);
	text-decoration: none;
}
.skip-link:focus {
	left: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.tp-search__input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 15px;
	color: var(--tp-text);
	padding: 0;
}
.tp-search__input::placeholder { color: var(--tp-text-placeholder); }
.tp-search__input:focus { outline: none; } /* il segnale di focus lo da' il campo, vedi :focus-within sotto */
.tp-search__field--address:focus-within { box-shadow: inset 0 0 0 2px var(--tp-primary); }

.tp-search__placeholder {
	font-size: 15px;
	color: var(--tp-text-placeholder);
}
.tp-search__divider {
	width: 1px;
	height: 26px;
	background: var(--tp-border);
	flex-shrink: 0;
}
.tp-search__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.tp-search__chevron {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.tp-search__submit {
	margin-left: auto;
}
.tp-search__icon--white {
	filter: brightness(0) invert(1);
}

.hero__phone {
	position: relative;
	z-index: 1;
	perspective: 1400px;
}
/* Canvas Three.js centrato sul box del phone (1200x960, trasparente); attivo solo con .is-3d.
   16/10: era 720 di larghezza. Il telefono si muove dentro al canvas (POSES.x, non una trasformazione
   CSS): con x 383 il suo bordo destro cadeva fuori da un canvas di 720 e veniva tagliato. La larghezza
   qui deve restare uguale al parametro width passato a createPhone3D in home-motion.js. */
.hero__phone-3d {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1200px;
	height: 960px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.hero__phone-3d canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}
.hero__phone.is-3d .hero__phone-3d {
	display: block;
}
.hero__phone.is-3d .tp-phone {
	opacity: 0;
	transform: none !important;
}

/* Hero mobile e tablet — Figma 4018:973. Struttura diversa dal desktop: li' il testo sta sopra la foto,
   qui il testo e' su bianco e la foto e' un box sotto, con il telefono che ne sporge dal bordo inferiore
   (phone 150x300 a y 102 dentro un box alto 270). Niente posizionamento assoluto: ordine di flusso. */
@media (max-width: 1023px) {
	.hero {
		align-items: stretch;
		gap: 0;
		padding: 36px 20px 56px;
		text-align: left;
	}
	.hero__content {
		order: 1;
		align-items: flex-start;
		gap: 20px;
		max-width: none;
		text-align: left;
	}
	.hero h1 {
		width: 100%;
		font-size: 30px;
		line-height: 37px;
		max-width: none;
	}
	.hero__subtitle {
		font-size: 16px;
		line-height: 25px;
		max-width: none;
	}
	/* Search bar su tre righe: servizio, indirizzo, Cerca a tutta larghezza (4018:979) */
	.tp-search {
		flex-direction: column;
		align-items: stretch;
		max-width: none;
		border-radius: var(--tp-radius-xl);
	}
	.tp-search__field {
		width: 100%;
		min-height: 49px;
	}
	.tp-search__divider {
		display: block;
		width: 100%;
		height: 1px;
		margin: 0;
		background: var(--tp-border);
	}
	.tp-search__submit {
		width: 100%;
		min-height: 54px;
		margin-left: 0;
	}
	/* Box visuale: in flusso sotto il testo, non piu' sfondo assoluto della sezione.
	   La foto passa alla rendition da 720px: il box e' largo al massimo 350px (700 a DPR 2),
	   il file desktop da 1376px pesa il triplo per nulla (TICKET-20). */
	.hero__box {
		order: 2;
		position: relative;
		inset: auto;
		height: 270px;
		background-image: url('assets/img/hero-box-720.jpg');
		margin: 20px 0 0;
		border-radius: var(--tp-radius-2xl);
	}
	.hero__phone {
		order: 3;
		align-self: center;
		/* il telefono inizia 102px sotto il bordo alto del box (Figma 4019:967): risalendo di 270-102
		   resta a cavallo del bordo inferiore, come nel design */
		margin-top: -168px;
		--tp-phone-w: 150px;
		--tp-phone-h: 300px;
		--tp-phone-radius: 26px;
		--tp-phone-screen-radius: 21px;
	}
	.hero__phone-3d {
		display: none;
	}
}

/* Le sezioni sono bersaglio dei link ad ancora della navbar: senza questo il titolo finisce sotto la
   navbar sticky (alta --tp-navbar-h) quando si salta alla sezione. */
:where(main.home > section, main.hub-roma > section) {
	scroll-margin-top: var(--tp-navbar-h);
}

/* Come funziona — Figma 3750:3099 / 3798:1087 / 3828:1157 (canvas 1440x980), ADR-002 */
.how-it-works {
	position: relative;
	max-width: none;
	padding: 0;
}
.how-it-works__sticky {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 72px 20px 48px;
}
.how-it-works__title {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	color: var(--tp-text-heading);
	text-align: center;
}
.how-it-works__subtitle {
	margin: 4px 0 0;
	font-size: 16px;
	color: var(--tp-text-body);
	text-align: center;
}
.how-it-works__steps {
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tp-gap);
}
.how-it-works__step {
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 16px;
	align-items: start;
}
.how-it-works__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	background: var(--tp-primary-ink);
	color: var(--tp-white);
	font-size: 18px;
	font-weight: 700;
}
.how-it-works__text h3 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 600;
	color: var(--tp-text-heading);
}
.how-it-works__text p {
	margin: 0;
	font-size: 15px;
	/* era --tp-text-placeholder (#9CA3AF): 2,5:1 su bianco, sotto il minimo AA di 4,5:1. --tp-text-body
	   (#6B7280) sta a 4,8:1 ed e' leggibile anche su schermo luminoso. */
	color: var(--tp-text-body);
}
.how-it-works__phone-static {
	/* fallback statico desktop (reduced-motion): stessa resa del vecchio scale(0.6), ma dai token */
	--tp-phone-w: 176px;
	--tp-phone-h: 365px;
	--tp-phone-radius: 31px;
	--tp-phone-screen-radius: 25px;
	grid-column: 1 / -1;
	margin-top: 24px;
}

/* Indicatore di avanzamento e segnale di scorrimento: esistono solo nella coreografia desktop
   (senza pin non c'e' niente da indicare, i tre passi si leggono tutti). */
.hiw-progress,
.hiw-scrollcue {
	display: none;
}

/* Motion desktop (classe messa dal JS solo da --tp-bp-desktop in su e senza reduced-motion) */
.motion-ok .hero__phone {
	z-index: 5;
}
.motion-ok .how-it-works {
	height: 550vh; /* 3 viewport di video + 1 di zoom-through + 0.5 di tenuta + 1 di rientro nella card (home-motion.js) */
}
.motion-ok .how-it-works__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	padding: 0;
	/* Le posizioni in percentuale sotto vengono dai frame Figma (980px, senza navbar). L'offset tiene il testo
	   sotto la navbar sticky: 15/10 notte ridotto da navbar+12 a 24px, cosi' il titolo sale e lo spazio
	   recuperato va al telefono, che nel frattempo e' cresciuto (POSES in home-motion.js). */
	--hiw-offset: 24px;
}
.motion-ok .how-it-works__title {
	position: absolute;
	top: calc(7.3% + var(--hiw-offset));
	left: 0;
	right: 0;
	opacity: var(--hiw-text-fade, 1); /* sfuma a fine terzo segmento (home-motion.js): il phone che si raddrizza non copre il testo */
}
.motion-ok .how-it-works__subtitle {
	position: absolute;
	top: calc(7.3% + 50px + var(--hiw-offset));
	left: 0;
	right: 0;
	opacity: var(--hiw-text-fade, 1);
}
.motion-ok .how-it-works__steps {
	display: block;
	margin: 0;
}
/* Impaginazione desktop (revisione 15/10 notte, seconda passata): una sola colonna editoriale a sinistra
   — titolo, stepper verticale, segnale di scorrimento — e il telefono, che e' pinnato fuori dalla sezione,
   centrato nello spazio rimasto a destra (x nelle POSES). Prima c'erano tre ancoraggi diversi (titolo
   centrato sul viewport, testo in alto a sinistra, telefono spostato a destra) e la composizione
   galleggiava. Lo stepper mostra tutti e tre i passi: quello attivo apre il suo paragrafo, gli altri
   restano come titoli spenti, e la linea verticale che li unisce fa da indicatore di avanzamento. */
.motion-ok .how-it-works__sticky {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* la regola base centra il contenitore (margin: 0 auto): qui la colonna deve stare a destra, con il
	   telefono a sinistra (16/10, richiesta di Guido: prima era l'opposto) */
	margin: 0 0 0 auto;
	width: min(39%, 560px);
	max-width: none;
	/* 16/10: la coppia testo+telefono e' centrata come blocco unico. Prima la colonna partiva da 6,7%
	   e il telefono restava al centro della propria meta': 96px di margine a sinistra contro 373 a
	   destra, con il vuoto piu' grande sul bordo invece che fra i due elementi. Il 13% qui e la x delle
	   POSES descrivono una sola composizione: cambiarne uno senza l'altro la rompe. Da quando il
	   telefono e' passato a sinistra il padding e' a destra e la x e' negativa. */
	padding: 0 13% 0 0;
	opacity: var(--hiw-text-fade, 1);
}
.motion-ok .how-it-works__title {
	position: static;
	text-align: left;
	font-size: 40px;
	line-height: 48px;
	margin: 0 0 32px;
	opacity: 1;
}
.motion-ok .how-it-works__steps {
	position: static;
	display: flex;
	flex-direction: column;
	margin: 0;
}
.motion-ok .how-it-works__step {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 18px;
	align-items: start;
	padding-bottom: 28px;
	opacity: 1;
}
.motion-ok .how-it-works__step:last-child {
	padding-bottom: 0;
}
/* Linea di collegamento fra i pallini: e' l'indicatore di avanzamento, si colora fino al passo attivo */
.motion-ok .how-it-works__step:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 19px;
	top: 40px;
	bottom: 0;
	width: 2px;
	background: var(--tp-border);
}
/* solo il tratto dei passi gia' superati e' colorato: quello sotto il passo attivo e' ancora da fare */
.motion-ok .how-it-works__step.is-done::before {
	background: var(--tp-primary-ink);
}
.motion-ok .how-it-works__badge {
	display: inline-flex;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	font-size: 16px;
	background: var(--tp-border);
	color: #4B5563; /* 6,2:1 su --tp-border: il numero del passo si legge anche da spento */
	transition: background-color 260ms cubic-bezier(0.4, 0, 0.2, 1), color 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.motion-ok .how-it-works__step.is-done .how-it-works__badge,
.motion-ok .how-it-works__step.is-active .how-it-works__badge {
	background: var(--tp-primary-ink);
	color: var(--tp-white);
}
.motion-ok .how-it-works__text h3 {
	margin: 7px 0 0;
	font-size: 22px;
	line-height: 28px;
	color: var(--tp-text-muted);
	transition: color 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.motion-ok .how-it-works__step.is-active .how-it-works__text h3 {
	color: var(--tp-text-heading);
}
/* fatto, in corso e da fare devono distinguersi fra loro, non solo dall'attivo */
.motion-ok .how-it-works__step.is-done .how-it-works__text h3 {
	color: var(--tp-text-body);
}
/* Il paragrafo del passo attivo si apre: grid-template-rows 0fr -> 1fr e' l'unico modo di animare
   un'altezza automatica senza fissarla a mano */
.motion-ok .how-it-works__text p {
	display: grid;
	grid-template-rows: 0fr;
	margin: 0;
	font-size: 16px;
	line-height: 25px;
	opacity: 0;
	overflow: hidden;
	transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms linear, margin-top 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.motion-ok .how-it-works__step.is-active .how-it-works__text p {
	grid-template-rows: 1fr;
	margin-top: 10px;
	opacity: 1;
}
.motion-ok .how-it-works__text p > * {
	min-height: 0;
}

/* Segnale di scorrimento: in coda alla colonna, solo sul primo passo */
.motion-ok .hiw-scrollcue {
	display: block;
	width: 16px;
	height: 16px;
	/* il margine negativo in basso annulla i 52px che la freccia occupa (16 + 36): la colonna e' centrata
	   verticalmente con justify-content, e senza questo il testo stava 27px piu' in alto del telefono anche
	   nei passi in cui la freccia e' invisibile */
	margin: 36px 0 -52px 12px;
	border-right: 2px solid var(--tp-text-muted);
	border-bottom: 2px solid var(--tp-text-muted);
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 300ms linear;
	animation: hiw-cue 1.8s ease-in-out infinite;
}
.motion-ok .how-it-works[data-step="1"] .hiw-scrollcue {
	opacity: 0.55;
}
@keyframes hiw-cue {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 6px; }
}
.motion-ok .how-it-works__phone-static {
	display: none;
}
.motion-ok #hiw-phone {
	will-change: transform;
}


/* Overlay dello zoom-through (ADR-002 rev. 3): fisso, sotto la navbar (z 10), geometria impostata da JS;
   il velo verde (lo stesso della card servizio) sfuma durante il rientro nella card */
.hiw-zoom {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}
.hiw-zoom.is-on {
	display: block;
}
.hiw-zoom__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hiw-zoom__veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 200, 150, 0.5);
	opacity: 0;
}

/* Mobile e tablet: carosello a scorrimento orizzontale (decisione Guido 27/10, al posto della sequenza guidata
   dallo scroll di ADR-002 rev. 5). Ogni passo e' una card col proprio telefono in alto e il testo sotto; la fila
   scorre col dito con scroll-snap, senza JavaScript. hiw-carousel.js aggiunge puntini, frecce e "1 di 3"
   (.hiw-nav, visibile solo con .hiw-car-ok). Telefono 220x445: le schermate dell'app si leggono, a 158 no. */
@media (max-width: 1023px) {
	.how-it-works__sticky {
		max-width: none;
		padding: 48px 0 8px;
	}
	.how-it-works__title,
	.how-it-works__subtitle {
		padding: 0 20px;
	}
	.how-it-works__title {
		font-size: 30px;
		line-height: 1.3;
	}
	.how-it-works__steps {
		position: relative; /* offsetParent delle card: hiw-carousel.js misura gli offsetLeft sulla fila */
		display: flex;
		gap: 14px;
		margin-top: 28px;
		padding: 0 20px 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 20px;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.how-it-works__steps::-webkit-scrollbar {
		display: none;
	}
	.how-it-works__step {
		display: flex;
		flex: 0 0 min(84%, 340px);
		flex-direction: column;
		align-items: center;
		padding: 24px 20px 26px;
		border-radius: 24px;
		background: var(--tp-bg-soft);
		text-align: center;
		scroll-snap-align: center;
	}
	.how-it-works__phone-static {
		--tp-phone-w: 220px;
		--tp-phone-h: 445px;
		--tp-phone-radius: 36px;
		--tp-phone-screen-radius: 29px;
		order: -1;
		margin: 0 0 20px;
		/* niente height qui: .tp-phone prende l'altezza dal token --tp-phone-h (una regola height
		   su questo stesso elemento lo azzererebbe, i figli sono in position: absolute) */
	}
	.how-it-works__badge {
		width: 32px;
		height: 32px;
		font-size: 15px;
	}
	.how-it-works__text {
		margin-top: 10px;
	}
	.how-it-works__text h3 {
		font-size: 19px;
	}
	.how-it-works__text p {
		max-width: 290px;
		margin: 0 auto;
		font-size: 15px;
		line-height: 23px;
	}
	.hiw-car-ok .hiw-nav {
		display: flex;
	}
}
@media (max-width: 400px) {
	.how-it-works__phone-static {
		--tp-phone-w: 200px;
		--tp-phone-h: 405px;
		--tp-phone-radius: 33px;
		--tp-phone-screen-radius: 26px;
	}
}

/* Navigazione del carosello (hiw-carousel.js): frecce ai lati, puntini e contatore al centro */
.hiw-nav {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 18px 0 0;
}
.hiw-nav__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #D9E8E2;
	border-radius: 50%;
	background: var(--tp-white);
	font-size: 18px;
	color: #1A1A1A;
	cursor: pointer;
}
.hiw-nav__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}
.hiw-nav__dots {
	display: flex;
	gap: 6px;
}
.hiw-nav__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #CDE5DC;
	transition: width 0.25s ease, background-color 0.25s ease;
}
.hiw-nav__dot.is-active {
	width: 22px;
	background: #067A55;
}
.hiw-nav__count {
	min-width: 44px;
	font-size: 13px;
	font-weight: 600;
	color: #5B6472;
	text-align: center;
}

/* =========================
   Servizi popolari — Figma 3828:1079 (stati tab 6306:890 / 6306:958 / 6306:1026)
   Sfondo full-bleed, contenuto 1248px (96px di margine a 1440). Motion spec §5.
   ========================= */
.services {
	position: relative;
	max-width: none;
	padding: 72px 0 96px;
	background: var(--tp-bg-soft);
	overflow: hidden;
}
.services__inner {
	position: relative;
	max-width: 1288px;
	margin: 0 auto;
	padding: 0 20px;
}
.services__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}
.services__title {
	margin: 0;
	max-width: 560px;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tp-text-heading);
}
.services__subtitle {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.4;
	color: var(--tp-text-placeholder);
}
.services__proof {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
	flex-shrink: 0;
}
.services__proof-user {
	display: flex;
	align-items: center;
	gap: 10px;
}
.services__proof-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.services__proof-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	white-space: nowrap;
}
.services__proof-text strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--tp-text-heading);
}
.services__proof-text span {
	font-size: 12px;
	color: var(--tp-text-placeholder);
}
.services__proof-divider {
	width: 1px;
	height: 34px;
	background: var(--tp-border-card);
}
.services__proof-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-text-heading);
	white-space: nowrap;
}
.services__star {
	font-size: 16px;
	font-weight: 700;
	color: #FFB826;
}

/* Tab a pillola: l'indicatore verde scivola sotto la tab attiva (translateX), non appare/scompare */
.services__tabs {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 44px;
}
.services__tab {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px 10px 16px;
	border-radius: 22px;
	border: 1px solid var(--tp-border-card);
	background: var(--tp-white);
	font-family: var(--tp-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--tp-text-chip);
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.services__tab:hover {
	border-color: var(--tp-primary);
}
.services__tab.is-active {
	color: var(--tp-white);
	font-weight: 600;
	border-color: transparent;
	background: transparent;
}
.services__tabs:not(.has-indicator) .services__tab.is-active {
	background: var(--tp-primary-ink);
}
.services__tab-icon {
	width: 18px;
	height: 18px;
}
.services__tab-indicator {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 0;
	height: 0;
	border-radius: 22px;
	background: var(--tp-primary-ink); /* sotto il testo bianco della tab attiva: il verde chiaro dava 2,16:1 */
	opacity: 0;
}
.services__tabs.has-indicator .services__tab-indicator {
	opacity: 1;
}
.services__tabs.is-ready .services__tab-indicator {
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.2s ease;
}

/* Card: tutte nella stessa cella, solo quella attiva visibile; cambio tab = crossfade + rise */
.services__cards {
	display: grid;
	margin-top: 42px;
}
.services__card {
	grid-area: 1 / 1;
	display: flex;
	align-items: stretch;
	gap: 20px;
	height: 360px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.services__card.is-enter {
	transform: translateY(8px);
	transition: none;
}
.services__card.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
.services__includes,
.services__desc {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 0 0 320px;
	width: 320px;
	min-width: 0;
}
.services__desc {
	gap: 12px;
}
.services__panel-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--tp-text-heading);
}
.services__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.services__chips .tp-chip {
	transition: transform 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.services__card:not(.is-active) .tp-chip {
	opacity: 0;
	transform: translateY(6px);
}
.services__card.is-active .tp-chip {
	transition-delay: calc(var(--i, 0) * 40ms);
}
.services__card.is-active .tp-chip:hover {
	transition-delay: 0s;
	transform: translateY(-2px);
	border-color: var(--tp-primary);
}
.services__visual {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	border-radius: var(--tp-radius-xl);
	overflow: hidden;
}
.services__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.services__video {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.services__visual.is-live .services__video {
	display: block;
}
.services__visual::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 200, 150, 0.5);
}
/* Etichetta bianca sopra la foto: l'unico testo del sito il cui contrasto non si puo' calcolare,
   perche' dipende dal pixel sotto. Una velatura scura dal basso lo rende indipendente dalla foto. */
.services__visual-label {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 1;
	font-size: 15px;
	font-weight: 600;
	color: var(--tp-white);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.services__visual::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0));
	pointer-events: none;
}
.services__card-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tp-text-heading);
}
.services__card-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tp-text-muted);
}
.services__highlight {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--tp-green-ink);
}
.services__cta {
	margin-top: auto;
	width: 100%;
	padding: 13px 20px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--tp-radius-lg);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.services__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 22px -10px rgba(0, 200, 150, 0.7);
}
/* Mascotte decorativa (4522:4705): 218px ruotata di 17.42deg, sborda a destra e viene tagliata dalla sezione come nel
   Figma. All'ingresso della sezione il braccio entra da destra (Guido 15/10): parte fuori dal bordo e piu' ruotato,
   scivola in posa con una curva morbida dopo il reveal della card */
.services__mascot {
	position: absolute;
	left: 1212px; /* +32 rispetto al Figma (Guido 15/10: un po' piu' a destra) */
	top: 439px;
	width: 218px;
	height: 218px;
	transform: translate(160px, 40px) rotate(34deg);
	opacity: 0;
	transform-origin: 80% 60%;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s, opacity 0.5s ease 0.45s;
	pointer-events: none;
}
.services.is-in .services__mascot {
	transform: rotate(17.42deg);
	opacity: 1;
}

/* Reveal all'ingresso (stagger): titoli, social proof +80ms, tab +160ms (+40ms ciascuna), card +240ms con scale 0.98 -> 1 */
.services__titles,
.services__proof,
.services__tab,
.services__cards {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.services__cards {
	transform: translateY(12px) scale(0.98);
}
.services.is-in .services__titles,
.services.is-in .services__proof,
.services.is-in .services__tab,
.services.is-in .services__cards {
	opacity: 1;
	transform: none;
}
.services.is-in .services__proof {
	transition-delay: 80ms;
}
.services.is-in .services__tab {
	transition-delay: calc(160ms + var(--i, 0) * 40ms);
}
.services.is-in .services__cards {
	transition-delay: 240ms;
}

@media (max-width: 1240px) {
	.services__mascot {
		display: none;
	}
}
@media (max-width: 1100px) {
	.services__head {
		flex-direction: column;
	}
	.services__card {
		height: auto;
		flex-direction: column;
	}
	.services__includes,
	.services__desc {
		flex: none;
		width: auto;
	}
	.services__visual {
		order: -1;
		height: 240px;
	}
}
/* Mobile e tablet — Figma 4021:965 (390px). La card cambia ordine: titolo, testo, visual, "Cosa include"
   con i chip, pill e CTA a tutta larghezza. I due pannelli diventano `display: contents` cosi' i loro figli
   sono figli diretti della card e si riordinano con `order`, senza duplicare markup e senza i riquadri
   grigi, che nel Figma mobile non ci sono.
   [ATTENZIONE] L'ordine del DOM resta quello desktop (pannello "Cosa include", visual, descrizione): a
   schermo l'ordine e' quello del Figma, ma uno screen reader legge ancora prima i chip e poi il titolo.
   Sistemarlo richiede di spezzare il pannello descrizione in due, e su desktop i due pezzi diventerebbero
   due riquadri grigi separati invece di uno. Scelta consapevole, non una svista.
   Tutte le distanze verticali della card valgono 14px nel Figma (padding 18, gap 14). */
@media (max-width: 1023px) {
	.services {
		padding: 48px 0 56px;
	}
	.services__inner {
		padding: 0 20px;
	}
	.services__title {
		font-size: 28px;
		line-height: 1.18;
	}
	.services__subtitle {
		margin-top: 8px;
		font-size: 16px;
	}
	/* la riga di social proof del desktop non esiste nel Figma mobile */
	.services__proof {
		display: none;
	}
	.services__tabs {
		margin-top: 20px;
		gap: 8px;
	}
	.services__tab {
		padding: 9px 15px;
		gap: 7px;
	}
	.services__cards {
		margin-top: 20px;
	}
	.services__card {
		display: flex;
		flex-direction: column;
		gap: 0;
		height: auto;
		padding: 18px;
	}
	.services__includes,
	.services__desc {
		display: contents;
	}
	.services__card-title {
		order: 1;
		font-size: 24px;
		line-height: 33px;
	}
	.services__card-text {
		order: 2;
		margin-top: 14px;
		font-size: 16px;
		line-height: 21px;
		color: var(--tp-text-body);
	}
	.services__visual {
		order: 3;
		margin-top: 14px;
		height: auto;
		/* le card stanno tutte nella stessa cella di griglia e la riga e' alta quanto la piu' alta: senza
		   questo il `flex: 1 1 auto` del desktop faceva assorbire al visual tutto lo spazio in piu' (213px
		   invece di 167) */
		flex: 0 0 auto;
		border-radius: var(--tp-radius-lg);
	}
	/* Il rapporto viene dal Figma (314x168) e sta sull'immagine, non sul contenitore: con `height: 100%`
	   dentro un contenitore di altezza automatica la percentuale non si risolve, l'immagine prende la
	   propria altezza naturale e il contenitore cresce con lei, ignorando l'aspect-ratio (213px invece
	   di 164 a 390). */
	.services__visual img {
		aspect-ratio: 314 / 168;
		height: auto;
	}
	/* nel Figma mobile la foto e' pulita: il velo verde serve all'atterraggio dello zoom-through, che e' solo desktop */
	.services__visual::after,
	.services__visual-label {
		display: none;
	}
	.services__panel-title {
		order: 4;
		margin-top: 14px;
	}
	.services__chips {
		order: 5;
		margin-top: 14px;
	}
	.services__chips .tp-chip {
		padding: 8px 12px;
		font-size: 14px;
		line-height: 20px;
	}
	/* su mobile l'evidenza diventa una pill piena (4022:1025), non una riga di testo colorato */
	.services__highlight {
		order: 6;
		margin-top: 14px;
		padding: 10px 12px;
		border-radius: var(--tp-radius-lg);
		background: #E7FAF4;
		font-size: 14px;
		line-height: 20px;
		color: var(--tp-text-body);
	}
	.services__cta {
		order: 7;
		margin-top: 14px;
		padding: 14px 20px;
		font-size: 16px;
	}
}

/* =========================
   Social proof — Figma 3564:96 (mobile 4023:1023). Motion spec §6: marquee continuo 40 s, pausa su hover,
   mobile 3 card statiche con reveal in stagger, reduced-motion griglia ferma.
   ========================= */
.reviews {
	position: relative;
	max-width: none;
	padding: 95px 0 67px; /* + 48px di padding del marquee = 115px come nel Figma */
	background: var(--tp-white);
	overflow: hidden;
}
.reviews__inner {
	max-width: 1288px;
	margin: 0 auto;
	padding: 0 20px;
}
.reviews__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 20px;
	background: #E7FAF4;
	font-size: 14px;
	font-weight: 500;
	color: var(--tp-text-body);
	text-decoration: none;
	white-space: nowrap;
}
.reviews__badge-logo {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.reviews__stars {
	color: var(--tp-primary);
	letter-spacing: 1px;
}
.reviews__title {
	margin: 20px 0 0;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
	color: #171B26;
}
/* Marquee: la pista contiene il set due volte (il secondo e' aria-hidden); ogni set porta il proprio gap finale,
   cosi' translateX(-50%) riallinea esattamente il primo set e il loop e' senza scatto */
/* overflow hidden taglierebbe l'ombra delle card (32px di sfocatura) e il lift in hover: il contenitore
   tiene un padding interno e il margine sopra e' ridotto di altrettanto */
.reviews__marquee {
	margin-top: 35px;
	padding: 20px 0 48px;
	overflow: hidden;
}
.reviews__track {
	display: flex;
	width: max-content;
	padding-left: max(20px, calc((100% - 1248px) / 2));
	animation: reviews-marquee 40s linear infinite;
}
.reviews__marquee:hover .reviews__track,
.reviews__marquee:focus-within .reviews__track,
.reviews__marquee.is-paused .reviews__track {
	animation-play-state: paused;
}
/* Comando di pausa: il nastro si muove per piu' di 5 secondi e la sola pausa in hover lascia fuori
   chi naviga da tastiera (WCAG 2.2.2). Sotto la soglia desktop il nastro e' fermo e il bottone sparisce. */
.reviews__pause {
	display: block;
	margin: 0 auto 12px;
	padding: 8px 16px;
	min-height: 44px;
	font: inherit;
	font-size: 13px;
	color: var(--tp-text-body);
	background: var(--tp-white);
	border: 1px solid var(--tp-border-card);
	border-radius: 999px;
	cursor: pointer;
}
.reviews__pause:hover { border-color: var(--tp-primary-ink); }
.reviews__set {
	display: flex;
	gap: 28px;
	padding-right: 28px;
}
@keyframes reviews-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.review-card {
	display: flex;
	gap: 22px;
	align-items: stretch;
	width: 500px;
	height: 220px;
	padding: 30px 32px;
	box-sizing: border-box;
	background: var(--tp-white);
	border: 1px solid #E9EBEE;
	border-radius: var(--tp-radius-2xl);
	box-shadow: 0 12px 32px 0 rgba(15, 23, 41, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.review-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -4px rgba(15, 23, 41, 0.14);
}
.review-card__side {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
}
.review-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}
.review-card__index {
	font-size: 12px;
	font-weight: 500;
	color: var(--tp-text-body);
	white-space: nowrap;
}
.review-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}
.review-card__author {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--tp-text-body);
}
.review-card__text {
	margin: 0;
	font-size: 19px;
	line-height: 27px;
	font-weight: 500;
	color: #171B26;
}
/* Reveal: badge e titolo; su mobile anche le card in stagger da 80 ms */
.reviews__badge,
.reviews__title {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.reviews__title {
	transition-delay: 80ms;
}
.reviews.is-in .reviews__badge,
.reviews.is-in .reviews__title {
	opacity: 1;
	transform: none;
}

@media (max-width: 1023px) {
	.reviews {
		padding: 56px 0 64px;
	}
	.reviews__title {
		font-size: 28px;
		line-height: 33px;
	}
	/* il margine e' 0 perche' il contenitore porta gia' 20px di padding in alto (spazio per l'ombra):
	   con il margine si sommavano e la prima card scendeva di 32px invece dei 20 del Figma */
	.reviews__marquee {
		margin-top: 0;
	}
	.reviews__track {
		display: block;
		width: auto;
		padding: 0 20px;
		animation: none;
	}
	.reviews__set {
		flex-direction: column;
		gap: 20px;
		padding-right: 0;
	}
	.reviews__set[aria-hidden="true"],
	.review-card:nth-child(n + 4) {
		display: none;
	}
	/* Card del Figma 4023:1028: prima la citazione, sotto avatar e autore sulla stessa riga. Nel DOM
	   l'autore sta dentro al corpo e l'avatar fuori, quindi il corpo diventa `display: contents` e la card
	   una griglia a due aree: la citazione occupa tutta la riga, avatar e autore la seconda. */
	.review-card {
		display: grid;
		grid-template-columns: 40px 1fr;
		grid-template-areas:
			'citazione citazione'
			'avatar autore';
		column-gap: 12px;
		row-gap: 16px;
		width: auto;
		height: auto;
		padding: 20px;
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 0.5s ease, transform 0.5s ease;
		transition-delay: calc(var(--i, 0) * 80ms);
	}
	.reviews.is-in .review-card {
		opacity: 1;
		transform: none;
	}
	.review-card__side {
		grid-area: avatar;
	}
	.review-card__body {
		display: contents;
	}
	.review-card__avatar {
		width: 40px;
		height: 40px;
	}
	/* il contatore "01 / 06" appartiene al marquee desktop: qui le card sono tre e ferme */
	.review-card__index {
		display: none;
	}
	.review-card__text {
		grid-area: citazione;
		font-size: 16px;
		line-height: 24px;
	}
	.review-card__author {
		grid-area: autore;
		align-self: center;
		font-size: 14px;
	}
}

/* =========================
   Dove siamo attivi — Figma 3564:114 (mobile 4023:1007). Mappa raster 1280x714 con due overlay reali del Figma
   (Centro 471x352 a 441,189; Prati 540x659 a 84,-103, darken 70%) in percentuale. Motion spec §7: titolo, mappa
   fade+scale .98, overlay fade+pulse, sottotitolo, etichetta, citta' in stagger 80 ms; alone radar in loop.
   ========================= */
.zones {
	max-width: none;
	padding: 80px 20px;
	background: #F7F8FA;
	text-align: center;
}
.zones__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.zones__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: #111827;
}
.zones__map {
	position: relative;
	width: 100%;
	aspect-ratio: 1280 / 714;
	overflow: hidden;
}
/* Il riquadro visibile puo' avere un rapporto diverso da quello della mappa (su mobile e' 350x220): lo
   stage tiene sempre il rapporto dell'immagine, cosi' gli overlay in percentuale restano agganciati.
   Su desktop i due rapporti coincidono e lo stage e' semplicemente grande quanto il riquadro. */
.zones__map-stage {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	aspect-ratio: 1280 / 714;
}
.zones__map-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.zones__overlay {
	position: absolute;
	overflow: hidden;
	pointer-events: none;
}
.zones__overlay img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* i file del Figma sono quadrati 1024px: Centro ritagliato al box, Prati scalato al 124% */
}
.zones__overlay--centro {
	left: 34.45%;
	top: 26.47%;
	width: 36.81%;
	height: 49.27%;
	--zones-op: 0.8; /* opacita' a regime, usata dall'animazione d'ingresso e da reduced-motion */
}
.zones__overlay--prati {
	left: 6.56%;
	top: -14.43%;
	width: 42.19%;
	height: 92.3%;
	--zones-op: 0.7;
	mix-blend-mode: darken;
}
.zones__overlay--prati img {
	left: -10.2%;
	width: 124.33%;
}
/* Alone radar sul centro di Roma (centro dell'overlay Centro): discreto, 2,5 s, solo con motion */
.zones__radar {
	position: absolute;
	left: 52.85%;
	top: 51.1%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	background: rgba(0, 200, 150, 0.35);
	opacity: 0;
	pointer-events: none;
}
.zones__desc {
	margin: 0;
	font-size: 16px;
	color: #6B737F;
}
.zones__coming {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}
.zones__coming-label {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #6B737F;
}
.zones__cities {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.zones__city {
	padding: 8px 16px;
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: #6B737F;
	transition: transform 0.25s ease, border-color 0.25s ease, opacity 0.5s ease;
}
.zones__city:hover {
	transform: translateY(-2px);
	border-color: var(--tp-primary);
}
/* Sequenza d'ingresso */
.zones__title,
.zones__desc,
.zones__coming-label {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.zones__map {
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}
.zones__overlay {
	opacity: 0;
}
.zones__city {
	opacity: 0;
	transform: scale(0.9);
}
.zones.is-in .zones__title,
.zones.is-in .zones__desc,
.zones.is-in .zones__coming-label {
	opacity: 1;
	transform: none;
}
.zones.is-in .zones__map {
	opacity: 1;
	transform: none;
}
.zones.is-in .zones__desc {
	transition-delay: 0.5s;
}
.zones.is-in .zones__coming-label {
	transition-delay: 0.6s;
}
.zones.is-in .zones__overlay--centro {
	animation: zones-overlay-in 0.9s ease-out 0.7s forwards;
}
.zones.is-in .zones__overlay--prati {
	animation: zones-overlay-in 0.9s ease-out 0.85s forwards;
}
@keyframes zones-overlay-in {
	0% { opacity: 0; transform: scale(1); }
	55% { opacity: var(--zones-op, 0.8); transform: scale(1.06); }
	100% { opacity: var(--zones-op, 0.8); transform: scale(1); }
}
.zones.is-in .zones__radar {
	animation: zones-radar 2.5s ease-out 1.8s infinite;
}
@keyframes zones-radar {
	0% { opacity: 0.45; transform: scale(0.5); }
	100% { opacity: 0; transform: scale(3); }
}
.zones.is-in .zones__city {
	opacity: 1;
	transform: none;
	transition: transform 0.4s ease calc(0.7s + var(--i, 0) * 80ms), opacity 0.4s ease calc(0.7s + var(--i, 0) * 80ms), border-color 0.25s ease;
}
.zones.is-in .zones__city:hover {
	transition-delay: 0s;
}
@media (max-width: 1023px) {
	/* Figma 4023:1007: le distanze verticali valgono 18px, la mappa e' 350x220 */
	.zones {
		padding: 48px 20px;
	}
	.zones__inner {
		gap: 18px;
	}
	.zones__title {
		font-size: 28px;
		line-height: 42px;
	}
	.zones__map {
		aspect-ratio: 350 / 220;
		border-radius: var(--tp-radius-lg);
	}
	/* 112.7% = 220 x (1280/714) / 350: lo stage copre il riquadro in altezza e viene tagliato ai lati,
	   come un object-fit cover applicato a mappa e overlay insieme */
	.zones__map-stage {
		width: 112.7%;
	}
	.zones__desc {
		font-size: 16px;
		line-height: 23px;
	}
	.zones__coming {
		gap: 18px;
	}
	.zones__coming-label {
		font-size: 14px;
	}
	.zones__city {
		padding: 8px 16px;
		font-size: 14px;
	}
	.zones__radar {
		display: none;
	}
}

/* =========================
   FAQ — Figma 6375:1291 (layout B2B adottato per la Home il 15/10). Due colonne: a sinistra pillola, titolo, testo e
   card di contatto; a destra l'accordion con + / -. Motion spec §8: righe in stagger 60 ms, apertura con
   grid-template-rows 0fr -> 1fr, una aperta per volta, hover tinta verde 4%.
   ========================= */
.faq {
	max-width: none;
	padding: 80px 20px;
	background: #F6FBF9;
}
/* Due colonne come griglia, non come flex: la card di contatto sta nel DOM dopo la lista (cosi' si legge
   nell'ordine giusto, prima le domande e poi "non hai trovato risposta") ma su desktop deve tornare nella
   colonna di sinistra, sotto il sottotitolo. Con la griglia e' una questione di coordinate. */
.faq__inner {
	display: grid;
	grid-template-columns: 360px 1fr;
	align-items: start;
	column-gap: 48px;
	row-gap: 14px; /* stessa distanza che la colonna di sinistra tiene fra i suoi blocchi */
	max-width: 1200px;
	margin: 0 auto;
}
.faq__aside {
	grid-column: 1;
	grid-row: 1;
}
.faq__list {
	grid-column: 2;
	grid-row: 1 / span 2;
}
.faq__contact {
	grid-column: 1;
	grid-row: 2;
}
.faq__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}
.faq__eyebrow {
	display: inline-block;
	padding: 7px 14px;
	border-radius: var(--tp-radius-pill);
	background: #E0F9F1;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #00674E;
}
.faq__title {
	margin: 0;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.08;
	color: #111827;
}
.faq__subtitle {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #6B7380;
}
.faq__contact {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	box-sizing: border-box;
	padding: 24px;
	border-radius: 18px;
	background: #E6FFF5;
}
.faq__founders {
	display: flex;
	align-items: center;
	gap: 10px;
}
.faq__avatars {
	display: flex;
}
.faq__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 2.5px solid var(--tp-white);
	object-fit: cover;
	background: var(--tp-white);
}
.faq__avatar + .faq__avatar {
	margin-left: -14px;
}
.faq__founders-text {
	margin: 0;
	display: flex;
	flex-direction: column;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 600;
	color: #4B5563;
}
.faq__contact-title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: #030712;
}
.faq__contact-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #4B5563;
}
.faq__contact-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	border-radius: var(--tp-radius-lg);
	background: var(--tp-primary);
	font-size: 15px;
	font-weight: 600;
	color: var(--tp-white);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.faq__contact-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 22px -10px rgba(0, 200, 150, 0.7);
}
.faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.faq__item {
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: 14px;
	padding: 20px 22px;
	transition: background-color 0.25s ease;
}
.faq__item:hover {
	background: rgba(0, 200, 150, 0.04);
}
.faq__q-wrap {
	margin: 0;
}
.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--tp-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	color: #111827;
	cursor: pointer;
}
.faq__toggle {
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	color: #6B7380;
	transition: color 0.25s ease;
}
.faq__toggle::before {
	content: '+';
}
.faq__item.is-open .faq__toggle {
	color: var(--tp-green-ink);
}
.faq__item.is-open .faq__toggle::before {
	content: '\2212';
}
.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}
.faq__a-inner {
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.faq__item.is-open .faq__a {
	grid-template-rows: 1fr;
}
.faq__item.is-open .faq__a-inner {
	opacity: 1;
	transition-delay: 0.08s;
}
.faq__a-inner p {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: #6B7380;
}
/* Reveal: colonna sinistra, poi righe in stagger da 60 ms */
.faq__aside,
.faq__item {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease, background-color 0.25s ease;
}
.faq.is-in .faq__aside,
.faq.is-in .faq__item {
	opacity: 1;
	transform: none;
}
.faq.is-in .faq__item {
	transition-delay: calc(80ms + var(--i, 0) * 60ms);
}
@media (max-width: 1000px) {
	.faq__inner {
		flex-direction: column;
		gap: 28px;
	}
	/* una colonna sola: aside, lista, contatto nell'ordine del DOM */
	.faq__inner {
		grid-template-columns: 1fr;
	}
	.faq__aside,
	.faq__list,
	.faq__contact {
		grid-column: 1;
		grid-row: auto;
	}
}
/* Mobile — Figma 4024:1007: titolo centrato e lista accordion; la card di contatto resta sotto la lista
   (decisione del 15/10, nel Figma mobile non c'e'). */
@media (max-width: 1023px) {
	.faq {
		padding: 48px 20px;
	}
	.faq__inner {
		row-gap: 20px;
	}
	.faq__aside {
		align-items: center;
		text-align: center;
		gap: 10px;
	}
	.faq__title {
		font-size: 28px;
		line-height: 42px;
	}
	.faq__item {
		padding: 18px 20px;
	}
	.faq__q {
		font-size: 16px;
		line-height: 24px;
	}
	.faq__a-inner p {
		font-size: 15px;
		line-height: 24px;
	}
}
/* =========================
   CTA finale — Figma 3564:162 (mobile 4025:1007). Card 1164x372 con gradiente, mascotte col mocio in basso a
   sinistra, testo centrato nello spazio restante (padding destro 248 come nel Figma). Motion spec §9.
   ========================= */
.cta-final {
	max-width: none;
	padding: 24px 20px 72px; /* piu' aria prima del footer */
	text-align: center;
}
.cta-final__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 48px;
	max-width: 1164px;
	height: 372px;
	margin: 0 auto;
	padding-right: 248px;
	box-sizing: border-box;
	border-radius: var(--tp-radius-2xl);
	/* Gradiente del Figma 3564:162 (#00C896 -> #37DBB3). Il 17/10 era stato scurito a #06734F -> #08875F per
	   l'AA del testo bianco; il 25/10 Guido ha chiesto il verde del marchio: scelta consapevole, vedi :root. */
	background: linear-gradient(90deg, var(--tp-primary) 0%, #37DBB3 100%);
	box-shadow: 0 10px 30px 0 rgba(15, 33, 26, 0.08);
	overflow: hidden;
	color: var(--tp-white);
}
.cta-final__art {
	flex: 0 0 273px;
	width: 273px;
	height: 294px;
	object-fit: contain;
	object-position: bottom;
	align-self: flex-end;
}
.cta-final__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
}
.cta-final__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tp-white);
}
.cta-final__subtitle {
	margin: 0;
	max-width: 560px;
	font-size: 17px;
	line-height: 26px;
	color: var(--tp-white);
}
.cta-final__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 40px;
	border-radius: var(--tp-radius-lg);
	background: var(--tp-white);
	font-size: 17px;
	font-weight: 600;
	color: var(--tp-text-heading);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-final__arrow {
	font-size: 18px;
	transition: transform 0.25s ease;
}
.cta-final__button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -8px rgba(15, 33, 26, 0.35);
}
.cta-final__button:hover .cta-final__arrow {
	transform: translateX(3px);
}
.cta-final__note {
	margin: 0;
	font-size: 14px;
	color: var(--tp-white); /* era --tp-border: 1,85:1 sul verde */
	opacity: 0.92;
}
/* Ingresso: card fade + scale .96, mascotte da sinistra con 120 ms di ritardo */
.cta-final__card {
	opacity: 0;
	transform: translateY(12px) scale(0.96);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.cta-final__art {
	opacity: 0;
	transform: translateX(-24px);
	transition: opacity 0.5s ease 0.12s, transform 0.5s ease 0.12s;
}
.cta-final.is-in .cta-final__card,
.cta-final.is-in .cta-final__art {
	opacity: 1;
	transform: none;
}
@media (max-width: 1100px) {
	.cta-final__card {
		padding-right: 48px;
		gap: 24px;
	}
	.cta-final__art {
		flex-basis: 200px;
		width: 200px;
		height: 215px;
	}
}
@media (max-width: 1023px) {
	/* Figma 4025:1007: card 350x322 con il testo dentro e la mascotte (4025:1015) che sporge a sinistra
	   oltre il bordo della card e oltre quello del viewport. `overflow-x: clip` sulla sezione taglia la
	   sporgenza senza generare scroll orizzontale e, a differenza di `overflow: hidden`, non taglia
	   l'ombra della card in verticale. */
	.cta-final {
		padding: 40px 20px 48px;
		overflow-x: clip;
	}
	.cta-final__card {
		display: block;
		height: 322px;
		padding: 36px 28px;
		overflow: visible;
	}
	.cta-final__text {
		gap: 14px;
		height: 100%;
		justify-content: flex-start;
	}
	.cta-final__title {
		font-size: 28px;
		line-height: 42px;
	}
	.cta-final__subtitle {
		font-size: 16px;
		line-height: 24px;
	}
	.cta-final__button {
		padding: 15px 28px;
		font-size: 16px;
	}
	.cta-final__note {
		max-width: 210px;
		font-size: 13px;
		line-height: 20px;
	}
	.cta-final__art {
		position: absolute;
		left: -31px;
		bottom: -20px;
		width: 137px;
		height: 184px;
		flex-basis: auto;
	}
}

/* =========================
   Footer — Figma 3564:167 (mobile 4026:1007). Motion spec §10: reveal colonne in stagger 60 ms, hover link
   verde + 2 px, social scale 1.1. Contenuti da Theme Options > Footer.
   ========================= */
.site-footer {
	background: #111827;
	color: #9CA3AF;
	padding: 56px 20px 40px;
}
.site-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
}
.site-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
}
.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 14px;
}
.site-footer__brand {
	gap: 16px;
	max-width: 260px;
}
.site-footer__wordmark {
	font-size: 22px;
	font-weight: 700;
	color: var(--tp-primary);
	text-decoration: none;
}
.site-footer__tagline {
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	color: #9CA3AF;
}
.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
}
.site-footer__social a,
.site-footer__social span[title] {
	display: inline-flex;
	color: rgba(255, 255, 255, 0.7);
	transition: transform 0.25s ease, color 0.25s ease;
}
.site-footer__social a:hover {
	transform: scale(1.1);
	color: var(--tp-primary);
}
.site-footer__social-icon {
	width: 24px;
	height: 24px;
}
.site-footer__heading {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-white);
}
.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 4px 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.site-footer__links a,
.site-footer__legal a {
	display: inline-block;
	color: #9CA3AF;
	text-decoration: none;
	transition: color 0.25s ease, transform 0.25s ease;
}
.site-footer__links a:hover,
.site-footer__legal a:hover {
	color: var(--tp-primary);
	transform: translateX(2px);
}
.site-footer__cta {
	gap: 10px;
	padding: 24px;
	border: 1px solid rgba(0, 200, 150, 0.3);
	border-radius: var(--tp-radius-lg);
	background: #1F2938;
	white-space: nowrap;
}
.site-footer__cta-text {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	color: var(--tp-white);
}
.site-footer__cta-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-primary);
	text-decoration: none;
	transition: transform 0.25s ease;
}
.site-footer__cta-link:hover {
	transform: translateX(2px);
}
.site-footer__divider {
	height: 1px;
	margin: 40px 0;
	background: #384251;
}
.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 13px;
	color: #9AA3B0; /* --tp-text-body su #111827 dava 3,67:1, qui 6,96 */
}
.site-footer__copyright {
	margin: 0;
}
.site-footer__credit {
	margin-left: 12px;
	opacity: 0.8;
}
.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
}
.site-footer__legal a {
	color: #9AA3B0; /* --tp-text-body su #111827 dava 3,67:1 */
}
/* Reveal: colonne in stagger da 60 ms, poi la riga legale */
.site-footer__col,
.site-footer__bottom {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.site-footer.is-in .site-footer__col,
.site-footer.is-in .site-footer__bottom {
	opacity: 1;
	transform: none;
}
.site-footer.is-in .site-footer__col {
	transition-delay: calc(var(--i, 0) * 60ms);
}
.site-footer.is-in .site-footer__bottom {
	transition-delay: 0.35s;
}
@media (max-width: 1100px) {
	.site-footer__top {
		flex-wrap: wrap;
	}
	.site-footer__brand {
		flex: 1 1 100%;
		max-width: none;
	}
	.site-footer__cta {
		flex: 1 1 100%;
		white-space: normal;
	}
}
@media (max-width: 1023px) {
	/* Figma 4026:1007: marchio a tutta larghezza, le tre colonne su una riga sola, blocco Cleaner CTA,
	   divisore, copyright e link legali. Le tre colonne stanno su una riga perche' prendono la larghezza
	   del contenuto (`flex: 0 1 auto`) mentre marchio e CTA occupano l'intera riga. */
	.site-footer {
		padding: 44px 20px 32px;
	}
	.site-footer__top {
		flex-wrap: wrap;
		gap: 28px 18px;
	}
	.site-footer__brand {
		flex: 1 1 100%;
		max-width: none;
		gap: 12px;
	}
	.site-footer__col:not(.site-footer__brand):not(.site-footer__cta) {
		flex: 0 1 auto;
		min-width: 0;
		gap: 12px;
	}
	.site-footer__links {
		padding-top: 0;
		gap: 10px;
	}
	.site-footer__cta {
		flex: 1 1 100%;
		gap: 8px;
		padding: 18px 20px;
		white-space: normal;
	}
	.site-footer__cta-text {
		font-size: 15px;
		line-height: 23px;
	}
	.site-footer__divider {
		margin: 28px 0;
	}
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
		font-size: 13px;
	}
	.site-footer__legal {
		flex-wrap: wrap;
		gap: 12px 16px;
	}
}
/* Sotto i 390px le tre colonne del footer non ci stanno piu' a 14px: il corpo scende a 13 e il passo fra
   le colonne a 12, che e' quanto basta per tenerle su una riga a 360 senza troncare "Come guadagnare". */
@media (max-width: 389px) {
	/* il badge e' lungo 363px a 14px con `white-space: nowrap`: a 360 usciva dalla sezione e veniva
	   tagliato. Qui puo' andare a capo e il corpo scende di un punto. */
	.reviews__badge {
		white-space: normal;
		padding: 8px 14px;
		font-size: 13px;
	}
	.site-footer__top {
		gap: 28px 12px;
	}
	.site-footer__col,
	.site-footer__heading {
		font-size: 13px;
	}
}

/* Riduci movimento: tutte le sezioni della Home in un blocco solo (stesse regole di prima, raccolte) */
/* ---- Dove siamo attivi: mappa interattiva per CAP (ADR-003, TICKET-03) ---------------------- */

.zones-map {
	max-width: var(--tp-container, 1360px);
	margin: 0 auto;
	padding: 80px 20px;
}
.zones-map__inner {
	display: grid;
	grid-template-columns: 60fr 40fr;
	grid-template-areas: 'testa testa' 'mappa pannello';
	gap: 48px;
	align-items: start;
}
/* [ATTENZIONE] Senza min-width: 0 i figli della griglia non scendono sotto il proprio min-content e
   la select, larga quanto l'opzione piu' lunga ("Casal Palocco / Axa / Dragona - 00126"), allargava
   la colonna fino a 431px dentro un viewport da 360 (stessa trappola della hero, TICKET-10). */
.zones-map__inner > * { min-width: 0; }
.zones-map__head { grid-area: testa; }
.zones-map__title { margin: 0 0 12px; }
.zones-map__desc { margin: 0; color: var(--tp-text-body); max-width: 60ch; }
.zones-map__map { grid-area: mappa; }
/* Il viewBox e' 1000x1049: a tutta colonna la mappa sarebbe alta oltre 800px e il pannello
   resterebbe appeso in cima a una colonna mezza vuota. Il tetto la tiene in proporzione al
   pannello; preserveAspectRatio fa il resto, non serve ritagliare. */
.zones-map__svg { width: 100%; max-height: 620px; height: auto; display: block; margin: 0 auto; }

/* Tre stati, non una gradazione: attiva, in arrivo, non coperta (vedi zones-map.js). */
.zones-map__caps path {
	fill: #EBEDF0;
	stroke: var(--tp-white);
	stroke-width: 1;
	cursor: pointer;
	transition: fill 0.15s ease, stroke 0.15s ease;
}
.zones-map__caps path[data-state='soon'] { fill: #D6F7EC; }
.zones-map__caps path[data-state='active'] { fill: var(--tp-primary); }
.zones-map__caps path:hover { stroke: var(--tp-primary); stroke-width: 2; }
.zones-map__caps path.is-selected { fill: #0F9D63; stroke: var(--tp-white); stroke-width: 2; }
.zones-map__outline { fill: none; stroke: #D1D5DB; stroke-width: 1.5; pointer-events: none; }

.zones-map__credit { margin: 8px 0 0; font-size: 12px; color: #656E7B; } /* 5,16:1 su bianco */

/* Colonna di destra: prima l'azione (la barra), poi i quartieri, poi l'esito. */
.zones-map__side { grid-area: pannello; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.zones-map__search { max-width: none; }
/* Il campo reale deve essere alto quanto la riga che si tocca: l'input stava a 23px dentro un
   contenitore da 47 e un tocco appena sopra o sotto il testo non apriva la tastiera. */
.zones-map__search .tp-search__field--address { padding-top: 0; padding-bottom: 0; }
.zones-map__search .tp-search__input { min-height: 46px; }

.zones-map__chips-label { margin: 20px 0 10px; font-size: 13px; color: #5B6472; }
.zones-map__chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zones-map__chip {
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid var(--tp-border);
	background: var(--tp-white);
	color: var(--tp-text-chip);
	padding: 7px 14px;
	border-radius: 999px;
	transition: border-color 0.15s ease, background 0.15s ease;
	/* 44px e' il minimo per un bersaglio da dito: i chip stavano a 36 e il link di ritorno a 21.
	   L'area cresce con ::before, non con il padding, cosi' il chip non si gonfia a vista
	   (reference_css_hitarea_padding_translate_bug nel vault). */
	position: relative;
}
.zones-map__chip::before {
	content: '';
	position: absolute;
	inset: -5px 0;
	min-height: 44px;
}
/* Un quartiere senza offerta non deve sembrare prenotabile: il pieno e' solo per le zone attive. */
.zones-map__chip[data-state='active'] { border-color: var(--tp-primary); background: #EAFAF4; color: var(--tp-green-ink); } /* 4,99:1 su #EAFAF4; il verde pieno #0F9D63 si fermava a 3,2 */
.zones-map__chip:hover { border-color: var(--tp-primary); }
.zones-map__chip:focus-visible,
.zones-map__back:focus-visible,
.zones-map__caps path:focus-visible { outline: 3px solid var(--tp-focus); outline-offset: 2px; }

.zones-map__panel {
	display: grid;
	align-items: start;
	/* Lo stacking tiene insieme i tre stati, ma il blocco della zona e' vuoto finche' non si sceglie
	   una zona: senza un'altezza riservata la colonna crescerebbe al primo click (208 -> 394 di
	   altezza totale). Il box e' border-box, quindi 340 comprende i 28+28 di padding e copre la zona
	   piu' alta misurata (394). I chip stanno nel blocco di riposo proprio per questo: l'altezza va
	   riservata comunque, tanto vale riempirla con qualcosa di utile invece che con del bianco. */
	min-height: 400px;
	padding: 28px;
	background: var(--tp-bg-soft);
	border: 1px solid var(--tp-border-card);
	border-radius: var(--tp-radius-2xl, 24px);
}
/* I tre stati stanno nella stessa cella di griglia: la colonna e' sempre alta quanto il piu' alto
   dei tre e il cambio di stato non muove nulla. Con display: none l'altezza seguiva lo stato attivo
   (riposo 360, zona scelta 394) e la pagina saltava di 34px al primo click. Gli stati inattivi sono
   visibility: hidden, quindi fuori anche dalla lettura assistiva. */
.zones-map__panel > div {
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
}
.zones-map__panel[data-state='idle'] .zones-map__idle,
.zones-map__panel[data-state='hover'] .zones-map__hover,
.zones-map__panel[data-state='selected'] .zones-map__zone {
	visibility: visible;
	pointer-events: auto;
}

.zones-map__totals, .zones-map__counts { display: flex; gap: 32px; margin: 0 0 24px; }
.zones-map__totals dt, .zones-map__counts dt { font-size: 13px; color: var(--tp-text-body); margin: 0; }
.zones-map__totals dd, .zones-map__counts dd { margin: 4px 0 0; font-size: 28px; font-weight: 700; color: var(--tp-text-heading); }
.zones-map__verdict { margin: 0 0 20px; font-size: 16px; font-weight: 600; color: var(--tp-text-heading); }
.zones-map__services-label { margin: 0 0 10px; font-size: 13px; color: #5B6472; }
.zones-map__services-label[hidden] { display: none; }
.zones-map__legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: #5B6472; }
.zones-map__legend li { display: flex; align-items: center; gap: 8px; }
.zones-map__legend li::before { content: ''; width: 14px; height: 14px; border-radius: 4px; background: #EBEDF0; border: 1px solid var(--tp-border); }
.zones-map__legend li[data-state='soon']::before { background: #D6F7EC; }
.zones-map__legend li[data-state='active']::before { background: var(--tp-primary); border-color: var(--tp-primary); }
.zones-map__hint, .zones-map__hover-hint { margin: 0; color: #5B6472; font-size: 14px; } /* 5,75:1 sul fondo del pannello; --tp-text-muted stava a 2,9 */
.zones-map__zone-meta { margin: 0 0 16px; color: #5B6472; font-size: 14px; }
.zones-map__services { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zones-map__services li { padding: 6px 12px; background: var(--tp-white); border: 1px solid var(--tp-border); border-radius: 999px; font-size: 13px; color: var(--tp-text-chip); }

.zones-map__panel[data-state='unknown'] .zones-map__unknown { visibility: visible; pointer-events: auto; }
.zones-map__unknown h3 { margin: 0 0 8px; }
.zones-map__unknown p { margin: 0; color: #5B6472; font-size: 14px; }
.zones-map__more {
	margin: 12px 0 0;
	padding: 10px 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-green-ink);
	text-decoration: underline;
	cursor: pointer;
	min-height: 44px;
}
.zones-map__back {
	display: block;
	margin: 16px 0 0;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 14px;
	color: #5B6472;
	text-decoration: underline;
	cursor: pointer;
	position: relative;
}
.zones-map__back::before { content: ''; position: absolute; inset: -12px -8px; }

/* Copertura e stato della rete decidono quale azione mostrare: CTA verso l'app dove c'e' offerta,
   bottone "zona scoperta" dove non ce n'e', avviso quando i numeri non sono arrivati. */
.zones-map__cta, .zones-map__uncovered, .zones-map__fallback { display: none; }
.zones-map__panel[data-state='selected'][data-network='ready'][data-coverage='yes'] .zones-map__cta { display: inline-flex; }
.zones-map__panel[data-state='selected'][data-network='ready'][data-coverage='no'] .zones-map__uncovered { display: inline-flex; }
.zones-map__panel[data-state='selected'][data-network='fallback'] .zones-map__fallback { display: block; }
.zones-map__fallback { margin: 0; color: var(--tp-text-muted); font-size: 14px; }

@media (max-width: 1023px) {
	.zones-map { padding: 48px 20px; }
	.zones-map__inner {
		grid-template-columns: 1fr;
		grid-template-areas: 'testa' 'mappa' 'pannello';
		gap: 24px;
	}
	/* Sotto la soglia il pannello sta sotto la mappa: riservare 360px lascerebbe un vuoto in mezzo
	   alla pagina, e lo scorrimento al tap porta comunque il pannello in vista. */
	.zones-map__panel { min-height: 0; padding: 20px; }
	/* Sotto la soglia 18 zone attive su 26 sono piu' piccole di 24px: puntarle col dito non si puo'.
	   Il tocco sulla mappa non deve cadere nel vuoto, lo raccoglie zones-map.js e lo porta alla zona
	   attiva piu' vicina; qui si toglie solo il cursore, che su touch non significa nulla. */
	.zones-map__caps path { cursor: default; }
	.zones-map__chip { padding: 11px 16px; }
	/* 44px di altezza utile anche per gli altri comandi: le tab dei servizi stavano a 38, le voci di
	   menu e del footer fra 20 e 23. L'area cresce senza cambiare la forma, come per i chip. */
	.services__tab { min-height: 44px; }
	.navbar__panel a { display: block; padding-block: 12px; }
	.site-footer__col a,
	.site-footer__legal a { position: relative; display: inline-block; padding-block: 12px; }
	/* [ATTENZIONE] Niente min-width/min-height sull'hamburger: le tre barre sono figlie flex e si
	   allungherebbero con il bottone. L'area toccabile da 44px la da' .navbar__burger::before, e il
	   box resta 24x24 come chiede il Figma (verificato da tools/qa-mobile.js). */
	.tp-btn { min-height: 44px; }
	.faq__q { min-height: 44px; }
	.navbar__logo { display: inline-flex; align-items: center; min-height: 44px; }
	.zones-map__chip { min-height: 45px; }
	.zones-map__chip::before { content: none; }
	.zones-map__totals, .zones-map__counts { gap: 24px; }
}

/* =========================
   Hub citta' /roma/ — Figma 4422:921 (desktop) / 3927:1280 (mobile)
   Sezioni proprie dell'hub. Le altre (zone, servizi, recensioni, FAQ, CTA) riusano i blocchi
   della Home senza stili aggiuntivi: le regole base di :where(main.hub-roma) > section in
   cima al file danno larghezza e padding come sulla Home.
   ========================= */

.hub-hero {
	display: flex;
	justify-content: center;
	padding: 72px 20px 56px;
}

.hub-hero__content {
	width: 100%;
	max-width: 760px;
	text-align: center;
}

.hub-hero__eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-green-ink);
}

.hub-hero h1 {
	margin: 0 0 16px;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.15;
	color: var(--tp-text-heading);
}

.hub-hero__subtitle {
	margin: 0 auto 32px;
	max-width: 620px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--tp-text-muted);
}

.hub-hero .tp-search {
	margin: 0 auto;
	max-width: 680px;
}

/* Verificati sul serio — Figma 4441:965 / 4451:965 */
.verified__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.verified__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 7px 16px;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-bg-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-green-ink);
}

.verified__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tp-primary-ink);
}

.verified__title {
	margin: 0 0 16px;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.2;
	color: var(--tp-text-heading);
}

.verified__text {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tp-text-muted);
}

.verified__steps {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 18px;
}

.verified__step {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: calc(var(--i) * 80ms);
}

.verified.is-in .verified__step {
	opacity: 1;
	transform: none;
}

.verified__check {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--tp-bg-soft);
	color: var(--tp-primary-ink);
	font-size: 15px;
}

.verified__step-text {
	display: grid;
	gap: 3px;
}

.verified__step-text strong {
	font-size: 16px;
	color: var(--tp-text-heading);
}

.verified__step-text span {
	font-size: 14px;
	color: var(--tp-text-muted);
}

.verified__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	border-radius: var(--tp-radius-lg);
	background: var(--tp-primary);
	color: var(--tp-white);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.verified__cta:hover {
	transform: translateY(-1px);
	box-shadow: var(--tp-shadow-card);
}

.verified__cta:hover .verified__arrow {
	transform: translateX(3px);
}

.verified__arrow {
	transition: transform 0.2s ease;
}

.verified__card {
	padding: 26px;
	border: 1px solid var(--tp-border-card);
	border-radius: var(--tp-radius-2xl);
	background: var(--tp-white);
	box-shadow: var(--tp-shadow-card);
}

.verified__card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--tp-border);
}

.verified__avatar {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--tp-bg-soft);
	color: var(--tp-primary-ink);
	font-size: 20px;
	font-weight: 700;
}

.verified__identity {
	display: grid;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.verified__identity strong {
	font-size: 17px;
	color: var(--tp-text-heading);
}

.verified__identity span {
	font-size: 13px;
	color: var(--tp-text-muted);
}

.verified__badge {
	flex: 0 0 auto;
	padding: 6px 12px;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-bg-soft);
	font-size: 12px;
	font-weight: 600;
	color: var(--tp-green-ink);
}

.verified__card-checks {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.verified__card-checks li {
	display: flex;
	gap: 10px;
	font-size: 14px;
	color: var(--tp-text-body);
}

.verified__card-checks span {
	color: var(--tp-primary-ink);
}

.verified__card-note {
	margin: 18px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--tp-text-muted);
}

/* Come funziona statica — Figma 4467:921 / 4471:921. Nessun pin, nessun video: ADR-002 vale
   solo per la Home. */
.hiw-static__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	gap: 48px;
	align-items: center;
}

.hiw-static__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-green-ink);
}

.hiw-static__title {
	margin: 0 0 12px;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.2;
	color: var(--tp-text-heading);
}

.hiw-static__subtitle {
	margin: 0 0 32px;
	font-size: 16px;
	color: var(--tp-text-muted);
}

.hiw-static__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 26px;
	counter-reset: none;
}

.hiw-static__step {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: calc(var(--i) * 90ms);
}

.hiw-static.is-in .hiw-static__step {
	opacity: 1;
	transform: none;
}

.hiw-static__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--tp-radius-lg);
	background: var(--tp-bg-soft);
	color: var(--tp-primary-ink);
	font-size: 20px;
	font-weight: 700;
}

.hiw-static__step-text {
	display: grid;
	gap: 5px;
}

.hiw-static__step-text strong {
	font-size: 18px;
	color: var(--tp-text-heading);
}

.hiw-static__step-text span {
	font-size: 15px;
	line-height: 1.55;
	color: var(--tp-text-muted);
}

.hiw-static__phone {
	display: flex;
	justify-content: center;
}

/* Intro SEO in fondo — Figma 4424:942 */
.hub-intro__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.hub-intro__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-green-ink);
}

.hub-intro__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--tp-text-muted);
}

/* Barra CTA fissa, solo sotto --tp-bp-desktop — Figma 3946:1280 */
.sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: none;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: var(--tp-white);
	box-shadow: 0 -6px 24px -10px rgba(15, 23, 41, 0.22);
}

.sticky-cta[hidden] {
	display: none;
}

.sticky-cta__btn {
	display: flex;
	width: 100%;
	justify-content: center;
}

@media (max-width: 1023px) {
	.verified__inner,
	.hiw-static__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.hub-hero {
		padding: 48px 20px 40px;
	}

	.hub-hero__content {
		text-align: left;
	}

	.hub-hero .tp-search {
		margin: 0;
	}

	.hub-intro__inner {
		text-align: left;
	}

	/* La barra fissa esiste solo qui: il JS toglie [hidden] quando la hero esce dallo schermo. */
	.sticky-cta:not([hidden]) {
		display: block;
	}

	/* Spazio in fondo perche' la barra non copra il footer. */
	main.hub-roma {
		padding-bottom: 84px;
	}
}

/* Quanto costa: calcolatore della stima — Figma 4447:965 / 4452:965 (TICKET-34).
   I controlli compaiono solo con .is-ready, messa dal JS: senza JavaScript resta il <noscript>. */
.price__head {
	max-width: 620px;
	margin: 0 auto 36px;
	text-align: center;
}

.price__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-green-ink);
}

.price__title {
	margin: 0 0 12px;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.2;
	color: var(--tp-text-heading);
}

.price__subtitle {
	margin: 0;
	font-size: 16px;
	color: var(--tp-text-muted);
}

.price__card {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	border: 1px solid var(--tp-border-card);
	border-radius: var(--tp-radius-2xl);
	background: var(--tp-white);
	box-shadow: var(--tp-shadow-card);
	overflow: hidden;
}

.price__controls {
	display: grid;
	gap: 28px;
	padding: 36px;
}

.price__field {
	display: grid;
	gap: 12px;
}

.price__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.price__label,
.price__label-row label {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--tp-text-heading);
}

.price__value {
	padding: 5px 12px;
	border-radius: var(--tp-radius-sm);
	background: var(--tp-bg-soft);
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-green-ink);
}

.price__slider {
	--riempimento: 29%;
	width: 100%;
	height: 8px;
	appearance: none;
	border-radius: var(--tp-radius-pill);
	background: linear-gradient(to right, var(--tp-primary) 0 var(--riempimento), var(--tp-border) var(--riempimento) 100%);
	cursor: pointer;
}

.price__slider::-webkit-slider-thumb {
	appearance: none;
	width: 22px;
	height: 22px;
	border: 3px solid var(--tp-white);
	border-radius: 50%;
	background: var(--tp-primary-ink);
	box-shadow: var(--tp-shadow-card);
}

.price__slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 3px solid var(--tp-white);
	border-radius: 50%;
	background: var(--tp-primary-ink);
}

.price__slider:focus-visible {
	outline: 2px solid var(--tp-focus);
	outline-offset: 4px;
}

.price__scale {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--tp-text-muted);
}

.price__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.price__chip {
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--tp-border-card);
	border-radius: var(--tp-radius-md);
	background: var(--tp-white);
	font-family: inherit;
	font-size: 14px;
	color: var(--tp-text-chip);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.price__chip:hover {
	border-color: var(--tp-primary);
}

.price__chip.is-active {
	border-color: var(--tp-primary-ink);
	background: var(--tp-bg-soft);
	color: var(--tp-green-ink);
	font-weight: 600;
}

.price__result {
	padding: 36px;
	background: var(--tp-bg-soft);
	border-left: 1px solid var(--tp-border);
}

.price__result-label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--tp-text-muted);
}

.price__amount {
	margin: 0 0 10px;
	font-size: clamp(34px, 4vw, 46px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--tp-text-heading);
}

.price__summary {
	margin: 0 0 24px;
	font-size: 14px;
	color: var(--tp-text-muted);
}

.price__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 14px 24px;
	border-radius: var(--tp-radius-lg);
	background: var(--tp-primary);
	color: var(--tp-white);
	font-weight: 600;
	text-decoration: none;
}

.price__cta:hover {
	box-shadow: var(--tp-shadow-card);
}

.price__note,
.price__fallback {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--tp-text-muted);
}

/* Senza JS i comandi non servono: una stima che non calcola e' peggio che assente. */
.price:not(.is-ready) .price__card {
	display: none;
}

@media (max-width: 1023px) {
	.price__card {
		grid-template-columns: 1fr;
	}

	.price__controls,
	.price__result {
		padding: 24px;
	}

	.price__result {
		border-left: 0;
		border-top: 1px solid var(--tp-border);
	}

	.price__head {
		text-align: left;
		margin-bottom: 24px;
	}
}

/* =========================
   Landing Sgrosso (page-sgrosso.php) — Figma 4364:6628 desktop / 4364:7087 mobile, misure dal live React.
   Testata leggera (header-landing.php), hero a pannello con foto e scrim, card del form in tre passi
   (template-parts/lead-form.php), barra fissa doppia su mobile. SPEC-landing-sgrosso, TICKET-37/39/41.
   ========================= */
:root {
	/* Scala del verde dell'app (theme.css del portale), usata dalle landing: promo bar e stati del form */
	--tp-primary-600: #00A87E;
	--tp-primary-700: #008866;
	--tp-mint: #E6FFF5;
	--tp-mint-border: #B3FFE0;
	--tp-star: #FFB826;
	--tp-ink: #030712;
	--tp-field-bg: #F7F8FA;
	--tp-field-border: #D1D5DB;
	--tp-field-ring: rgba(0, 200, 150, 0.2);
	--tp-error: #DC2626;
}

/* ---- Testata landing: promo bar + navbar senza menu ---------------------------------------- */
.landing-promo {
	padding: 11px 16px;
	background: var(--tp-primary-700);
	color: var(--tp-white);
	text-align: center;
}
.landing-promo__text {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}
.landing-promo__text--mobile {
	display: none;
}

.landing-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--tp-navbar-h);
	padding: 0 80px;
	background: var(--tp-white);
}
.landing-nav__logo {
	display: flex;
	align-items: center;
	flex: none;
}
.landing-nav__logo img {
	display: block;
	height: 30px;
	width: auto;
}
.landing-nav__links {
	display: flex;
	align-items: center;
	gap: 32px;
}
.landing-nav__links a {
	padding-block: 6px;
	font-size: 15px;
	color: var(--tp-text-body);
	white-space: nowrap;
}
.landing-nav__links a:hover {
	color: var(--tp-text-heading);
}
.landing-nav__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}
.landing-nav__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--tp-border-card);
	border-radius: var(--tp-radius-pill);
	font-size: 15px;
	font-weight: 600;
	color: var(--tp-text-heading);
	white-space: nowrap;
}
.landing-nav__phone:hover {
	border-color: var(--tp-primary);
}
.landing-nav__phone-icon {
	width: 18px;
	height: 18px;
	color: var(--tp-primary-ink);
}
.landing-nav__cta {
	min-height: 44px;
	padding: 0 22px;
	border-radius: var(--tp-radius-pill);
	font-size: 15px;
}
.landing-nav__cta-short {
	display: none;
}

/* ---- Hero a pannello (Figma: rettangolo 1360x730 con raggio, foto sotto uno scrim bianco) ----- */
.sg-hero {
	padding: 24px 40px 0;
}
.sg-hero__panel {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 730px;
	overflow: hidden;
	border-radius: 32px;
	background: var(--tp-mint);
}
.sg-hero__media {
	position: absolute;
	inset: 0;
}
.sg-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Scrim come sul live (lg): bianco al 92% a sinistra, 32% a destra, cosi' il testo resta leggibile sulla foto */
.sg-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.32) 100%);
	pointer-events: none;
}
.sg-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	align-items: center;
	gap: 56px;
	width: 100%;
	padding: 48px 60px;
}
.sg-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: 764px;
}
.sg-hero__eyebrow {
	display: inline-block;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--tp-mint-border);
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.72px;
	color: var(--tp-primary-700);
}
.sg-hero h1 {
	margin: 0;
	max-width: 702px;
	font-size: 50px;
	line-height: 1.08;
	letter-spacing: -1px;
	font-weight: 800;
	color: var(--tp-ink);
}
.sg-hero__subtitle {
	margin: 0;
	max-width: 520px;
	font-size: 18px;
	line-height: 1.5;
	color: #374151;
}
.sg-hero__bullets {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 16px;
	color: var(--tp-text-heading);
}
.sg-hero__bullets li {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sg-hero__check {
	flex: none;
	width: 14px;
	height: 14px;
	color: var(--tp-primary);
}
.sg-hero__social {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--tp-text-body);
}
.sg-hero__stars {
	font-size: 15px;
	letter-spacing: 1px;
	color: var(--tp-star);
}
.sg-hero__form {
	width: 100%;
	scroll-margin-top: calc(var(--tp-navbar-h) + 16px);
}

/* ---- Card del form lead (tre passi) ------------------------------------------------------- */
.lead-form {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: 22px;
	box-shadow: 0 18px 44px -12px rgba(0, 71, 54, 0.18);
}
.lead-form__hp {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	opacity: 0;
}
.lead-form__progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}
.lead-form__progress-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--tp-text-body);
}
.lead-form__progress-row b {
	font-weight: 500;
}
.lead-form__step-name {
	font-weight: 500;
	color: var(--tp-primary-ink);
}
.lead-form__bars {
	display: flex;
	gap: 6px;
}
.lead-form__bars i {
	flex: 1;
	height: 5px;
	border-radius: 999px;
	background: #E5E7EB;
}
.lead-form__bars i.is-done {
	background: var(--tp-primary);
}
.lead-form__step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.lead-form__step[hidden] {
	display: none;
}
.lead-form__title {
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.22px;
	color: var(--tp-ink);
}
.lead-form__sub {
	margin: -8px 0 4px;
	font-size: 14px;
	line-height: 1.45;
	color: #4B5563;
}
.lead-form__row {
	display: flex;
	gap: 12px;
}
.lead-form__row > * {
	flex: 1;
	min-width: 0;
}
.lead-form__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lead-form__label {
	font-size: 13px;
	font-weight: 500;
	color: #374151;
}

/* Campo con etichetta flottante: a riposo e' centrata, con focus o valore sale a 11px (live FloatingInput) */
.tp-field {
	display: flex;
	flex-direction: column;
}
.tp-field__box {
	position: relative;
}
.tp-field input {
	width: 100%;
	padding: 24px 14px 9px;
	border: 1px solid var(--tp-field-border);
	border-radius: 10px;
	background: var(--tp-field-bg);
	font: inherit;
	font-size: 15px;
	color: #111827;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.tp-field input:hover {
	border-color: #9CA3AF;
}
.tp-field input:focus {
	border-color: var(--tp-primary);
	box-shadow: 0 0 0 2px var(--tp-field-ring);
}
.tp-field label {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--tp-text-body);
	pointer-events: none;
	transition: top 0.15s, transform 0.15s, font-size 0.15s, color 0.15s;
}
.tp-field input:focus + label,
.tp-field input:not(:placeholder-shown) + label {
	top: 12px;
	transform: none;
	font-size: 11px;
}
.tp-field input:focus + label {
	color: var(--tp-primary-600);
}
.tp-field__error {
	min-height: 12px;
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.2;
	color: var(--tp-error);
}
.tp-field__error:empty {
	margin: 0;
	min-height: 8px;
}
.tp-field.is-invalid input,
.tp-field.is-invalid .tp-field__box {
	border-color: var(--tp-error);
}
/* Numeri senza le frecce del browser: il campo e' corto e le frecce coprono l'etichetta */
.tp-field input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}
.tp-field input[type='number']::-webkit-outer-spin-button,
.tp-field input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Telefono: prefisso + separatore + numero in un solo riquadro (live PhoneInput variant floating) */
.tp-field--phone .tp-field__box {
	display: flex;
	border: 1px solid var(--tp-field-border);
	border-radius: 10px;
	background: var(--tp-field-bg);
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.tp-field--phone .tp-field__box:focus-within {
	border-color: var(--tp-primary);
	box-shadow: 0 0 0 2px var(--tp-field-ring);
}
.tp-field__prefix {
	position: relative;
	flex: none;
	display: flex;
}
.tp-field__prefix select {
	padding: 16px 28px 16px 14px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	color: #111827;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.tp-field__chevron {
	position: absolute;
	right: 8px;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	color: var(--tp-text-body);
	pointer-events: none;
}
.tp-field__sep {
	flex: none;
	width: 1px;
	margin: 10px 0;
	background: var(--tp-field-border);
}
.tp-field__num {
	position: relative;
	flex: 1;
	min-width: 0;
}
.tp-field--phone input {
	border: 0;
	border-radius: 0;
	background: transparent;
}
.tp-field--phone input:focus {
	box-shadow: none;
}

/* Suggerimenti indirizzo (HERE, TICKET-41) */
.tp-field__suggest {
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	max-height: 220px;
	margin: 0;
	padding: 6px 0;
	overflow: auto;
	list-style: none;
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(15, 23, 41, 0.12);
}
.tp-field__suggest[hidden] {
	display: none;
}
.tp-field__suggest li {
	padding: 9px 14px;
	font-size: 14px;
	color: var(--tp-text-heading);
	cursor: pointer;
}
.tp-field__suggest li:hover,
.tp-field__suggest li[aria-selected='true'] {
	background: var(--tp-bg-soft);
}

/* Checkbox con riquadro disegnato (live CheckSquare): 22px, spunta bianca su verde */
.tp-check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--tp-text-body);
	cursor: pointer;
}
.tp-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.tp-check__box {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 1.5px solid var(--tp-field-border);
	border-radius: 6px;
	background: var(--tp-white);
	transition: border-color 0.15s, background 0.15s;
}
.tp-check:hover .tp-check__box {
	border-color: var(--tp-primary);
}
.tp-check input:checked + .tp-check__box {
	border-color: var(--tp-primary);
	background: var(--tp-primary);
}
.tp-check input:checked + .tp-check__box::after {
	content: '';
	position: absolute;
	inset: 4px;
	background: var(--tp-white);
	-webkit-mask: url('assets/icons/ic-check.svg') center / contain no-repeat;
	mask: url('assets/icons/ic-check.svg') center / contain no-repeat;
}
.tp-check input:focus-visible + .tp-check__box {
	box-shadow: 0 0 0 2px var(--tp-field-ring);
}
.tp-check a {
	color: var(--tp-primary-ink);
	text-decoration: underline;
}

/* Pillole a scelta singola (radio nascosto): tipo appartamento, pavimento, arredata, urgenza */
.tp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tp-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border: 1px solid var(--tp-field-border);
	border-radius: 999px;
	background: var(--tp-white);
	font-size: 14px;
	color: #374151;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.tp-pills--row .tp-pill {
	flex: 1;
	padding: 8px 8px;
	font-size: 13px;
	white-space: nowrap;
}
.tp-pill input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.tp-pill:hover {
	border-color: var(--tp-primary);
}
.tp-pill:has(input:checked) {
	border-color: var(--tp-primary);
	background: var(--tp-mint);
	font-weight: 500;
	color: var(--tp-ink);
}
.tp-pill:has(input:focus-visible) {
	box-shadow: 0 0 0 2px var(--tp-field-ring);
}

/* Cursore del livello di sporco: 5 tacche, descrizione sotto */
.lead-form__range input[type='range'] {
	width: 100%;
	margin: 4px 0;
	accent-color: var(--tp-primary);
}
.lead-form__range-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--tp-text-body);
}
.lead-form__range-desc b {
	font-weight: 600;
	color: var(--tp-text-heading);
}

/* Card a scelta singola per il tipo di pulizia (passo 3) */
.lead-form__choices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.tp-choice {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--tp-field-border);
	border-radius: 12px;
	background: var(--tp-white);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.tp-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.tp-choice__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-ink);
}
.tp-choice__sub {
	font-size: 12px;
	line-height: 1.35;
	color: var(--tp-text-body);
}
.tp-choice:hover {
	border-color: var(--tp-primary);
}
.tp-choice:has(input:checked) {
	border-color: var(--tp-primary);
	background: var(--tp-mint);
}
.tp-choice:has(input:focus-visible) {
	box-shadow: 0 0 0 2px var(--tp-field-ring);
}

/* Foto (passo 3) */
.lead-form__photos input[type='file'] {
	font-size: 13px;
	color: var(--tp-text-body);
}
.lead-form__photo-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lead-form__photo-list:empty {
	display: none;
}
.lead-form__photo-list li {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--tp-border);
}
.lead-form__photo-list img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lead-form__photo-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 24, 39, 0.75);
	font: inherit;
	font-size: 14px;
	line-height: 20px;
	color: var(--tp-white);
	cursor: pointer;
}
.lead-form.is-compressing .lead-form__photos::after {
	content: 'Preparo le foto...';
	font-size: 12px;
	color: var(--tp-text-body);
}

/* Errore dall'API, bottoni, nota */
.lead-form__api-error {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: #FEF2F2;
	font-size: 13px;
	line-height: 1.4;
	color: #B91C1C;
}
.lead-form__api-error[hidden] {
	display: none;
}
.lead-form__api-error a {
	font-weight: 600;
	text-decoration: underline;
}
.lead-form__actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}
.lead-form__back {
	flex: none;
	padding: 0 16px;
	border: 1px solid var(--tp-field-border);
	border-radius: 12px;
	background: var(--tp-white);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
}
.lead-form__back[hidden] {
	display: none;
}
.lead-form__submit {
	flex: 1;
	min-height: 52px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
}
.lead-form__submit[disabled] {
	opacity: 0.7;
	cursor: wait;
}
.lead-form__note {
	margin: 12px 0 0;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	color: #4B5563;
}

/* ---- Elementi condivisi dalle sezioni della landing ---------------------------------------- */
/* Eyebrow: 13px, maiuscolo dal contenuto, spaziatura 1.04px; variante a pillola con puntino (Figma 4364:6702) */
.sg-eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.04px;
	color: var(--tp-primary-ink);
}
.sg-eyebrow--pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px 7px 14px;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-mint);
	color: var(--tp-primary-700);
}
.sg-eyebrow--pill::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tp-primary);
}
/* CTA di sezione: raggio 12, freccia a destra (Figma 4364:6732) */
.sg-cta {
	min-height: 56px;
	padding: 0 28px;
	border-radius: var(--tp-radius-lg);
	font-size: 15px;
	font-weight: 600;
}
.sg-cta__arrow {
	font-size: 18px;
	line-height: 1;
}
/* Chip con puntino (card del comparatore) */
.sg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-mint);
	font-size: 13px;
	font-weight: 700;
	color: var(--tp-primary-700);
	white-space: nowrap;
}
.sg-chip::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tp-primary);
}

/* ---- Trust bar (Figma 4364:6684 / 4364:7139) ----------------------------------------------- */
.sg-trust {
	padding: 28px 80px;
	background: #F0FBF7;
}
.sg-trust__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	row-gap: 12px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 22px 24px;
	list-style: none;
	background: var(--tp-white);
	border-radius: var(--tp-radius-xl);
	box-shadow: var(--tp-shadow-card);
}
.sg-trust__bar li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 56px;
	font-size: 15px;
	font-weight: 600;
	color: #374151;
	white-space: nowrap;
}
.sg-trust__bar li + li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--tp-border);
}
.sg-trust__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--tp-mint);
	color: var(--tp-primary-ink);
}
.sg-trust__check {
	width: 13px;
	height: 13px;
}

@media (max-width: 1240px) {
	.sg-trust__bar li {
		padding: 0 28px; /* a 1024 le quattro voci con 56px per lato uscivano dal viewport */
	}
}

/* ---- Confrontiamo tutta Roma (Figma 4364:6697 / 4364:7154) --------------------------------- */
.sg-compare {
	position: relative;
	overflow: hidden;
	padding: 78px 80px;
	background: var(--tp-white);
}
/* Blob decorativi del Figma, resi come gradienti radiali: niente immagini */
.sg-compare::before,
.sg-compare::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 200, 150, 0.1) 0%, rgba(0, 200, 150, 0) 70%);
	pointer-events: none;
}
.sg-compare::before {
	width: 520px;
	height: 520px;
	right: -140px;
	top: 120px;
}
.sg-compare::after {
	width: 420px;
	height: 420px;
	left: -160px;
	bottom: -60px;
}
.sg-compare__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 560px minmax(0, 1fr);
	grid-template-areas:
		'head card'
		'pillars card';
	align-items: center;
	column-gap: 64px;
	row-gap: 24px;
	max-width: 1280px;
	margin: 0 auto;
}
.sg-compare__head {
	grid-area: head;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	align-self: end;
}
.sg-compare__head h2 {
	margin: 0;
	font-size: 36px;
	line-height: 1.2;
	letter-spacing: -0.72px;
	font-weight: 800;
	color: var(--tp-ink);
}
.sg-compare__subtitle {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: #4B5563;
}
.sg-compare__pillars {
	grid-area: pillars;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	align-self: start;
}
.sg-pillars {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sg-pillars__item {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}
.sg-pillars__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	margin-top: 3px;
	border-radius: 10px;
	background: var(--tp-primary);
	color: var(--tp-white);
}
.sg-pillars__check {
	width: 16px;
	height: 16px;
}
.sg-pillars__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sg-pillars__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--tp-ink);
}
.sg-pillars__desc {
	font-size: 14px;
	line-height: 1.45;
	color: #4B5563;
}
.sg-compare__card {
	grid-area: card;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 28px;
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: 22px;
	box-shadow: 0 18px 44px -12px rgba(0, 71, 54, 0.1);
}
.sg-compare__card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.sg-compare__card-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--tp-ink);
}
.sg-compare__card-disclaimer {
	margin: 2px 0 0;
	font-size: 11px;
	color: #9CA3AF;
}
.sg-offers {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sg-offers__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--tp-border);
	border-radius: 14px;
	background: var(--tp-white);
}
.sg-offers__logo {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}
.sg-offers__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
.sg-offers__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sg-offers__badge {
	font-size: 12px;
	color: var(--tp-text-body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sg-offers__price {
	flex: none;
	font-size: 17px;
	font-weight: 700;
	color: #374151;
}
.sg-offers__row.is-best {
	border-color: var(--tp-primary);
	background: var(--tp-mint);
}
.sg-offers__row.is-best .sg-offers__badge {
	font-weight: 600;
	color: var(--tp-primary-700);
}
.sg-offers__row.is-best .sg-offers__price {
	font-size: 20px;
	color: var(--tp-primary-700);
}
.sg-team {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	background: #F7F8FA;
}
.sg-team__img {
	flex: none;
	width: 74px;
	height: 52px;
	border-radius: 10px;
	object-fit: cover;
}
.sg-team__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.sg-team__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--tp-primary-ink);
}
.sg-team__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-ink);
}
.sg-team__sub {
	font-size: 12px;
	color: var(--tp-text-body);
}
.sg-compare__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--tp-border);
	font-size: 13px;
	line-height: 1.4;
	color: #4B5563;
}
.sg-compare__note-check {
	flex: none;
	width: 13px;
	height: 13px;
	margin-top: 3px;
	color: var(--tp-primary);
}

/* ---- Quando serve: tab per scenario e confronto prima/dopo (Figma 4364:6769 / 4364:7223) ------- */
.sg-when {
	padding: 78px 80px;
	background: #F7F8FA;
}
.sg-when__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	max-width: 1280px;
	margin: 0 auto;
}
.sg-when__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.sg-when__head h2 {
	margin: 0;
	font-size: 34px;
	line-height: 1.2;
	letter-spacing: -0.68px;
	font-weight: 800;
	color: var(--tp-ink);
}
.sg-when__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: -8px;
}
.sg-when__tab {
	padding: 10px 16px;
	border: 1px solid var(--tp-border-card);
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-text-body);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.sg-when__tab:hover {
	border-color: var(--tp-primary);
	color: var(--tp-ink);
}
.sg-when__tab[aria-selected='true'] {
	border-color: var(--tp-primary);
	background: var(--tp-primary);
	color: var(--tp-white);
}
.sg-when__tab:focus-visible {
	outline: 2px solid var(--tp-focus);
	outline-offset: 2px;
}
.sg-when__panel {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr) 320px;
	gap: 32px;
	width: 100%;
	padding: 36px;
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: 22px;
}
.sg-when__panel[hidden] {
	display: none;
}
.sg-when__panel:focus-visible {
	outline: 2px solid var(--tp-focus);
	outline-offset: 4px;
}
.sg-when__areas {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sg-when__areas-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--tp-ink);
}
.sg-when__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sg-area {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid var(--tp-border-card);
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font-size: 13px;
	font-weight: 600;
	color: var(--tp-text-body);
}
.sg-area::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tp-field-border);
}
.sg-area.is-on {
	border-color: var(--tp-primary);
	background: var(--tp-mint);
	color: var(--tp-primary-700);
}
.sg-area.is-on::before {
	background: var(--tp-primary);
}
.sg-when__areas-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tp-text-body);
}
/* Confronto prima/dopo: --pos e' la posizione della maniglia (0-100%), scritta dal JS leggendo l'input range */
.sg-compare-media {
	--pos: 50%;
	position: relative;
	aspect-ratio: 536 / 392;
	width: 100%;
	overflow: hidden;
	border-radius: var(--tp-radius-xl);
	background: var(--tp-bg-soft);
	user-select: none;
	-webkit-user-select: none;
}
.sg-compare-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
.sg-compare-media__before {
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.sg-compare-media__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 3px;
	transform: translateX(-50%);
	background: var(--tp-white);
	pointer-events: none;
	transition: box-shadow 0.15s;
}
.sg-compare-media.is-dragging .sg-compare-media__divider {
	box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.9);
}
.sg-compare-media__handle {
	position: absolute;
	top: 50%;
	left: var(--pos);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--tp-white);
	box-shadow: 0 4px 12px rgba(15, 23, 41, 0.18);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--tp-text-heading);
	pointer-events: none;
	transition: transform 0.15s;
}
.sg-compare-media:hover .sg-compare-media__handle,
.sg-compare-media.is-dragging .sg-compare-media__handle {
	transform: translate(-50%, -50%) scale(1.1);
}
.sg-compare-media__label {
	position: absolute;
	bottom: 12px;
	padding: 4px 10px;
	border-radius: var(--tp-radius-pill);
	background: rgba(0, 0, 0, 0.55);
	font-size: 11px;
	font-weight: 600;
	color: var(--tp-white);
	pointer-events: none;
}
.sg-compare-media__label--before {
	left: 12px;
}
.sg-compare-media__label--after {
	right: 12px;
}
/* L'input range copre tutta l'immagine: invisibile, ma e' lui a ricevere mouse, dito e tastiera */
.sg-compare-media__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	touch-action: pan-y;
}
.sg-compare-media__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 44px;
	height: 100%;
}
.sg-compare-media__range::-moz-range-thumb {
	width: 44px;
	height: 100%;
	border: 0;
}
.sg-compare-media:has(.sg-compare-media__range:focus-visible) {
	outline: 2px solid var(--tp-focus);
	outline-offset: 3px;
}
.sg-when__detail {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.sg-when__detail-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--tp-ink);
}
.sg-when__detail-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #4B5563;
}
.sg-when__highlight {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--tp-radius-lg);
	background: var(--tp-mint);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--tp-primary-700);
}
.sg-when__highlight-check {
	flex: none;
	width: 13px;
	height: 13px;
	margin-top: 3px;
	color: var(--tp-primary-600);
}
.sg-when__cta {
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--tp-radius-pill);
	font-size: 14px;
	font-weight: 600;
}

/* ---- Quanto costa: calcolatore e lead via email (Figma 4364:6853 / 4364:7316) --------------- */
.sg-calc {
	position: relative;
	overflow: hidden;
	padding: 78px 80px;
	background: #F7F8FA;
}
.sg-calc::before {
	content: '';
	position: absolute;
	right: -120px;
	top: 60px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 200, 150, 0.1) 0%, rgba(0, 200, 150, 0) 70%);
	pointer-events: none;
}
.sg-calc__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	max-width: 1280px;
	margin: 0 auto;
}
.sg-calc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	width: 100%;
	max-width: 1048px;
}
.sg-calc__inputs {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 32px;
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: 22px;
	align-self: center;
}
.sg-calc__group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sg-calc__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sg-calc__label {
	font-size: 14px;
	font-weight: 500;
	color: #374151;
}
.sg-chip--plain::before {
	display: none;
}
.sg-calc__range {
	--fill: 26%; /* (100-30)/270: lo aggiorna il JS a ogni movimento */
	width: 100%;
	height: 8px;
	margin: 8px 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--tp-primary) var(--fill), #E5E7EB var(--fill));
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.sg-calc__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border: 3px solid var(--tp-primary);
	border-radius: 50%;
	background: var(--tp-white);
	box-shadow: 0 2px 6px rgba(15, 23, 41, 0.18);
}
.sg-calc__range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 3px solid var(--tp-primary);
	border-radius: 50%;
	background: var(--tp-white);
	box-shadow: 0 2px 6px rgba(15, 23, 41, 0.18);
}
.sg-calc__range:focus-visible {
	outline: 2px solid var(--tp-focus);
	outline-offset: 4px;
}
.sg-calc__scale {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #9CA3AF;
}
/* Pillola piena quando selezionata (tipo di intervento), al posto del bordo verde su menta */
.tp-pill--solid:has(input:checked) {
	background: var(--tp-primary);
	color: var(--tp-white);
	font-weight: 600;
}
.sg-calc__extras {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tp-check--dark {
	color: var(--tp-text-heading);
}
.sg-calc__result {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: 24px;
	background: linear-gradient(90deg, var(--tp-primary) 0%, #36DBB2 100%);
	box-shadow: 0 18px 44px -14px rgba(0, 128, 94, 0.3);
	color: var(--tp-white);
}
.sg-calc__result-label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.85);
}
.sg-calc__price {
	margin: -8px 0 0;
	font-size: 40px;
	line-height: 1.2;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.sg-calc__meta {
	margin: -8px 0 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.92);
}
.sg-calc__divider {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.28);
}
.sg-calc__cta-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}
.sg-calc__coupon {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: -4px 0 0;
	padding: 10px 14px;
	border: 1.5px dashed var(--tp-white);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 13px;
	font-weight: 500;
}
.sg-calc__coupon b {
	font-size: 16px;
	font-weight: 600;
}
/* Campo bianco sul fondo verde: nessun bordo a riposo, bordo grigio al passaggio */
.tp-field--onwhite input {
	border-color: transparent;
	background: var(--tp-white);
}
.tp-field--onwhite input:hover {
	border-color: var(--tp-field-border);
}
.tp-field--onwhite input:focus {
	border-color: var(--tp-white);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.tp-field--onwhite input:focus + label {
	color: var(--tp-primary-700);
}
.tp-field__error--onlight {
	color: #FFE4E6;
}
.tp-check--onlight {
	font-size: 12px;
	line-height: 1.42;
	color: rgba(255, 255, 255, 0.92);
}
.tp-check--onlight .tp-check__box {
	border-color: var(--tp-white);
	background: transparent;
}
.tp-check--onlight input:checked + .tp-check__box {
	border-color: var(--tp-white);
	background: var(--tp-white);
}
.tp-check--onlight input:checked + .tp-check__box::after {
	background: var(--tp-primary-700);
}
.tp-check--onlight a {
	color: var(--tp-white);
}
/* Bottone scuro a gradiente (live btn-dark-gradient): submit del calcolatore e CTA del banner coupon */
.sg-btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 20px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(325deg, #111827 0%, #374151 55%, #111827 90%);
	background-size: 280% auto;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--tp-white);
	cursor: pointer;
	transition: background-position 0.4s;
}
.sg-btn-dark:hover {
	background-position: right top;
}
.sg-btn-dark:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--tp-white), 0 0 0 6px #111827;
}
.sg-btn-dark[disabled] {
	opacity: 0.7;
	cursor: wait;
}
.sg-calc__submit {
	width: 100%;
}
.sg-calc__note {
	margin: 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}
.sg-calc__result .lead-form__api-error {
	margin: 0;
}

/* ---- Recensioni in griglia con card a stelle (Figma 4364:6920 / 4364:7382) ------------------ */
.reviews--grid {
	padding: 78px 80px 40px;
}
.reviews--grid .reviews__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 0;
	text-align: center;
}
.reviews--grid .reviews__title {
	margin: 0;
	font-size: 34px;
	line-height: 1.2;
	letter-spacing: -0.68px;
	font-weight: 800;
	color: var(--tp-ink);
}
.reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: 1248px;
	margin: 44px auto 0;
}
.review-card--stars {
	flex-direction: column;
	gap: 14px;
	width: auto;
	height: auto;
	padding: 26px;
	border-color: var(--tp-border);
	border-radius: 18px;
	box-shadow: none;
}
.review-card--stars:hover {
	transform: translateY(-4px);
	border-color: #D1D5DB;
	box-shadow: 0 12px 32px rgba(15, 23, 41, 0.1);
}
.review-card__stars {
	font-size: 15px;
	letter-spacing: 1px;
	color: var(--tp-star);
}
.review-card--stars .review-card__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--tp-text-heading);
}
.review-card__who {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}
.review-card--stars .review-card__avatar {
	width: 40px;
	height: 40px;
}
.review-card__name {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--tp-ink);
}
.review-card__city {
	margin: 0;
	font-size: 13px;
	color: var(--tp-text-body);
}

/* ---- Banner coupon (Figma 4364:6951 / 4364:7308) ------------------------------------------- */
.sg-coupon {
	padding: 0 80px 78px;
	background: var(--tp-white);
}
.sg-coupon__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1248px;
	margin: 0 auto;
	padding: 32px 40px;
	border-radius: 24px;
	background: linear-gradient(90deg, var(--tp-primary) 0%, #36DBB2 100%);
	box-shadow: 0 16px 40px -12px rgba(0, 128, 94, 0.28);
	color: var(--tp-white);
}
.sg-coupon__left {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}
.sg-coupon__amount {
	flex: none;
	font-size: 38px;
	line-height: 1;
	font-weight: 800;
}
.sg-coupon__copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.sg-coupon__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}
.sg-coupon__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
}
.sg-coupon__cta {
	flex: none;
	padding: 16px 24px;
	border-radius: 13px;
	font-size: 15px;
}

/* ---- Testa di sezione centrata (eyebrow, titolo, sottotitolo) ------------------------------- */
.sg-section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.sg-section-head h2 {
	margin: 0;
	font-size: 34px;
	line-height: 1.2;
	letter-spacing: -0.68px;
	font-weight: 800;
	color: var(--tp-ink);
}
.sg-section-head__sub {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: #4B5563;
}

/* ---- Come funziona: tre card numerate con frecce (Figma 4364:6830 / 4364:7282) ------------- */
.sg-steps {
	padding: 78px 80px;
	background: var(--tp-white);
}
.sg-steps__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	max-width: 1280px;
	margin: 0 auto;
}
.sg-steps__row {
	display: flex;
	align-items: stretch; /* tre card alte uguali come nel Figma (219px), non centrate come sul live */
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sg-step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 380px;
	padding: 26px;
	border: 1px solid var(--tp-border);
	border-radius: 18px;
	background: var(--tp-white);
}
.sg-step__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-700));
	font-size: 19px;
	font-weight: 700;
	color: var(--tp-white);
}
.sg-step__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--tp-ink);
}
.sg-step__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #4B5563;
}
.sg-steps__arrow {
	flex: none;
	align-self: center;
	padding: 0 8px;
	font-size: 22px;
	color: #4DFFB8;
}

/* ---- CTA finale con la seconda istanza del form (Figma 4473:4967 / 4364:7454) --------------- */
.sg-final {
	position: relative;
	overflow: hidden;
	padding: 80px;
	background: #F6FBF9;
}
.sg-final__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	align-items: start;
	gap: 72px;
	max-width: 1280px;
	margin: 0 auto;
}
.sg-final__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	padding-top: 48px;
}
.sg-final__copy h2 {
	margin: 0;
	font-size: 36px;
	line-height: 1.15;
	letter-spacing: -0.72px;
	font-weight: 800;
	color: var(--tp-ink);
}
.sg-final__subtitle {
	margin: 0;
	font-size: 17px;
	line-height: 1.58;
	color: #4B5563;
}
.sg-final__bullets {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sg-final__bullets li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--tp-ink);
}
.sg-final__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tp-mint);
	color: var(--tp-primary-ink);
}
.sg-final__check {
	width: 12px;
	height: 12px;
}
/* Mascotte: in flusso sotto i punti, spostata a destra verso il form (il live la mette in assoluto a 520px) */
.sg-final__mascot {
	align-self: flex-end;
	width: 360px;
	height: auto;
	margin: -36px 48px -24px 0;
	pointer-events: none;
}
.sg-final__form {
	scroll-margin-top: calc(var(--tp-navbar-h) + 16px);
}

/* ---- Thank-you (Figma 4418:922 / 4414:2) ----------------------------------------------------- */
.ty {
	background: #F8F9FA;
}
.ty__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
	padding: 80px 20px;
}
.ty__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tp-primary);
	color: var(--tp-white);
}
.ty__check-icon {
	width: 30px;
	height: 30px;
}
.ty__badge {
	margin: 20px 0 0;
	padding: 7px 14px;
	border: 1px solid var(--tp-mint-border);
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.55px;
	color: var(--tp-primary-700);
}
.ty h1 {
	margin: 20px 0 0;
	max-width: 600px;
	text-align: center;
	font-size: 38px;
	line-height: 1.1;
	letter-spacing: -0.76px;
	font-weight: 800;
	color: var(--tp-ink);
}
.ty__lead {
	margin: 16px 0 0;
	max-width: 560px;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	color: #4B5563;
}
.ty__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 1fr = minmax(auto, 1fr): le righe del riepilogo allargavano la card oltre il viewport a 390 */
	gap: 20px;
	width: 100%;
	margin-top: 40px;
}
.ty__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 24px;
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: 16px;
}
.ty__card-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #111827;
}
.ty__card-title--sm {
	font-size: 15px;
}
.ty__card-sub {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--tp-text-body);
}
.ty__rows {
	margin: 12px 0 0;
}
.ty__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #F0F1F3;
}
.ty__row:last-child {
	border-bottom: 0;
}
.ty__row[hidden] {
	display: none;
}
.ty__row dt {
	font-size: 14px;
	color: var(--tp-text-body);
}
.ty__row dd {
	min-width: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	text-align: right;
	overflow-wrap: anywhere;
}
.ty__coupon {
	color: var(--tp-primary-700);
}
.ty__divider {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--tp-border);
}
.ty__steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.ty__steps li {
	display: flex;
	gap: 12px;
}
.ty__step-n {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tp-mint);
	font-size: 12px;
	font-weight: 700;
	color: var(--tp-primary-700);
}
.ty__steps li > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ty__steps b {
	font-size: 14px;
	font-weight: 600;
	color: #111827;
}
.ty__steps li > span:last-child > span {
	font-size: 13px;
	color: var(--tp-text-body);
}
.ty__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ty__label {
	font-size: 13px;
	font-weight: 500;
	color: #374151;
}
.ty__input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: -10px;
	padding: 0 14px;
	border: 1px solid #E5E7EB;
	border-radius: var(--tp-radius-sm);
	background: #F9FAFB;
}
.ty__input-wrap:focus-within {
	border-color: var(--tp-primary);
}
.ty__input {
	flex: 1;
	min-width: 0;
	padding: 12px 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: #111827;
	outline: none;
}
.ty__verified {
	flex: none;
	padding: 2px 8px;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-mint);
	font-size: 11px;
	font-weight: 600;
	color: var(--tp-primary-700);
}
.ty__verified::before {
	content: '\2713 ';
}
.ty__submit {
	width: 100%;
	min-height: 48px;
	border-radius: var(--tp-radius-pill);
	font-size: 15px;
	font-weight: 700;
}
.ty__or {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: #9CA3AF;
}
.ty__or::before,
.ty__or::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--tp-border);
}
.ty__google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	border: 1px solid #D1D4DB;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font-size: 15px;
	font-weight: 600;
	color: #2E3340;
}
.ty__perks {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ty__perks li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #374151;
}
.ty__perk-check {
	flex: none;
	width: 13px;
	height: 13px;
	color: var(--tp-primary-600);
}
.ty__legal {
	margin: 0;
	text-align: center;
	font-size: 12px;
	color: #9CA3AF;
}
.ty__legal a {
	color: inherit;
	text-decoration: underline;
}

/* ---- Barra fissa doppia (Chiama + CTA), Figma 4364:7535 ---------------------------------- */
.sticky-cta--dual {
	gap: 10px;
}
.sticky-cta__call {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 18px;
	border: 1.5px solid var(--tp-primary);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--tp-primary-ink);
}
.sticky-cta__call-icon {
	width: 18px;
	height: 18px;
}
.sticky-cta--dual .sticky-cta__btn {
	flex: 1;
	height: 48px;
	padding: 0 16px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
}

@media (max-width: 1023px) {
	.landing-promo__text--desktop {
		display: none;
	}
	.landing-promo__text--mobile,
	.landing-promo__text--desktop:only-child {
		display: block;
	}
	.landing-nav {
		gap: 12px;
		padding: 0 20px;
	}
	.landing-nav__logo img {
		height: 24px; /* con la CTA accanto, a 360-390 il logo da 28px spingeva la barra oltre il viewport */
	}
	.landing-nav__links,
	.landing-nav__phone {
		display: none;
	}
	.landing-nav__cta {
		min-height: 44px;
		padding: 0 14px;
		font-size: 13px;
	}
	.landing-nav__cta-short + .landing-nav__cta-full {
		display: none;
	}
	.landing-nav__cta-short {
		display: inline;
	}

	.sgrosso {
		padding-bottom: 76px; /* spazio per la barra fissa */
	}
	.sg-hero {
		padding: 0;
	}
	.sg-hero__panel {
		min-height: 0;
		border-radius: 0;
	}
	.sg-hero__scrim {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.48) 100%);
	}
	.sg-hero__inner {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 30px 20px 24px;
	}
	.sg-hero__copy {
		gap: 16px;
	}
	.sg-hero__eyebrow {
		font-size: 11px;
		letter-spacing: 0.55px;
	}
	.sg-hero h1 {
		font-size: 32px;
		line-height: 1.1;
		letter-spacing: -0.64px;
	}
	.sg-hero__subtitle {
		font-size: 16px;
	}
	.sg-hero__bullets {
		gap: 10px;
		font-size: 15px;
	}
	.sg-hero__social {
		font-size: 13px;
	}
	.lead-form {
		padding: 22px;
		border-radius: 18px;
	}
	.sticky-cta--dual:not([hidden]) {
		display: flex;
	}

	/* Trust bar: due righe da due, senza barra (Figma 4364:7139) */
	.sg-trust {
		padding: 18px 16px;
	}
	.sg-trust__bar {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		gap: 12px 14px;
		padding: 0;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
	}
	.sg-trust__bar li {
		gap: 8px;
		padding: 0;
		font-size: 13px;
	}
	.sg-trust__bar li + li::before {
		display: none;
	}
	.sg-trust__tile {
		width: 18px;
		height: 18px;
		border-radius: 6px;
	}
	.sg-trust__check {
		width: 10px;
		height: 10px;
	}
	.sg-offers__name,
	.sg-offers__badge {
		white-space: normal;
	}

	/* Confrontiamo: testo, card, pilastri, CTA (Figma 4364:7154) */
	.sg-compare {
		padding: 50px 20px;
	}
	.sg-compare::before,
	.sg-compare::after {
		width: 320px;
		height: 320px;
	}
	.sg-compare__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			'head'
			'card'
			'pillars';
		row-gap: 28px;
	}
	.sg-compare__head {
		gap: 16px;
	}
	.sg-compare__head h2 {
		font-size: 26px;
		letter-spacing: -0.52px;
	}
	.sg-compare__subtitle {
		font-size: 15px;
	}
	.sg-compare__pillars {
		gap: 24px;
	}
	.sg-compare__pillars .sg-cta {
		width: 100%;
		justify-content: center;
	}
	.sg-pillars__tile {
		width: 34px;
		height: 34px;
	}
	.sg-compare__card {
		padding: 20px;
		border-radius: 18px;
	}

	/* Quando serve: immagine, aree, dettaglio in colonna (Figma 4364:7223) */
	.sg-when {
		padding: 50px 20px;
	}
	.sg-when__inner {
		gap: 24px;
	}
	.sg-when__head h2 {
		font-size: 26px;
		letter-spacing: -0.52px;
	}
	.sg-when__tabs {
		margin-top: 0;
		gap: 8px;
	}
	.sg-when__tab {
		padding: 9px 14px;
		font-size: 13px;
	}
	.sg-when__panel {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px;
		border-radius: 18px;
	}
	.sg-when__areas {
		order: 2;
	}
	.sg-compare-media {
		order: 1;
	}
	.sg-when__detail {
		order: 3;
	}
	.sg-when__cta {
		width: 100%;
		justify-content: center;
		min-height: 52px;
		border-radius: var(--tp-radius-lg);
	}

	/* Quanto costa: input sopra, risultato sotto */
	.sg-calc {
		padding: 50px 20px;
	}
	.sg-calc::before {
		width: 320px;
		height: 320px;
	}
	.sg-calc__inner {
		gap: 28px;
	}
	.sg-calc__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.sg-calc__inputs {
		gap: 22px;
		padding: 22px;
		border-radius: 18px;
	}
	.sg-calc__result {
		gap: 14px;
		padding: 24px;
		border-radius: 18px;
	}
	.sg-calc__price {
		font-size: 34px;
	}

	/* Recensioni in colonna, coupon impilato */
	.reviews--grid {
		padding: 40px 20px 28px;
	}
	.reviews--grid .reviews__title {
		font-size: 26px;
		line-height: 1.2;
		letter-spacing: -0.52px;
	}
	.reviews__grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 24px;
	}
	.review-card--stars {
		display: flex; /* la regola mobile del marquee trasforma .review-card in griglia a due aree: qui non serve */
		padding: 20px;
	}
	.review-card--stars .review-card__text {
		font-size: 15px;
	}
	.sg-coupon {
		padding: 0 20px 50px;
	}
	.sg-coupon__band {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 28px 24px;
		border-radius: 18px;
	}
	.sg-coupon__left {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 12px;
	}
	.sg-coupon__amount {
		font-size: 48px;
	}
	.sg-coupon__cta {
		width: 100%;
	}

	/* Thank-you in colonna */
	.ty__inner {
		padding: 56px 20px;
	}
	.ty h1 {
		font-size: 32px;
		letter-spacing: -0.64px;
	}
	.ty__lead {
		font-size: 15px;
	}
	.ty__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin-top: 32px;
	}

	/* Come funziona e CTA finale in colonna */
	.sg-section-head h2 {
		font-size: 26px;
		letter-spacing: -0.52px;
	}
	.sg-section-head__sub {
		font-size: 15px;
	}
	.sg-steps {
		padding: 50px 20px;
	}
	.sg-steps__inner {
		gap: 32px;
	}
	.sg-steps__row {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.sg-step {
		width: 100%;
		gap: 12px;
		padding: 18px;
	}
	.sg-step__title {
		font-size: 17px;
	}
	.sg-step__desc {
		font-size: 14px;
	}
	.sg-steps__arrow {
		display: none;
	}
	.sg-final {
		padding: 50px 20px;
	}
	.sg-final__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.sg-final__copy {
		gap: 18px;
		padding-top: 0;
	}
	.sg-final__copy h2 {
		font-size: 28px;
		letter-spacing: -0.56px;
	}
	.sg-final__subtitle {
		font-size: 15px;
	}
	.sg-final__bullets li {
		font-size: 15px;
	}
	.sg-final__mascot {
		display: none;
	}
}

/* =========================
   13. Diventa cleaner — page-cleaner-landing.php, Figma 6752:895 (TICKET-51..57)
   Classi dc-*; riusa .sg-section-head, .sg-trust, .sg-steps, .faq, .cta-final, .sticky-cta.
   Contrasti dall'analisi UI/UX del 25/10 (sviluppo/analisi-ux-diventa-cleaner.md): verde del marchio solo sulle
   CTA; testo e icone verdi su fondo chiaro in #08875E / #067A55; la card della stima e' bianca, non verde.
   ========================= */
.dc > section {
	scroll-margin-top: var(--tp-navbar-h);
}
.dc .sg-eyebrow {
	color: #067A55;
}
.dc .sg-section-head h2 {
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--tp-ink);
}
.dc .sg-section-head__sub {
	max-width: 600px;
}
.dc .sg-trust__tile {
	color: #08875E;
}
/* Le quattro voci di questa pagina sono piu' lunghe di quelle della landing Sgrosso: col padding di 56px per lato
   andavano a capo su due righe a 1440. */
.dc .sg-trust__bar li {
	padding: 0 32px;
}

/* ---- Hero: pannello menta, testo a sinistra, telefono con due card flottanti a destra ---- */
.dc-hero {
	padding: 16px 40px 0;
}
.dc-hero__panel {
	display: grid;
	grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	max-width: 1360px;
	margin: 0 auto;
	padding: 64px 64px 64px 80px;
	border-radius: 28px;
	background: linear-gradient(135deg, #F0FBF7 0%, #D4F5E8 100%);
}
.dc-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}
.dc-hero__eyebrow {
	margin: 0;
	padding: 7px 14px;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.8px;
	color: #067A55;
}
.dc-hero h1 {
	margin: 0;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -1px;
	font-weight: 800;
	color: var(--tp-ink);
}
.dc-hero__subtitle {
	margin: 0;
	max-width: 560px;
	font-size: 18px;
	line-height: 1.5;
	color: #4B5563;
}
.dc-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.dc-btn {
	min-height: 56px;
	padding: 0 26px;
	border-radius: var(--tp-radius-pill);
	font-size: 16px;
}
.dc-btn--ghost {
	border: 1.5px solid var(--tp-primary);
	background: var(--tp-white);
	color: #067A55;
}
.dc-hero__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 640px;
}
.dc-float {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px 14px 16px;
	border-radius: 16px;
	background: var(--tp-white);
	box-shadow: 0 8px 24px rgba(13, 51, 38, 0.12);
	white-space: nowrap;
}
.dc-float--1 {
	left: 0;
	top: 50%;
}
.dc-float--2 {
	right: 0;
	bottom: 16%;
}
.dc-float__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(8, 135, 94, 0.15);
	font-size: 16px;
	font-weight: 600;
	color: #08875E;
}
.dc-float__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	color: #6B6B6B;
}
.dc-float__text strong {
	font-size: 14px;
	font-weight: 600;
	color: #1A1A1A;
}

/* ---- Ritaglio di uno schermo dell'app: l'immagine e' gia' tagliata sulla parte utile, si ancora in alto ---- */
.dc-peek {
	overflow: hidden;
	border: 1px solid #E6E6E6;
	border-radius: 16px 16px 0 0;
	background: var(--tp-white);
}
.dc-peek img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Come funziona con le schermate (steps-cards.php, modificatore sg-steps--screens) ---- */
.dc-steps {
	padding: 96px 80px;
	background: #F0FBF7;
}
.sg-steps--screens .sg-steps__row {
	gap: 24px;
}
.sg-steps--screens .sg-step {
	gap: 12px;
	width: 384px;
	padding: 0 0 28px;
	overflow: hidden;
	border: 1px solid #E6E6E6;
	border-radius: 28px;
	box-shadow: var(--tp-shadow-card);
}
.sg-steps--screens .sg-step > :not(.sg-step__visual) {
	margin: 0 28px;
}
.sg-step__visual {
	align-self: stretch; /* la card e' flex con align-items: flex-start: senza, il pannello si stringe sullo schermo */
	display: flex;
	justify-content: center;
	height: 230px;
	padding-top: 28px;
	overflow: hidden;
	background: #DDF7EC;
}
.sg-step__visual .dc-peek {
	width: 220px;
	height: 260px;
	flex: none;
}
.sg-steps--screens .sg-step__badge {
	width: 40px;
	height: 40px;
	margin-top: 12px;
	font-size: 16px;
}
.sg-steps--screens .sg-step__title {
	font-size: 20px;
}

/* ---- Bento "Un'app che lavora per te" (app-bento.php) ---- */
.dc-bento {
	padding: 96px 80px;
	background: var(--tp-white);
}
.dc-bento__inner,
.dc-who__inner,
.dc-req__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto;
}
.dc-bento__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}
.dc-tile {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 360px;
	padding: 32px 32px 0;
	overflow: hidden;
	border: 1px solid #E6E6E6;
	border-radius: 28px;
	background: #F0FBF7;
}
.dc-tile__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dc-tile__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--tp-ink);
}
.dc-tile__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #4B5563;
}
.dc-tile__screen {
	flex: 1;
	min-height: 0;
}
.dc-tile--wide {
	grid-column: span 2;
	flex-direction: row;
	gap: 32px;
}
.dc-tile--wide .dc-tile__text {
	flex: none;
	width: 360px;
}
.dc-tile--wide .dc-tile__screen {
	flex: none;
	align-self: flex-end;
	width: 300px;
	height: 328px;
	margin-left: auto;
	margin-right: 16px;
}

/* ---- Quanto guadagni: fondo scuro, calcolatore e card bianca della stima ---- */
.dc-earn {
	padding: 96px 80px;
	background: #121717;
}
.dc-earn__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 576px));
	justify-content: center;
	align-items: center;
	gap: 48px;
}
.dc-earn__left {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.dc-earn__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dc-earn__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.04px;
	color: var(--tp-primary);
}
.dc-earn__title {
	margin: 0;
	font-size: 38px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--tp-white);
}
.dc-earn__sub {
	margin: 0;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.5;
	color: #B8BFBC;
}
.dc-calc {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	background: #1C2426;
}
.dc-calc[hidden] {
	display: none;
}
.dc-calc__field {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dc-calc__row,
.dc-calc__scale {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dc-calc__label {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--tp-white);
}
.dc-calc__pill {
	padding: 4px 12px;
	border-radius: var(--tp-radius-pill);
	background: rgba(0, 200, 150, 0.18);
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-primary);
}
.dc-calc__scale {
	font-size: 12px;
	color: #B8BFBC;
}
.dc-calc__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 22px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}
.dc-calc__range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(to right, var(--tp-primary) var(--fill, 35%), rgba(255, 255, 255, 0.15) var(--fill, 35%));
}
.dc-calc__range::-moz-range-track {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(to right, var(--tp-primary) var(--fill, 35%), rgba(255, 255, 255, 0.15) var(--fill, 35%));
}
.dc-calc__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -8px;
	border: 3px solid var(--tp-primary);
	border-radius: 50%;
	background: var(--tp-white);
}
.dc-calc__range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 3px solid var(--tp-primary);
	border-radius: 50%;
	background: var(--tp-white);
}
.dc-calc__range:focus-visible {
	outline: 2px solid var(--tp-primary);
	outline-offset: 4px;
}
.dc-calc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.dc-calc__chip {
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--tp-radius-pill);
	background: rgba(255, 255, 255, 0.06);
	font-family: var(--tp-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-white);
	cursor: pointer;
}
.dc-calc__chip.is-on {
	border-color: transparent;
	background: var(--tp-primary);
	color: #1A1A1A;
}
.dc-calc__chip:focus-visible {
	outline: 2px solid var(--tp-white);
	outline-offset: 2px;
}
.dc-estimate {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 40px;
	border-radius: 28px;
	background: var(--tp-white);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.dc-estimate__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.04px;
	color: #067A55;
}
.dc-estimate__value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: 56px;
	line-height: 1;
	font-weight: 800;
	color: #08875E;
}
.dc-estimate__per {
	font-size: 18px;
	font-weight: 500;
	color: var(--tp-ink);
}
.dc-estimate__formula {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #4B5563;
}
.dc-estimate__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid #E6E6E6;
}
.dc-estimate__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
}
.dc-estimate__row dt {
	color: #4B5563;
}
.dc-estimate__row dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	color: var(--tp-ink);
}
.dc-estimate__cta {
	min-height: 52px;
	border-radius: var(--tp-radius-pill);
	font-size: 15px;
}

/* ---- Per chi e' (audience-cards.php) ---- */
.dc-who {
	padding: 96px 80px;
	background: var(--tp-white);
}
.dc-who__cards,
.dc-req__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}
.dc-who__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 40px;
	border: 1px solid #E6E6E6;
	border-radius: 28px;
	background: var(--tp-white);
	box-shadow: var(--tp-shadow-card);
}
.dc-who__card--dark {
	border-color: #121717;
	background: #121717;
}
.dc-who__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 56px;
	padding: 0 10px;
	border-radius: 16px;
	background: #DDF7EC;
	font-size: 17px;
	font-weight: 700;
	color: #08875E;
}
.dc-who__card--dark .dc-who__badge {
	background: #08875E;
	color: var(--tp-white);
}
.dc-who__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--tp-ink);
}
.dc-who__text {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: #4B5563;
}
.dc-who__card--dark .dc-who__title {
	color: var(--tp-white);
}
.dc-who__card--dark .dc-who__text {
	color: #C7CCCA;
}
.dc-who__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dc-who__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--tp-ink);
}
.dc-who__card--dark .dc-who__list li {
	color: var(--tp-white);
}
.dc-check,
.dc-cross {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(0, 200, 150, 0.18);
	color: #08875E;
}
.dc-check__icon {
	width: 12px;
	height: 12px;
}
.dc-who__card--dark .dc-check {
	background: #08875E;
	color: var(--tp-white);
}
.dc-cross {
	background: rgba(26, 26, 26, 0.08);
	font-size: 16px;
	line-height: 1;
	color: #6B6B6B;
}
.dc-who__cta {
	min-height: 48px;
	margin-top: 4px;
	padding: 0 24px;
	border-radius: var(--tp-radius-pill);
	font-size: 15px;
}
.dc-btn--light {
	background: var(--tp-white);
	color: #1A1A1A;
}

/* ---- Requisiti (requirements.php) ---- */
.dc-req {
	padding: 96px 80px;
	background: var(--tp-white);
}
.dc-req__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 36px;
	border: 1px solid #E6E6E6;
	border-radius: 28px;
	background: var(--tp-white);
	box-shadow: var(--tp-shadow-card);
}
.dc-req__card--no {
	background: #F0FBF7;
	box-shadow: none;
}
.dc-req__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--tp-ink);
}
.dc-req__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dc-req__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.dc-req__list strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--tp-ink);
}
.dc-req__text {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: #4B5563;
}
.dc-req .dc-check,
.dc-req .dc-cross {
	width: 26px;
	height: 26px;
}

/* ---- Partner (partners-strip.php), solo se compilato ---- */
.dc-partners {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 56px 80px;
	background: #F0FBF7;
}
.dc-partners__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dc-partners__pill {
	padding: 12px 22px;
	border: 1px solid #E6E6E6;
	border-radius: 16px;
	background: var(--tp-white);
	font-size: 16px;
	font-weight: 600;
	color: var(--tp-ink);
}
.dc-partners__tail {
	font-size: 15px;
	color: #4B5563;
}

@media (max-width: 1240px) {
	.dc-hero__panel {
		padding: 56px 40px;
	}
	.dc-float--1 {
		left: -16px;
	}
	.dc-float--2 {
		right: -16px;
	}
}

@media (max-width: 1023px) {
	.dc {
		padding-bottom: 76px; /* spazio per la barra fissa */
	}
	.dc .sg-section-head h2 {
		font-size: 28px;
	}
	.dc-hero {
		padding: 12px 16px 0;
	}
	/* Trust strip: a 360-390 due colonne con voci lunghe uscivano dal viewport, qui una colonna sola */
	.dc .sg-trust__bar {
		grid-template-columns: auto;
		justify-content: start;
		padding-left: 4px;
	}
	.dc .sg-trust__bar li {
		padding: 0;
		white-space: normal;
	}
	.dc-hero__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 36px 20px 0;
		border-radius: 24px;
		overflow: hidden;
	}
	.dc-hero h1 {
		font-size: 32px;
		letter-spacing: -0.6px;
	}
	.dc-hero__subtitle {
		font-size: 16px;
	}
	.dc-hero__ctas .dc-btn {
		flex: 1 1 auto;
	}
	/* Il telefono esce dal fondo del pannello: si vede la parte alta della dashboard, come nella Home mobile */
	.dc-hero__stage {
		align-items: flex-start;
		min-height: 0;
		height: 340px;
		overflow: hidden;
	}
	.dc-hero__phone {
		--tp-phone-w: 230px;
		--tp-phone-h: 476px;
		--tp-phone-radius: 40px;
		--tp-phone-screen-radius: 32px;
	}
	.dc-float {
		display: none;
	}
	.dc-steps,
	.dc-bento,
	.dc-earn,
	.dc-who,
	.dc-req {
		padding: 56px 20px;
	}
	.dc-partners {
		padding: 40px 20px;
	}
	.sg-steps--screens .sg-steps__row {
		flex-direction: column;
		align-items: center;
	}
	.sg-steps--screens .sg-step {
		width: 100%;
		max-width: 420px;
	}
	.dc-bento__grid,
	.dc-who__cards,
	.dc-req__cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.dc-tile,
	.dc-tile--wide {
		grid-column: auto;
		flex-direction: column;
		height: auto;
		padding: 28px 24px 0;
	}
	.dc-tile--wide .dc-tile__text {
		width: auto;
	}
	.dc-tile__screen,
	.dc-tile--wide .dc-tile__screen {
		flex: none;
		align-self: stretch;
		width: auto;
		height: 200px;
		margin: 0;
	}
	.dc-earn__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.dc-earn__title {
		font-size: 28px;
	}
	.dc-estimate {
		padding: 28px 24px;
	}
	.dc-estimate__value {
		font-size: 44px;
	}
	.dc-who__card,
	.dc-req__card {
		padding: 28px 24px;
	}
}

/* ---- Diventa cleaner: movimento (assets/js/cleaner-motion.js) ----
   Ingressi solo sotto .dc--motion, che lo script aggiunge se il movimento e' consentito: senza JavaScript tutto
   resta visibile. Hover solo con mouse ((hover: hover)), stessi valori del resto del sito: card -4px, bottoni -2px,
   freccia +3px, 0.25s. */
/* main.dc--motion: specificita' sopra le regole di transizione degli hover (.sg-steps--screens .sg-step ecc.),
   che vengono dopo nel file e altrimenti sostituirebbero la transizione d'ingresso, opacita' compresa. */
main.dc--motion .dc-rv {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--d, 0) * 80ms);
}
main.dc--motion .dc-rv.is-in {
	opacity: 1;
	transform: none;
}
/* Hero: testo a cascata, poi telefono, poi le due card che restano a ondeggiare */
.dc--motion .dc-hero__copy > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dc--motion .dc-hero__copy > :nth-child(2) { transition-delay: 0.08s; }
.dc--motion .dc-hero__copy > :nth-child(3) { transition-delay: 0.16s; }
.dc--motion .dc-hero__copy > :nth-child(4) { transition-delay: 0.24s; }
.dc--motion .dc-hero__stage {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease 0.2s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}
.dc--motion .dc-hero.is-in .dc-hero__copy > *,
.dc--motion .dc-hero.is-in .dc-hero__stage {
	opacity: 1;
	transform: none;
}
.dc--motion .dc-float {
	opacity: 0;
}
.dc--motion .dc-hero.is-in .dc-float {
	animation: dc-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both, dc-bob 6s ease-in-out 1.4s infinite;
}
.dc--motion .dc-hero.is-in .dc-float--1 { animation-delay: 0.75s, 1.4s; }
.dc--motion .dc-hero.is-in .dc-float--2 { animation-delay: 0.95s, 2.6s; }
@keyframes dc-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.9); }
	to { opacity: 1; transform: none; }
}
@keyframes dc-bob {
	0%, 100% { opacity: 1; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-8px); }
}
/* Parallasse della hero: inclinazione del telefono e spostamento delle card (variabili dallo script) */
.dc-hero__phone {
	transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
	transition: transform 0.4s ease-out;
}
.dc-float {
	translate: var(--px, 0) var(--py, 0);
	transition: translate 0.4s ease-out;
}
/* Cifra della stima: impulso a ogni cambio */
.dc-estimate__value [data-earn-total] {
	display: inline-block;
	transform-origin: left bottom;
}
.dc-estimate__value [data-earn-total].is-bump {
	animation: dc-bump 0.3s ease;
}
@keyframes dc-bump {
	40% { transform: scale(1.05); }
}

/* Transizioni di base per gli hover */
.dc-btn,
.dc-who__cta,
.dc-estimate__cta,
.sg-steps--screens .sg-step,
.dc-tile,
.dc-who__card,
.dc-req__card,
.dc-partners__pill,
.dc-who__badge,
.dc .sg-trust__tile,
.dc-calc__chip {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.dc-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}
.dc-peek img {
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
	.dc-btn:hover,
	.dc-who__cta:hover,
	.dc-estimate__cta:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 24px -8px rgba(15, 33, 26, 0.35);
	}
	.dc-btn:hover .dc-arrow,
	.dc-who__cta:hover .dc-arrow,
	.dc-estimate__cta:hover .dc-arrow {
		transform: translateX(3px);
	}
	.dc-btn--ghost:hover {
		background: #E6FFF5;
	}
	/* Card con lo schermo: si sollevano e lo schermo dell'app scorre un poco, come se si scrollasse l'app */
	.sg-steps--screens .sg-step:hover,
	.dc-tile:hover {
		transform: translateY(-4px);
		border-color: #B3FFE0;
		box-shadow: 0 20px 40px -6px rgba(15, 51, 38, 0.14);
	}
	.sg-steps--screens .sg-step:hover .dc-peek img,
	.dc-tile:hover .dc-peek img {
		transform: translateY(-28px);
	}
	.dc-who__card:hover,
	.dc-req__card:hover {
		transform: translateY(-4px);
		box-shadow: 0 20px 40px -6px rgba(15, 51, 38, 0.14);
	}
	.dc-who__card--dark:hover {
		border-color: #08875E;
		box-shadow: 0 20px 40px -6px rgba(0, 200, 150, 0.25);
	}
	.dc-who__card:hover .dc-who__badge {
		transform: rotate(-6deg) scale(1.06);
	}
	.dc .sg-trust__bar li:hover .sg-trust__tile {
		transform: scale(1.15);
	}
	.dc-partners__pill:hover {
		transform: translateY(-2px);
		border-color: #B3FFE0;
	}
	.dc-calc__chip:not(.is-on):hover {
		border-color: rgba(255, 255, 255, 0.4);
		background: rgba(255, 255, 255, 0.1);
	}
	.dc-calc__range:hover::-webkit-slider-thumb {
		transform: scale(1.15);
	}
	.dc-calc__range:hover::-moz-range-thumb {
		transform: scale(1.15);
	}
}
.dc-calc__range::-webkit-slider-thumb {
	transition: transform 0.2s ease;
}

/* =========================
   14. Landing B2B — page-landing-b2b.php, Figma 6780:895 (TICKET-58..62)
   Classi b2b-*; riusa .sg-hero, .sg-trust, .sg-when (+ .sg-when__photo), .sg-compare-media, .dc-who, .sg-steps,
   .reviews, .faq, .sg-final. Verde del marchio solo sulle CTA; testo e icone verdi su fondo chiaro in
   #08875E / #067A55 (analisi UX 25/10, come la pagina Diventa cleaner).
   ========================= */
.b2b .sg-eyebrow {
	color: #067A55;
}
.b2b .sg-section-head__sub {
	max-width: 620px;
}
/* Hero: foto verticale della lavasciuga (1000x1133) sotto la card del form: inquadra il centro */
.b2b .sg-hero__img {
	object-position: 50% 42%;
}
.b2b .sg-hero h1 {
	max-width: 660px;
}
/* Trust strip: quattro voci lunghe su una riga a 1440 (con 32px la quarta andava a capo) */
.b2b .sg-trust__bar li {
	padding: 0 22px;
}

/* ---- Form a un passo (template-parts/lead-form-b2b.php) ---- */
.lead-form--b2b .lead-form__chips {
	gap: 8px;
}
.lead-form--b2b .lead-form__chips .tp-pill {
	padding: 8px 14px;
	font-size: 13px;
}
.lead-form--b2b .lead-form__group.is-invalid .tp-pill {
	border-color: var(--tp-error);
}
.lead-form--b2b .tp-field[hidden] {
	display: none;
}
.lead-form__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 28px 8px 12px;
	text-align: center;
	outline: none;
}
.lead-form__done[hidden] {
	display: none;
}
.lead-form__done-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--tp-mint);
	color: #08875E;
}
.lead-form__done-check {
	width: 24px;
	height: 24px;
}
.lead-form__done-title {
	margin: 6px 0 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--tp-ink);
}
.lead-form__done-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #4B5563;
}
.lead-form__done-text a {
	font-weight: 600;
	color: #08875E;
}

/* ---- Settori: foto singola al posto del prima/dopo (scenario-tabs.php con `image`) ---- */
.sg-when__photo {
	position: relative;
	aspect-ratio: 536 / 392;
	width: 100%;
	overflow: hidden;
	border-radius: var(--tp-radius-xl);
	background: var(--tp-bg-soft);
}
.sg-when__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Lavori a Roma (works-gallery.php) ---- */
.b2b-works {
	padding: 88px 80px;
	background: var(--tp-white);
}
.b2b-works__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	max-width: 1280px;
	margin: 0 auto;
}
.b2b-works__compare {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 455px;
	align-items: center;
	gap: 24px;
	width: 100%;
}
.b2b-works__media {
	aspect-ratio: 760 / 556;
}
.b2b-works__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 32px;
	border: 1px solid var(--tp-border);
	border-radius: 24px;
	background: #F6FBF9;
}
.b2b-works__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 12px;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font-size: 12px;
	font-weight: 600;
	color: #067A55;
}
.b2b-works__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--tp-ink);
}
.b2b-works__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #4B5563;
}
.b2b-works__tags {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.b2b-works__tags li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tp-ink);
}
.b2b-tag {
	flex: none;
	padding: 3px 8px;
	border-radius: var(--tp-radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: var(--tp-white);
}
.b2b-tag--before {
	background: #B8632A;
}
.b2b-tag--after {
	background: #08875E;
}
.b2b-works__gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.b2b-works__item {
	overflow: hidden;
	border: 1px solid var(--tp-border);
	border-radius: 20px;
	background: var(--tp-white);
	box-shadow: var(--tp-shadow-card);
}
.b2b-works__item img {
	display: block;
	width: 100%;
	aspect-ratio: 397 / 250;
	object-fit: cover;
}
.b2b-works__item p {
	margin: 0;
	padding: 14px 18px 16px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--tp-ink);
}

/* ---- Formule: "Per chi e'" della pagina Diventa cleaner con badge a pillola e bottoni del ridisegno ---- */
.b2b .dc-who {
	padding: 88px 80px;
	background: #F6FBF9;
}
.b2b .dc-who__badge {
	min-width: 0;
	height: auto;
	padding: 6px 12px;
	border-radius: var(--tp-radius-pill);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
}
.b2b .dc-who__cta {
	border-radius: 12px;
}

/* ---- Perche' noi (value-props.php) ---- */
.b2b-why {
	padding: 88px 80px;
	background: #F7F8FA;
}
.b2b-why__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	max-width: 1280px;
	margin: 0 auto;
}
.b2b-why__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.b2b-why__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 28px;
	border: 1px solid var(--tp-border);
	border-radius: 18px;
	background: var(--tp-white);
}
.b2b-why__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--tp-mint);
	color: #08875E;
}
.b2b-why__glyph {
	width: 22px;
	height: 22px;
}
.b2b-why__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--tp-ink);
}
.b2b-why__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #4B5563;
}

/* ---- Recensioni: iniziali al posto delle foto (reviews-marquee.php, avatar_mode initials) ---- */
.review-card__initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tp-mint);
	font-size: 14px;
	font-weight: 600;
	color: #067A55;
}

/* Reveal a cascata di vantaggi e galleria (reveal.js mette .is-in sulla sezione). Ombra e bordo degli hover stanno
   nella stessa dichiarazione di transizione: una seconda regola con la stessa specificita' la sostituirebbe e
   l'ingresso scatterebbe di colpo (trappola documentata in docs/landing-cleaner.md). */
.b2b-why__card,
.b2b-works__item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
}
.b2b-why.is-in .b2b-why__card,
.b2b-works.is-in .b2b-works__item {
	opacity: 1;
	transform: none;
}
@media (hover: hover) {
	.b2b-why__card:hover,
	.b2b-works__item:hover {
		border-color: #B3FFE0;
		box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.14);
	}
}

@media (max-width: 1023px) {
	.b2b .sg-trust__bar {
		grid-template-columns: auto;
		justify-content: start;
		padding-left: 4px;
	}
	.b2b .sg-trust__bar li {
		padding: 0;
		white-space: normal;
	}
	.b2b .sg-hero__img {
		object-position: 50% 40%;
	}
	.lead-form--b2b .lead-form__row {
		flex-direction: column;
	}
	.sg-when__photo {
		order: 1;
	}
	.b2b-works,
	.b2b-why,
	.b2b .dc-who {
		padding: 50px 20px;
	}
	.b2b-works__inner,
	.b2b-why__inner {
		gap: 28px;
	}
	.b2b-works__compare {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	/* Le regole mobile dello Sgrosso danno order: 1 a ogni .sg-compare-media (dentro i tab la foto va prima dei
	   chip): qui il confronto deve restare prima della card di testo. */
	.b2b-works__media {
		order: 0;
	}
	.b2b-works__card {
		padding: 22px;
		border-radius: 18px;
	}
	.b2b-works__title {
		font-size: 20px;
	}
	.b2b-works__gallery {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.b2b-why__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.b2b-why__card {
		padding: 20px;
	}
}

/* =========================
   15. Contatti — page-contact.php, Figma 6803:895 (TICKET-63..65)
   Classi ct-*; riusa .faq. Smistamento a quattro card (route-cards.php), canali e dati aziendali
   (company-contacts.php, stesso disegno del blocco di Chi siamo 6795:1136). Verde del marchio solo sulle CTA;
   testo e icone verdi su fondo chiaro in #067A55 (come Diventa cleaner e landing B2B).
   ========================= */
.ct > section {
	scroll-margin-top: var(--tp-navbar-h);
}

/* ---- Smistamento: testa centrata e quattro card (route-cards.php) ---- */
.ct-route {
	padding: 96px 80px 112px;
	background: #F6FBF9;
}
.ct-route__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
	max-width: 1200px;
	margin: 0 auto;
}
.ct-route__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.ct-route__eyebrow,
.ct-info__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.3px;
	color: #067A55;
}
.ct-route__title {
	margin: 0;
	font-size: 56px;
	line-height: 1.15;
	letter-spacing: -1px;
	font-weight: 700;
	color: #1A1A1A;
}
.ct-route__sub {
	max-width: 640px;
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: #4B5563;
}
.ct-route__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ct-route__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-height: 360px;
	padding: 32px;
	border: 1px solid #E6E6E6;
	border-radius: 28px;
	background: var(--tp-white);
	box-shadow: 0 12px 32px rgba(13, 51, 38, 0.1);
}
.ct-route__card--dark {
	border-color: #12171A;
	background: #12171A;
	box-shadow: none;
}
.ct-route__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #F0FBF7;
	color: #067A55;
}
.ct-route__card--dark .ct-route__icon {
	background: var(--tp-primary);
	color: var(--tp-white);
}
.ct-route__card-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: #1A1A1A;
}
.ct-route__card--dark .ct-route__card-title {
	color: var(--tp-white);
}
.ct-route__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #5B6472;
}
.ct-route__card--dark .ct-route__text {
	color: #C9D1CE;
}
.ct-route__link {
	margin-top: auto;
	font-size: 15px;
	font-weight: 600;
	color: #067A55;
	text-decoration: none;
}
.ct-route__card--dark .ct-route__link {
	color: var(--tp-primary);
}
/* L'intera card e' l'area cliccabile: ::after del link, non padding (reference_css_hitarea_padding_translate_bug) */
.ct-route__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.ct-route__link:focus-visible {
	outline: none;
}
.ct-route__link:focus-visible::after {
	outline: 3px solid var(--tp-focus);
	outline-offset: 3px;
}
.ct-route__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

/* ---- Canali diretti e dati aziendali (company-contacts.php) ---- */
.ct-info {
	padding: 96px 80px;
	background: var(--tp-white);
}
.ct-info__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}
.ct-info__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 40px;
	border-radius: 28px;
}
.ct-info__card--channels {
	background: #F0FBF7;
}
.ct-info__card--company {
	border: 1px solid #E6E6E6;
	background: var(--tp-white);
	box-shadow: 0 12px 32px rgba(13, 51, 38, 0.1);
}
.ct-info__title {
	margin: 0;
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
	color: #1A1A1A;
}
.ct-info__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #5B6472;
}
.ct-info__channels {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ct-info__channel {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ct-info__channel-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tp-white);
	color: #067A55;
}
.ct-info__channel-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	color: #5B6472;
}
.ct-info__channel-text a {
	font-size: 17px;
	font-weight: 600;
	color: #1A1A1A;
	text-decoration: none;
}
.ct-info__cta {
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	margin-top: 4px;
	padding: 0 28px;
	border: 1.5px solid var(--tp-primary);
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font-size: 16px;
	font-weight: 600;
	color: #067A55;
	text-decoration: none;
}
.ct-info__rows {
	width: 100%;
	margin: 0;
}
.ct-info__row {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid #EBEDF0;
	font-size: 15px;
	line-height: 1.5;
}
.ct-info__row dt {
	color: #5B6472;
}
.ct-info__row dd {
	margin: 0;
	font-weight: 600;
	color: #1A1A1A;
}

/* Reveal a cascata (reveal.js mette .is-in sulla sezione). Ombra e hover nella stessa transizione: una seconda
   regola con la stessa specificita' la sostituirebbe (trappola in docs/landing-cleaner.md). */
.ct-route__card,
.ct-info__card {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
}
.ct-info__card--company {
	--i: 1;
}
.ct-route.is-in .ct-route__card,
.ct-info.is-in .ct-info__card {
	opacity: 1;
	transform: none;
}
@media (hover: hover) {
	.ct-route__card:hover {
		border-color: #B3FFE0;
		box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.16);
	}
	.ct-route__card--dark:hover {
		border-color: #12171A;
	}
	.ct-route__card:hover .ct-route__arrow {
		transform: translateX(4px);
	}
	.ct-info__cta:hover {
		background: var(--tp-primary);
		color: var(--tp-white);
	}
	.ct-info__channel-text a:hover {
		color: #067A55;
	}
}

@media (max-width: 1023px) {
	.ct-route {
		padding: 64px 24px 72px;
	}
	.ct-route__inner {
		gap: 40px;
	}
	.ct-route__title {
		font-size: 40px;
	}
	.ct-route__sub {
		font-size: 17px;
	}
	.ct-route__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.ct-route__card {
		min-height: 0;
		padding: 28px;
	}
	.ct-route__link {
		margin-top: 8px;
	}
	.ct-info {
		padding: 64px 24px;
	}
	.ct-info__inner {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}
@media (max-width: 639px) {
	.ct-route {
		padding: 48px 16px 56px;
	}
	.ct-route__title {
		font-size: 34px;
	}
	.ct-route__cards {
		grid-template-columns: 1fr;
	}
	.ct-route__card {
		gap: 12px;
		padding: 24px;
		border-radius: 20px;
	}
	.ct-info {
		padding: 48px 16px;
	}
	.ct-info__card {
		padding: 28px 24px;
		border-radius: 20px;
	}
	.ct-info__title {
		font-size: 24px;
	}
	.ct-info__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.ct-info__cta {
		align-self: stretch;
		justify-content: center;
	}
}

/* =========================
   16. Chi siamo — page-about.php, Figma 6795:895 con la hero 6814:895 (TICKET-66..69)
   Classi ab-*; riusa .sg-section-head, .dc-who (Cosa facciamo, badge resi come eyebrow), .ct-info (dati e
   contatti, dati a sinistra), .cta-final. Verde del marchio solo sulle CTA e sulle zone della mappa; testo e icone
   verdi su fondo chiaro in #067A55.
   ========================= */
.ab > section {
	scroll-margin-top: var(--tp-navbar-h);
}
.ab-eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.3px;
	color: #067A55;
}
.ab-eyebrow--dark {
	color: var(--tp-primary);
}
.ab .sg-section-head h2 {
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: #1A1A1A;
}
.ab .sg-section-head__sub {
	max-width: 620px;
}
.ab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #DDF7EC;
	color: #067A55;
}

/* ---- Hero: manifesto centrato sul pannello menta, mappa dei CAP sotto (about-hero.php) ---- */
.ab-hero {
	padding: 16px 40px 24px;
}
.ab-hero__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
	padding: 96px 80px 72px;
	border-radius: 28px;
	background: #F0FBF7;
}
.ab-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 900px;
	text-align: center;
}
.ab-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid #CDEFE2;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #067A55;
}
.ab-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tp-primary);
}
.ab-hero__title {
	margin: 0;
	font-size: 66px;
	line-height: 1.04;
	letter-spacing: -1px;
	font-weight: 800;
	color: #1A1A1A;
}
.ab-hero__accent {
	color: #067A55;
}
.ab-hero__text {
	max-width: 680px;
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: #4B5563;
}
.ab-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.ab-btn {
	border-radius: var(--tp-radius-pill);
}
.ab-btn--ghost {
	border: 1.5px solid var(--tp-primary);
	background: var(--tp-white);
	color: #067A55;
}
.ab-hero__map {
	position: relative;
	width: 100%;
	max-width: 1120px;
	height: 500px;
	overflow: hidden;
	border: 1px solid #E6E6E6;
	border-radius: 28px;
	background: var(--tp-white);
	box-shadow: 0 12px 32px rgba(13, 51, 38, 0.12);
}
.ab-hero__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Solo i CAP: il contorno della citta' e' disegnato sopra e resta vuoto, altrimenti copre le zone */
.ab-hero__svg .zones-map__caps path {
	fill: #EEF2F1;
	stroke: var(--tp-white);
	stroke-width: 1;
}
.ab-hero__svg .zones-map__caps path[data-state='covered'] {
	fill: #7FDFC0;
}
.ab-hero__svg .zones-map__outline {
	fill: none;
	stroke: #D1D5DB;
	stroke-width: 1.5;
}
.ab-float {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 16px;
	background: var(--tp-white);
	box-shadow: 0 10px 28px -6px rgba(15, 23, 41, 0.16);
}
.ab-float--1 {
	top: 32px;
	right: 32px;
}
.ab-float--2 {
	right: 32px;
	bottom: 32px;
}
.ab-float__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #08875E;
	color: var(--tp-white);
}
.ab-float__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	color: #5B6472;
}
.ab-float__text strong {
	font-size: 15px;
	font-weight: 600;
	color: #1A1A1A;
}
.ab-hero__stats {
	position: absolute;
	left: 32px;
	bottom: 32px;
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 20px 28px;
	border-radius: 20px;
	background: var(--tp-white);
	box-shadow: 0 10px 28px -6px rgba(15, 23, 41, 0.16);
}
.ab-hero__stats div {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
}
.ab-hero__stats dd {
	margin: 0;
	font-size: 34px;
	line-height: 1.1;
	font-weight: 700;
	color: #1A1A1A;
}
.ab-hero__stats dt {
	font-size: 14px;
	color: #5B6472;
}

/* ---- Perche' esistiamo (about-why.php) ---- */
.ab-why {
	padding: 96px 80px;
	background: var(--tp-white);
}
.ab-why__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 64px;
	max-width: 1200px;
	margin: 0 auto;
}
.ab-why__copy {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ab-why__title {
	margin: 0;
	font-size: 38px;
	line-height: 1.2;
	letter-spacing: -0.5px;
	font-weight: 700;
	color: #1A1A1A;
}
.ab-why__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #4B5563;
}
.ab-why__closing {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1A1A1A;
}
.ab-why__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ab-why__card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 28px;
	border: 1px solid #E6E6E6;
	border-radius: 20px;
	background: var(--tp-white);
	box-shadow: 0 12px 32px rgba(13, 51, 38, 0.08);
}
.ab-why__card-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	line-height: 1.5;
	color: #5B6472;
}
.ab-why__card-text strong {
	font-size: 18px;
	font-weight: 700;
	color: #1A1A1A;
}

/* ---- Cosa facciamo (audience-cards.php): fondo menta, badge come eyebrow, due CTA primarie ---- */
.ab .dc-who {
	background: #F0FBF7;
}
.ab .dc-who__badge {
	min-width: 0;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	color: #067A55;
}
.ab .dc-who__card--dark .dc-who__badge {
	background: none;
	color: var(--tp-primary);
}

/* ---- Come lavoriamo (about-rules.php) ---- */
.ab-rules {
	padding: 96px 80px;
	background: var(--tp-white);
}
.ab-rules__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto;
}
.ab-rules__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ab-rules__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border-radius: 20px;
	background: #F0FBF7;
}
.ab-rules__card .ab-icon {
	background: #C8F2E1;
}
.ab-rules__title {
	margin: 4px 0 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: #1A1A1A;
}
.ab-rules__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #5B6472;
}

/* ---- Il team (about-team.php) ---- */
.ab-team {
	padding: 96px 80px;
	background: var(--tp-white);
}
.ab-team__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}
.ab-team__inner .sg-section-head {
	margin-bottom: 24px;
}
.ab-team__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ab-team__card {
	display: flex;
	gap: 28px;
}
.ab-team__card--big {
	align-items: center;
	padding: 20px;
	border: 1px solid #E6E6E6;
	border-radius: 28px;
	background: var(--tp-white);
	box-shadow: 0 12px 32px rgba(13, 51, 38, 0.08);
}
.ab-team__card--small {
	align-items: flex-start;
	gap: 20px;
	padding: 28px;
	border-radius: 24px;
	background: #F0FBF7;
}
.ab-team__photo {
	flex: none;
	width: 220px;
	height: 264px;
	border-radius: 20px;
	object-fit: cover;
}
.ab-team__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #C8F2E1;
	font-size: 22px;
	font-weight: 700;
	color: #067A55;
}
.ab-team__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ab-team__name {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: #1A1A1A;
}
.ab-team__card--small .ab-team__name {
	font-size: 18px;
}
.ab-team__role {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #067A55;
}
.ab-team__bio {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #4B5563;
}

/* ---- La nostra storia (about-timeline.php): linea con un cerchio per tappa, l'ultima piena ---- */
.ab-story {
	padding: 96px 80px;
	background: #12171A;
}
.ab-story__inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
	max-width: 1200px;
	margin: 0 auto;
}
.ab-story .sg-section-head h2 {
	color: var(--tp-white);
}
.ab-story__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ab-story__steps::before {
	content: '';
	position: absolute;
	top: 7px;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(0, 200, 150, 0.4);
}
.ab-story__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ab-story__dot {
	width: 14px;
	height: 14px;
	margin-bottom: 12px;
	border: 2px solid var(--tp-primary);
	border-radius: 50%;
	background: #12171A;
}
.ab-story__step.is-current .ab-story__dot {
	background: var(--tp-primary);
}
.ab-story__date {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--tp-primary);
}
.ab-story__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--tp-white);
}
.ab-story__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #AEB8B5;
}

/* ---- Dati aziendali e contatti (company-contacts.php con order 'company') ---- */
.ct-info--company-first .ct-info__card--company {
	order: -1;
	--i: 0;
}
.ct-info--company-first .ct-info__card--channels {
	--i: 1;
}

/* Reveal a cascata (reveal.js mette .is-in sulla sezione); ombra e hover nella stessa transizione. */
.ab-why__card,
.ab-rules__card,
.ab-team__card,
.ab-story__step {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
	transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s;
}
.ab-why.is-in .ab-why__card,
.ab-rules.is-in .ab-rules__card,
.ab-team.is-in .ab-team__card,
.ab-story.is-in .ab-story__step {
	opacity: 1;
	transform: none;
}

@media (max-width: 1023px) {
	.ab-hero {
		padding: 8px 16px 16px;
	}
	.ab-hero__panel {
		gap: 40px;
		padding: 56px 24px 24px;
		border-radius: 24px;
	}
	.ab-hero__title {
		font-size: 46px;
	}
	.ab-hero__text {
		font-size: 17px;
	}
	.ab-hero__map {
		height: 440px;
		border-radius: 20px;
	}
	.ab-why,
	.ab-rules,
	.ab-team,
	.ab-story {
		padding: 64px 24px;
	}
	.ab .dc-who {
		padding: 64px 24px;
	}
	.ab-why__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.ab .sg-section-head h2,
	.ab-why__title {
		font-size: 32px;
	}
	.ab-rules__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.ab-team__row {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.ab-story__steps {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-left: 32px;
	}
	.ab-story__steps::before {
		top: 4px;
		bottom: 4px;
		left: 6px;
		right: auto;
		width: 1px;
		height: auto;
	}
	.ab-story__dot {
		position: absolute;
		top: 2px;
		left: -32px;
		margin: 0;
	}
}
@media (max-width: 639px) {
	.ab-hero__panel {
		padding: 44px 16px 16px;
	}
	.ab-hero__title {
		font-size: 34px;
	}
	.ab-hero__text {
		font-size: 16px;
	}
	.ab-hero__ctas {
		flex-direction: column;
		align-self: stretch;
	}
	.ab-hero__ctas .ab-btn {
		justify-content: center;
	}
	.ab-hero__map {
		height: 380px;
	}
	.ab-float {
		padding: 10px 12px;
		gap: 10px;
	}
	.ab-float--1,
	.ab-float--2 {
		left: 12px;
		right: 12px;
	}
	.ab-float--1 {
		top: 12px;
	}
	.ab-float--2 {
		display: none;
	}
	.ab-hero__stats {
		left: 12px;
		bottom: 12px;
		gap: 24px;
		padding: 14px 18px;
	}
	.ab-hero__stats dd {
		font-size: 26px;
	}
	.ab-why,
	.ab-rules,
	.ab-team,
	.ab-story,
	.ab .dc-who {
		padding: 48px 16px;
	}
	.ab .sg-section-head h2,
	.ab-why__title {
		font-size: 28px;
	}
	.ab-why__card {
		padding: 20px;
	}
	.ab-rules__cards {
		grid-template-columns: 1fr;
	}
	.ab-team__card--big {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.ab-team__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 5 / 6;
	}
	.ab-team__card--small {
		padding: 24px 20px;
	}
}

/* =========================
   17. Pagine legali — page-legal.php (/privacy/, /terms/)
   Colonna leggibile da 820px; policy iubenda in iframe come sulla SPA di produzione; tabelle scorrevoli su mobile.
   ========================= */
.lg {
	padding: 64px 24px 96px;
	background: var(--tp-white);
}
.lg__inner {
	max-width: 820px;
	margin: 0 auto;
}
.lg__title {
	margin: 0 0 32px;
	font-size: 44px;
	line-height: 1.15;
	letter-spacing: -0.5px;
	font-weight: 700;
	color: #1A1A1A;
}
.lg__iubenda {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 600px;
	border: 0;
}
.lg__fallback {
	margin: 12px 0 0;
	font-size: 14px;
	color: #5B6472;
}
.lg__fallback a,
.lg__content a {
	color: #067A55;
}
.lg__content {
	font-size: 16px;
	line-height: 1.7;
	color: #374151;
}
.lg__content h2 {
	margin: 48px 0 12px;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 700;
	color: #1A1A1A;
}
.lg__content h3 {
	margin: 28px 0 8px;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 600;
	color: #1A1A1A;
}
.lg__content p,
.lg__content ul,
.lg__content ol {
	margin: 0 0 14px;
}
.lg__content ul,
.lg__content ol {
	padding-left: 22px;
}
.lg__content li + li {
	margin-top: 6px;
}
.lg__content .legal__updated {
	font-size: 14px;
	color: #5B6472;
}
.legal__table {
	overflow-x: auto;
	margin: 0 0 16px;
}
.legal__table table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 14px;
}
.legal__table th,
.legal__table td {
	padding: 10px 14px;
	border-bottom: 1px solid #EBEDF0;
	text-align: left;
	vertical-align: top;
}
.legal__table th {
	background: #F6FBF9;
	font-weight: 600;
	color: #1A1A1A;
}
@media (max-width: 639px) {
	.lg {
		padding: 40px 16px 64px;
	}
	.lg__title {
		font-size: 32px;
	}
	.lg__content h2 {
		font-size: 21px;
	}
}

/* =========================
   18. Blog — home.php, category.php, single.php, template-parts/blog-index.php e post-card.php
   Figma 6824:903 (indice), 6827:937 (articolo), card 6824:895 (SPEC-blog, TICKET-70..72). Classi bl-*; riusa
   .cta-final. Testo dell'articolo in .bl-prose con i blocchi tp-checklist e tp-consiglio dall'editor.
   ========================= */
.bl > section,
.bl h2[id] {
	scroll-margin-top: calc(var(--tp-navbar-h) + 16px);
}

/* ---- Hero e chip delle categorie ---- */
.bl-hero {
	padding: 88px 80px 64px;
	background: #F0FBF7;
}
.bl-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.bl-hero__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.3px;
	color: #067A55;
}
.bl-hero__title {
	margin: 0;
	font-size: 56px;
	line-height: 1.08;
	letter-spacing: -1px;
	font-weight: 800;
	color: #1A1A1A;
}
.bl-hero__sub {
	max-width: 640px;
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: #4B5563;
}
.bl-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding-top: 12px;
}
.bl-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid #D9E8E2;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font-size: 14px;
	font-weight: 500;
	color: #374151;
	text-decoration: none;
}
.bl-chip.is-active {
	border-color: #067A55;
	background: #067A55;
	font-weight: 600;
	color: var(--tp-white);
}

/* ---- Card degli articoli (post-card.php) ---- */
.bl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bl-card__cover {
	overflow: hidden;
	aspect-ratio: 5 / 3;
	border-radius: 20px;
	background: #F0FBF7;
}
.bl-card__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.bl-card__cover .bl-card__placeholder {
	object-fit: contain;
	padding: 12%;
}
.bl-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.bl-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.bl-tag {
	padding: 4px 10px;
	border-radius: var(--tp-radius-pill);
	background: #DDF7EC;
	font-size: 12px;
	font-weight: 600;
	color: #067A55;
}
.bl-tag--dark {
	background: #12171A;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	font-size: 11px;
	color: var(--tp-white);
}
.bl-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: #1A1A1A;
}
.bl-card__title a {
	color: inherit;
	text-decoration: none;
}
/* Tutta la card e' l'area cliccabile: ::after del link, non padding */
.bl-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}
.bl-card__title a:focus-visible {
	outline: none;
}
.bl-card__title a:focus-visible::after {
	outline: 3px solid var(--tp-focus);
	outline-offset: 4px;
	border-radius: 20px;
}
.bl-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #5B6472;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.bl-card__meta {
	margin: 0;
	font-size: 13px;
	color: #6B7280;
}
.bl-card__more {
	font-size: 16px;
	font-weight: 600;
	color: #067A55;
}
@media (hover: hover) {
	.bl-card:hover .bl-card__cover img {
		transform: scale(1.03);
	}
	.bl-card:hover .bl-card__title {
		color: #067A55;
	}
}

/* ---- Indice: articolo in evidenza, griglia, paginazione, stato vuoto (blog-index.php) ---- */
.bl-featured {
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px 0 24px;
}
.bl-card--featured {
	flex-direction: row;
	align-items: center;
	gap: 48px;
	padding: 20px 48px 20px 20px;
	border: 1px solid #E6E6E6;
	border-radius: 28px;
	background: var(--tp-white);
	box-shadow: 0 12px 32px rgba(13, 51, 38, 0.08);
}
.bl-card--featured .bl-card__cover {
	flex: none;
	width: 600px;
	aspect-ratio: 3 / 2;
}
.bl-card--featured .bl-card__body {
	gap: 16px;
}
.bl-card--featured .bl-card__title {
	font-size: 32px;
	line-height: 1.25;
}
.bl-card--featured .bl-card__excerpt {
	font-size: 17px;
	line-height: 1.55;
	color: #4B5563;
}
.bl-list,
.bl-related {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 0 72px;
}
.bl-list__title {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	color: #1A1A1A;
}
.bl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 24px;
}
.bl-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0 24px 96px;
}
.bl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #D9E8E2;
	border-radius: var(--tp-radius-pill);
	font-size: 15px;
	font-weight: 600;
	color: #374151;
	text-decoration: none;
}
.bl-pagination .page-numbers.current {
	border-color: #067A55;
	background: #067A55;
	color: var(--tp-white);
}
.bl-pagination .page-numbers.dots {
	border: 0;
}
.bl-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 640px;
	margin: 0 auto;
	padding: 80px 24px 96px;
	text-align: center;
}
.bl-empty__title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	color: #1A1A1A;
}
.bl-empty__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #4B5563;
}
.bl-empty__cta {
	margin-top: 12px;
	border-radius: var(--tp-radius-pill);
}

/* ---- Articolo (single.php) ---- */
.bl-post__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: 1040px;
	margin: 0 auto;
	padding: 56px 0 40px;
}
.bl-crumbs {
	display: flex;
	gap: 8px;
	font-size: 14px;
	color: #6B7280;
}
.bl-crumbs a {
	color: #6B7280;
	text-decoration: none;
}
.bl-crumbs a:first-child {
	font-weight: 500;
	color: #067A55;
}
.bl-post__title {
	max-width: 900px;
	margin: 0;
	font-size: 48px;
	line-height: 1.12;
	letter-spacing: -1px;
	font-weight: 800;
	color: #1A1A1A;
}
.bl-post__lead {
	max-width: 820px;
	margin: 0;
	font-size: 19px;
	line-height: 1.55;
	color: #4B5563;
}
.bl-author {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px;
	border-radius: 20px;
	background: #F6FBF9;
}
.bl-author--small {
	gap: 12px;
	padding: 0;
	background: none;
}
.bl-author__avatar {
	flex: none;
	width: 56px;
	height: 56px;
	padding: 6px;
	border-radius: 50%;
	background: #DDF7EC;
	object-fit: contain;
}
.bl-author--small .bl-author__avatar {
	width: 40px;
	height: 40px;
	padding: 4px;
}
.bl-author p {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #5B6472;
}
.bl-author strong {
	font-size: 15px;
	font-weight: 600;
	color: #1A1A1A;
}
.bl-author--small span {
	font-size: 13px;
	color: #6B7280;
}
.bl-author a {
	color: #067A55;
}
.bl-post__cover {
	max-width: 1040px;
	margin: 0 auto 64px;
}
.bl-post__cover img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	border-radius: 28px;
	object-fit: cover;
}
.bl-post__body {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	align-items: start;
	gap: 64px;
	max-width: 1040px;
	margin: 0 auto;
	padding-bottom: 80px;
}
.bl-post__body--single {
	grid-template-columns: minmax(0, 720px);
	justify-content: center;
}
.bl-toc {
	position: sticky;
	top: calc(var(--tp-navbar-h) + 24px);
	padding: 24px;
	border-radius: 20px;
	background: #F6FBF9;
}
.bl-toc__title {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #067A55;
}
.bl-toc ol {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bl-toc a {
	font-size: 14px;
	line-height: 1.4;
	color: #4B5563;
	text-decoration: none;
}
.bl-toc a:hover {
	color: #067A55;
}
.bl-post__text {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}
.bl-prose {
	font-size: 17px;
	line-height: 1.7;
	color: #374151;
}
.bl-prose > :first-child {
	margin-top: 0;
}
.bl-prose h2 {
	margin: 48px 0 16px;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: #1A1A1A;
}
.bl-prose h3 {
	margin: 28px 0 8px;
	font-size: 19px;
	line-height: 1.4;
	font-weight: 600;
	color: #1A1A1A;
}
.bl-prose p,
.bl-prose ul,
.bl-prose ol {
	margin: 0 0 18px;
}
.bl-prose ul,
.bl-prose ol {
	padding-left: 24px;
}
.bl-prose li + li {
	margin-top: 6px;
}
.bl-prose a {
	color: #067A55;
}
.bl-prose img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}
.bl-prose table {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 15px;
}
.bl-prose th,
.bl-prose td {
	padding: 10px 14px;
	border-bottom: 1px solid #EBEDF0;
	text-align: left;
}
/* Checklist: un blocco (gruppo o elenco) con classe tp-checklist; le voci con la spunta del Figma */
.bl-prose .tp-checklist {
	margin: 0 0 24px;
	padding: 28px;
	border: 1px solid #E6E6E6;
	border-radius: 20px;
	background: var(--tp-white);
	box-shadow: 0 12px 32px rgba(13, 51, 38, 0.08);
}
.bl-prose .tp-checklist h3,
.bl-prose .tp-checklist p strong:only-child {
	display: block;
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	color: #1A1A1A;
}
.bl-prose .tp-checklist * + h3 {
	margin-top: 20px;
}
.bl-prose .tp-checklist ul,
.bl-prose ul.tp-checklist {
	padding-left: 0;
	list-style: none;
}
.bl-prose .tp-checklist li {
	position: relative;
	padding-left: 34px;
	font-size: 16px;
	line-height: 1.5;
}
.bl-prose .tp-checklist li::before {
	content: '';
	position: absolute;
	top: 1px;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #DDF7EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m6.5 11.3 3 3 6-6.3' fill='none' stroke='%23067A55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.bl-prose .tp-checklist li + li {
	margin-top: 12px;
}
.bl-prose .tp-checklist > :last-child,
.bl-prose .tp-checklist ul:last-child {
	margin-bottom: 0;
}
/* Consiglio: blocco con classe tp-consiglio, barra verde a sinistra */
.bl-prose .tp-consiglio {
	margin: 0 0 24px;
	padding: 22px 24px;
	border-left: 4px solid var(--tp-primary);
	border-radius: 16px;
	background: #F0FBF7;
	font-size: 16px;
	line-height: 1.55;
}
.bl-prose .tp-consiglio > :last-child {
	margin-bottom: 0;
}
.bl-prose .tp-consiglio strong:first-child {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
	color: #067A55;
}
/* Box del servizio collegato (tp_blog_service_box) */
.bl-service {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 32px;
	border-radius: 24px;
	background: #12171A;
}
.bl-prose .bl-service {
	margin: 8px 0 32px;
}
.bl-service__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-width: 0;
}
.bl-service__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--tp-primary);
}
.bl-service__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--tp-white);
}
.bl-service__sub {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #C9D1CE;
}
.bl-service__cta {
	flex: none;
	border-radius: var(--tp-radius-pill);
}
.bl-related {
	max-width: none;
	padding: 80px max(120px, calc((100% - 1200px) / 2)) 96px;
	background: #F6FBF9;
}

@media (max-width: 1023px) {
	.bl-hero {
		padding: 56px 24px 40px;
	}
	.bl-hero__title {
		font-size: 42px;
	}
	.bl-chips {
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-self: stretch;
		overflow-x: auto;
		margin: 0 -24px;
		padding: 12px 24px 4px;
		scrollbar-width: none;
	}
	.bl-chip {
		flex: none;
	}
	.bl-featured,
	.bl-list,
	.bl-related {
		padding-left: 24px;
		padding-right: 24px;
	}
	.bl-featured {
		padding-top: 48px;
	}
	.bl-card--featured {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 16px 16px 24px;
	}
	.bl-card--featured .bl-card__cover {
		width: 100%;
	}
	.bl-card--featured .bl-card__body {
		padding: 0 8px;
	}
	.bl-card--featured .bl-card__title {
		font-size: 26px;
	}
	.bl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 20px;
	}
	.bl-post__head,
	.bl-post__body {
		padding-left: 24px;
		padding-right: 24px;
	}
	.bl-post__title {
		font-size: 38px;
	}
	.bl-post__cover {
		margin: 0 24px 40px;
	}
	.bl-post__cover img {
		border-radius: 20px;
	}
	.bl-post__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.bl-toc {
		position: static;
	}
	.bl-service {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media (max-width: 639px) {
	.bl-hero {
		padding: 40px 16px 32px;
	}
	.bl-hero__title {
		font-size: 34px;
	}
	.bl-hero__sub {
		font-size: 16px;
	}
	.bl-chips {
		margin: 0 -16px;
		padding: 12px 16px 4px;
	}
	.bl-featured,
	.bl-list,
	.bl-related {
		padding-left: 16px;
		padding-right: 16px;
	}
	.bl-list,
	.bl-related {
		padding-top: 40px;
		padding-bottom: 56px;
	}
	.bl-list__title {
		font-size: 24px;
	}
	.bl-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.bl-card--featured .bl-card__title {
		font-size: 22px;
	}
	.bl-card--featured .bl-card__excerpt {
		font-size: 16px;
	}
	.bl-post__head,
	.bl-post__body {
		padding-left: 16px;
		padding-right: 16px;
	}
	.bl-post__head {
		padding-top: 32px;
		padding-bottom: 28px;
	}
	.bl-post__title {
		font-size: 30px;
	}
	.bl-post__lead {
		font-size: 17px;
	}
	.bl-post__cover {
		margin: 0 16px 32px;
	}
	.bl-prose {
		font-size: 16px;
	}
	.bl-prose h2 {
		margin-top: 36px;
		font-size: 23px;
	}
	.bl-prose .tp-checklist {
		padding: 20px;
	}
	.bl-service {
		padding: 24px 20px;
	}
	.bl-service__cta {
		align-self: stretch;
		justify-content: center;
	}
	.bl-pagination .prev span,
	.bl-pagination .next span {
		display: none;
	}
}

/* =========================
   19. Landing zanzare — page-landing-zanzare.php, Figma 4849:884 (TICKET-73..76)
   main.sgrosso.b2b.zz: eredita hero, trust strip, tab, passi, recensioni, FAQ e form finale di Sgrosso e B2B.
   Classi zz-* per le tre sezioni nuove; le aggiunte al form (coupon, Chiama/WhatsApp, urgenza) valgono per il
   componente lead-form-b2b e non cambiano la B2B, che non le usa.
   ========================= */
.lead-form__coupon {
	align-self: flex-start;
	margin: 0;
	padding: 6px 12px;
	border-radius: var(--tp-radius-pill);
	background: #DDF7EC;
	font-size: 13px;
	font-weight: 600;
	color: #067A55;
}
.lead-form__row--single {
	grid-template-columns: 1fr;
}
/* Le azioni sono una riga flex (Indietro + Invia nel form a tre passi): Chiama/WhatsApp vanno a capo, a tutta larghezza */
.lead-form__actions:has(.lead-form__contact) {
	flex-wrap: wrap;
}
.lead-form__actions:has(.lead-form__contact) .lead-form__submit {
	flex: 1 0 100%;
}
.lead-form__contact {
	display: grid;
	flex: 1 0 100%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.lead-form__call,
.lead-form__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	border: 1.5px solid #D9E8E2;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	font-size: 15px;
	font-weight: 600;
	color: #1A1A1A;
	text-decoration: none;
}
.lead-form__wa {
	border-color: #25D366;
	background: #25D366;
	color: #0B3D1E;
}
.lead-form__contact-icon {
	width: 16px;
	height: 16px;
}
.lead-form__urgency {
	margin: 12px 0 0;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	color: #B45309;
}

.zz .sg-trust__bar li {
	padding: 0 16px;
}
.zz .b2b-why {
	background: var(--tp-white);
}
.zz .b2b-why__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---- Zanzara tigre (zanzare-tigre.php) ---- */
.zz-tiger {
	padding: 88px 80px;
	background: #0B1220;
}
.zz-tiger__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: 64px;
	max-width: 1200px;
	margin: 0 auto;
}
.zz-tiger__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.zz-tiger__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.3px;
	color: var(--tp-primary);
}
.zz-tiger__title {
	margin: 0;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -0.8px;
	font-weight: 800;
	color: var(--tp-white);
}
.zz-tiger__text {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: #C9D1CE;
}
.zz-tiger__check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--tp-white);
}
.zz-tiger__check-icon,
.zz-tiger__chip-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--tp-primary);
}
.zz-tiger__box {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.04);
}
.zz-tiger__box-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--tp-white);
}
.zz-tiger__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.zz-tiger__chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--tp-radius-pill);
	background: rgba(0, 200, 150, 0.12);
	font-size: 14px;
	font-weight: 500;
	color: var(--tp-white);
}
.zz-tiger__note {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #AEB8B5;
}

/* ---- Cosa facciamo (service-cards.php) ---- */
.zz-services {
	padding: 88px 80px;
	background: #F6FBF9;
}
.zz-services__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
}
.zz-services__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.zz-services__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 12px 22px;
	border: 1px solid #E6E6E6;
	border-radius: 22px;
	background: var(--tp-white);
}
.zz-services__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	margin-bottom: 6px;
	border-radius: 14px;
	object-fit: cover;
}
.zz-services__title {
	margin: 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: #1A1A1A;
}
.zz-services__text {
	margin: 0 8px;
	font-size: 15px;
	line-height: 1.5;
	color: #5B6472;
}
.zz-services__banner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 24px 28px;
	border-radius: 22px;
	background: #00C896;
}
.zz-services__banner-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
}
.zz-services__banner-check {
	width: 20px;
	height: 20px;
	color: var(--tp-white);
}
.zz-services__banner-text {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #053B2A;
}
.zz-services__banner-text p {
	margin: 0;
}
.zz-services__banner-title {
	margin-bottom: 4px !important;
	font-size: 18px;
	font-weight: 700;
}
.zz-services__banner-cta {
	flex: none;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
	color: #067A55;
}

/* ---- Prezzi (pricing-tiers.php) ---- */
.zz-price {
	padding: 88px 80px;
	background: var(--tp-white);
}
.zz-price__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	max-width: 960px;
	margin: 0 auto;
}
.zz-price__tiers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}
.zz-price__tier {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	border: 1px solid #E6E6E6;
	border-radius: 24px;
	background: var(--tp-white);
}
.zz-price__tier.is-highlighted {
	border: 2px solid var(--tp-primary);
	box-shadow: 0 16px 36px -10px rgba(0, 200, 150, 0.28);
}
.zz-price__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #067A55;
}
.zz-price__badge {
	padding: 4px 10px;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-primary);
	color: var(--tp-white);
}
.zz-price__amount {
	margin: 0;
	font-size: 15px;
	color: #5B6472;
}
.zz-price__amount strong {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.8px;
	color: #1A1A1A;
}
.zz-price__text {
	margin: 0;
	font-size: 15px;
	color: #4B5563;
}
.zz-price__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}
.zz-price__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.45;
	color: #1A1A1A;
}
.zz-price__check {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	color: #067A55;
}
.zz-price__cta {
	margin-top: auto;
	border-radius: var(--tp-radius-pill);
}
.zz-price__note {
	margin: 0;
	font-size: 14px;
	color: #6B7280;
}

/* Ingressi a cascata (reveal.js) */
.zz-services__card,
.zz-price__tier {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--i, 0) * 70ms);
}
.zz-services.is-in .zz-services__card,
.zz-price.is-in .zz-price__tier {
	opacity: 1;
	transform: none;
}

@media (max-width: 1023px) {
	.zz .b2b-why__grid,
	.zz-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.zz-tiger,
	.zz-services,
	.zz-price {
		padding: 64px 24px;
	}
	.zz-tiger__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.zz-tiger__title {
		font-size: 32px;
	}
	.zz-services__banner {
		flex-direction: column;
		align-items: flex-start;
	}
	.zz-price__tiers {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 639px) {
	.zz .b2b-why__grid,
	.zz-services__grid {
		grid-template-columns: 1fr;
	}
	.zz-tiger,
	.zz-services,
	.zz-price {
		padding: 48px 16px;
	}
	.zz-tiger__title {
		font-size: 28px;
	}
	.zz-tiger__box {
		padding: 22px 18px;
	}
	.zz-price__tier {
		padding: 24px 20px;
	}
	.zz-price__amount strong {
		font-size: 34px;
	}
	.zz-services__banner-cta {
		align-self: stretch;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zones-map__caps path { transition: none; }
	/* Diventa cleaner: niente ingressi (lo script non aggiunge .dc--motion), niente ondeggiamento, inclinazione,
	   impulso ne' spostamenti al passaggio del mouse */
	.dc *,
	.dc *::-webkit-slider-thumb {
		transition: none !important;
		animation: none !important;
	}
	.dc .dc-peek img,
	.dc .dc-hero__phone,
	.dc .dc-arrow {
		transform: none !important;
	}
	.hiw-scrollcue {
		animation: none;
	}
	.services *,
	.services *::after {
		transition: none !important;
	}
	.services__titles,
	.services__proof,
	.services__tab,
	.services__cards {
		opacity: 1;
		transform: none;
	}
	.services__mascot {
		opacity: 1;
		transform: rotate(17.42deg);
	}
	.reviews__pause { display: none; }
	.reviews__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		gap: 28px;
		padding-right: 20px;
	}
	.reviews__set {
		flex-wrap: wrap;
	}
	.reviews__set[aria-hidden="true"] {
		display: none;
	}
	.reviews__badge,
	.reviews__title,
	.review-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.zones__title,
	.zones__desc,
	.zones__coming-label,
	.zones__map,
	.zones__city {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.zones__overlay {
		opacity: var(--zones-op) !important;
	}
	.zones__overlay,
	.zones__radar {
		animation: none !important;
	}
	.faq__aside,
	.faq__item,
	.faq__a,
	.faq__a-inner,
	.faq__toggle {
		transition: none !important;
		opacity: 1;
		transform: none;
	}
	.cta-final__card,
	.cta-final__art,
	.cta-final__button,
	.cta-final__arrow {
		opacity: 1;
		transform: none !important;
		transition: none !important;
	}
	.site-footer__col,
	.site-footer__bottom {
		opacity: 1;
		transform: none;
		transition: none !important;
	}
	.verified__step,
	.hiw-static__step,
	.verified__cta,
	.verified__arrow {
		opacity: 1;
		transform: none !important;
		transition: none !important;
	}
	.b2b-why__card,
	.b2b-works__item {
		opacity: 1;
		transform: none;
		transition: none !important;
	}
	.ct-route__card,
	.ct-info__card,
	.ct-route__arrow {
		opacity: 1;
		transform: none !important;
		transition: none !important;
	}
	.ab-why__card,
	.ab-rules__card,
	.ab-team__card,
	.ab-story__step {
		opacity: 1;
		transform: none !important;
		transition: none !important;
	}
	.bl-card__cover img {
		transition: none;
	}
	.zz-services__card,
	.zz-price__tier {
		opacity: 1;
		transform: none !important;
		transition: none !important;
	}
}