/* Camille by Pinci: landing. Sezioni come pattern a blocchi, motion in assets/js/landing.js. */

.landing > .wp-block-group {
	padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2));
}

.band { padding-block: var(--s-700); }

@media (min-width: 768px) {
	.band { padding-block: var(--s-900); }
}

.band--ink {
	background: var(--night);
	color: var(--night-text);
}

.band--ink .eyebrow { color: #E7A3B1; }
.band--ink a:hover { color: #E7A3B1; }

.band--ink .wp-block-button__link {
	background: var(--ivory);
	border-color: var(--ivory);
	color: var(--ink);
}

.band--ink .wp-block-button__link:hover {
	background: #E7A3B1;
	border-color: #E7A3B1;
	color: var(--ink);
}

.section-title {
	max-width: 760px;
	margin-bottom: var(--s-600);
	font-size: 2.25rem;
	line-height: 2.5rem;
}

@media (min-width: 768px) {
	.section-title { font-size: 3rem; line-height: 1; }
}

.section-lead {
	max-width: 680px;
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: var(--muted);
}

.band--ink .section-lead { color: var(--night-muted); }

/* Parole dei titoli divise da landing.js. */
.split-words { display: inline; }

.word {
	display: inline-block;
	overflow: clip;
	overflow-clip-margin: 0.12em;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
	vertical-align: top;
}

.word__inner { display: inline-block; will-change: transform; }

/* Hero. */
.hero {
	display: grid;
	align-items: center;
	gap: var(--s-600);
	min-height: min(100svh, 960px);
	padding-top: 128px;
	padding-bottom: var(--s-700);
}

@media (min-width: 1024px) {
	.hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--s-700);
		padding-top: 160px;
		padding-bottom: var(--s-900);
	}
}

.hero__title {
	max-width: 680px;
	margin-bottom: var(--s-300);
	font-size: 3rem;
	line-height: 1;
	letter-spacing: -0.035em;
	background: linear-gradient(90deg, #000000, #666666);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Ogni parola riceve lo stesso gradiente, allineato alla larghezza del titolo. */
.hero__title .word__inner {
	background: linear-gradient(90deg, #000000, #666666);
	background-size: var(--title-w, 100%) 100%;
	background-position: calc(var(--word-x, 0px) * -1) 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (min-width: 768px) {
	.hero__title { font-size: 3.75rem; }
}

@media (min-width: 1280px) {
	.hero__title { font-size: 4.5rem; }
}

.hero__lead {
	max-width: 680px;
	margin-bottom: var(--s-400);
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: var(--muted);
}

@media (min-width: 768px) {
	.hero__lead { font-size: 1.25rem; line-height: 1.75rem; }
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-300);
	margin-bottom: var(--s-400);
}

.hero__actions .wp-block-buttons { margin: 0; }

.hero__secondary { margin: 0; font-weight: 600; }

.hero__secondary a {
	display: inline-block;
	padding: var(--s-75) 0;
	text-decoration-color: rgba(21, 18, 14, 0.3);
	transition: text-decoration-color 0.5s var(--ease), color 0.5s var(--ease);
}

.hero__secondary a:hover { text-decoration-color: currentColor; }
.hero__secondary a[target="_blank"]::after { content: " ↗"; }

.hero__proof {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--muted);
}

/* Su mobile due bottoni uno sotto l'altro, senza la riga dei vantaggi. */
@media (max-width: 639px) {
	.hero__actions { flex-direction: column; align-items: stretch; gap: var(--s-100); margin-bottom: 0; }
	.hero__actions .wp-block-buttons,
	.hero__actions .wp-block-button,
	.hero__actions .wp-block-button__link { width: 100%; text-align: center; }
	.hero__actions .wp-block-button__link { display: flex; justify-content: center; }
	.hero__secondary a {
		display: block;
		padding: var(--s-100) var(--s-300);
		border: 1px solid var(--ink);
		border-radius: 9999px;
		text-align: center;
		text-decoration: none;
	}
	.hero__proof { display: none; }
}

/* Esempio di conversazione. */
.chat {
	margin: 0;
	width: 100%;
	max-width: 480px;
	justify-self: center;
	perspective: 1200px;
}

@media (min-width: 1024px) {
	.chat { justify-self: end; }
}

/* Video di presentazione: cornice, video e barra di controllo. */
.hero-video {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 540px;
	justify-self: center;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 32px;
	background: var(--paper);
	box-shadow: 0 32px 64px -32px rgba(21, 18, 14, 0.35);
}

@media (min-width: 1024px) {
	.hero-video { justify-self: end; }
}

.hero-video__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 22px;
	background: var(--night);
}

/* Sui telefoni il video è la versione verticale 9:16. */
@media (max-width: 767px) {
	.hero-video__media { aspect-ratio: 9 / 16; }
}

.hero-video__bar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 2px 0;
}

.hero-video .hero-video__btn {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 0.2s var(--ease);
}

.hero-video .hero-video__btn:active { background: var(--line); }

@media (hover: hover) and (pointer: fine) {
	.hero-video .hero-video__btn:hover { background: var(--ivory); color: var(--ink); }
}

.hero-video .hero-video__btn:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.hero-video__btn svg { width: 18px; height: 18px; }
.hero-video__toggle .i-play,
.hero-video.is-paused .hero-video__toggle .i-pause { display: none; }
.hero-video.is-paused .hero-video__toggle .i-play { display: block; }
/* Pulsante musica sopra il video: con la scritta finché il video è muto, poi solo l'icona. */
.hero-video .hero-video__sound {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	height: 40px;
	padding: 0 16px 0 12px;
	border-radius: 999px;
	background: rgba(21, 18, 14, 0.85);
	color: var(--ivory);
	font: 600 14px/1 "Manrope", system-ui, sans-serif;
	white-space: nowrap;
	box-shadow: 0 10px 24px -12px rgba(21, 18, 14, 0.6);
}
.hero-video .hero-video__sound:hover,
.hero-video .hero-video__sound:active { background: var(--ink); color: var(--ivory); }
.hero-video .hero-video__sound:focus-visible { outline-color: var(--ivory); }
.hero-video:not(.is-muted) .hero-video__sound { width: 40px; padding: 0; justify-content: center; }
.hero-video__sound .i-sound,
.hero-video:not(.is-muted) .hero-video__sound .i-muted,
.hero-video:not(.is-muted) .hero-video__sound-label { display: none; }
.hero-video:not(.is-muted) .hero-video__sound .i-sound { display: block; }

