/*
 * ================================================================
 * IGM 2026 – homepage
 * File: wp-content/themes/Divi-Child/igm-2026-home.css
 * Loaded only on the homepage (functions.php), after igm-2026.css.
 * Colours, fonts, buttons and shared parts are in igm-2026.css ([00]–[06]).
 * Edit in WordPress: Appearance -> Theme File Editor -> igm-2026-home.css
 * All comments in English.
 * ================================================================
 */

/* settings of this page only */
:root {
	--igm-hero-mock-h: 483;        /* visible height of the hero illustration (of 650) */
	--igm-hero-ovale: 270px;       /* how much of the white oval shows at the hero bottom */
	--igm-trust-speed: 22s;        /* phones: time of one full loop of the moving reasons strip */
	--igm-step-time: 4.5s;         /* Come si inizia: how long each step picture plays (also used by igm-2026.js) */
}

/* ================================================================
 * [10] HOMEPAGE – sections of the new homepage, top to bottom
 * Each section: a Divi section with class "igm-scope igm-<name>",
 * one full-width row, one Code module with the HTML.
 * [10.0] app illustration (shared)   [10.1] hero   [10.2] trust bar
 * [10.3] text + picture sections, Calendario   [10.4] Promemoria WhatsApp
 * [10.5] Come si inizia (steps)   [10.6] Opinioni (video)   [10.7] Prezzi (calculator)
 * [10.8] Cassa e registratori RCH   [10.9] FAQ (style in igm-2026.css [06.2])   [10.10] Chiusura (last call to action)
 * ================================================================ */

/* [10.0] app illustration: drawn at 1080 x 650 px and scaled to the box
 * width by igm-2026.js (data-igm-mock). Before the script runs it is
 * simply cut off, the box size never changes (no layout shift). */
.igm-mock {
	position: relative;
	width: 1080px;
	height: 650px;
	transform: scale(var(--igm-mock-s, 1));
	transform-origin: top left;
	font-family: var(--igm-font);
	color: var(--igm-inchiostro);
	text-align: left;
	line-height: normal;
}
.igm-mock * {
	box-sizing: border-box;
}

/* [10.0] booking animation inside the illustration (Calendario section):
 * cursor clicks, a ring appears, a new appointment pops in. 9 s loop. */
.igm-mock__cur {
	animation: igm-am-cur 9s infinite;
}
.igm-mock__ring {
	opacity: 0;
	animation: igm-am-ring 9s infinite;
}
.igm-mock__new {
	opacity: 0;
	animation: igm-am-new 9s infinite;
}
@keyframes igm-am-cur {
	0% { opacity: 0; transform: translate(150px, 110px); }
	10% { opacity: 1; transform: translate(150px, 110px); }
	32% { opacity: 1; transform: translate(0, 0); }
	35% { transform: translate(0, 0) scale(.85); }
	38% { transform: translate(0, 0) scale(1); }
	55% { opacity: 1; transform: translate(0, 0); }
	66%, 100% { opacity: 0; transform: translate(70px, 60px); }
}
@keyframes igm-am-ring {
	0%, 34% { opacity: 0; transform: scale(.3); }
	36% { opacity: .45; transform: scale(.6); }
	52%, 100% { opacity: 0; transform: scale(2.8); }
}
@keyframes igm-am-new {
	0%, 37% { opacity: 0; transform: scale(.85); }
	43% { opacity: 1; transform: scale(1.04); }
	47%, 88% { opacity: 1; transform: scale(1); }
	95%, 100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.igm-mock__new {
		animation: none;
		opacity: 1;
	}
	.igm-mock__cur,
	.igm-mock__ring {
		display: none;
	}
}

/* [10.1] hero */
.et_pb_section.igm-hero {
	position: relative;
	padding: 0;
	background: linear-gradient(180deg, var(--igm-bianco) 0%, #F6EEF9 100%);
	overflow: hidden;
}
.igm-hero::before {
	/* big white oval behind the bottom of the illustration */
	content: "";
	position: absolute;
	left: -25%;
	right: -25%;
	bottom: calc(var(--igm-hero-ovale) - 900px);
	height: 900px;
	border-radius: 50%;
	background: var(--igm-bianco);
}
.igm-hero .et_pb_row {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
.igm-hero__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: var(--igm-contenuto);
	margin: 0 auto;
	padding: 72px var(--igm-margine) 0;
	text-align: center;
}
.igm-hero__badge {
	display: inline-block;
	margin: 0 0 22px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--igm-badge-bg);
	color: var(--igm-viola-scuro);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.igm-hero__title {
	max-width: 900px;
	margin: 0 0 22px;
	padding: 0;
	font-family: var(--igm-font);
	font-size: var(--igm-h1-size);
	line-height: 1.02;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--igm-inchiostro);
	text-wrap: balance;
}
.igm-hero__lead {
	max-width: 640px;
	margin: 0 0 32px;
	padding: 0;
	font-size: 20px;
	line-height: 1.55;
	color: var(--igm-testo);
}
.igm-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
}
.igm-hero__note {
	margin: 0 0 56px;
	padding: 0;
	font-size: 14px;
	color: var(--igm-testo);
}
.igm-hero__mock {
	position: relative;
	width: 100%;
	max-width: 1080px;
	aspect-ratio: 1080 / var(--igm-hero-mock-h);
	min-height: 0; /* keep the ratio even though the drawing inside is taller */
	padding: 0;
	/* cut only the bottom: the soft shadow stays visible on the sides */
	clip-path: inset(-120px -120px 0 -120px);
}

