/* ==========================================================================
   Verde Casino — foglio di stile unico del sito.
   Ordine delle regole: cascata (token -> reset -> base -> blocchi -> utilita).
   I nomi dei token provengono dal dizionario di questa build (prefisso bpm).
   ========================================================================== */

/* --- Caratteri ospitati in locale ---------------------------------------- */
@font-face {
	font-family: "Montserrat";
	src: url("/typeface/montserrat-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/typeface/montserrat-latin-800-normal.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/typeface/inter-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/typeface/inter-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* --- Token di progetto ---------------------------------------------------- */
:root {
	/* colori: valori gia spostati dalla build, si usano cosi come sono */
	--bpm-lead: #7aca00;
	--bpm-spot: #060609;
	--bpm-action-down: #000000;
	--bpm-surface: #0f1011;
	--bpm-layer: #17191a;
	--bpm-letters: #ffffff;
	--bpm-faint: #bebebe;
	--bpm-divider: #2a2d2e;
	--bpm-line-strong: #3d4142;
	--bpm-grad-1: #3f375b;
	--bpm-blend-b: #1c1929;
	--bpm-notice: #a93226;

	/* passo verticale: 5/10 — scala "decimale pari" */
	--bpm-1: 5px;
	--bpm-2: 10px;
	--bpm-3: 15px;
	--bpm-4: 25px;
	--bpm-5: 40px;
	--bpm-6: 60px;
	--bpm-7: 90px;
	--bpm-8: 140px;

	/* ritmo unico fra sezioni vicine: la somma di due bordi resta sotto il tetto */
	--bpm-sec-y: 45px;

	/* geometria: sopra morbido, sotto netto */
	--r-1: 2px 2px 0 0;
	--r-2: 4px 4px 0 0;
	--r-3: 6px 6px 0 0;
	--r-4: 12px 12px 0 0;
	--r-5: 20px 20px 0 0;
	--r-6: 26px 26px 0 0;
	--r-7: 32px 32px 0 0;
	--r-8: 40px 40px 0 0;
	--bpm-stadium: 9999px 9999px 0 0;
	--bpm-orb: 50%;

	--d-1: 0 -1px 0 rgba(0, 0, 0, 0.08) inset;
	--d-2: 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
	--d-3: 0 2px 4px rgba(0, 0, 0, 0.06);
	--d-4: 0 4px 12px rgba(0, 0, 0, 0.1);
	--d-5: 0 10px 28px rgba(0, 0, 0, 0.14);
	--d-6: 0 16px 40px rgba(0, 0, 0, 0.18);
	--d-7: 0 22px 54px rgba(0, 0, 0, 0.22);
	--d-8: 0 30px 70px rgba(0, 0, 0, 0.26);

	--bpm-hair: 1px;
	--bpm-base: 2px;
	--bpm-heavy: 3px;

	/* tipografia */
	--bpm-banner: "Montserrat", "Segoe UI", system-ui, sans-serif;
	--bpm-reading: "Inter", "Segoe UI", system-ui, sans-serif;
	--bpm-display-1: clamp(28px, 6.1vw, 60px);
	--bpm-h2: clamp(22px, 3.1vw, 34px);
	--bpm-lg-2: clamp(19px, 1.8vw, 24px);
	--bpm-sub-2: 19px;
	--bpm-sm-2: 16px;
	--bpm-xs-2: 14px;
	--bpm-body: 16px;
	--bpm-caption: 13px;
	--bpm-xs: 10px;
	--bpm-close: 1.1;
	--bpm-default: 1.5;
	--bpm-loose: 1.65;
	--bpm-book: 400;
	--bpm-half: 600;
	--bpm-thick: 800;
	--e-close: -0.02em;
	--bpm-regular: 0;
	--e-loose: 0.06em;

	/* movimento: numeri estratti per questa build, non arrotondati */
	--bpm-snap: 87ms;
	--t-regular: 170ms;
	--bpm-slow: 348ms;
	--bpm-land: cubic-bezier(0.25, 0.6, 0.41, 0.97);
	--bpm-take-off: cubic-bezier(0.35, 0.07, 0.36, 0.96);
	--bpm-even: cubic-bezier(0.35, 0.07, 0.36, 0.96);
	--bpm-overshoot: cubic-bezier(0.21, 1.75, 0.5, 1);

	/* contenitori */
	--bpm-max: 1200px;
	--bpm-column: 1200px;
	--bpm-slim: 460px;
	--bpm-padding-desktop: 56px;
	--bpm-edge-mid: 32px;
	--bpm-padding-mobile: 16px;
	--bpm-edge: var(--bpm-padding-desktop);
	--bpm-size-desktop: 52px;
	--bpm-short: 52px;
	--bpm-shell: 80px;
}

/* --- Schermi stretti: scala e bordi si accorciano ------------------------- */
@media (max-width: 860px) {
	:root {
		--bpm-sub-2: 17px;
		--bpm-sm-2: 14px;
		--bpm-xs-2: 12px;
		--bpm-body: 15px;
		--bpm-caption: 12px;
		--bpm-xs: 9px;
		--bpm-sec-y: 34px;
		--bpm-edge: var(--bpm-edge-mid);
	}
}
@media (max-width: 580px) {
	:root {
		--bpm-edge: var(--bpm-padding-mobile);
		--bpm-sec-y: 30px;
	}
}

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html,
body {
	overflow-x: clip;
}
html {
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bpm-surface);
	color: var(--bpm-letters);
	font-family: var(--bpm-reading);
	font-size: var(--bpm-body);
	font-weight: var(--bpm-book);
	line-height: var(--bpm-default);
	letter-spacing: var(--bpm-regular);
}
img,
svg {
	max-width: 100%;
}
img {
	display: block;
	height: auto;
}
figure {
	margin: 0;
}
button,
input,
textarea {
	font: inherit;
	color: inherit;
}
ul,
ol {
	margin: 0;
	padding: 0;
}

/* --- Base tipografica ----------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	overflow-wrap: anywhere;
}
h1 {
	font-family: var(--bpm-banner);
	font-size: var(--bpm-display-1);
	font-weight: var(--bpm-thick);
	line-height: var(--bpm-close);
	letter-spacing: var(--e-close);
	text-transform: uppercase;
}
h2 {
	font-family: var(--bpm-banner);
	font-size: var(--bpm-h2);
	font-weight: var(--bpm-half);
	line-height: var(--bpm-close);
	letter-spacing: var(--bpm-regular);
}
h3 {
	font-family: var(--bpm-reading);
	font-size: var(--bpm-lg-2);
	font-weight: var(--bpm-half);
	line-height: var(--bpm-close);
}
h4 {
	font-family: var(--bpm-reading);
	font-size: var(--bpm-sub-2);
	font-weight: var(--bpm-half);
	line-height: var(--bpm-default);
}
h5,
h6 {
	font-family: var(--bpm-reading);
	font-size: var(--bpm-sm-2);
	font-weight: var(--bpm-half);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
}
p {
	margin: 0 0 var(--bpm-4);
}
p:last-child {
	margin-bottom: 0;
}
a {
	color: var(--bpm-lead);
	text-underline-offset: 3px;
	transition: color var(--t-regular) var(--bpm-land);
}
a:hover {
	color: var(--bpm-letters);
}
strong,
b {
	font-weight: var(--bpm-half);
}
:focus-visible {
	outline: var(--bpm-base) solid var(--bpm-lead);
	outline-offset: 3px;
}

/* --- Accessibilita e servizio -------------------------------------------- */
.skip-jump {
	position: absolute;
	inset-inline-start: var(--bpm-3);
	z-index: 200;
	padding: var(--bpm-2) var(--bpm-4);
	border-radius: var(--r-3);
	background: var(--bpm-lead);
	color: var(--bpm-spot);
	font-family: var(--bpm-banner);
	font-weight: var(--bpm-thick);
	font-size: var(--bpm-caption);
	text-decoration: none;
}
.skip-jump:not(:focus) {
	top: -200px !important;
}
.skip-jump:focus {
	top: var(--bpm-3);
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Guscio comune delle sezioni ----------------------------------------- */
.byko-core,
.kuly-core,
.vedagim-core,
.posoxy-core,
.bedyva-core,
.kedy-core,
.xunitin-core,
.malod-core,
.pupivyf-core,
.tupu-core,
.xagylum-core,
.finadoz-core,
.budinub-core,
.nenu-core,
.mukux-core {
	width: 100%;
	max-width: calc(var(--bpm-max) + 2 * var(--bpm-padding-desktop));
	margin-inline: auto;
	padding-inline: var(--bpm-edge);
}
.pageMain {
	flex: 1 0 auto;
	display: block;
}

/* ==========================================================================
   Testata — composizione "logo e bottone menu" (nessuna voce in riga),
   comportamento normale: la testata scorre insieme alla pagina.
   ========================================================================== */
.byko {
	position: relative;
	z-index: 60;
	background: var(--bpm-spot);
	color: var(--bpm-letters);
	border-bottom: 0;
}
.byko-shell {
	display: flex;
	align-items: center;
	gap: var(--bpm-3);
	width: 100%;
	max-width: calc(var(--bpm-max) + 2 * var(--bpm-padding-desktop));
	margin-inline: auto;
	padding-inline: var(--bpm-edge);
	padding-block: var(--bpm-2);
	min-height: 52px;
}
.byko-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: var(--bpm-1);
	border-radius: var(--bpm-orb);
	background: var(--bpm-surface);
	color: var(--bpm-letters);
	text-decoration: none;
}
.byko-badge-figure {
	display: block;
	height: 60px;
	width: auto;
	flex-shrink: 0;
}
.byko-flag {
	font-size: var(--bpm-sub-2);
	line-height: 1;
	flex-shrink: 0;
}
.byko-age {
	flex-shrink: 0;
	padding: 3px var(--bpm-2);
	border-radius: var(--r-2);
	background: var(--bpm-notice);
	color: var(--bpm-letters);
	font-family: var(--bpm-banner);
	font-size: var(--bpm-xs);
	font-weight: var(--bpm-thick);
	letter-spacing: var(--e-loose);
	line-height: 1.8;
}
.byko-tools {
	display: flex;
	align-items: center;
	gap: var(--bpm-3);
	margin-inline-start: auto;
}
.byko-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: var(--bpm-5);
	border: var(--bpm-base) solid var(--bpm-lead);
	border-radius: var(--bpm-stadium);
	background: var(--bpm-surface);
	color: var(--bpm-lead);
	font-family: var(--bpm-banner);
	font-size: var(--bpm-xs-2);
	font-weight: var(--bpm-thick);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: transform var(--t-regular) var(--bpm-land), background var(--t-regular) var(--bpm-land), color var(--t-regular) var(--bpm-land);
}
.byko-key:hover {
	transform: translateY(-4px);
	background: var(--bpm-lead);
	color: var(--bpm-spot);
}
.byko-menu-tap {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-shrink: 0;
	width: 46px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--r-3);
	background: transparent;
	color: var(--bpm-letters);
	cursor: pointer;
}
.byko-lines {
	display: block;
	width: 24px;
	height: var(--bpm-base);
	background: var(--bpm-letters);
	transition: transform var(--t-regular) var(--bpm-land);
}
.byko-menu-tap[aria-expanded="true"] .byko-lines:nth-child(1) {
	transform: translateY(4px) rotate(45deg);
}
.byko-menu-tap[aria-expanded="true"] .byko-lines:nth-child(2) {
	transform: translateY(-4px) rotate(-45deg);
}
.byko-slide {
	display: none;
	border-top: var(--bpm-hair) solid var(--bpm-divider);
	background: var(--bpm-spot);
}
.byko-slide.is-open {
	display: block;
}
.byko-map {
	width: 100%;
	max-width: calc(var(--bpm-max) + 2 * var(--bpm-padding-desktop));
	margin-inline: auto;
	padding-inline: var(--bpm-edge);
	padding-block: var(--bpm-4);
	max-height: 70vh;
	overflow-y: auto;
}
.byko-queue {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--bpm-1) var(--bpm-5);
	list-style: none;
}
.byko-entry {
	display: block;
}
.byko-jump {
	display: block;
	padding-block: var(--bpm-2);
	color: var(--bpm-letters);
	font-family: var(--bpm-banner);
	font-size: 15px;
	font-weight: var(--bpm-half);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--t-regular) var(--bpm-land);
}
.byko-jump:hover {
	color: var(--bpm-lead);
}
.byko-jump[aria-current="page"] {
	color: var(--bpm-lead);
}