.hero-video__track {
	flex: 1;
	display: flex;
	gap: 3px;
	min-width: 0;
	margin-left: 6px;
}

.hero-video .hero-video__seg {
	position: relative;
	height: 32px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
}

.hero-video__seg::before,
.hero-video__seg::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
}

.hero-video__seg::before { right: 0; background: var(--line); }
.hero-video__seg::after { width: calc(var(--p, 0) * 100%); background: var(--ink); }

.hero-video .hero-video__seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.chat__window {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
	box-shadow: 0 32px 64px -32px rgba(21, 18, 14, 0.28);
	transform-style: preserve-3d;
	transition: transform 0.9s var(--ease);
}

.chat__band {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-200);
	padding: var(--s-100) var(--s-300);
	background: var(--night);
	color: var(--night-text);
}

.chat__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; }
.chat__role { font-size: 0.75rem; line-height: 1rem; color: var(--night-muted); }

.chat__thread {
	display: flex;
	flex-direction: column;
	gap: var(--s-100);
	margin: 0;
	padding: var(--s-300);
	list-style: none;
}

.chat__msg {
	max-width: 88%;
	padding: var(--s-75) var(--s-100);
	border-radius: 16px;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.chat__msg--client {
	align-self: flex-end;
	background: var(--ink);
	color: var(--ivory);
	border-bottom-right-radius: 4px;
}

.chat__msg--camille {
	align-self: flex-start;
	background: var(--ivory);
	border-bottom-left-radius: 4px;
}

.chat__look {
	padding: var(--s-75);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.chat__items { display: grid; gap: var(--s-50); margin: 0; padding: 0; list-style: none; }

.chat__item {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-100);
	padding: var(--s-75);
	border-radius: 8px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	transition: background-color 0.5s var(--ease);
}

.chat__item:hover { background: var(--ivory); }

.chat__swatch {
	width: 32px;
	height: 40px;
	border-radius: 4px;
	background: var(--swatch);
}

.chat__label { font-weight: 600; }
.chat__price { font-variant-numeric: tabular-nums; color: var(--muted); }

.chat__try { align-self: flex-start; }

.chat__try-button {
	display: inline-flex;
	padding: var(--s-75) var(--s-100);
	border-radius: 9999px;
	background: var(--oxblood);
	color: var(--paper);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.chat__caption {
	margin-top: var(--s-100);
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--muted);
	text-align: center;
}

/* Come funziona. */
.steps__list {
	display: grid;
	gap: var(--s-300);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

@media (min-width: 768px) {
	.steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.steps__list > li {
	counter-increment: step;
	padding: var(--s-400);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
	color: var(--muted);
}

.steps__list > li::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	margin-bottom: var(--s-600);
	font-size: 3rem;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--oxblood);
	font-variant-numeric: tabular-nums;
}

.steps__list strong {
	display: block;
	margin-bottom: var(--s-75);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: var(--ink);
}

/* Frase manifesto: le parole si accendono una alla volta. */
.tagline { padding-block: var(--s-900); }

.tagline__text {
	max-width: 680px;
	margin: 0;
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.tagline__text { font-size: 3.75rem; line-height: 1; max-width: 900px; }
}

.tagline__word {
	color: rgba(21, 18, 14, 0.28);
	transition: color 0.8s var(--ease);
}

.tagline__word.is-lit { color: var(--ink); }

/* Virtual try-on. */
.tryon {
	display: grid;
	gap: var(--s-600);
	align-items: center;
}

@media (min-width: 1024px) {
	.tryon { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-800); }
}

.tryon__copy p { max-width: 560px; font-size: 1.125rem; line-height: 1.75rem; color: var(--night-muted); }
.tryon .section-title { margin-bottom: var(--s-300); }

.tryon__flow { margin: 0; }

/* Su mobile resta solo il testo: i passaggi li racconta già il copy. */
@media (max-width: 767px) {
	.tryon__flow { display: none; }
}

.tryon__steps {
	display: grid;
	gap: var(--s-200);
	margin: 0 0 var(--s-400);
	padding: 0;
	list-style: none;
}

.tryon__step {
	display: grid;
	grid-template-columns: var(--s-600) minmax(0, 1fr);
	column-gap: var(--s-200);
	align-items: start;
	padding: var(--s-300);
	border: 1px solid rgba(245, 241, 234, 0.1);
	border-radius: 16px;
	background: var(--night-raised);
}

.tryon__step::before {
	content: "";
	grid-row: span 2;
	width: var(--s-600);
	height: var(--s-600);
	border-radius: 12px;
	background: #E7A3B1;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 28px 28px;
	mask-size: 28px 28px;
}

.tryon__step-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
.tryon__step-text { font-size: 0.875rem; line-height: 1.25rem; color: var(--night-muted); }

.tryon__button-sample {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-200);
	margin: 0;
}

.tryon__button {
	display: inline-flex;
	padding: var(--s-100) var(--s-300);
	border-radius: 9999px;
	background: var(--oxblood);
	color: var(--paper);
	font-weight: 600;
}

.tryon__button-note { font-size: 0.875rem; line-height: 1.25rem; color: var(--night-muted); }

/* Vantaggi. */
.benefits__grid { display: grid; gap: var(--s-300); }