@media (max-width: 767px) {
	.igm-hero__in {
		padding-top: 40px;
	}
	.igm-hero__badge {
		margin-bottom: 18px;
		font-size: 12px;
	}
	.igm-hero__title {
		margin-bottom: 16px;
		/* phones: "Software gestionale" fits on one line, so the title takes 3 lines, not 4 */
		font-size: clamp(32px, 9.6vw, 40px);
		line-height: 1.05;
	}
	.igm-hero__lead {
		margin-bottom: 24px;
		font-size: 17px;
	}
	.igm-hero__cta {
		flex-direction: column;
		width: 100%;
		gap: 10px;
		margin-bottom: 12px;
	}
	.igm-hero__cta .igm-btn {
		width: 100%;
		height: 54px;
	}
	.igm-hero__note {
		margin-bottom: 36px;
		font-size: 13px;
	}
	.igm-hero {
		--igm-hero-mock-h: 650;
		--igm-hero-ovale: 130px;
	}
	.igm-hero::before {
		left: -40%;
		right: -40%;
		height: 500px;
		bottom: calc(var(--igm-hero-ovale) - 500px);
	}
	.igm-hero__mock {
		margin-bottom: 40px;
		clip-path: none;
	}
}

/* [10.2] trust bar (4 short reasons under the hero) */
.et_pb_section.igm-trust {
	padding: 36px var(--igm-margine);
	background: var(--igm-bianco);
	border-bottom: 1px solid #EAE3EF;
}
.igm-trust .et_pb_row {
	width: 100%;
	max-width: var(--igm-contenuto);
	margin: 0 auto;
	padding: 0;
}
.igm-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 48px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--igm-inchiostro);
}
.igm-trust__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
}
.igm-trust__item svg {
	flex: none;
}
/* the copy of the list is only used by the moving strip on phones */
.igm-trust__dup {
	display: none;
}
@media (max-width: 640px) {
	/* phones: the 4 reasons slide sideways in an endless loop
	 * (two identical lists one after the other, moved by half) */
	.et_pb_section.igm-trust {
		padding-left: 0;
		padding-right: 0;
		overflow: hidden;
	}
	.igm-trust .et_pb_row {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}
	.igm-trust__track {
		display: flex;
		width: max-content;
		animation: igm-trust-loop var(--igm-trust-speed) linear infinite;
	}
	.et_pb_section.igm-trust .igm-trust__track .igm-trust__list {
		flex-wrap: nowrap;
		gap: 40px;
		padding-right: 40px; /* same space after the last reason as between the others */
		white-space: nowrap;
	}
	.igm-trust__dup {
		display: flex;
	}
}
@keyframes igm-trust-loop {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
	/* no movement: one reason per line instead */
	.igm-trust__track {
		width: auto;
		animation: none;
		padding: 0 var(--igm-margine);
	}
	.igm-trust .et_pb_row {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.et_pb_section.igm-trust .igm-trust__track .igm-trust__list {
		flex-direction: column;
		padding-right: 0;
		align-items: flex-start;
		gap: 14px;
		white-space: normal;
	}
	.igm-trust__dup {
		display: none;
	}
}

/* [10.3] Calendario: the app calendar in a lavender panel, with the booking animation */
.igm-cal__panel {
	padding: 40px 0 0 40px;
	border-radius: 24px;
	background: var(--igm-lavanda);
	overflow: hidden;
}
.igm-cal__win {
	position: relative;
	height: 440px;
	overflow: hidden;
	border-radius: 16px 0 0 0;
	background: var(--igm-bianco);
	box-shadow: 0 12px 40px rgba(94, 42, 114, 0.12);
}
.igm-cal__pos {
	position: absolute;
	left: -86px;
	top: -44px;
	width: 1080px;
	height: 650px;
}

@media (max-width: 860px) {
	.igm-story {
		flex-direction: column;
		align-items: stretch;
		gap: 36px;
	}
	.igm-story__txt,
	.igm-story__vis {
		flex: none;
	}
	.igm-cal__panel {
		padding: 24px 0 0 24px;
	}
	.igm-cal__win {
		height: 300px;
	}
	.igm-cal__pos {
		/* smaller on phones, so the new appointment (2nd column) is visible */
		transform: scale(0.62);
		transform-origin: top left;
		left: -53px;
		top: -27px;
	}
}

/* [10.4] Promemoria WhatsApp: phone with a chat (animated) + text */
.et_pb_section.igm-wa-sec {
	background: var(--igm-lavanda);
	overflow: hidden;
}
.igm-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 160px;
	text-align: left;
}
.igm-wa__phone {
	flex: none;
	position: relative;
}
.igm-wa__phone::before {
	/* soft disc behind the phone */
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 460px;
	height: 460px;
	margin: -230px 0 0 -230px;
	border-radius: 50%;
	background: var(--igm-lavanda-2);
}
.igm-wa__txt {
	flex: 0 1 520px;
	min-width: 0;
}
.igm-h2--xl {
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.05;
}
.igm-wa__lead {
	max-width: 500px;
}
.igm-wa__checks {
	margin-bottom: 36px;
}
.igm-wa__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.igm-btn--outline.igm-wa__btn {
	background: transparent;
}
.igm-btn--outline.igm-wa__btn:hover {
	background: var(--igm-bianco);
}
.igm-wa__price {
	font-size: 14px;
	color: var(--igm-testo);
}