/* --- La riga della testata va a capo sugli schermi molto stretti ---------- */
@media (max-width: 580px) {
	.byko-shell {
		flex-wrap: wrap;
		height: auto;
		row-gap: var(--bpm-2);
	}
	.byko-badge-figure {
		height: 44px;
	}
	.byko-tools {
		order: 5;
		flex-basis: 100%;
		margin-inline-start: 0;
	}
	.byko-tools .byko-key {
		width: 100%;
		padding-inline: var(--bpm-3);
		font-size: 12px;
	}
	.byko-menu-tap {
		margin-inline-start: auto;
	}
	.byko-queue {
		grid-template-columns: 1fr;
	}
	.byko-jump {
		white-space: normal;
	}
}

/* ==========================================================================
   Primo schermo — immagine a tutta larghezza sopra, testo sotto.
   ========================================================================== */
.vedagim {
	padding-block: 0 var(--bpm-sec-y);
}
.vedagim-figure {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.vedagim-shot {
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: center 42%;
}
.vedagim-figure::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 40%;
	background: linear-gradient(to bottom, rgba(15, 16, 17, 0), var(--bpm-surface));
	pointer-events: none;
}
.vedagim-core {
	padding-block-start: var(--bpm-5);
}
.vedagim-note {
	display: inline-block;
	margin-block-end: var(--bpm-3);
	padding: var(--bpm-1) var(--bpm-3);
	border-radius: var(--bpm-stadium);
	background: var(--bpm-layer);
	color: var(--bpm-lead);
	font-family: var(--bpm-reading);
	font-size: var(--bpm-xs);
	font-weight: var(--bpm-half);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
}
.vedagim-lead {
	max-width: var(--bpm-slim);
	margin-block: var(--bpm-4) 0;
	color: var(--bpm-faint);
	font-size: var(--bpm-sm-2);
	line-height: var(--bpm-loose);
}
.vedagim-tools {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bpm-2);
	margin-block-start: var(--bpm-5);
}
.vedagim-fine {
	display: block;
	color: var(--bpm-faint);
	font-size: var(--bpm-caption);
}