@media (min-width: 768px) {
	.benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.benefit {
	padding: var(--s-400);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
	transition: transform 0.7s var(--ease), border-color 0.7s var(--ease);
}

.benefit:hover { transform: translateY(-4px); border-color: rgba(122, 35, 53, 0.3); }

.benefit::before {
	content: "";
	display: block;
	width: var(--s-400);
	height: var(--s-400);
	margin-bottom: var(--s-300);
	background: var(--oxblood);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.benefit__title { margin-bottom: var(--s-100); font-size: 1.5rem; line-height: 2rem; }
.benefit p { margin: 0; color: var(--muted); }

/* Dashboard: chat, gallery e statistiche. Testi delle anteprime in HTML, quindi traducibili. */
.insights .section-title { margin-bottom: var(--s-300); }
.insights .section-lead { margin-bottom: var(--s-600); }

.insights__grid { display: grid; gap: var(--s-300); }

@media (min-width: 1024px) {
	.insights__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		grid-template-areas: "chats gallery" "chats stats";
	}
	.insight--chats { grid-area: chats; }
	.insight--gallery { grid-area: gallery; }
	.insight--stats { grid-area: stats; }
}

.insight {
	display: flex;
	flex-direction: column;
	padding: var(--s-400);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
}

.insight__title { margin-bottom: var(--s-100); font-size: 1.5rem; line-height: 2rem; }
.insight__text { margin: 0 0 var(--s-400); max-width: 560px; color: var(--muted); }

.mock {
	flex: 1;
	margin: 0;
	padding: var(--s-200);
	border-radius: 16px;
	background: var(--ivory);
}

/* Elenco chat. */
.mock--chats { display: flex; flex-direction: column; gap: var(--s-200); }

.mock__more {
	margin: auto 0 0;
	padding: var(--s-100);
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: var(--paper);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	text-align: center;
}

.mock__chats { display: grid; gap: var(--s-75); margin: 0; padding: 0; list-style: none; }

.mock__chat {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--s-50) var(--s-200);
	padding: var(--s-200);
	border-radius: 12px;
	background: var(--paper);
	box-shadow: 0 1px 2px rgba(21, 18, 14, 0.06);
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.mock__chat:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(21, 18, 14, 0.3); }

