/* C: palette e misure */
:root {
	--ink: #05003d;
	--ink-2: #1a1060;
	--bg: #f6f6fb;
	--surface: #ffffff;
	--surface-2: #eeeef7;
	--line: #e3e3ee;
	--muted: #6b6b80;
	--text: #191333;

	--note: #FFD84D;
	--note-deep: #e8bd25;
	--review: #2EA8FF;
	--review-deep: #1c86d6;
	--fact: #1f9d55;
	--fact-deep: #177841;
	--star: #ffb400;

	--flat-a: #dcdce6;
	--flat-b: #e9e9f2;
	--flat-c: #cdcddc;
	--flat-bg: #f2f2f7;

	--band-bg: #05003d;
	--band-text: #d9d7ef;
	--band-line: rgba(255,255,255,.14);
	--band-surface: rgba(255,255,255,.06);

	--pin-shadow: 2px 4px 10px rgba(5,0,61,.30);
	--pin-shadow-lg: 6px 14px 34px rgba(5,0,61,.28);
	--card-shadow: 0 1px 2px rgba(5,0,61,.04), 0 12px 34px rgba(5,0,61,.06);

	--display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--wrap: 1140px;
	--r-card: 18px;
	--step: clamp(56px, 9vw, 108px);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ink: #e9e7fb;
		--ink-2: #cfcbf5;
		--bg: #08062a;
		--surface: #110d44;
		--surface-2: #191352;
		--line: rgba(255,255,255,.13);
		--muted: #a3a0c4;
		--text: #e9e7fb;

		--flat-a: #2a2560;
		--flat-b: #221d55;
		--flat-c: #352f72;
		--flat-bg: #14104a;

		--band-bg: #03011c;
		--band-text: #c9c6e8;
		--band-line: rgba(255,255,255,.12);
		--band-surface: rgba(255,255,255,.05);

		--pin-shadow: 2px 4px 12px rgba(0,0,0,.5);
		--pin-shadow-lg: 6px 14px 34px rgba(0,0,0,.55);
		--card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.35);
	}
}
:root[data-theme="dark"] {
	--ink: #e9e7fb;
	--ink-2: #cfcbf5;
	--bg: #08062a;
	--surface: #110d44;
	--surface-2: #191352;
	--line: rgba(255,255,255,.13);
	--muted: #a3a0c4;
	--text: #e9e7fb;

	--flat-a: #2a2560;
	--flat-b: #221d55;
	--flat-c: #352f72;
	--flat-bg: #14104a;

	--band-bg: #03011c;
	--band-text: #c9c6e8;
	--band-line: rgba(255,255,255,.12);
	--band-surface: rgba(255,255,255,.05);

	--pin-shadow: 2px 4px 12px rgba(0,0,0,.5);
	--pin-shadow-lg: 6px 14px 34px rgba(0,0,0,.55);
	--card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 17px/1.6 var(--body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 800; color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(2.7rem, 6.6vw, 5.1rem); line-height: .98; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.04; }
h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.lede { max-width: 60ch; color: var(--muted); font-size: 1.125rem; line-height: 1.65; }
/* C: solo sopra e sotto — la scorciatoia 'padding: X 0' azzerava il margine laterale di .wrap
   su ogni sezione che usa le due classi insieme, e in mobile il contenuto toccava i bordi */
.section { padding-block: var(--step); }
.eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.ic { width: 18px; height: 18px; flex: none; }

:where(a, button, summary):focus-visible { outline: 3px solid var(--review); outline-offset: 3px; border-radius: 6px; }

/* C: pulsanti */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 13px 24px;
	font: 600 16px/1 var(--body);
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn--primary { background: var(--ink); color: var(--bg); box-shadow: 0 8px 22px rgba(5,0,61,.22); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(5,0,61,.3); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface); transform: translateY(-2px); }
.btn--light { background: var(--note); color: #05003d; box-shadow: 0 8px 26px rgba(255,216,77,.4); }
.btn--light:hover { transform: translateY(-2px); }

/* C: pin */
.pin {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 12px;
	font: 500 12px/1.25 var(--body);
	color: #05003d;
	box-shadow: var(--pin-shadow);
	width: 104px;
	height: 104px;
}
.pin--m { width: 128px; height: 128px; }
.pin--l { width: 164px; height: 164px; }
.pin--note { background: var(--note); border-radius: 50%; }
.pin--review { background: var(--review); border-radius: 16px; color: #04213a; }
.pin--fact { background: var(--fact); border-radius: 16px; color: #fff; }
.pin--sponsored { background: #5B7FA6; border-radius: 8px; color: #fff; }
.pin .foot {
	position: absolute;
	left: 0; right: 0; bottom: 7px;
	font: 800 7px/1 var(--body);
	text-transform: uppercase;
	letter-spacing: .5px;
	opacity: .62;
}
.pin .body { max-height: 100%; overflow: hidden; }
.pin--stack::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--review-deep);
	transform: translate(7px, 7px);
	z-index: -1;
}
.pin--stack { z-index: 0; }
/* C: contenuto del pin recensione, come si presenta nel prodotto */
.pin .rv-subj { font-size: 12px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
.pin .rv-more { font: 700 9px/1 var(--body); text-transform: uppercase; letter-spacing: .04em; margin-top: 7px; text-decoration: underline; opacity: .75; }
.pin--review .stars svg { width: 13px; height: 13px; }
.pin .glyph { width: 20px; height: 20px; margin-bottom: 5px; opacity: .8; }

/* C: scenografia pagina */
.stage {
	position: relative;
	background: var(--flat-bg);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--card-shadow);
	overflow: hidden;
}
.stage__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 12px 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
.stage__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--flat-c); }
.stage__url {
	margin-left: 10px;
	flex: 1;
	height: 22px;
	border-radius: 999px;
	background: var(--flat-b);
	display: flex;
	align-items: center;
	padding: 0 12px;
	font: 500 11px/1 var(--mono);
	color: var(--muted);
	letter-spacing: -.02em;
	overflow: hidden;
	white-space: nowrap;
}
.stage__page { position: relative; padding: 30px 32px 34px; }