@media (max-width: 860px) {
	.vedagim-shot {
		height: 220px;
	}
	.vedagim-core {
		padding-block-start: var(--bpm-4);
	}
}

/* ==========================================================================
   Intestazione di pagina — grappolo di etichette e titolo.
   ========================================================================== */
.posoxy {
	padding-block: var(--bpm-sec-y);
	border-bottom: var(--bpm-hair) solid var(--bpm-divider);
}
.posoxy-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpm-2);
	margin-block-end: var(--bpm-4);
}
.posoxy-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--bpm-1) var(--bpm-3);
	border-radius: var(--bpm-stadium);
	background: var(--bpm-lead);
	color: var(--bpm-spot);
	font-size: var(--bpm-xs);
	font-weight: var(--bpm-half);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
}
.posoxy-lead {
	max-width: var(--bpm-slim);
	margin-block: var(--bpm-4) 0;
	color: var(--bpm-faint);
	font-size: var(--bpm-sm-2);
	line-height: var(--bpm-loose);
}

/* ==========================================================================
   Blocco a schede — due colonne di larghezza alternata.
   ========================================================================== */
.bedyva {
	padding-block: var(--bpm-sec-y);
}
.bedyva-stack {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--bpm-4);
	margin-block-start: var(--bpm-5);
}
.bedyva-brick {
	flex: 0 0 calc(60% - var(--bpm-4) / 2);
	padding: var(--bpm-5);
	border: var(--bpm-hair) solid var(--bpm-divider);
	border-radius: var(--r-4);
	background: var(--bpm-layer);
	color: var(--bpm-letters);
	transition: background var(--t-regular) var(--bpm-land), border-color var(--t-regular) var(--bpm-land);
}
.bedyva-brick:nth-child(4n + 2),
.bedyva-brick:nth-child(4n + 3) {
	flex-basis: calc(40% - var(--bpm-4) / 2);
}
.bedyva-brick:hover {
	background: var(--bpm-blend-b);
	border-color: var(--bpm-line-strong);
}
.bedyva-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-block-end: var(--bpm-3);
	border: var(--bpm-hair) solid var(--bpm-line-strong);
	border-radius: var(--r-3);
	background: var(--bpm-spot);
	color: var(--bpm-lead);
}
.bedyva-glyph svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bedyva-brick h3 {
	margin-block-end: var(--bpm-3);
	color: var(--bpm-letters);
}
.bedyva-body {
	color: var(--bpm-faint);
	font-size: var(--bpm-body);
	line-height: var(--bpm-default);
}