.mock__when { grid-column: 1; font-size: 0.75rem; line-height: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mock__ask { grid-column: 1; font-size: 1rem; line-height: 1.5rem; font-weight: 600; }

.mock__meta {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: var(--s-50);
}

/* Su mobile l'elenco chat è più compatto: lingua e messaggi sulla riga della data. */
@media (max-width: 767px) {
	.mock { padding: var(--s-100); }
	.mock__chats { gap: var(--s-50); }
	.mock__chat { gap: 2px var(--s-100); padding: var(--s-100) 12px; }
	.mock__ask { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.25rem; }
	.mock__meta { grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; }
	.mock__count { font-size: 0.75rem; line-height: 1rem; }
}

/* Su mobile la dashboard si riduce all'essenziale: tre chat, gallery e statistiche, senza titoli e testi. */
@media (max-width: 767px) {
	.insights__grid { gap: var(--s-200); }
	.insight { padding: 0; border: 0; background: none; }
	.insight__title,
	.insight__text { display: none; }
	.mock { padding: 12px; border: 1px solid var(--line); background: var(--paper); }
	.mock__chat { background: var(--ivory); box-shadow: none; }
	.mock__chat:nth-child(n+4) { display: none; }
	.mock__more,
	.mock__figures div { background: var(--ivory); }
}

.mock__lang {
	padding: 0 var(--s-75);
	border-radius: 9999px;
	background: #F8EEEF;
	color: var(--oxblood);
	font-size: 0.75rem;
	line-height: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mock__count { font-size: 0.75rem; line-height: 1rem; color: var(--muted); white-space: nowrap; }

/* Gallery outfit. */
.mock--gallery { display: flex; flex-direction: column; gap: var(--s-200); }

.mock__looks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-75);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mock__look { display: grid; gap: var(--s-50); }

.mock__photo,
.mock__look img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 8px;
	object-fit: cover;
	background: linear-gradient(160deg, #E9E2D6, #CFC4B3);
}

.mock__look:nth-child(2) .mock__photo { background: linear-gradient(160deg, #E7D9D3, #C9AFA6); }
.mock__look:nth-child(3) .mock__photo { background: linear-gradient(160deg, #DCE1D8, #B5BFAE); }
.mock__look:nth-child(4) .mock__photo { background: linear-gradient(160deg, #DED9E3, #BAB2C4); }

.mock__date { font-size: 0.75rem; line-height: 1rem; color: var(--muted); text-align: center; }

/* Statistiche. */
.mock__bars {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--s-75);
	height: 128px;
	margin-bottom: var(--s-200);
}

.mock__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--s-50); }

.mock__bar {
	width: 100%;
	height: calc(var(--v) * (100% - 20px));
	min-height: 4px;
	border-radius: 6px 6px 2px 2px;
	background: var(--oxblood);
	transform-origin: 50% 100%;
}

.mock__col:nth-child(-n+5) .mock__bar { background: rgba(122, 35, 53, 0.45); }

.mock__day { font-size: 0.75rem; line-height: 1rem; color: var(--muted); }

.mock__figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-75);
	margin: 0;
}

.mock__figures div { padding: var(--s-100); border-radius: 12px; background: var(--paper); }
.mock__figures dt { font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.mock__figures dd {
	margin: var(--s-50) 0 0;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 479px) {
	.mock__looks { gap: 6px; }
	.mock__figures div { display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-75); }
	.mock__figures dd { font-size: 1.125rem; line-height: 1.5rem; }
}

/* Prezzi. */
.pricing .section-title { margin-bottom: var(--s-300); }
.pricing .section-lead { margin-bottom: var(--s-600); }

.pricing__grid { display: grid; gap: var(--s-300); }

@media (min-width: 640px) {
	.pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.pricing__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.plan {
	display: flex;
	flex-direction: column;
	padding: var(--s-400);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
}

.plan--free { border-color: var(--oxblood); background: #F8EEEF; }

.plan__name {
	margin-bottom: var(--s-300);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.plan--free .plan__name { color: var(--oxblood); }

.plan__price {
	margin-bottom: var(--s-75);
	font-size: 3rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.plan__credits { margin: 0; color: var(--muted); }

/* Su mobile ogni pacchetto è una riga: nome e crediti a sinistra, prezzo a destra. */
@media (max-width: 639px) {
	.pricing__grid { gap: var(--s-100); }
	.plan {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 2px var(--s-200);
		padding: var(--s-200);
		border-radius: 16px;
	}
	.plan__name { grid-column: 1; grid-row: 1; margin: 0; font-size: 0.75rem; line-height: 1rem; }
	.plan__credits { grid-column: 1; grid-row: 2; font-size: 0.875rem; line-height: 1.25rem; }
	.plan__price { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 1.75rem; }
}

/* Visibilità: quattro livelli di pubblico, dal più ristretto al più ampio. */
.visibility .section-title { margin-bottom: var(--s-300); }
.visibility .section-lead { margin-bottom: var(--s-600); }

.vis__grid { display: grid; gap: var(--s-200); }

/* Su mobile resta solo il testo iniziale. */
@media (max-width: 767px) {
	.vis__grid { display: none; }
	.visibility .section-lead { margin-bottom: 0; }
}

@media (min-width: 640px) {
	.vis__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.vis__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vis-option {
	--dots: 1;
	display: flex;
	flex-direction: column;
	padding: var(--s-300);
	border: 1px solid rgba(245, 241, 234, 0.1);
	border-radius: 24px;
	background: var(--night-raised);
	transition: border-color 0.7s var(--ease), transform 0.7s var(--ease);
}

.vis-option:hover { transform: translateY(-4px); border-color: rgba(231, 163, 177, 0.4); }

/* Un pallino per ogni "gruppo" di persone che vede Camille. */
.vis-option::before {
	content: "";
	display: block;
	width: calc(var(--dots) * 16px - 6px);
	height: 10px;
	margin-bottom: var(--s-400);
	background: radial-gradient(circle at 5px 5px, #E7A3B1 4.5px, transparent 5px) 0 0 / 16px 10px repeat-x;
}

.vis-option--2 { --dots: 3; }
.vis-option--3 { --dots: 6; }
.vis-option--4 { --dots: 10; }

.vis-option__mode {
	align-self: flex-start;
	margin: 0 0 var(--s-200);
	padding: 0 var(--s-75);
	border: 1px solid rgba(245, 241, 234, 0.2);
	border-radius: 9999px;
	font-size: 0.75rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--night-muted);
}

.vis-option__title { margin-bottom: var(--s-100); font-size: 1.25rem; line-height: 1.75rem; }
.vis-option p:not(.vis-option__mode) { margin: 0; color: var(--night-muted); }

.vis__note {
	margin: var(--s-400) 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--night-muted);
}

/* Provala: store demo e richiesta di demo. */
.try__grid { display: grid; gap: var(--s-300); align-items: start; }

@media (min-width: 1024px) {
	.try__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

.try-card {
	padding: var(--s-400);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
	scroll-margin-top: 112px;
}

.try-card--store { background: var(--night); border-color: var(--night); color: var(--night-text); }
.try-card--store p { color: var(--night-muted); }
.try-card--form > p { color: var(--muted); }
.try-card__title { margin-bottom: var(--s-100); font-size: 1.5rem; line-height: 2rem; }
.try-card .wp-block-buttons { margin-top: var(--s-300); }

.try-card--store .wp-block-button__link {
	background: var(--ivory);
	border-color: var(--ivory);
	color: var(--ink);
}

.try-card--store .wp-block-button__link::after {
	content: "↗";
	display: inline-block;
	margin-left: var(--s-75);
	transition: transform 0.5s var(--ease);
}

.try-card--store .wp-block-button__link:hover { background: #E7A3B1; border-color: #E7A3B1; color: var(--ink); }
.try-card--store .wp-block-button__link:hover::after { transform: translate(2px, -2px); }

/* Modulo. */
.demo-form {
	display: grid;
	gap: var(--s-200);
	margin-top: var(--s-300);
}

@media (min-width: 640px) {
	.demo-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.demo-form__field--wide { grid-column: 1 / -1; }
}

.demo-form p { margin: 0; }
.demo-form__field { display: grid; gap: var(--s-50); }
.demo-form__field label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }

.demo-form input[type="text"],
.demo-form input[type="email"],
.demo-form select,
.demo-form textarea {
	width: 100%;
	padding: var(--s-100) var(--s-200);
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--ivory);
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5rem;
	transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.demo-form textarea { resize: vertical; min-height: 96px; }

.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus {
	outline: none;
	border-color: var(--oxblood);
	background: var(--paper);
	box-shadow: 0 0 0 3px rgba(122, 35, 53, 0.15);
}

.demo-form__consent { display: flex; align-items: flex-start; gap: var(--s-100); font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.demo-form__consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--oxblood); }

.demo-form__button {
	display: inline-flex;
	padding: var(--s-100) var(--s-300);
	border: 0;
	border-radius: 9999px;
	background: var(--ink);
	color: var(--ivory);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.5s var(--ease), transform 0.5s var(--ease);
}

.demo-form__button:hover { background: var(--oxblood); transform: translateY(-2px); }
.demo-form__button:active { transform: scale(0.98); }
.demo-form__button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.demo-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.demo-form__notice { margin: var(--s-300) 0 0; padding: var(--s-200); border-radius: 12px; font-weight: 600; }
.demo-form__notice--ok { background: #E8F1E6; color: #1F4D24; }
.demo-form__notice--err { background: #F8EEEF; color: var(--oxblood); }

/* Domande. */
.faq__list { display: grid; gap: var(--s-100); max-width: 840px; }

.faq .wp-block-details {
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--paper);
	transition: border-color 0.5s var(--ease);
}

.faq .wp-block-details[open] { border-color: rgba(122, 35, 53, 0.35); }

.faq summary {
	position: relative;
	padding: var(--s-200) var(--s-700) var(--s-200) var(--s-300);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	border-radius: 16px;
}

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

.faq summary::before,
.faq summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--s-300);
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--oxblood);
	transition: transform 0.7s var(--ease);
}

.faq summary::after { transform: rotate(90deg); }
.faq [open] summary::after { transform: rotate(0deg); }

.faq .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 var(--s-300) var(--s-300);
	color: var(--muted);
}

/* Chiusura. */
.final-cta { text-align: center; }
.final-cta .section-title,
.final-cta .section-lead { margin-inline: auto; }
.final-cta .section-title { margin-bottom: var(--s-300); }
.final-cta .section-lead { margin-bottom: var(--s-400); }
.final-cta .wp-block-buttons { justify-content: center; }

@media (min-width: 768px) {
	.final-cta .section-title { font-size: 3.75rem; }
}

/* Cosa vede Camille: analisi dei capi, palette del cliente, accesso ai dati, sfida sullo store demo. */
.catalog .section-title { margin-bottom: var(--s-300); }
.catalog .section-lead { margin-bottom: var(--s-600); }

/* Carosello dei capi: scroll nativo con aggancio, frecce per chi usa mouse e tastiera. */
.items {
	margin: 0 0 var(--s-300);
	padding: var(--s-300);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
}

@media (min-width: 768px) {
	.items { padding: var(--s-400); }
}

.items__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); margin-bottom: var(--s-300); }
.items__count { margin: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.items__nav { display: flex; gap: var(--s-75); }

.items__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: 1.125rem;
	cursor: pointer;
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.items__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.items__btn:disabled { opacity: 0.35; cursor: default; }
.items__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.items__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--s-300);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.items__track::-webkit-scrollbar { display: none; }
.items__track:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 12px; }