/* chat background: light beige with small barber doodles (our own drawing) */
.igm-wa__chat {
	background: #EFE7DE url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%27120%27 viewBox=%270 0 120 120%27 fill=%27none%27 stroke=%27%23DACDBC%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cg transform=%27translate(12 10) rotate(-20 9 10)%27%3E%3Ccircle cx=%274%27 cy=%2715%27 r=%273.5%27/%3E%3Ccircle cx=%2714%27 cy=%2715%27 r=%273.5%27/%3E%3Cpath d=%27M6.5 12.5 16 0M11.5 12.5 2 0%27/%3E%3C/g%3E%3Cg transform=%27translate(66 16) rotate(15 13 6)%27%3E%3Crect width=%2726%27 height=%276%27 rx=%272%27/%3E%3Cpath d=%27M3 6v6M7 6v6M11 6v6M15 6v6M19 6v6M23 6v6%27/%3E%3C/g%3E%3Cpath d=%27M12 80c3 4 8 4 11 0c1-2 3-2 4 0c3 4 8 4 11 0c-1 5-8 7-12 3c-1-1-2-1-3 0c-4 4-11 2-11-3z%27/%3E%3Cg transform=%27translate(70 74) rotate(-30 15 4)%27%3E%3Crect width=%2720%27 height=%277%27 rx=%271.5%27/%3E%3Cpath d=%27M20 3.5h11%27/%3E%3C/g%3E%3Cpath d=%27M56 46l2 4 4 2-4 2-2 4-2-4-4-2 4-2z%27/%3E%3Ccircle cx=%27104%27 cy=%2752%27 r=%271.8%27/%3E%3Ccircle cx=%2748%27 cy=%27106%27 r=%271.8%27/%3E%3Ccircle cx=%27100%27 cy=%27108%27 r=%271.2%27/%3E%3C/svg%3E") repeat;
	background-size: 150px 150px;
}