@media (max-width: 860px) {
	.bedyva-brick,
	.bedyva-brick:nth-child(4n + 2),
	.bedyva-brick:nth-child(4n + 3) {
		flex-basis: 100%;
	}
	.bedyva-brick {
		padding: var(--bpm-4);
	}
}

/* ==========================================================================
   Testo lungo — titolo a lato, paragrafi nella colonna larga.
   ========================================================================== */
.pupivyf {
	padding-block: var(--bpm-sec-y);
}
.pupivyf-part {
	display: grid;
	grid-template-columns: minmax(0, 28fr) minmax(0, 72fr);
	gap: var(--bpm-6);
	align-items: start;
}
.pupivyf-part + .pupivyf-part {
	margin-block-start: var(--bpm-6);
}
.pupivyf-side {
	position: sticky;
	top: var(--bpm-4);
	align-self: start;
	text-align: center;
}
.pupivyf-side h2 {
	margin-block-start: 0;
	color: var(--bpm-letters);
}
.pupivyf-main {
	padding-inline-start: var(--bpm-6);
	border-inline-start: var(--bpm-base) solid var(--bpm-divider);
	color: var(--bpm-letters);
}
.pupivyf-main p {
	color: var(--bpm-faint);
	line-height: var(--bpm-loose);
}
.pupivyf-main a {
	color: var(--bpm-lead);
}
.pupivyf-main a:hover {
	color: var(--bpm-letters);
}
.pupivyf-main strong {
	color: var(--bpm-letters);
}
.pupivyf-queue {
	margin: 0 0 var(--bpm-4);
	padding-inline-start: var(--bpm-4);
	color: var(--bpm-faint);
	line-height: var(--bpm-loose);
}
.pupivyf-queue li {
	margin-block-end: var(--bpm-2);
}
.pupivyf-queue li::marker {
	color: var(--bpm-lead);
}
.pupivyf-shot {
	width: 100%;
	max-height: 52vh;
	margin-block: var(--bpm-4);
	border-radius: var(--r-4);
	object-fit: cover;
	align-self: start;
}