/* C: contenuto neutro di sfondo */
.skel { display: flex; flex-direction: column; gap: 11px; }
.skel i { display: block; height: 11px; border-radius: 6px; background: var(--flat-a); }
.skel i.t { height: 22px; width: 52%; background: var(--flat-c); border-radius: 8px; margin-bottom: 8px; }
.skel i.s { width: 88%; }
.skel i.xs { width: 64%; }
.skel .media { height: 108px; border-radius: 12px; background: var(--flat-b); margin: 6px 0; }
.skel .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* C: hero */
.hero { position: relative; padding-top: clamp(28px, 5vw, 54px); padding-bottom: var(--step); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 .accent { position: relative; display: inline-block; }
.hero h1 .accent::after {
	content: "";
	position: absolute;
	left: -2px; right: -2px; bottom: .1em;
	height: .34em;
	background: var(--note);
	border-radius: 3px;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left;
	animation: swipe .7s .5s cubic-bezier(.2,.8,.3,1) forwards;
}
.hero h1 { position: relative; z-index: 1; }
@keyframes swipe { to { transform: scaleX(1); } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }

.hero__stage { position: relative; }
.hero__stage .stage__page { min-height: 380px; }
.hero .pin {
	position: absolute;
	opacity: 0;
	transform: translateY(-26px) scale(.55);
	animation: drop .62s cubic-bezier(.18,.9,.28,1.25) forwards;
}
@keyframes drop {
	0%   { opacity: 0; transform: translateY(-26px) scale(.55); }
	60%  { opacity: 1; transform: translateY(3px) scale(1.05); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hero .pin.float { animation: drop .62s cubic-bezier(.18,.9,.28,1.25) forwards, bob 5.5s ease-in-out infinite; }
@keyframes bob {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -6px; }
}

/* C: nastro etichette */
.layerstrip { display: flex; flex-wrap: wrap; gap: 10px; }
.revcard__demo { margin: 0 0 12px; padding: 6px 10px; border-radius: 8px; background: var(--flat-b); color: var(--muted); font: 600 11.5px/1.4 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--line);
	background: var(--surface);
	border-radius: 999px;
	padding: 7px 14px 7px 9px;
	font: 500 13px/1 var(--body);
	color: var(--ink);
}
.chip .swatch { width: 14px; height: 14px; flex: none; box-shadow: 1px 1px 4px rgba(5,0,61,.25); }
.chip .swatch.n { background: var(--note); border-radius: 50%; }
.chip .swatch.r { background: var(--review); border-radius: 3px; }
.chip .swatch.f { background: var(--fact); border-radius: 5px; }

/* C: citazione */
.manifesto { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.manifesto blockquote {
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.4rem, 3vw, 2.25rem);
	line-height: 1.28;
	letter-spacing: -.02em;
	color: var(--ink);
	max-width: 24ch;
}
/* C: blocco a una colonna */
.manifesto .grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 60px); align-items: center; }
.manifesto blockquote em { font-style: normal; background: var(--note); border-radius: 4px; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.manifesto p { max-width: 62ch; }

/* C: gli strati */
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.layer {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: 30px 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: var(--card-shadow);
	overflow: hidden;
}
.layer::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--accent, var(--note));
}
.layer--note { --accent: var(--note); }
.layer--review { --accent: var(--review); }
.layer--fact { --accent: var(--fact); }
.layer__demo {
	height: 196px;
	border-radius: 12px;
	background: var(--flat-bg);
	border: 1px solid var(--line);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.layer__tag { font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.layer p { color: var(--muted); font-size: 15.5px; }
.layer .kicker { color: var(--ink); font-weight: 600; font-size: 15.5px; }

/* C: apertura nota */
.flipdemo { position: relative; width: 136px; height: 136px; }
.flipdemo .pin { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.flipdemo .card {
	position: absolute;
	inset: 0;
	background: var(--note);
	border-radius: 12px;
	box-shadow: var(--pin-shadow);
	padding: 12px;
	font: 500 11.5px/1.35 var(--body);
	color: #05003d;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transform: rotateY(180deg) scale(1.28);
	backface-visibility: hidden;
	transition: transform .5s cubic-bezier(.3,.7,.3,1);
}
.flipdemo.open .pin { transform: rotateY(180deg); }
.flipdemo.open .card { transform: rotateY(0) scale(1.28); }
.flipdemo .card .row { margin-top: auto; display: flex; gap: 6px; }
.flipdemo .card .row span { flex: 1; border-radius: 5px; padding: 4px 0; text-align: center; font-size: 10px; font-weight: 700; }
.flipdemo .card .row .save { background: #05003d; color: #fff; }
.flipdemo .card .row .cancel { background: rgba(5,0,61,.12); }

/* C: stelle */
.stars { display: inline-flex; gap: 2px; align-items: center; }
.stars svg { width: 15px; height: 15px; }
.stars .s { fill: var(--flat-c); }
.stars .s.on { fill: var(--star); }

/* C: sequenza guidata */
.howto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(26px, 5vw, 60px); align-items: center; }
.steps { display: flex; flex-direction: column; gap: 4px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 15px 16px;
	border-radius: 12px;
	border: 1px solid transparent;
	transition: background .35s ease, border-color .35s ease;
}
.steps li .num {
	font: 600 12px/1 var(--mono);
	color: var(--muted);
	padding-top: 4px;
	width: 22px;
	flex: none;
	transition: color .35s ease;
}
.steps li strong { display: block; font-weight: 600; color: var(--ink); font-size: 16.5px; }
.steps li span.d { color: var(--muted); font-size: 14.5px; }
.steps li.on { background: var(--surface); border-color: var(--line); }
.steps li.on .num { color: var(--ink); }

.demo { position: relative; }
.demo .stage__page { min-height: 340px; }
.demo .fab {
	position: absolute;
	top: 16px; right: 16px;
	width: 46px; height: 46px;
	border: none;
	border-radius: 50%;
	background: var(--ink);
	color: var(--bg);
	line-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 10px rgba(5,0,61,.35);
	transition: transform .25s cubic-bezier(.3,.8,.3,1.4), background .25s ease;
	z-index: 6;
	cursor: default;
	padding: 0;
}
.demo[data-step="1"] .fab { transform: scale(.86); }
.demo[data-step="2"] .fab,
.demo[data-step="3"] .fab,
.demo[data-step="4"] .fab,
.demo[data-step="5"] .fab { transform: rotate(45deg); }
.demo .menu {
	position: absolute;
	top: 72px; right: 16px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: flex-end;
	z-index: 6;
	pointer-events: none;
}
.demo .menu .mi {
	display: flex;
	align-items: center;
	gap: 9px;
	opacity: 0;
	transform: translateY(-8px) scale(.8);
	transition: opacity .22s ease, transform .22s cubic-bezier(.3,.8,.3,1.4);
}
.demo[data-step="2"] .menu .mi,
.demo[data-step="3"] .menu .mi { opacity: 1; transform: none; }
.demo .menu .mi:nth-child(2) { transition-delay: .05s; }
.demo[data-step="3"] .menu .mi:not(.pick) { opacity: .25; }
.demo .menu .lbl {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 11px;
	font: 600 12px/1 var(--body);
	color: var(--ink);
	white-space: nowrap;
	box-shadow: 0 3px 10px rgba(5,0,61,.1);
}
.demo .menu .sw { width: 28px; height: 28px; box-shadow: 1px 2px 7px rgba(5,0,61,.3); }
.demo .menu .sw.n { background: var(--note); border-radius: 50%; }
.demo .menu .sw.r { background: var(--review); border-radius: 4px; }
.demo .menu .sw.f { background: var(--fact); border-radius: 7px; }
.demo .cursor {
	position: absolute;
	left: 0; top: 0;
	width: 24px; height: 24px;
	z-index: 8;
	transition: transform .75s cubic-bezier(.4,.05,.2,1), opacity .3s ease;
	transform: translate(0, 0);
	pointer-events: none;
	filter: drop-shadow(0 2px 4px rgba(5,0,61,.35));
}
.demo .ghost {
	position: absolute;
	left: 0; top: 0;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--note);
	opacity: 0;
	transform: scale(.8);
	transition: opacity .25s ease, transform .45s cubic-bezier(.3,.8,.3,1), left .75s cubic-bezier(.4,.05,.2,1), top .75s cubic-bezier(.4,.05,.2,1);
	z-index: 7;
	box-shadow: var(--pin-shadow);
	pointer-events: none;
}
.demo[data-step="4"] .ghost { opacity: .55; }
.demo .placed {
	position: absolute;
	opacity: 0;
	transform: scale(.4);
	transition: opacity .3s ease, transform .45s cubic-bezier(.2,.9,.3,1.5);
	z-index: 5;
}
.demo[data-step="5"] .placed,
.demo[data-step="6"] .placed,
.demo[data-step="7"] .placed { opacity: 1; transform: scale(1); }
.demo .writing {
	position: absolute;
	z-index: 9;
	background: var(--note);
	border-radius: 12px;
	box-shadow: var(--pin-shadow-lg);
	padding: 13px;
	width: 186px;
	color: #05003d;
	font: 500 12.5px/1.4 var(--body);
	opacity: 0;
	transform: scale(.7) rotateY(60deg);
	transform-origin: center;
	transition: opacity .3s ease, transform .45s cubic-bezier(.3,.8,.3,1.1);
	display: flex;
	flex-direction: column;
	gap: 9px;
	pointer-events: none;
}
.demo[data-step="6"] .writing { opacity: 1; transform: scale(1) rotateY(0); }
.demo .writing .caret { display: inline-block; width: 1.5px; height: 1em; background: #05003d; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo .writing .bar { display: flex; gap: 7px; }
.demo .writing .bar span { flex: 1; text-align: center; border-radius: 6px; padding: 6px 0; font-size: 11px; font-weight: 700; }
.demo .writing .bar .save { background: #05003d; color: #fff; }
.demo .writing .bar .cancel { background: rgba(5,0,61,.12); }
.demo .saved {
	position: absolute;
	z-index: 9;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--ink);
	color: var(--bg);
	border-radius: 999px;
	padding: 8px 15px;
	font: 600 12.5px/1 var(--body);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}
.demo[data-step="7"] .saved { opacity: 1; transform: translateY(0); }

/* C: sezione recensioni */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.revcard {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--card-shadow);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.revcard .head { display: flex; align-items: center; gap: 14px; }
.revcard .score { font: 800 34px/1 var(--display); color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.revcard .who { font-weight: 600; font-size: 15px; color: var(--ink); }
.revcard .cnt { color: var(--muted); font-size: 13.5px; }
.dist { display: grid; gap: 7px; }
.dist .row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.dist .lab { width: 26px; flex: none; font-variant-numeric: tabular-nums; }
.dist .bar { flex: 1; height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.dist .bar i { display: block; height: 100%; width: 0; background: var(--star); border-radius: 5px; transition: width .9s cubic-bezier(.3,.8,.3,1); }
.dist .num { width: 30px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.quote {
	border-left: 3px solid var(--review);
	padding: 3px 0 3px 15px;
	font-size: 15px;
	color: var(--text);
}
.quote .by { display: block; margin-top: 7px; font-size: 13px; color: var(--muted); }

.revstage { position: relative; }
.revstage .stage__page { min-height: 320px; }
.revstage .pin { position: absolute; }

/* C: banda scura */
.band { background: var(--band-bg); color: var(--band-text); }
.band h2, .band h3 { color: #fff; }
.band .lede, .band p { color: var(--band-text); }
.band .eyebrow { color: rgba(255,255,255,.55); }
.band .revcard { background: var(--band-surface); border-color: var(--band-line); box-shadow: none; }
.band .revcard .score, .band .revcard .who { color: #fff; }
.band .revcard .cnt, .band .dist .row, .band .quote .by { color: rgba(255,255,255,.6); }
.band .dist .bar { background: rgba(255,255,255,.15); }
.band .chip { background: var(--band-surface); border-color: var(--band-line); color: #fff; }
.band .note-strip { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; }
.band .note-strip div { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: rgba(255,255,255,.75); }
.band .note-strip .ic { color: var(--review); }

/* C: scheda della verifica */
.fcard .head { display: flex; align-items: center; gap: 14px; }
.fcard .score { flex: none; width: 58px; height: 58px; border-radius: 16px; background: var(--fact); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.fcard .score b { font: 800 24px/1 var(--display); letter-spacing: -.02em; }
.fcard .score span { font-size: 10px; font-weight: 600; letter-spacing: .06em; opacity: .85; margin-top: 3px; }
.fcard .lab { font-weight: 600; font-size: 15px; color: var(--ink); }
.fcard .src { color: var(--muted); font-size: 13px; }
.fcard .neu { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--muted); }
.fcard .neu b { font: 700 15px/1 var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
.fcard .neubar { height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin-top: 7px; }
.fcard .neubar i { display: block; height: 100%; width: 0; background: var(--fact); border-radius: 5px; transition: width .9s ease; }
.fcard .mis { display: grid; gap: 6px; font-size: 12.5px; }
.fcard .mis div { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.fcard .mis .n { flex: 1; color: var(--text); }
.fcard .mis .v { font-variant-numeric: tabular-nums; }
.fcard .mis .p { flex: none; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--flat-b); }
.fcard .claim { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text); }
.fcard .st { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; margin-top: 1px; }
.fcard .st--ok { background: rgba(31,157,85,.13); color: var(--fact-deep); }
.fcard .st--nv { background: var(--flat-b); color: var(--muted); }
.fcard .lettori { display: flex; height: 8px; border-radius: 5px; overflow: hidden; margin-top: 7px; }
.fcard .lettori i { display: block; height: 100%; }
/* C: i quattro esiti possibili */
.esiti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.esito { border-top: 3px solid var(--line); padding-top: 13px; }
.esito b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 5px; }
.esito p { font-size: 13.5px; color: var(--muted); margin: 0; }
.esito--l { border-top-color: var(--fact); }
.esito--o { border-top-color: #8a8a9e; }
.esito--f { border-top-color: #7c3aed; }

/* C: casi d'uso */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.use {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.use:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); }
.use .marker { width: 15px; height: 15px; flex: none; box-shadow: 1px 1px 4px rgba(5,0,61,.24); }
.use .marker.n { background: var(--note); border-radius: 50%; }
.use .marker.r { background: var(--review); border-radius: 3px; }
.use .marker.f { background: var(--fact); border-radius: 4px; }
.use h3 { font-size: 1.02rem; font-family: var(--body); font-weight: 600; letter-spacing: 0; display: flex; align-items: center; gap: 9px; }
.use p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* C: promesse */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.promise { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 2px solid var(--ink); }
.promise strong { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.promise span { font-size: 14.5px; color: var(--muted); }

/* C: domande */
.faq { display: grid; gap: 2px; max-width: 820px; }
details {
	border-bottom: 1px solid var(--line);
	padding: 6px 0;
}
details summary {
	cursor: pointer;
	list-style: none;
	padding: 17px 40px 17px 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.14rem;
	color: var(--ink);
	position: relative;
	letter-spacing: -.01em;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
	content: "";
	position: absolute;
	right: 6px; top: 50%;
	width: 11px; height: 11px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .22s ease;
}
details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
details p { padding: 0 40px 18px 0; color: var(--muted); font-size: 15.5px; max-width: 66ch; }

/* C: chiusura */
.closing { position: relative; text-align: center; padding: clamp(70px, 11vw, 130px) 0 clamp(60px, 9vw, 110px); overflow: hidden; }
.closing h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.closing .field { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.closing .field .p {
	position: absolute;
	box-shadow: var(--pin-shadow);
	opacity: 0;
	transform: scale(.3) translateY(-16px);
}
.closing .field.go .p { animation: pop .5s cubic-bezier(.2,.9,.3,1.4) forwards; }
@keyframes pop {
	0% { opacity: 0; transform: scale(.3) translateY(-16px); }
	70% { opacity: 1; transform: scale(1.08) translateY(0); }
	100% { opacity: .92; transform: scale(1) translateY(0); }
}
.closing .inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.closing .inner p { max-width: 46ch; margin: 0 auto; }

/* C: intestazione */
.nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease;
}
.nav.stuck { border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 26px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand svg { width: 21px; height: 21px; }
.brand img { display: block; height: 26px; width: auto; }
.nav__links { display: flex; gap: 24px; margin-left: auto; }
.nav__links a { text-decoration: none; font-size: 15px; color: var(--muted); transition: color .18s ease; }
.nav__links a:hover { color: var(--ink); }

/* C: piè di pagina */
footer.site { border-top: 1px solid var(--line); padding: 34px 0 44px; }
footer.site .in { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .links { display: flex; gap: 20px; flex-wrap: wrap; }

/* C: comparsa allo scorrimento */
.rise { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .08s; }
.rise.d2 { transition-delay: .16s; }
.rise.d3 { transition-delay: .24s; }

/* C: modi d'uso */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; align-items: start; }
.way {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: 28px 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: var(--card-shadow);
}
.way__num { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.way h3 { font-size: 1.32rem; }
.way p { color: var(--muted); font-size: 15.5px; }
.way .kicker { color: var(--ink); font-weight: 600; font-size: 15.5px; }
.way__cta { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.way__note { font-size: 13px; color: var(--muted); }
.steps-mini { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--muted); line-height: 1.75; }
.steps-mini code { background: var(--surface-2); border-radius: 4px; padding: 1px 6px; font-family: var(--mono); font-size: 12px; }
/* C: indirizzo interno del browser: non e' un collegamento perche' nessuna pagina puo' aprirlo. Si copia. */
.copia { background: var(--surface-2); border: 1px solid transparent; border-radius: 4px; padding: 1px 6px; font-family: var(--mono); font-size: 12px; color: inherit; cursor: pointer; }
.copia:hover { border-color: var(--line); }
.copia.fatto { background: #e8f6ec; border-color: #b7e4c7; }
/* C: blocco di codice con le sue linguette */
.cbox { background: var(--ink); border-radius: 12px; overflow: hidden; }
.cbox__bar { display: flex; align-items: stretch; flex-wrap: wrap; border-bottom: 1px solid rgba(233,231,251,.14); }
.cbox__bar button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .01em;
	color: rgba(233,231,251,.5); padding: 11px 13px; cursor: pointer; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.cbox__bar button:hover { color: rgba(233,231,251,.8); }
.cbox__bar button.on { color: #fff; box-shadow: inset 0 -2px 0 var(--review); }
.cbox__copia { margin-left: auto; color: rgba(233,231,251,.5); }
.cbox .snippet { border-radius: 0; }
.snippet {
	background: var(--ink);
	color: #e9e7fb;
	border-radius: 12px;
	padding: 14px 16px;
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.6;
	overflow-x: auto;
	white-space: pre;
}
.snippet--wrap { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; max-height: 190px; overflow-y: auto; }
/* C: il livello dei pin è caricato ma resta silenzioso: il pulsante compare solo quando si prova.
   La decisione NON sta più qui: da quando il prodotto vive in una radice d'ombra, il CSS di questa
   pagina non lo raggiunge. Se ne occupa lui, e la pagina glielo chiede con pintruProva(). */

@media (max-width: 940px) {
	.hero__grid, .manifesto .grid, .howto, .split, .ways { grid-template-columns: minmax(0, 1fr); }
	.layers, .uses, .esiti { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nav__links { display: none; }
	.hero__stage .stage__page { min-height: 330px; }
}
@media (max-width: 620px) {
	body { font-size: 16px; }
	.layers, .uses, .promises, .plans, .esiti { grid-template-columns: minmax(0, 1fr); }
	.stage__page { padding: 22px 18px 26px; }
	.hero .pin { width: 84px; height: 84px; font-size: 10.5px; padding: 9px; }
	.hero .pin--m { width: 102px; height: 102px; }
	.hero .pin .foot { font-size: 6px; bottom: 5px; }
	.skel .cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.rise { opacity: 1; transform: none; }
	.hero .pin, .closing .field .p { opacity: 1; transform: none; }
	.hero h1 .accent::after { transform: scaleX(1); }
}

/* C: piani */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
/* C: scelta del periodo */
.perio{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);margin-top:22px}
.perio button{border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--muted);padding:8px 18px;border-radius:999px;cursor:pointer}
.perio button.on{background:var(--ink);color:var(--bg)}
.perio .save{font-size:12px;font-weight:700;color:#1f9d55;margin-left:6px}
.amount .alt{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.plan{
	position:relative;display:flex;flex-direction:column;
	background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
	padding:30px 28px 28px;box-shadow:var(--card-shadow);
}
.plan--hot{border-color:var(--ink)}
.plan__tag{
	position:absolute;top:-11px;left:28px;background:var(--note);color:#05003d;
	font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
	padding:6px 11px;border-radius:999px;
}
.plan__name{font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.amount{display:flex;align-items:baseline;gap:7px;margin:14px 0 4px}
.amount b{font:800 clamp(38px,5vw,52px)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.amount span{font:600 14px/1 var(--body);color:var(--muted)}
.plan__for{font:400 15px/1.5 var(--body);color:var(--muted);margin:0 0 22px;min-height:45px}
.feat{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.feat li{display:flex;gap:11px;align-items:flex-start;font:400 15px/1.45 var(--body);color:var(--text)}
.feat svg{width:16px;height:16px;flex:none;margin-top:3px;stroke-width:2.4}
.feat .yes svg{color:var(--ink)}
.feat .no{color:var(--muted)}
.feat .no svg{color:var(--line)}
.feat b{font-weight:600}
.plan__foot{display:flex;flex-direction:column;gap:9px}
.plan__note{font:400 12.5px/1.45 var(--body);color:var(--muted)}
.plans__after{
	margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
	font:400 14px/1.6 var(--body);color:var(--muted);max-width:66ch;
}
/* C: avviso di vendita sospesa */
.plans__sospesa{
	margin:0 0 22px;padding:14px 16px;border-radius:12px;
	background:#fff3cd;border:1px solid #e8d27a;color:#5c4a05;
	font:400 14px/1.55 var(--body);max-width:72ch;
}
.plans__sospesa b{display:block;font-weight:700;margin-bottom:2px}
.btn--off{opacity:.55;cursor:not-allowed;pointer-events:none;text-align:center}
@media (max-width:760px){
	.plans{grid-template-columns:1fr;gap:26px}
	.plan__for{min-height:0}
}