/* chat animation: "typing" dots, then the message; 12 s loop */
.igm-wa__slot {
	position: relative;
}
.igm-wa__typing {
	position: absolute;
	top: 0;
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 12px 14px;
	border-radius: 12px;
	opacity: 0;
}
.igm-wa__typing i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #8696A0;
	animation: igm-wa-dot 1s infinite;
}
.igm-wa__typing i:nth-child(2) {
	animation-delay: .15s;
}
.igm-wa__typing i:nth-child(3) {
	animation-delay: .3s;
}
.igm-wa__t1 {
	left: 0;
	background: #FFFFFF;
	animation: igm-wa-t1 12s infinite;
}
.igm-wa__t2 {
	right: 0;
	background: #D9FDD3;
	animation: igm-wa-t2 12s infinite;
}
.igm-wa__m1 {
	animation: igm-wa-m1 12s infinite;
}
.igm-wa__m2 {
	animation: igm-wa-m2 12s infinite;
}
.igm-wa__read {
	animation: igm-wa-read 12s infinite;
}
@keyframes igm-wa-dot {
	0%, 60%, 100% { transform: translateY(0); opacity: .45; }
	30% { transform: translateY(-3px); opacity: 1; }
}
@keyframes igm-wa-t1 {
	0% { opacity: 0; }
	3%, 12% { opacity: 1; }
	14%, 100% { opacity: 0; }
}
@keyframes igm-wa-m1 {
	0%, 13% { opacity: 0; transform: translateY(10px) scale(.97); }
	17%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; }
}
@keyframes igm-wa-t2 {
	0%, 34% { opacity: 0; }
	36%, 46% { opacity: 1; }
	48%, 100% { opacity: 0; }
}
@keyframes igm-wa-m2 {
	0%, 47% { opacity: 0; transform: translateY(10px) scale(.97); }
	51%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; }
}
@keyframes igm-wa-read {
	0%, 60% { opacity: 0; }
	63%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.igm-wa__m1,
	.igm-wa__m2,
	.igm-wa__read {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.igm-wa__typing {
		display: none;
	}
}
@media (max-width: 860px) {
	.igm-wa {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 48px;
	}
	.igm-wa__phone {
		align-self: center;
	}
	.igm-wa__txt {
		flex: none;
	}
}
@media (max-width: 400px) {
	.igm-wa__phone::before {
		width: 360px;
		height: 360px;
		margin: -180px 0 0 -180px;
	}
}

/* [10.5] Come si inizia: 3 steps.
 * Computer: three cards side by side. Phone: tabs (one step open) + picture below.
 * Both versions are in the HTML; CSS shows one of them. */
.igm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.igm-steps__head {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}
.igm-steps__head .igm-h2 {
	margin-bottom: 0;
}
.et_pb_section.igm-scope .igm-steps__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0 0 56px;
	padding: 0;
	list-style: none;
}
.igm-steps__card {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 1px solid #EAE3EF;
	border-radius: 24px;
	overflow: hidden;
	text-align: left;
}
.igm-steps__vis {
	position: relative;
	display: flex;
	align-items: center;
	height: 340px;
	padding: 36px 24px;
	background: var(--igm-lavanda);
}
.igm-steps__vis > div {
	width: 100%;
}
.igm-steps__num,
.igm-steps__tnum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--igm-viola);
	color: var(--igm-bianco);
	font-size: 17px;
	font-weight: 800;
}
.igm-steps__num {
	/* white badge: stays visible on top of the purple pictures (step 3) */
	position: absolute;
	z-index: 2;
	top: 20px;
	left: 20px;
	background: var(--igm-bianco);
	color: var(--igm-viola);
	box-shadow: 0 4px 14px rgba(94, 42, 114, 0.22);
}
.igm-steps__body {
	padding: 24px 28px 28px;
}
.igm-steps__title {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--igm-font);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--igm-inchiostro);
}
.igm-steps__text {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--igm-testo);
}
.igm-steps__cta--desk {
	text-align: center;
}

/* [10.5] step pictures are animated: 1) the form fills in, 2) our team writes and the
 * setup completes, 3) appointments drop into the calendar.
 * igm-2026.js adds "igm-steps-js" (start state) and then "is-play" to one card after
 * another, so the steps play strictly in order and reset together.
 * Without the script (or with reduced motion) the pictures simply show the end state. */