@media (max-width: 860px) {
	.pupivyf-part {
		grid-template-columns: 1fr;
		gap: var(--bpm-3);
	}
	.pupivyf-part + .pupivyf-part {
		margin-block-start: var(--bpm-5);
	}
	.pupivyf-side {
		position: static;
		text-align: start;
	}
	.pupivyf-main {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

/* ==========================================================================
   Tabella a schede fluttuanti (senza tag table).
   ========================================================================== */
.tupu {
	padding-block: var(--bpm-sec-y);
}
.tupu-queue {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--bpm-4);
	margin-block-start: var(--bpm-5);
	list-style: none;
}
.tupu-brick {
	padding: var(--bpm-5);
	border: var(--bpm-hair) solid var(--bpm-divider);
	border-radius: var(--r-4);
	background: var(--bpm-layer);
	color: var(--bpm-letters);
}
.tupu-line {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.tupu-line + .tupu-line {
	margin-block-start: var(--bpm-3);
	padding-block-start: var(--bpm-3);
	border-top: var(--bpm-hair) solid var(--bpm-divider);
}
.tupu-mark {
	color: var(--bpm-faint);
	font-size: var(--bpm-xs);
	font-weight: var(--bpm-half);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
}
.tupu-value {
	color: var(--bpm-letters);
	font-size: var(--bpm-body);
	font-weight: var(--bpm-half);
}

@media (max-width: 860px) {
	.tupu-brick {
		padding: var(--bpm-4);
	}
}

/* ==========================================================================
   Opinioni — linea verticale con pallini.
   ========================================================================== */
.xunitin {
	padding-block: var(--bpm-sec-y);
}
.xunitin-queue {
	margin-block-start: var(--bpm-5);
	padding-inline-start: 0;
	border-inline-start: var(--bpm-hair) solid var(--bpm-lead);
	list-style: none;
}
.xunitin-entry {
	position: relative;
	padding-inline-start: var(--bpm-6);
	padding-block-end: var(--bpm-6);
}
.xunitin-entry:last-child {
	padding-block-end: 0;
}
.xunitin-entry::before {
	content: "";
	position: absolute;
	inset-inline-start: -8px;
	inset-block-start: 6px;
	width: 16px;
	height: 16px;
	border-radius: var(--bpm-orb);
	background: var(--bpm-lead);
}
.xunitin-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--bpm-3);
	margin-block-end: var(--bpm-2);
}
.xunitin-person {
	color: var(--bpm-letters);
	font-size: var(--bpm-caption);
	font-weight: var(--bpm-half);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
}
.xunitin-stars {
	color: var(--bpm-lead);
	font-size: var(--bpm-caption);
	letter-spacing: 1px;
}
.xunitin-quote {
	margin: 0;
}
.xunitin-quote p {
	margin: 0;
	color: var(--bpm-faint);
	line-height: var(--bpm-loose);
}

@media (max-width: 860px) {
	.xunitin-entry {
		padding-inline-start: var(--bpm-4);
		padding-block-end: var(--bpm-5);
	}
	.xunitin-entry::before {
		width: 12px;
		height: 12px;
		inset-inline-start: -6px;
	}
}

/* ==========================================================================
   Domande frequenti — colonna fissa a sinistra, elenco a destra.
   ========================================================================== */
.kedy {
	padding-block: var(--bpm-sec-y);
}
.kedy-split {
	display: grid;
	grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
	gap: var(--bpm-6);
	align-items: start;
}
.kedy-side {
	position: sticky;
	top: var(--bpm-4);
	align-self: start;
	padding: var(--bpm-5);
	border: var(--bpm-hair) solid var(--bpm-divider);
	border-radius: var(--r-4);
	background: var(--bpm-layer);
	color: var(--bpm-letters);
}
.kedy-lead {
	margin-block-start: var(--bpm-3);
	color: var(--bpm-faint);
	font-size: var(--bpm-caption);
	line-height: var(--bpm-loose);
}
.kedy-queue {
	display: flex;
	flex-direction: column;
	gap: var(--bpm-4);
}
.kedy-entry {
	border-bottom: var(--bpm-hair) solid var(--bpm-divider);
	padding-block-end: var(--bpm-4);
}
.kedy-entry summary {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--bpm-3);
	cursor: pointer;
	list-style: none;
}
.kedy-entry summary::-webkit-details-marker {
	display: none;
}
.kedy-entry summary h3 {
	color: var(--bpm-letters);
}
.kedy-sign {
	width: 22px;
	height: 22px;
	position: relative;
	flex-shrink: 0;
	color: var(--bpm-lead);
}
.kedy-sign::before,
.kedy-sign::after {
	content: "";
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 3px;
	width: 16px;
	height: var(--bpm-base);
	background: currentColor;
	transition: transform var(--t-regular) var(--bpm-land);
}
.kedy-sign::after {
	transform: rotate(90deg);
}
.kedy-entry[open] .kedy-sign::after {
	transform: rotate(0deg);
}
.kedy-body {
	overflow: hidden;
	margin-block-start: var(--bpm-3);
	color: var(--bpm-faint);
	line-height: var(--bpm-loose);
}
.kedy-entry[open] .kedy-body {
	animation: kedy-unfold var(--bpm-slow) var(--bpm-land) both;
}
@keyframes kedy-unfold {
	from {
		max-height: 0;
		opacity: 0;
	}
	to {
		max-height: 900px;
		opacity: 1;
	}
}

@media (max-width: 860px) {
	.kedy-split {
		grid-template-columns: 1fr;
		gap: var(--bpm-4);
	}
	.kedy-side {
		position: static;
		padding: var(--bpm-4);
	}
}

/* ==========================================================================
   Richiamo finale — blocco invertito a tutta larghezza.
   ========================================================================== */
.malod {
	padding-block: var(--bpm-sec-y);
	background: var(--bpm-lead);
	color: var(--bpm-spot);
}
.malod-core {
	text-align: center;
}
.malod-head {
	color: var(--bpm-spot);
	font-family: var(--bpm-banner);
	font-weight: var(--bpm-thick);
	letter-spacing: var(--e-close);
	text-transform: uppercase;
}
.malod-copy {
	margin-block: var(--bpm-4) 0;
	margin-inline: auto;
	max-width: var(--bpm-slim);
	color: var(--bpm-spot);
	font-size: var(--bpm-sm-2);
	line-height: var(--bpm-default);
}
.malod-tools {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bpm-2);
	margin-block-start: var(--bpm-5);
}
.malod-fine {
	color: var(--bpm-spot);
	font-size: var(--bpm-caption);
}