.item {
	display: grid;
	gap: var(--s-300);
	scroll-snap-align: start;
	align-items: center;
}

@media (min-width: 768px) {
	.item { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--s-500); }
}

.item__media {
	position: relative;
	overflow: hidden;
	max-width: 280px;
	border-radius: 16px;
	background: var(--ivory);
}

.item__photo { display: block; width: 100%; height: auto; aspect-ratio: 600 / 758; object-fit: cover; }

.item__line {
	position: absolute;
	inset: 0 0 auto;
	height: 30%;
	background: linear-gradient(to bottom, rgba(231, 163, 177, 0) 0%, rgba(231, 163, 177, 0.35) 92%, #E7A3B1 100%);
	opacity: 0;
	transform: translateY(-110%);
	pointer-events: none;
}

.item__name { margin: 0 0 var(--s-200); font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
.item__price { margin-left: var(--s-75); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

.item__traits { display: grid; margin: 0; padding: 0; list-style: none; }

@media (min-width: 1024px) {
	.item__traits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-400); }
}

.item__trait {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--s-50) var(--s-200);
	padding: var(--s-100) 0;
	border-top: 1px solid var(--line);
}

.item__key { grid-column: 1; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oxblood); }
.item__value { grid-column: 1; font-size: 1rem; line-height: 1.5rem; }

.item__src {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	padding: 2px var(--s-75);
	border: 1px solid var(--line);
	border-radius: 9999px;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--muted);
	white-space: nowrap;
}

/* Su mobile ogni scheda sta in una schermata: foto piccola accanto al nome, caratteristiche su due colonne. */
@media (max-width: 767px) {
	.items { padding: var(--s-200); }
	.items__bar { margin-bottom: var(--s-100); }
	.items__btn { width: 40px; height: 40px; }
	.item {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: var(--s-200) var(--s-200);
		align-items: end;
	}
	.item__body { display: contents; }
	.item__media { grid-column: 1; grid-row: 1; border-radius: 12px; }
	.item__name { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.0625rem; line-height: 1.5rem; }
	.item__price { display: block; margin: 0; }
	.item__traits { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-200); }
	.item__trait { padding: 6px 0; gap: 2px; }
	.item__key { font-size: 0.6875rem; }
	.item__value { font-size: 0.8125rem; line-height: 1.125rem; }
	.item__src { display: none; }
	.item__dots { gap: 4px; }
	.item__dots i { width: 16px; height: 16px; }
	.item__dots-names { display: none; }
}

/* Analisi in scena: solo con JavaScript e movimento consentito. */
@media (prefers-reduced-motion: no-preference) {
	.items.is-ready .item__trait {
		opacity: 0;
		transform: translateX(16px);
		transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
		transition-delay: calc(0.3s + var(--i, 0) * 0.18s);
	}
	.items.is-ready .item.is-seen .item__trait { opacity: 1; transform: none; }
	.items.is-ready .item.is-seen .item__line { animation: item-scan 2.2s ease-in-out both; }
}

@keyframes item-scan {
	0% { opacity: 1; transform: translateY(-110%); }
	90% { opacity: 1; }
	100% { opacity: 0; transform: translateY(340%); }
}

/* Palette del cliente. */
.palette {
	display: grid;
	gap: var(--s-400);
	margin: 0 0 var(--s-300);
	padding: var(--s-400) var(--s-300);
	border-radius: 24px;
	background: var(--night);
	color: var(--night-text);
}

@media (min-width: 768px) {
	.palette { padding: var(--s-600) var(--s-500); }
}

@media (min-width: 1024px) {
	.palette { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); align-items: center; gap: var(--s-600); }
}

.palette__eyebrow { margin: 0 0 var(--s-100); font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #E7A3B1; }
.palette__title { margin: 0 0 var(--s-200); font-size: 1.75rem; line-height: 2.25rem; color: var(--night-text); }
.palette__text { margin: 0; color: var(--night-muted); }

.palette__card { display: grid; gap: var(--s-300); margin: 0; }

@media (min-width: 640px) {
	.palette__card { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start; }
}

.palette__media { position: relative; overflow: hidden; max-width: 260px; border-radius: 16px; }
.palette__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

.palette__pin,
.palette__num {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 9999px;
	background: #E7A3B1;
	color: var(--ink);
	font-size: 0.75rem;
	line-height: 1;
	font-weight: 700;
}

.palette__pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	box-shadow: 0 0 0 4px rgba(231, 163, 177, 0.3);
	transform: translate(-50%, -50%);
}

.palette__reads { display: grid; margin: 0 0 var(--s-300); padding: 0; list-style: none; }

.palette__read {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 2px var(--s-100);
	padding: var(--s-75) 0;
	border-top: 1px solid rgba(245, 241, 234, 0.12);
}

.palette__num { grid-row: 1 / span 2; align-self: center; }
.palette__key { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); }
.palette__value { font-size: 1rem; line-height: 1.5rem; }

.palette__label { margin: 0 0 var(--s-100); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }

.palette__swatches {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-100);
	margin: 0 0 var(--s-300);
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) {
	.palette__swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.palette__swatches:last-child { margin-bottom: 0; }

.swatch { display: grid; gap: var(--s-50); }

.swatch::before {
	content: "";
	display: block;
	aspect-ratio: 1;
	border-radius: 12px;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(245, 241, 234, 0.12);
}

.swatch__name { font-size: 0.75rem; line-height: 1rem; color: var(--night-muted); }

.palette__cuts { display: flex; flex-wrap: wrap; gap: var(--s-75); margin: 0; padding: 0; list-style: none; }

.palette__cuts li {
	padding: var(--s-50) var(--s-200);
	border: 1px solid rgba(245, 241, 234, 0.2);
	border-radius: 9999px;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

@media (prefers-reduced-motion: no-preference) {
	.palette.is-ready .palette__pin,
	.palette.is-ready .swatch { opacity: 0; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
	.palette.is-ready .palette__pin { transform: translate(-50%, -50%) scale(0.4); transition-delay: calc(0.2s + var(--n, 0) * 0.25s); }
	.palette.is-ready .swatch { transform: translateY(12px); transition-delay: calc(0.9s + var(--n, 0) * 0.07s); }
	.palette.is-seen .palette__pin { opacity: 1; transform: translate(-50%, -50%); }
	.palette.is-seen .swatch { opacity: 1; transform: none; }
}

.catalog__grid { display: grid; gap: var(--s-300); }

@media (min-width: 1024px) {
	.catalog__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.catalog-card {
	display: flex;
	flex-direction: column;
	padding: var(--s-400);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
}

.catalog-card__title { margin-bottom: var(--s-100); font-size: 1.5rem; line-height: 2rem; }
.catalog-card > p { margin: 0; color: var(--muted); }

.catalog-card--challenge { background: var(--night); border-color: var(--night); color: var(--night-text); }
.catalog-card--challenge > p { color: var(--night-muted); }
.catalog-card--challenge .wp-block-buttons { margin-top: auto; padding-top: var(--s-300); }

.catalog-card--challenge .wp-block-button__link { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }

.catalog-card--challenge .wp-block-button__link::after {
	content: "↗";
	display: inline-block;
	margin-left: var(--s-75);
	transition: transform 0.5s var(--ease);
}

.catalog-card--challenge .wp-block-button__link:hover { background: #E7A3B1; border-color: #E7A3B1; color: var(--ink); }
.catalog-card--challenge .wp-block-button__link:hover::after { transform: translate(2px, -2px); }

.access { display: grid; gap: var(--s-200); margin-top: var(--s-300); }

@media (min-width: 640px) {
	.access { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.access__col { padding: var(--s-200); border-radius: 16px; background: var(--ivory); }
.access__head { margin: 0 0 var(--s-100); font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; }
.access__list { display: grid; gap: var(--s-75); margin: 0; padding: 0; list-style: none; }

.access__list li {
	position: relative;
	padding-left: var(--s-300);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.access__list li::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	font-weight: 700;
	text-align: center;
}

.access__col--yes li::before { content: "✓"; color: var(--oxblood); }
.access__col--no li { color: var(--muted); }
.access__col--no li::before { content: "✕"; color: var(--muted); }

/* Camille nello store: ritratto dentro una vetrina, con badge e chat sovrapposta. */
.stage {
	position: relative;
	max-width: 600px;
}

.stage__store {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
	box-shadow: 0 32px 64px -40px rgba(21, 18, 14, 0.35);
}

.stage__bar {
	display: flex;
	align-items: center;
	gap: var(--s-100);
	padding: var(--s-100) var(--s-200);
	border-bottom: 1px solid var(--line);
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--muted);
}

.stage__dots { display: flex; gap: 4px; }
.stage__dots i { width: 8px; height: 8px; border-radius: 9999px; background: var(--line); }

.stage__url {
	flex: 1;
	padding: 2px var(--s-100);
	border-radius: 9999px;
	background: var(--ivory);
	text-align: center;
}

.stage__room { position: relative; background: #F1EFEC; }
.stage__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; }

/* Il cartellino con il nome, come quello dello staff in negozio. */
.stage__badge {
	position: absolute;
	top: 58%;
	right: 6%;
	display: grid;
	gap: 2px;
	margin: 0;
	padding: var(--s-100) var(--s-200);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 12px 24px -16px rgba(21, 18, 14, 0.4);
	backdrop-filter: blur(6px);
	transform: rotate(2deg);
}

.stage__badge-name { font-size: 1rem; line-height: 1.25rem; font-weight: 700; }
.stage__badge-role { font-size: 0.75rem; line-height: 1rem; color: var(--muted); }

.stage__status {
	display: inline-flex;
	align-items: center;
	gap: var(--s-50);
	margin-top: var(--s-50);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: #2F6B45;
}

.stage__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background: #3E9B5F;
	box-shadow: 0 0 0 3px rgba(62, 155, 95, 0.2);
}

.stage .chat__window {
	position: relative;
	z-index: 1;
	width: calc(100% - var(--s-400));
	margin: -140px auto 0;
}

/* Da tablet in su la chat scende in basso a sinistra e lascia libero il volto. */
@media (min-width: 768px) {
	.stage { display: grid; }
	.stage__store,
	.stage .chat__window { grid-area: 1 / 1; }
	.stage__store { justify-self: end; align-self: start; width: 64%; }
	.stage .chat__window { justify-self: start; width: 58%; margin: 200px 0 0; }
}

.chat__band { align-items: center; }

.chat__avatar {
	width: 28px;
	height: 28px;
	margin-right: calc(var(--s-100) * -1);
	border-radius: 9999px;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--night), 0 0 0 3px rgba(245, 241, 234, 0.3);
}

.chat__band .chat__name { margin-right: auto; }

/* Piacere, Camille: la scheda da membro dello staff. */
.staff {
	display: grid;
	gap: var(--s-600);
	align-items: center;
}

@media (min-width: 1024px) {
	.staff { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--s-800); }
}

.staff-card {
	justify-self: center;
	width: 100%;
	max-width: 340px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--paper);
	box-shadow: 0 40px 80px -48px rgba(21, 18, 14, 0.45);
	transition: transform 0.8s var(--ease);
}

/* Inclinata solo con mouse o trackpad: sul touch resta dritta. */
@media (hover: hover) and (pointer: fine) {
	.staff-card { transform: rotate(-3deg); }
	.staff-card:hover { transform: rotate(0deg) translateY(-4px); }
}

.staff-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-100) var(--s-200);
	background: var(--night);
	color: var(--night-muted);
	font-size: 0.75rem;
	line-height: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Su mobile al posto del cartellino resta solo la foto, in un tondo. */
@media (max-width: 767px) {
	.staff { gap: var(--s-400); }
	.staff-card {
		justify-self: start;
		width: 144px;
		border: 4px solid var(--paper);
		border-radius: 50%;
		box-shadow: 0 16px 32px -20px rgba(21, 18, 14, 0.45);
	}
	.staff-card__photo { transform: scale(1.6); transform-origin: 50% 22%; }
	.staff-card__top,
	.staff-card__body { display: none; }
}

.staff-card__hole { width: 40px; height: 8px; border-radius: 9999px; background: rgba(245, 241, 234, 0.2); }

.staff-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 0; background: #F1EFEC; }

.staff-card__body { padding: var(--s-300); }
.staff-card__name { margin: 0; font-size: 1.75rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.staff-card__role { margin: 0 0 var(--s-200); color: var(--oxblood); font-weight: 600; }

.staff-card__facts { display: grid; gap: 0; margin: 0; }
.staff-card__facts div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-100); padding: var(--s-75) 0; border-top: 1px solid var(--line); }
.staff-card__facts dt { font-size: 0.75rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.staff-card__facts dd { margin: 0; font-size: 0.875rem; line-height: 1.25rem; }

.staff .section-title { margin-bottom: var(--s-400); }

.staff__quote {
	max-width: 620px;
	margin: 0 0 var(--s-200);
	font-size: 1.25rem;
	line-height: 1.875rem;
}

@media (min-width: 768px) {
	.staff__quote { font-size: 1.5rem; line-height: 2.125rem; letter-spacing: -0.01em; }
}

.staff__sign {
	margin: var(--s-300) 0 0;
	font-size: 1.5rem;
	line-height: 2rem;
	font-style: italic;
	font-weight: 600;
	color: var(--oxblood);
}

.staff__sign::before { content: "— "; }

/* Cosa le chiedono i clienti: esempi di conversazione. */
.asks-band .section-title { margin-bottom: var(--s-300); }
.asks-band .section-lead { margin-bottom: var(--s-600); }

.asks { display: grid; gap: var(--s-200); }

@media (min-width: 640px) {
	.asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.asks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ask {
	display: flex;
	flex-direction: column;
	gap: var(--s-100);
	padding: var(--s-300);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
	transition: border-color 0.7s var(--ease), transform 0.7s var(--ease);
}

.ask:hover { transform: translateY(-4px); border-color: rgba(122, 35, 53, 0.3); }

.ask__tag {
	align-self: flex-start;
	margin: 0 0 var(--s-100);
	padding: 0 var(--s-75);
	border: 1px solid var(--line);
	border-radius: 9999px;
	font-size: 0.75rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--oxblood);
}

.ask__q,
.ask__a {
	margin: 0;
	padding: var(--s-75) var(--s-100);
	border-radius: 16px;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.ask__q {
	align-self: flex-end;
	max-width: 88%;
	background: var(--ink);
	color: var(--ivory);
	border-bottom-right-radius: 4px;
}

.ask__a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: var(--s-75);
	align-items: start;
	max-width: 94%;
	background: var(--ivory);
	border-bottom-left-radius: 4px;
}

.ask__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.asks__note { margin: var(--s-300) 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }

/* Mettila alla prova: banda scura con lo store demo. */
.challenge { text-align: center; }
.challenge .section-title,
.challenge .section-lead { margin-inline: auto; }
.challenge .section-title { margin-bottom: var(--s-300); }
.challenge .section-lead { margin-bottom: var(--s-400); }
.challenge .wp-block-buttons { justify-content: center; }

.challenge__link .wp-block-button__link::after,
.final-cta__demo .wp-block-button__link::after {
	content: "↗";
	display: inline-block;
	margin-left: var(--s-75);
	transition: transform 0.5s var(--ease);
}

.challenge__link .wp-block-button__link:hover::after,
.final-cta__demo .wp-block-button__link:hover::after { transform: translate(2px, -2px); }

.band--ink .is-ghost .wp-block-button__link {
	padding: var(--s-100) var(--s-300);
	background: transparent;
	border-color: rgba(245, 241, 234, 0.4);
	color: var(--ivory);
}

.band--ink .is-ghost .wp-block-button__link:hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }

/* Riservatezza: cosa legge Camille e installazione, su fondo chiaro. */
.privacy .section-title { margin-bottom: var(--s-300); }
.control { display: grid; gap: var(--s-200); margin-top: var(--s-600); }

@media (min-width: 1024px) {
	.control { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
}

.control-card {
	padding: var(--s-400);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
}

.control-card .access { margin-top: 0; }
.control-card__title { margin-bottom: var(--s-100); font-size: 1.5rem; line-height: 2rem; }
.control-card > p { margin: 0; color: var(--muted); }
.control-card > .control-card__note { margin-top: var(--s-300); font-size: 0.875rem; line-height: 1.25rem; }

.control-card--install::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: var(--s-300);
	border-radius: 12px;
	background: #F8EEEF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A2335' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M5 21h14'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* Stati iniziali del motion: solo con JavaScript attivo e motion consentito. */
.motion-ok .hero__eyebrow,
.motion-ok .hero__lead,
.motion-ok .hero__actions,
.motion-ok .hero__proof,
.motion-ok .chat,
.motion-ok .hero-video { opacity: 0; }

.motion-ok .hero__title { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
	.chat__window,
	.benefit,
	.mock__chat,
	.vis-option,
	.staff-card,
	.catalog-card--challenge .wp-block-button__link::after,
	.ask,
	.challenge__link .wp-block-button__link::after,
	.final-cta__demo .wp-block-button__link::after,
	.tagline__word { transition: none; }
	.tagline__word { color: var(--ink); }
}

/* Lenis. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Pulsanti chiari su fondo scuro, più forti della regola di GeneratePress. */
.band--ink a.wp-block-button__link:not(.has-background),
.try-card--store a.wp-block-button__link:not(.has-background) { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.band--ink a.wp-block-button__link:not(.has-background):hover,
.try-card--store a.wp-block-button__link:not(.has-background):hover { background: #E7A3B1; border-color: #E7A3B1; color: var(--ink); }
.band--ink .is-ghost a.wp-block-button__link:not(.has-background) { background: transparent; border-color: rgba(245, 241, 234, 0.4); color: var(--ivory); }
.band--ink .is-ghost a.wp-block-button__link:not(.has-background):hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }

/* La presentazione di Camille in corsivo, come la firma. */
.staff__quote { font-style: italic; }

/* Mettila alla prova: banda bordeaux, per staccarla dalla prova virtuale scura che la precede. */
.band--ink.challenge { background: var(--oxblood); }
.challenge .eyebrow,
.challenge .section-lead { color: rgba(245, 241, 234, 0.85); }

/* GeneratePress aggiunge 20px sotto ogni sezione: le bande devono toccarsi. */
.site-main.landing > .wp-block-group { margin-block: 0; }


/* Come fa: due passaggi con lo stesso schema, prima i capi e poi le persone. */
.catalog__step {
	display: flex;
	align-items: center;
	gap: var(--s-100);
	margin: 0 0 var(--s-300);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
}

.catalog__num {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9999px;
	background: var(--oxblood);
	color: var(--paper);
	font-size: 0.875rem;
	line-height: 1;
}

.items + .catalog__step,
.catalog .items + p.catalog__step { margin-top: var(--s-700); }
.catalog__step-text { max-width: 680px; margin: calc(var(--s-200) * -1) 0 var(--s-300); color: var(--muted); }

.item__dots { display: flex; gap: 6px; margin: var(--s-50) 0; }
.item__dots i { width: 22px; height: 22px; border-radius: 9999px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(21, 18, 14, 0.12); }
.item__dots-names { display: block; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }

/* Sfondi: le sezioni chiare alternano avorio e sabbia, così ogni blocco si stacca dal precedente. */
:root { --sand: #E9E0CF; }
#camille,
#catalogo,
#riservatezza,
#prova { background: var(--sand); }

/* CTA finale: i crediti gratuiti in evidenza. */
.final-cta__badge {
	display: inline-block;
	margin: 0 0 var(--s-300);
	padding: var(--s-75) var(--s-200);
	border-radius: 9999px;
	background: #E7A3B1;
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.5rem;
}
.final-cta .section-lead strong { color: #E7A3B1; font-weight: 700; }

/* Cosa sa fare: card con richiesta, foto del cliente, look proposto e risposta di Camille. */
.looks { display: grid; gap: var(--s-200); }

@media (min-width: 640px) {
	.looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.look {
	display: flex;
	flex-direction: column;
	gap: var(--s-100);
	padding: var(--s-200);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--paper);
	transition: border-color 0.7s var(--ease), transform 0.7s var(--ease);
}

.look:hover { transform: translateY(-4px); border-color: rgba(122, 35, 53, 0.3); }

.look__q,
.look__a {
	margin: 0;
	padding: var(--s-75) var(--s-100);
	border-radius: 16px;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.look__q {
	align-self: flex-end;
	max-width: 92%;
	background: var(--ink);
	color: var(--ivory);
	border-bottom-right-radius: 4px;
}

.look__who {
	display: block;
	margin-bottom: 2px;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--night-muted);
}

.look__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	background: var(--ivory);
}

.look__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

.look:hover .look__photo { transform: scale(1.03); }

.look__before {
	position: absolute;
	left: var(--s-100);
	bottom: var(--s-100);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px 4px 6px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 6px 20px rgba(21, 18, 14, 0.18);
}

.look__before img {
	display: block;
	width: 96px;
	height: 128px;
	border-radius: 8px;
	object-fit: cover;
	object-position: 50% 15%;
}

.look__before span {
	font-size: 0.75rem;
	line-height: 0.875rem;
	font-weight: 600;
	color: var(--ink);
}

.look__a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: var(--s-75);
	align-items: start;
	background: var(--ivory);
	border-bottom-left-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.look,
	.look__photo { transition: none; }
}

@media (max-width: 639px) {
	.looks {
		grid-auto-flow: column;
		grid-auto-columns: 84%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(var(--gutter, 16px) * -1);
		padding: 0 var(--gutter, 16px) var(--s-100);
		scrollbar-width: none;
	}
	.looks::-webkit-scrollbar { display: none; }
	.look { scroll-snap-align: center; }
}

@media (max-width: 639px) {
	.look__before img { width: 84px; height: 112px; }
}

/* Popup store demo */
.demo-dialog {
	width: min(400px, calc(100vw - 2 * var(--s-200)));
	padding: var(--s-500) var(--s-400) var(--s-400);
	border: 0;
	border-radius: 24px;
	background: var(--ivory);
	color: var(--ink);
	text-align: center;
	box-shadow: 0 24px 64px rgba(21, 18, 14, 0.28);
}
.demo-dialog::backdrop {
	background: rgba(19, 18, 9, 0.6);
	backdrop-filter: blur(4px);
}
.demo-dialog[open] { animation: demo-dialog-in 0.35s var(--ease); }
@keyframes demo-dialog-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
}
.demo-dialog__close {
	position: absolute;
	top: var(--s-100);
	right: var(--s-100);
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.demo-dialog__close:hover { background: var(--line); color: var(--ink); }
.demo-dialog__avatar {
	display: block;
	width: 96px;
	height: 96px;
	margin: 0 auto var(--s-200);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line);
}
.demo-dialog__title {
	margin: 0 0 var(--s-75);
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.demo-dialog__text {
	margin: 0 0 var(--s-300);
	color: var(--muted);
	text-wrap: pretty;
}
.demo-dialog__code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-100);
	margin: 0 0 var(--s-300);
	padding: var(--s-75) var(--s-75) var(--s-75) var(--s-200);
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: var(--paper);
}
.demo-dialog__pw {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}
.demo-dialog__copy {
	padding: var(--s-75) var(--s-200);
	border: 0;
	border-radius: 9999px;
	background: var(--ivory);
	color: var(--oxblood);
	font: inherit;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
}
.demo-dialog__copy:hover { background: var(--line); }
.demo-dialog__go,
.demo-dialog__go:visited {
	display: block;
	padding: var(--s-100) var(--s-300);
	border-radius: 9999px;
	background: var(--ink);
	color: var(--ivory);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.demo-dialog__go:hover,
.demo-dialog__go:focus-visible { background: var(--oxblood); color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.demo-dialog[open] { animation: none; }
}