.igm-steps-js .igm-sv1__t1,
.igm-steps-js .igm-sv1__t2 {
	clip-path: inset(0 100% 0 0);
}
.igm-steps-js .igm-sv1__done,
.igm-steps-js .igm-sv2__msg,
.igm-steps-js .igm-sv2__k1,
.igm-steps-js .igm-sv2__k2,
.igm-steps-js .igm-sv2__c2,
.igm-steps-js .igm-sv2__c3,
.igm-steps-js .igm-sv3__r1,
.igm-steps-js .igm-sv3__r2,
.igm-steps-js .igm-sv3__r3,
.igm-steps-js .igm-sv3__r4 {
	opacity: 0;
}
.igm-steps-js .igm-sv2__bar {
	transform: scaleX(.34);
}
.igm-sv2__dots,
.igm-sv2__c1 {
	opacity: 0;
}
.igm-steps-js .igm-sv2__c1 {
	opacity: 1;
}
.igm-sv1__t1,
.igm-sv1__t2 {
	display: inline-block;
	white-space: nowrap;
	vertical-align: bottom;
}
.igm-sv2__dots i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #A79BB5;
}
.igm-steps-js .is-play .igm-sv,
.igm-steps-js .is-play .igm-sv * {
	animation-duration: var(--igm-step-time);
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}
.igm-steps-js .is-play .igm-sv1__t1 { animation-name: igm-sv1-t1; animation-timing-function: steps(17, end); }
.igm-steps-js .is-play .igm-sv1__t2 { animation-name: igm-sv1-t2; animation-timing-function: steps(24, end); }
.igm-steps-js .is-play .igm-sv1__f2 { animation-name: igm-sv1-f2; }
.igm-steps-js .is-play .igm-sv1__btn { animation-name: igm-sv1-btn; }
.igm-steps-js .is-play .igm-sv1__done { animation-name: igm-sv1-done; }
.igm-steps-js .is-play .igm-sv2__dots { animation-name: igm-sv2-dots; }
.igm-steps-js .is-play .igm-sv2__msg { animation-name: igm-sv2-msg; }
.igm-steps-js .is-play .igm-sv2__bar { animation-name: igm-sv2-bar; }
.igm-steps-js .is-play .igm-sv2__k1 { animation-name: igm-sv2-k1; }
.igm-steps-js .is-play .igm-sv2__k2 { animation-name: igm-sv2-k2; }
.igm-steps-js .is-play .igm-sv2__c1 { animation-name: igm-sv2-c1; }
.igm-steps-js .is-play .igm-sv2__c2 { animation-name: igm-sv2-c2; }
.igm-steps-js .is-play .igm-sv2__c3 { animation-name: igm-sv2-c3; }
.igm-steps-js .is-play .igm-sv3__r1 { animation-name: igm-sv3-r1; }
.igm-steps-js .is-play .igm-sv3__r2 { animation-name: igm-sv3-r2; }
.igm-steps-js .is-play .igm-sv3__r3 { animation-name: igm-sv3-r3; }
.igm-steps-js .is-play .igm-sv3__r4 { animation-name: igm-sv3-r4; }
@keyframes igm-sv1-t1 { 0%, 5% { clip-path: inset(0 100% 0 0); } 35%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes igm-sv1-t2 { 0%, 40% { clip-path: inset(0 100% 0 0); } 78%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes igm-sv1-f2 { 0%, 38% { border-color: #EAE3EF; } 40%, 100% { border-color: #7F3E98; } }
@keyframes igm-sv1-btn { 0%, 82% { transform: scale(1); } 86% { transform: scale(.95); } 90%, 100% { transform: scale(1); } }
@keyframes igm-sv1-done { 0%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes igm-sv2-dots { 0% { opacity: 0; } 4%, 20% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes igm-sv2-msg { 0%, 22% { opacity: 0; transform: translateY(8px); } 32%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv2-bar { 0%, 44% { transform: scaleX(.34); } 52%, 72% { transform: scaleX(.67); } 80%, 100% { transform: scaleX(1); } }
@keyframes igm-sv2-k1 { 0%, 46% { opacity: 0; transform: scale(.4); } 52%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv2-k2 { 0%, 74% { opacity: 0; transform: scale(.4); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv2-c1 { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes igm-sv2-c2 { 0%, 49% { opacity: 0; } 50%, 77% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes igm-sv2-c3 { 0%, 77% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes igm-sv3-r1 { 0%, 4% { opacity: 0; transform: translateX(-14px); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv3-r2 { 0%, 26% { opacity: 0; transform: translateX(-14px); } 40%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv3-r3 { 0%, 48% { opacity: 0; transform: translateX(-14px); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv3-r4 { 0%, 70% { opacity: 0; transform: translateX(-14px); } 84%, 100% { opacity: 1; transform: none; } }
.igm-steps__mob {
	display: none;
}

@media (max-width: 860px) {
	.igm-steps__head {
		margin: 0 0 32px;
		text-align: left;
	}
	.et_pb_section.igm-scope .igm-steps__cards,
	.igm-steps__cta--desk {
		display: none;
	}
	.igm-steps__mob {
		display: block;
		text-align: left;
	}
	.igm-steps__tabs {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin-bottom: 32px;
	}
	.igm-steps__tab {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		width: 100%;
		padding: 16px;
		border: 0;
		border-radius: 14px;
		background: transparent;
		font: inherit;
		text-align: left;
		color: var(--igm-inchiostro);
		cursor: pointer;
	}
	.igm-steps__tab[aria-selected="true"] {
		background: var(--igm-badge-bg);
	}
	.igm-steps__tab:focus-visible {
		outline: 3px solid var(--igm-focus);
		outline-offset: 2px;
	}
	.igm-steps__tnum {
		flex: none;
		background: var(--igm-bianco);
		color: var(--igm-viola);
		border: 2px solid #CBC0DD;
	}
	.igm-steps__tab[aria-selected="true"] .igm-steps__tnum {
		background: var(--igm-viola);
		color: var(--igm-bianco);
		border-color: var(--igm-viola);
	}
	.igm-steps__tbody {
		display: block;
		padding-top: 8px;
	}
	.igm-steps__ttitle {
		display: block;
		font-size: 19px;
		font-weight: 800;
		line-height: 1.3;
	}
	.igm-steps__ttext {
		display: none;
		margin-top: 6px;
		font-size: 15px;
		line-height: 1.55;
		color: var(--igm-testo);
	}
	.igm-steps__tab[aria-selected="true"] .igm-steps__ttext {
		display: block;
	}
	.igm-steps__mob .igm-steps__cta {
		margin-top: 32px;
	}
	.igm-steps__mob .igm-btn {
		width: 100%;
		height: 54px;
	}
	.igm-steps__stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 28px;
		min-height: 420px;
		padding: 40px 20px;
		border-radius: 24px;
		background: var(--igm-lavanda);
	}
	.igm-steps__panel {
		width: 100%;
	}
	.igm-steps__panel[hidden] {
		display: none;
	}
	.igm-steps__dots {
		display: flex;
		gap: 8px;
	}
	.igm-steps__dot {
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: #CBC0DD;
		transition: width .2s;
	}
	.igm-steps__dot.is-on {
		width: 28px;
		background: var(--igm-viola);
	}
}

/* [10.6] Opinioni: one big vertical video (9:16) + quote, stars, and a list of other videos.
 * Video data lives on each list button (data-name, data-salon, data-quote, data-len,
 * data-bg, data-video = .mp4 address, data-poster = cover image). igm-2026.js swaps them. */
.et_pb_section.igm-op-sec {
	background: var(--igm-lavanda);
}
.igm-op {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 72px;
	text-align: left;
}
.igm-op__vid {
	flex: 0 0 340px;
}
.igm-op__side {
	flex: 0 1 560px;
	min-width: 0;
}
.igm-op__frame {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(94, 42, 114, 0.22);
	background-size: cover;
	background-position: center;
}
.igm-op__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}
.igm-op__badge,
.igm-op__len {
	position: absolute;
	top: 14px;
	color: var(--igm-bianco);
	font-weight: 700;
}
.igm-op__badge {
	left: 14px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.igm-op__len {
	right: 14px;
	padding: 4px 9px;
	border-radius: 6px;
	background: rgba(28, 23, 32, 0.55);
	font-size: 12px;
}
.igm-op__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--igm-bianco);
	box-shadow: 0 10px 30px rgba(28, 23, 32, 0.3);
	cursor: pointer;
	transition: transform .15s;
}
.igm-op__play:hover {
	transform: scale(1.06);
}
.igm-op__play:focus-visible,
.igm-op__pick:focus-visible {
	outline: 3px solid var(--igm-focus);
	outline-offset: 2px;
}
.igm-op__subs {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 18px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(28, 23, 32, 0.65);
	color: var(--igm-bianco);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}
.igm-op__title {
	font-size: clamp(30px, 3.4vw, 44px);
	margin-bottom: 28px;
}
.igm-op__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -0.01em;
	font-style: normal;
	color: var(--igm-inchiostro);
}
.igm-op__stars {
	display: flex;
	gap: 3px;
	margin: 18px 0 8px;
}
.igm-op__who {
	margin: 0 0 32px;
	padding: 0;
	font-size: 15px;
	color: var(--igm-testo);
}
.igm-op__who strong {
	color: var(--igm-inchiostro);
}
.igm-op__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.igm-op__pick {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px 14px 10px 10px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	font: inherit;
	color: var(--igm-inchiostro);
	text-align: left;
	cursor: pointer;
}
.igm-op__pick:hover {
	background: var(--igm-bianco);
}
.igm-op__pick[aria-selected="true"] {
	background: var(--igm-bianco);
	box-shadow: 0 6px 20px rgba(94, 42, 114, 0.10);
}
.igm-op__thumb {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 64px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
}
.igm-op__pinfo {
	flex: 1;
	min-width: 0;
}
.igm-op__pname {
	display: block;
	font-size: 15px;
	font-weight: 800;
}
.igm-op__psalon,
.igm-op__plen {
	display: block;
	font-size: 13px;
	color: var(--igm-testo);
}
.igm-op__plen {
	font-weight: 700;
}
@media (max-width: 860px) {
	.igm-op {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}
	.igm-op__vid {
		flex: none;
		width: min(300px, 100%);
		align-self: center;
	}
	.igm-op__side {
		flex: none;
	}
}

/* [10.7] Prezzi: price calculator. Prices are in data-* on .igm-pr
 * (data-lic-m / data-lic-y = licence per month / per year, data-wa-m / data-wa-y = WhatsApp).
 * igm-2026.js recalculates the total when the period or WhatsApp is changed. */
.igm-pr__head {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
}
.igm-pr__lead {
	max-width: 560px;
	margin: 0 auto;
}
.igm-pr__calc {
	display: flex;
	align-items: stretch;
	gap: 32px;
	text-align: left;
}
.igm-pr__opts {
	flex: 1.2 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.igm-pr__sum {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 36px;
	border-radius: 20px;
	background: var(--igm-viola-scuro);
	color: var(--igm-bianco);
}
.igm-pr__period {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-bottom: 8px;
	padding: 4px;
	border-radius: 12px;
	background: var(--igm-lavanda);
}
.igm-pr__period button {
	height: 44px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--igm-viola);
	font-family: var(--igm-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}
.igm-pr__period button[aria-pressed="true"] {
	background: var(--igm-viola);
	color: var(--igm-bianco);
}
.igm-pr__opt {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	padding: 22px 24px;
	border: 2px solid #E6DDEC;
	border-radius: 16px;
	background: var(--igm-bianco);
	font-family: var(--igm-font);
	color: var(--igm-inchiostro);
	text-align: left;
}
button.igm-pr__opt {
	cursor: pointer;
}
.igm-pr__opt.is-on {
	border-color: var(--igm-viola);
}
.igm-pr__opt.is-soon {
	border: 1.5px dashed #D9CCE3;
	opacity: .75;
}
.igm-pr__box {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	border: 2px solid #D9CCE3;
	border-radius: 6px;
	background: var(--igm-bianco);
}
.igm-pr__box svg {
	visibility: hidden;
}
.igm-pr__opt.is-on .igm-pr__box {
	border-color: var(--igm-viola);
	background: var(--igm-viola);
}
.igm-pr__opt.is-on .igm-pr__box svg {
	visibility: visible;
}
.igm-pr__body {
	display: block;
	flex: 1;
	min-width: 0;
}
.igm-pr__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
}
.igm-pr__name {
	font-size: 18px;
	font-weight: 800;
}
.igm-pr__price {
	font-size: 16px;
	font-weight: 800;
}
.igm-pr__desc {
	display: block;
	margin: 6px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--igm-testo);
}
.igm-pr__tag {
	padding: 3px 10px;
	border-radius: 999px;
	background: #FBEAF7;
	color: var(--igm-rosa);
	font-size: 12px;
	font-weight: 700;
	vertical-align: 2px;
}
.igm-pr__period button:focus-visible,
button.igm-pr__opt:focus-visible,
.igm-pr__cta:focus-visible {
	outline: 3px solid var(--igm-focus);
	outline-offset: 2px;
}
.igm-pr__sumh {
	margin: 0 0 18px;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #E7D5F0;
}
.igm-pr__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}
.igm-pr__amount {
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}
.igm-pr__per {
	font-size: 17px;
	font-weight: 600;
	color: #E7D5F0;
}
.igm-pr__saving {
	min-height: 22px;
	margin: 10px 0 0;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	color: #F4B6E8;
}
.et_pb_section.igm-scope .igm-pr__lines {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 28px 0 32px;
	padding: 20px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 15px;
}
.igm-pr__lines li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 0;
}
.igm-pr__lines li span + span {
	font-weight: 700;
}
.igm-pr__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	margin-top: auto;
	border-radius: var(--igm-btn-raggio);
	background: var(--igm-bianco);
	color: var(--igm-viola);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: var(--igm-btn-maiuscole);
	text-decoration: none;
}
.igm-pr__cta:hover {
	background: var(--igm-lavanda-2);
	color: var(--igm-viola-scuro);
}
.igm-pr__note {
	margin: 14px 0 0;
	padding: 0;
	text-align: center;
	font-size: 14px;
	color: #E7D5F0;
}
@media (max-width: 860px) {
	.igm-pr__calc {
		flex-direction: column;
	}
	.igm-pr__sum {
		padding: 28px 24px;
	}
	.igm-pr__amount {
		font-size: 56px;
	}
	.igm-pr__period button {
		font-size: 12px;
		letter-spacing: 0.02em;
	}
}

/* [10.8] Cassa e registratori RCH: 3 product cards (links to the products) + dark law banner.
 * Phones: the cards become a sideways swipe row. */
.et_pb_section.igm-rch-sec {
	background: var(--igm-lavanda);
	overflow: hidden;
}
.igm-rch {
	text-align: left;
}
.igm-rch__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	margin-bottom: 48px;
}
.igm-rch__intro {
	max-width: 640px;
}
.igm-rch__intro .igm-h2 {
	font-size: clamp(32px, 3.6vw, 46px);
	margin-bottom: 16px;
}
.igm-rch__lead {
	margin-bottom: 0;
}
.igm-rch__all {
	font-size: 15px;
	white-space: nowrap;
}
.igm-rch__prods {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.igm-rch__prod {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-radius: 20px;
	background: var(--igm-bianco);
	color: var(--igm-inchiostro);
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(94, 42, 114, 0.08);
	transition: box-shadow .15s;
}
.igm-rch__prod:hover {
	box-shadow: 0 18px 44px rgba(94, 42, 114, 0.16);
	color: var(--igm-inchiostro);
}
.igm-rch__prod:focus-visible,
.igm-rch__lawbtn:focus-visible {
	outline: 3px solid var(--igm-focus);
	outline-offset: 2px;
}
.igm-rch__pic {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
	margin-bottom: 20px;
	padding: 28px 20px 12px;
	border-radius: 14px;
	background: var(--igm-lavanda);
}
.igm-rch__pic img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply; /* the white photo background melts into the lavender box */
}
.igm-rch__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--igm-bianco);
	color: var(--igm-viola);
	font-size: 12px;
	font-weight: 700;
}
.igm-rch__kind {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--igm-testo);
}
.igm-rch__name {
	margin: 4px 0 10px;
	font-size: 20px;
	font-weight: 800;
}
.igm-rch__price {
	font-size: 15px;
	color: var(--igm-testo);
}
.igm-rch__price strong {
	font-size: 22px;
	letter-spacing: -0.01em;
	color: var(--igm-inchiostro);
}
.igm-rch__law {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 24px;
	padding: 24px 28px;
	border-radius: 20px;
	background: var(--igm-viola-scuro);
	color: var(--igm-bianco);
}
.igm-rch__lawico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
}
.igm-rch__lawtxt {
	flex: 1;
	min-width: 0;
}
.igm-rch__lawh {
	display: block;
	font-size: 18px;
	font-weight: 800;
}
.igm-rch__laws {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: #E7D5F0;
}
.igm-rch__lawbtn {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 20px;
	border-radius: var(--igm-btn-raggio);
	background: var(--igm-bianco);
	color: var(--igm-viola);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: var(--igm-btn-maiuscole);
	text-decoration: none;
}
.igm-rch__lawbtn:hover {
	background: var(--igm-lavanda-2);
	color: var(--igm-viola-scuro);
}
@media (max-width: 860px) {
	.igm-rch__prods {
		display: flex;
		gap: 14px;
		margin: 0 calc(-1 * var(--igm-margine));
		padding: 0 var(--igm-margine) 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.igm-rch__prods::-webkit-scrollbar {
		display: none;
	}
	.igm-rch__prod {
		flex: 0 0 76%;
		scroll-snap-align: center;
	}
	.igm-rch__law {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* [10.9] FAQ: moved to igm-2026.css [06.2] (shared with the RCH page) */

/* [10.10] Chiusura: lavender card, text on the left, app picture cut off
 * by the right and bottom edge of the card. Phones: text only. */
.igm-cta {
	display: flex;
	align-items: stretch;
	min-height: 440px;
	border-radius: 32px;
	background: linear-gradient(135deg, #F6EEF9, #EADDF2);
	overflow: hidden;
	text-align: left;
}
.igm-cta__txt {
	flex: 0 0 540px;
	min-width: 0;
	padding: 72px 0 72px 72px;
}
.igm-cta__title {
	margin-bottom: 18px;
	font-size: clamp(34px, 3.8vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.igm-cta__lead {
	margin-bottom: 36px;
	padding: 0;
}
.igm-cta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.igm-cta__vis {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}
.igm-cta__shot {
	/* the shared app illustration ([10.0]), scaled to 670 px by igm-2026.js */
	position: absolute;
	left: 56px;
	top: 72px;
	width: 670px;
	aspect-ratio: 1080 / 640;
	overflow: hidden;
	border-radius: 11px;
	box-shadow: 0 30px 60px rgba(74, 34, 89, 0.25);
}
@media (max-width: 1100px) {
	.igm-cta__txt {
		flex-basis: 480px;
		padding: 56px 0 56px 56px;
	}
	.igm-cta__shot {
		left: 40px;
		top: 56px;
	}
	.igm-cta__btns .igm-btn {
		padding: 0 24px;
	}
}
@media (max-width: 900px) {
	.igm-cta {
		flex-direction: column;
		min-height: 0;
	}
	.igm-cta__txt {
		flex: none;
		padding: 48px 24px;
	}
	.igm-cta__vis {
		display: none;
	}
}
@media (max-width: 640px) {
	.igm-cta {
		border-radius: 24px;
	}
	.igm-cta__txt {
		padding: 40px 20px;
	}
	.igm-cta__lead {
		margin-bottom: 28px;
	}
	.igm-cta__btns {
		flex-direction: column;
		gap: 10px;
	}
	.igm-cta__btns .igm-btn {
		width: 100%;
		height: 54px;
	}
}