/* ==========================================================================
   Firma dell'autrice — testo a sinistra, ritratto a destra.
   ========================================================================== */
.nenu {
	display: block;
	padding-block: var(--bpm-4) var(--bpm-sec-y);
}
.nenu-brick {
	display: flex;
	align-items: center;
	gap: var(--bpm-4);
	padding-block: var(--bpm-4);
	border-top: var(--bpm-hair) solid var(--bpm-divider);
}
.nenu-body {
	flex: 1 1 auto;
	margin: 0;
	color: var(--bpm-faint);
	font-size: var(--bpm-caption);
	font-style: italic;
}
.nenu-person {
	color: var(--bpm-lead);
	text-decoration: underline;
}
.nenu-person:hover {
	color: var(--bpm-letters);
	text-decoration-thickness: 2px;
}
.nenu-dash {
	margin-inline: 6px;
}
.nenu-credit {
	color: var(--bpm-faint);
}
.nenu-portrait {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--bpm-orb);
	object-fit: cover;
}

/* ==========================================================================
   Scheda autrice — manifesto a tutta larghezza al posto del primo schermo.
   ========================================================================== */
.budinub {
	padding-block: var(--bpm-sec-y);
	background: linear-gradient(135deg, var(--bpm-grad-1), var(--bpm-surface));
	color: var(--bpm-letters);
}
.budinub-grid {
	display: grid;
	grid-template-columns: 256px minmax(0, 1fr);
	gap: var(--bpm-6);
	align-items: start;
}
.budinub-portrait {
	width: 256px;
	aspect-ratio: 4 / 5;
	height: auto;
	border-radius: var(--r-5);
	box-shadow: var(--d-5);
	object-fit: cover;
	object-position: center 30%;
	align-self: start;
}
.budinub-main {
	display: block;
	min-width: 0;
}
.budinub-note {
	display: block;
	margin-block-end: var(--bpm-2);
	color: var(--bpm-lead);
	font-family: var(--bpm-reading);
	font-size: var(--bpm-caption);
	font-weight: var(--bpm-half);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
}
.budinub-person {
	font-size: clamp(32px, 5.4vw, 60px);
}
.budinub-bio {
	max-width: 540px;
	margin-block: var(--bpm-4) 0;
	color: var(--bpm-letters);
	font-size: var(--bpm-sm-2);
	line-height: var(--bpm-loose);
}
.budinub-queue {
	margin-block-start: var(--bpm-4);
	padding-inline-start: var(--bpm-4);
	color: var(--bpm-faint);
	font-size: var(--bpm-caption);
	line-height: var(--bpm-loose);
}
.budinub-queue li::marker {
	color: var(--bpm-lead);
}
.budinub-shelf {
	padding-block: var(--bpm-sec-y);
}
.budinub-shelf-heading {
	margin-block-end: var(--bpm-4);
}
.budinub-shelf-queue {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--bpm-4);
	list-style: none;
}
.budinub-shelf-entry {
	padding: var(--bpm-4);
	border: var(--bpm-hair) solid var(--bpm-divider);
	border-radius: var(--r-4);
	background: var(--bpm-layer);
	color: var(--bpm-letters);
}
.budinub-shelf-entry a {
	color: var(--bpm-letters);
	font-weight: var(--bpm-half);
	text-decoration: none;
}
.budinub-shelf-entry a:hover {
	color: var(--bpm-lead);
}

@media (max-width: 860px) {
	.budinub-grid {
		grid-template-columns: 1fr;
		gap: var(--bpm-4);
	}
	.budinub-portrait {
		width: min(240px, 70%);
	}
}

/* ==========================================================================
   Pagine legali — un unico riquadro bordato.
   ========================================================================== */
.xagylum {
	padding-block: var(--bpm-sec-y);
}
.xagylum-box {
	padding: var(--bpm-6);
	border: var(--bpm-hair) solid var(--bpm-line-strong);
	border-radius: var(--r-5);
	background: var(--bpm-layer);
	color: var(--bpm-letters);
	box-shadow: var(--d-3);
}
.xagylum-box h2 {
	margin-block-start: var(--bpm-5);
	color: var(--bpm-letters);
}
.xagylum-box h2:first-child {
	margin-block-start: 0;
}
.xagylum-box p {
	color: var(--bpm-faint);
	line-height: var(--bpm-loose);
}
.xagylum-box h2 + p {
	margin-block-start: var(--bpm-3);
}
.xagylum-queue {
	margin: 0 0 var(--bpm-4);
	padding-inline-start: var(--bpm-4);
	color: var(--bpm-faint);
	line-height: var(--bpm-loose);
}
.xagylum-queue li {
	margin-block-end: var(--bpm-2);
}
.xagylum-queue li::marker {
	color: var(--bpm-lead);
}
.xagylum-fine {
	margin-block-start: var(--bpm-5);
	padding-block-start: var(--bpm-4);
	border-top: var(--bpm-hair) solid var(--bpm-divider);
	color: var(--bpm-faint);
	font-size: var(--bpm-caption);
}

@media (max-width: 860px) {
	.xagylum-box {
		padding: var(--bpm-4);
	}
}

/* ==========================================================================
   Modulo di contatto — riquadro editoriale bordato.
   ========================================================================== */
.finadoz {
	padding-block: var(--bpm-sec-y);
}
.finadoz-box {
	padding: var(--bpm-6);
	border: var(--bpm-base) solid var(--bpm-lead);
	border-radius: var(--r-4);
	color: var(--bpm-letters);
	background: var(--bpm-surface);
}
.finadoz-note {
	margin-block-end: var(--bpm-5);
	color: var(--bpm-faint);
	line-height: var(--bpm-loose);
}
.finadoz-shape {
	display: flex;
	flex-direction: column;
	gap: var(--bpm-4);
}
.finadoz-line {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	gap: var(--bpm-1);
}
.finadoz-mark {
	color: var(--bpm-faint);
	font-size: var(--bpm-xs);
	font-weight: var(--bpm-half);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
}
.finadoz-line input,
.finadoz-line textarea {
	padding-block: var(--bpm-2);
	border: 0;
	border-bottom: var(--bpm-hair) solid var(--bpm-line-strong);
	border-radius: 0;
	background: transparent;
	color: var(--bpm-letters);
	font-size: var(--bpm-sub-2);
}
.finadoz-line input:focus,
.finadoz-line textarea:focus {
	border-bottom-color: var(--bpm-lead);
	outline: none;
}
.finadoz-key {
	align-self: flex-start;
	min-height: 44px;
	padding-inline: var(--bpm-5);
	border: 0;
	border-radius: var(--r-3);
	background: var(--bpm-lead);
	color: var(--bpm-spot);
	font-family: var(--bpm-banner);
	font-size: var(--bpm-xs-2);
	font-weight: var(--bpm-thick);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
	cursor: pointer;
	transition: transform var(--t-regular) var(--bpm-land), background var(--t-regular) var(--bpm-land);
}
.finadoz-key:hover {
	transform: translateY(-4px);
	background: var(--bpm-letters);
	color: var(--bpm-spot);
}
.finadoz-done {
	margin-block-start: var(--bpm-4);
	padding: var(--bpm-4);
	border-radius: var(--r-3);
	background: var(--bpm-layer);
	color: var(--bpm-letters);
	font-size: var(--bpm-caption);
}
.finadoz-done[hidden] {
	display: none;
}

@media (max-width: 860px) {
	.finadoz-box {
		padding: var(--bpm-4);
	}
}

/* ==========================================================================
   Pagina 404 — blocco centrato in stile primo schermo.
   ========================================================================== */
.mukux {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 0 auto;
	padding-block: var(--bpm-6);
	text-align: center;
}
.mukux-core {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bpm-5);
}
.mukux-digits {
	display: block;
	font-family: var(--bpm-banner);
	font-size: clamp(80px, 16vw, 200px);
	font-weight: var(--bpm-thick);
	line-height: var(--bpm-close);
	color: var(--bpm-lead);
}
.mukux-head {
	max-width: var(--bpm-slim);
}
.mukux-copy {
	max-width: var(--bpm-slim);
	margin: 0;
	color: var(--bpm-faint);
	font-size: var(--bpm-sm-2);
	line-height: var(--bpm-default);
}
.mukux-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding-inline: var(--bpm-6);
	border-radius: var(--r-4);
	background: var(--bpm-lead);
	color: var(--bpm-spot);
	font-family: var(--bpm-banner);
	font-size: var(--bpm-xs-2);
	font-weight: var(--bpm-thick);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
	text-decoration: none;
	transition: transform var(--t-regular) var(--bpm-land), background var(--t-regular) var(--bpm-land);
}
.mukux-key:hover {
	transform: translateY(-4px);
	background: var(--bpm-letters);
	color: var(--bpm-spot);
}

/* ==========================================================================
   Fondo pagina — barra compatta con avviso di gioco responsabile.
   ========================================================================== */
.kuly {
	position: relative;
	margin-block-start: auto;
	background: var(--bpm-spot);
	color: var(--bpm-faint);
	border-top: var(--bpm-hair) solid var(--bpm-divider);
}
.kuly-core {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpm-4);
	min-height: 64px;
	padding-block: var(--bpm-3);
}
.kuly-small {
	color: var(--bpm-faint);
	font-size: var(--bpm-xs);
	font-weight: var(--bpm-half);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
}
.kuly-map {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bpm-3);
}
.kuly-jump {
	color: var(--bpm-faint);
	font-size: var(--bpm-xs);
	font-weight: var(--bpm-half);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--t-regular) var(--bpm-land);
}
.kuly-jump:hover {
	color: var(--bpm-letters);
}
.kuly-jump + .kuly-jump {
	padding-inline-start: var(--bpm-3);
	border-left: var(--bpm-hair) solid var(--bpm-line-strong);
}
.rg-banner {
	display: block;
	padding-block: var(--bpm-3);
	border-top: var(--bpm-hair) solid var(--bpm-divider);
	background: var(--bpm-notice);
	color: var(--bpm-letters);
	text-align: center;
	font-size: var(--bpm-caption);
	line-height: var(--bpm-default);
}
.rg-banner-core {
	width: 100%;
	max-width: calc(var(--bpm-max) + 2 * var(--bpm-padding-desktop));
	margin-inline: auto;
	padding-inline: var(--bpm-edge);
}
.rg-banner-jump {
	color: var(--bpm-letters);
	font-weight: var(--bpm-half);
	text-decoration: underline;
}
.rg-banner-jump:hover {
	color: var(--bpm-letters);
}

@media (max-width: 860px) {
	.kuly-core {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--bpm-3);
		min-height: 80px;
	}
}

/* ==========================================================================
   Avviso cookie — piccolo riquadro in basso a destra.
   ========================================================================== */
.zilosed {
	display: none;
	position: fixed;
	inset-block-end: var(--bpm-5);
	inset-inline-end: var(--bpm-5);
	z-index: 90;
	max-width: 320px;
}
.zilosed.is-open {
	display: block;
}
.zilosed-box {
	display: flex;
	align-items: flex-start;
	gap: var(--bpm-3);
	padding: var(--bpm-4);
	border: var(--bpm-hair) solid var(--bpm-line-strong);
	border-radius: var(--r-5);
	background: var(--bpm-surface);
	color: var(--bpm-letters);
	box-shadow: var(--d-4);
}
.zilosed.is-open .zilosed-box {
	animation: zilosed-wipe var(--bpm-slow) var(--bpm-land) both;
}
@keyframes zilosed-wipe {
	from {
		clip-path: inset(100% 0 0 0);
		opacity: 0;
	}
	to {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}
.zilosed-glyph {
	flex-shrink: 0;
	color: var(--bpm-lead);
}
.zilosed-glyph svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.zilosed-copy {
	margin: 0 0 var(--bpm-3);
	color: var(--bpm-faint);
	font-size: var(--bpm-xs);
	line-height: var(--bpm-default);
}
.zilosed-tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpm-2);
}
.zilosed-grant {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	min-width: 44px;
	padding-inline: var(--bpm-3);
	border: 0;
	border-radius: var(--r-3);
	background: var(--bpm-lead);
	color: var(--bpm-spot);
	font-family: var(--bpm-banner);
	font-size: 12px;
	font-weight: var(--bpm-thick);
	cursor: pointer;
}
.zilosed-decline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	min-width: 44px;
	padding-inline: var(--bpm-3);
	border: 0;
	border-radius: var(--r-3);
	background: var(--bpm-surface);
	color: var(--bpm-faint);
	font-family: var(--bpm-reading);
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}
.zilosed-decline:hover {
	color: var(--bpm-letters);
	background: var(--bpm-surface);
}

@media (max-width: 700px) {
	.zilosed {
		inset-inline: var(--bpm-3);
		inset-block-end: var(--bpm-3);
		max-width: none;
		width: auto;
	}
	.zilosed-box {
		padding: 12px 14px;
		gap: 8px;
		border-radius: var(--r-4);
	}
	.zilosed-tools {
		flex-wrap: nowrap;
	}
	.zilosed-grant,
	.zilosed-decline {
		flex: 1 1 auto;
		white-space: nowrap;
	}
}

/* --- Immagini nel corpo del testo ---------------------------------------- */
.pupivyf-shot[data-shape="tall"] {
	max-height: 48vh;
}

/* --- Rispetto della preferenza "meno movimento" --------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* --- Bottone dell offerta: colore e animazione presi da scripts/cta-style.mjs --- */
.byko-act{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--bpm-5);min-height:44px;border-radius:var(--bpm-stadium);border:var(--bpm-base) solid var(--bpm-lead);font-size:var(--bpm-xs-2);font-weight:var(--bpm-thick);letter-spacing:var(--e-loose)}
.byko-act{
  background:#0891B2;color:#000000;text-decoration:none;text-transform:uppercase;
  transition:background 0.16s linear,color 0.16s linear,transform 0.16s linear;}
.byko-act.byko-act{color:#000000;text-decoration:none;}
.byko-act:hover{background:#0E7490;color:#FFFFFF;animation:none}
.byko-act.byko-act:hover{color:#FFFFFF;text-decoration:none}
.byko-act:hover::after{animation:none}
.byko-act:active{background:#155E75;color:#FFFFFF}
.byko-act:focus-visible{outline:3px solid #000000;outline-offset:3px}
@keyframes byko-wake{0%{transform:translateX(0)}22.222%{transform:translateX(4px)}44.444%,100%{transform:translateX(0)}}
.byko-act{animation:byko-wake 1.8s ease infinite}
@media (prefers-reduced-motion:reduce){.byko-act,.byko-act::after{animation:none!important;transition:none!important}}

/* il richiamo finale usa lo stesso bottone, ma piu grande */
.malod .byko-act {
	min-height: 56px;
	padding-inline: var(--bpm-6);
}
@media (max-width: 580px) {
	.byko-act {
		padding-inline: var(--bpm-4);
	}
}