/* =============================================================
   WinSpirit Casino — foglio di stile principale
   Ordine delle regole: per componente.
   Scala tipografica TYPO-09, spaziature SPACE-05, contenitore CONT-09,
   geometria GEO-09 (vetro), movimento moderato.
   ============================================================= */

/* -------------------------------------------------------------
   1. Caratteri (self-host, nessuna chiamata esterna)
   ------------------------------------------------------------- */
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/typeset/sora-latin-400.woff2") format("woff2");
}

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/typeset/sora-latin-600.woff2") format("woff2");
}

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/typeset/sora-latin-700.woff2") format("woff2");
}

/* -------------------------------------------------------------
   2. Gettoni di progetto (nomi propri di questa build)
   ------------------------------------------------------------- */
:root {
	/* colori */
	--jbk-anchor: #01edb0;
	--jbk-accent: #c93de2;
	--jbk-accent-strong: #b623d6;
	--jbk-backdrop: #13101f;
	--jbk-layer: #1d1830;
	--jbk-copy: #ffffff;
	--jbk-muted: #dd79ec;
	--jbk-line: #2f2748;
	--jbk-border-strong: #483c6d;
	--jbk-fade-top: #4af2bb;
	--jbk-fade-bottom: #ffe312;
	--jbk-rg-banner: #ad2831;

	/* spaziature */
	--jbk-2xs: 3px;
	--jbk-xs: 10px;
	--jbk-sm: 18px;
	--jbk-md: 28px;
	--jbk-lg: 44px;
	--jbk-xl: 60px;
	--jbk-2xl: 88px;
	--jbk-3xl: 128px;
	--jbk-sec-y: 44px;

	/* raggi e ombre — vetro */
	--r-2xs: 2px;
	--r-xs: 2px;
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 22px;
	--r-xl: 26px;
	--r-2xl: 30px;
	--r-3xl: 36px;
	--jbk-pill: 9999px;
	--jbk-dot: 50%;
	--d-2xs: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
	--d-xs: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	--d-sm: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	--d-md: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
	--d-lg: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	--d-xl: 0 22px 60px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	--d-2xl: 0 28px 72px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	--d-3xl: 0 34px 88px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	--jbk-hair: 1px;
	--jbk-base: 2px;
	--jbk-thick: 3px;

	/* tipografia */
	--jbk-heading: "Sora", ui-sans-serif, system-ui, sans-serif;
	--jbk-body: "Sora", ui-sans-serif, system-ui, sans-serif;
	--jbk-display-1: 52px;
	--jbk-head: 32px;
	--jbk-display-3: 24px;
	--jbk-h4: 19px;
	--jbk-h5: 16px;
	--jbk-xs-2: 14px;
	--z-body: 17px;
	--jbk-small: 14px;
	--z-xs: 12px;
	--jbk-close: 1.15;
	--jbk-regular: 1.55;
	--jbk-loose: 1.7;
	--w-regular: 400;
	--jbk-mid: 500;
	--jbk-strong: 700;
	--jbk-narrow: 0;
	--jbk-even: 0;
	--jbk-airy: 0.02em;

	/* movimento */
	--jbk-swift: 131ms;
	--jbk-normal: 280ms;
	--jbk-gentle: 430ms;
	--jbk-out: cubic-bezier(0.26, 0.61, 0.52, 0.97);
	--jbk-start: cubic-bezier(0.4, 0.01, 0.25, 0.88);
	--x-even: cubic-bezier(0.4, 0.01, 0.25, 0.88);
	--jbk-pop: cubic-bezier(0.23, 1.8, 0.71, 1.15);

	/* contenitori */
	--jbk-page: 1340px;
	--jbk-column: 1340px;
	--jbk-slim: 540px;
	--jbk-inset-desktop: 48px;
	--jbk-padding-tablet: 32px;
	--jbk-pad-sm: 16px;

	/* barra superiore */
	--jbk-size-desktop: 58px;
	--jbk-h-sm: 54px;
	--jbk-shell: 150px;
}

/* -------------------------------------------------------------
   3. Reset e base
   ------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	overflow-x: clip;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--jbk-backdrop);
	color: var(--jbk-copy);
	font-family: var(--jbk-body);
	font-size: var(--z-body);
	font-weight: var(--w-regular);
	line-height: var(--jbk-regular);
	letter-spacing: var(--jbk-even);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-top: var(--jbk-shell, 150px);
}

.page {
	flex: 1 0 auto;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
	font-family: var(--jbk-heading);
	color: var(--jbk-copy);
}

h1 {
	font-size: clamp(30px, 4.4vw, var(--jbk-display-1));
	font-weight: var(--jbk-strong);
	line-height: var(--jbk-close);
	letter-spacing: var(--jbk-narrow);
}

h2 {
	font-size: clamp(24px, 2.6vw, var(--jbk-head));
	font-weight: var(--jbk-strong);
	line-height: var(--jbk-close);
}

h3 {
	font-size: clamp(20px, 2vw, var(--jbk-display-3));
	font-family: var(--jbk-body);
	font-weight: var(--jbk-mid);
	line-height: var(--jbk-close);
}

h4 {
	font-size: var(--jbk-h4);
	font-family: var(--jbk-body);
	font-weight: var(--jbk-strong);
	line-height: var(--jbk-close);
}

h5 {
	font-size: var(--jbk-h5);
	font-family: var(--jbk-body);
	font-weight: var(--jbk-mid);
}

h6 {
	font-size: var(--jbk-xs-2);
	font-family: var(--jbk-body);
	font-weight: var(--jbk-mid);
}

p {
	margin: 0;
}

img {
	max-width: 100%;
}

table {
	border-collapse: collapse;
}

a {
	color: var(--jbk-anchor);
	text-decoration: none;
}

[id] {
	scroll-margin-top: calc(var(--jbk-shell, 150px) + 14px);
}

/* -------------------------------------------------------------
   4. Accessibilità e servizio
   ------------------------------------------------------------- */
.skip-jump {
	position: absolute;
	left: var(--jbk-sm);
	top: var(--jbk-sm);
	z-index: 200;
	background: var(--jbk-anchor);
	color: #0b1512;
	padding: var(--jbk-xs) var(--jbk-sm);
	border-radius: var(--r-sm);
	font-size: var(--jbk-small);
	font-weight: var(--jbk-mid);
}

.skip-jump:not(:focus) {
	top: -200px !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* comparsa dei blocchi: sfocatura in entrata */
[data-seen] {
	opacity: 0;
	filter: blur(9px);
	transform: translateY(22px);
	transition: opacity var(--jbk-gentle) var(--jbk-out), filter var(--jbk-gentle) var(--jbk-out), transform var(--jbk-gentle) var(--jbk-out);
}

[data-seen].is-open {
	opacity: 1;
	filter: blur(0);
	transform: none;
}

/* -------------------------------------------------------------
   5. Bottoni offerta (base; la pelle arriva dal blocco .kwqk-act)
   ------------------------------------------------------------- */
.jbk-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: var(--r-sm);
	font-family: var(--jbk-body);
	font-weight: var(--jbk-strong);
	text-align: center;
	cursor: pointer;
}

.jbk-key-quiet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--jbk-sm);
	border: var(--jbk-base) solid var(--jbk-border-strong);
	border-radius: var(--r-sm);
	background: var(--jbk-layer);
	color: var(--jbk-copy);
	font-size: var(--jbk-small);
	font-weight: var(--jbk-mid);
	white-space: nowrap;
	transition: background var(--jbk-swift) var(--jbk-out), color var(--jbk-swift) var(--jbk-out);
}

.jbk-key-quiet:hover,
.jbk-key-quiet:focus-visible {
	background: var(--jbk-border-strong);
	color: var(--jbk-copy);
}

/* riga delle condizioni accanto al bottone */
.jbk-fine {
	display: block;
	margin-top: var(--jbk-xs);
	color: var(--jbk-muted);
	font-size: var(--z-xs);
	line-height: var(--jbk-regular);
	max-width: var(--jbk-slim);
}

/* -------------------------------------------------------------
   6. Testata .u52 — composizione a due piani (servizio sopra)
   ------------------------------------------------------------- */
.u52 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--jbk-backdrop);
	transition: backdrop-filter var(--jbk-normal) var(--x-even), background var(--jbk-normal) var(--x-even);
}

.u52.is-stuck {
	background: rgba(19, 16, 31, 0.86);
	backdrop-filter: blur(14px);
}

.u52-crown {
	background: #0d0b16;
	color: var(--jbk-muted);
}

.u52-crown-frame {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
	min-height: 34px;
	display: flex;
	align-items: center;
	gap: var(--jbk-sm);
	font-size: var(--z-xs);
	letter-spacing: var(--jbk-airy);
}

.u52-note {
	margin: 0;
	color: var(--jbk-muted);
	font-size: var(--z-xs);
}

.u52-crown-frame .u52-jump {
	color: var(--jbk-muted);
	font-size: var(--z-xs);
	white-space: nowrap;
}

.u52-crown-frame .u52-jump:hover {
	color: var(--jbk-copy);
}

.u52-market {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--jbk-2xs);
	background: var(--jbk-layer);
	color: var(--jbk-copy);
	border-radius: var(--r-2xs);
	padding: 2px var(--jbk-xs);
	font-size: var(--z-xs);
	font-weight: var(--jbk-mid);
	letter-spacing: var(--jbk-airy);
}

.u52-rank {
	border-bottom: var(--jbk-hair) solid var(--jbk-line);
}

.u52-rank-frame {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
	height: 58px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--jbk-md);
}

/* marchio: disco decorativo dietro l'emblema (cornice tonda) */
.u52-glyph {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.u52-glyph::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 50%;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	border-radius: var(--jbk-dot);
	background: rgba(201, 61, 226, 0.16);
	border: var(--jbk-hair) solid rgba(201, 61, 226, 0.4);
}

.u52-glyph-art {
	position: relative;
	display: block;
	height: 42px;
	width: auto;
	flex-shrink: 0;
}

/* pulsante del menu — quadretti (burgerStyle: grid, cornice tinta) */
.u52-menu-tap {
	display: none;
	margin-left: auto;
	width: 46px;
	height: 44px;
	align-items: center;
	justify-content: center;
	background: rgba(201, 61, 226, 0.14);
	border: var(--jbk-hair) solid var(--jbk-border-strong);
	border-radius: var(--r-sm);
	color: var(--jbk-copy);
	cursor: pointer;
	padding: 0;
}

.u52-lines {
	display: grid;
	grid-template-columns: repeat(3, 4px);
	grid-template-rows: repeat(3, 4px);
	gap: 3px;
}

.u52-lines span {
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 1px;
	background: var(--jbk-copy);
}

.u52-guide {
	flex: 0 0 auto;
	margin-inline-start: var(--jbk-sm);
}

.u52-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--jbk-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.u52-node {
	display: flex;
	align-items: center;
	position: relative;
}

.u52-node[hidden] {
	display: none;
}

/* separatore fra le voci: barra obliqua, solo nella riga */
.u52-node + .u52-node::before {
	content: "/";
	margin-inline-end: var(--jbk-sm);
	color: var(--jbk-border-strong);
	font-size: var(--jbk-small);
}

.u52-jump {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--jbk-copy);
	font-size: 14px;
	font-weight: 600;
	font-variant-caps: small-caps;
	letter-spacing: var(--jbk-airy);
	white-space: nowrap;
}

.u52-guide .u52-jump::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: var(--jbk-base);
	background: var(--jbk-anchor);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--jbk-swift) var(--jbk-out);
}

.u52-guide .u52-jump:hover::after,
.u52-guide .u52-jump:focus-visible::after {
	transform: scaleX(1);
}

/* voce corrente: punto sotto la parola */
.u52-jump.is-here {
	color: var(--jbk-anchor);
}

.u52-guide .u52-jump.is-here::after {
	left: 50%;
	right: auto;
	bottom: 6px;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: var(--jbk-dot);
	background: var(--jbk-anchor);
	transform: none;
}

/* elenco «Altro» */
.u52-node-more {
	position: relative;
}

.u52-more-tap {
	display: inline-flex;
	align-items: center;
	gap: var(--jbk-2xs);
	min-height: 44px;
	padding: 0 var(--jbk-xs);
	background: transparent;
	border: 0;
	color: var(--jbk-copy);
	font-family: var(--jbk-body);
	font-size: 14px;
	font-weight: 600;
	font-variant-caps: small-caps;
	letter-spacing: var(--jbk-airy);
	cursor: pointer;
	white-space: nowrap;
}

.u52-more-dots {
	display: grid;
	grid-template-columns: repeat(2, 4px);
	grid-template-rows: repeat(2, 4px);
	gap: 3px;
}

.u52-more-dots span {
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 1px;
	background: var(--jbk-copy);
}

.u52-more-tap::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: var(--jbk-base) solid var(--jbk-muted);
	border-bottom: var(--jbk-base) solid var(--jbk-muted);
	transform: rotate(45deg) translateY(-2px);
}

.u52-more-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 210px;
	max-height: 64vh;
	overflow-y: auto;
	background: var(--jbk-layer);
	border: var(--jbk-hair) solid var(--jbk-border-strong);
	border-radius: var(--r-md);
	box-shadow: var(--d-md);
	padding: var(--jbk-xs);
	margin: 0;
	list-style: none;
	z-index: 30;
}

.u52-more-menu.is-open {
	display: block;
}

.u52-more-node {
	display: block;
}

.u52-more-menu .u52-jump {
	display: flex;
	width: 100%;
	padding-inline: var(--jbk-xs);
	color: var(--jbk-copy);
	font-variant-caps: normal;
}

.u52-more-menu .u52-jump:hover {
	color: var(--jbk-anchor);
}

.u52-buttons {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: var(--jbk-xs);
	flex-shrink: 0;
}

.u52-key {
	min-height: 44px;
	padding: 0 var(--jbk-sm);
	border-radius: var(--r-2xs);
	white-space: nowrap;
	font-size: var(--jbk-small);
}

/* fascia 18+ sotto la testata (RG-02) */
.u52-warn {
	display: block;
	text-align: center;
	background: var(--jbk-rg-banner);
	color: #ffffff;
	font-size: var(--z-xs);
	line-height: var(--jbk-regular);
	padding: 5px var(--jbk-pad-sm);
	margin: 0;
}

.u52-warn-jump {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* pannello mobile: elenco piatto di tutte le voci */
.u52-slide {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: 74vh;
	overflow-y: auto;
	background: var(--jbk-layer);
	border-top: var(--jbk-hair) solid var(--jbk-border-strong);
	box-shadow: var(--d-lg);
	padding: var(--jbk-sm) var(--jbk-pad-sm) var(--jbk-md);
	z-index: 40;
}

.u52-slide.is-open {
	display: block;
}

.u52-slide-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.u52-slide-node {
	display: block;
	border-bottom: var(--jbk-hair) solid var(--jbk-line);
}

.u52-slide-jump {
	display: flex;
	align-items: center;
	min-height: 48px;
	color: var(--jbk-copy);
	font-size: var(--z-body);
	font-weight: var(--jbk-mid);
}

.u52-slide-jump.is-here {
	color: var(--jbk-anchor);
}

/* -------------------------------------------------------------
   7. Briciole .q12 — passi numerati
   ------------------------------------------------------------- */
.q12 {
	padding-block: var(--jbk-md);
	background: var(--jbk-backdrop);
}

.q12-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
}

.q12-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jbk-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.q12-node {
	display: inline-flex;
	align-items: baseline;
	gap: var(--jbk-2xs);
}

.q12-node + .q12-node::before {
	content: "—";
	color: rgba(221, 121, 236, 0.4);
	margin-inline-end: var(--jbk-sm);
}

.q12-num {
	font-family: var(--jbk-heading);
	font-weight: var(--jbk-strong);
	font-size: var(--jbk-xs-2);
	color: var(--jbk-accent);
}

.q12-jump {
	font-size: var(--jbk-small);
	text-transform: uppercase;
	letter-spacing: var(--jbk-airy);
	color: var(--jbk-muted);
}

.q12-jump:hover {
	color: var(--jbk-copy);
}

.q12-here {
	font-size: var(--jbk-small);
	text-transform: uppercase;
	letter-spacing: var(--jbk-airy);
	color: var(--jbk-copy);
}

/* -------------------------------------------------------------
   8. Primo schermo .i71 — due colonne, pila di schede
   ------------------------------------------------------------- */
.i71 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
	background-image: radial-gradient(circle at 12% 0%, rgba(74, 242, 187, 0.1), transparent 46%), radial-gradient(circle at 86% 22%, rgba(201, 61, 226, 0.16), transparent 52%);
}

.i71-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--jbk-2xl);
	align-items: center;
}

.i71-stuff {
	padding-block: var(--jbk-sm);
}

.i71-title {
	margin-bottom: var(--jbk-sm);
}

.i71-under {
	max-width: var(--jbk-slim);
	color: var(--jbk-muted);
	font-size: var(--jbk-h5);
	line-height: var(--jbk-loose);
	margin-bottom: var(--jbk-md);
}

.i71-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jbk-sm);
}

.i71-key {
	padding: 0 var(--jbk-md);
	min-height: 52px;
}

.i71-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jbk-sm);
}

.i71-node {
	display: flex;
	align-items: flex-start;
	gap: var(--jbk-sm);
	padding: var(--jbk-sm) var(--jbk-md);
	background: var(--jbk-layer);
	border: var(--jbk-hair) solid var(--jbk-line);
	border-radius: var(--r-md);
	box-shadow: var(--d-xs);
	backdrop-filter: blur(12px);
	color: var(--jbk-copy);
}

.i71-num {
	font-family: var(--jbk-heading);
	font-weight: var(--jbk-strong);
	font-size: var(--jbk-display-3);
	color: var(--jbk-accent);
	line-height: 1;
	flex-shrink: 0;
}

.i71-lede {
	font-size: var(--jbk-h4);
	font-weight: var(--jbk-strong);
	line-height: var(--jbk-close);
	color: var(--jbk-copy);
}

/* -------------------------------------------------------------
   9. Intestazione di pagina .k59 — occhiello, titolo, filetto
   ------------------------------------------------------------- */
.k59 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
	border-bottom: var(--jbk-hair) solid var(--jbk-line);
}

.k59-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
	display: flex;
	flex-direction: column;
	gap: var(--jbk-sm);
}

.k59-eye {
	display: inline-block;
	color: var(--jbk-accent);
	font-size: var(--jbk-small);
	font-weight: var(--jbk-mid);
	text-transform: uppercase;
	letter-spacing: var(--jbk-airy);
}

.k59-title {
	color: var(--jbk-copy);
}

.k59-rule {
	width: 60px;
	height: var(--jbk-base);
	background: var(--jbk-accent);
}

.k59-under {
	color: var(--jbk-muted);
	font-size: var(--jbk-h5);
	line-height: var(--jbk-regular);
}

.k59-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jbk-sm);
	align-items: center;
	margin-top: var(--jbk-xs);
}

/* -------------------------------------------------------------
   10. Testo corrente .z98 — impaginazione piana (PROSE-01)
   ------------------------------------------------------------- */
.z98 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
}

.z98-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
}

.z98-title {
	margin-block-start: var(--jbk-md);
	margin-block-end: var(--jbk-sm);
}

.z98-hold > .z98-title:first-child {
	margin-block-start: 0;
}

.z98 p {
	font-size: var(--z-body);
	line-height: var(--jbk-loose);
	color: var(--jbk-copy);
	margin-block-end: var(--jbk-sm);
}

.z98 p a {
	color: var(--jbk-anchor);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	background-image: linear-gradient(var(--jbk-anchor), var(--jbk-anchor));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--jbk-normal) var(--jbk-out);
}

.z98 p a:hover,
.z98 p a:focus-visible {
	background-size: 100% 1px;
	color: var(--jbk-fade-top);
}

.z98 strong {
	color: var(--jbk-copy);
	font-weight: var(--jbk-strong);
}

.z98-list,
.z98-steps {
	margin-block: 0 var(--jbk-sm);
	padding-inline-start: var(--jbk-md);
	color: var(--jbk-copy);
	font-size: var(--z-body);
	line-height: var(--jbk-loose);
}

.z98-list li,
.z98-steps li {
	margin-block-end: var(--jbk-xs);
}

.z98-list li a,
.z98-steps li a {
	color: var(--jbk-anchor);
	text-decoration: underline;
}

.z98-prompt {
	margin-block: var(--jbk-md);
	padding: var(--jbk-md);
	background: var(--jbk-layer);
	border: var(--jbk-hair) solid var(--jbk-line);
	border-radius: var(--r-md);
	color: var(--jbk-copy);
}

.z98-prompt-lede {
	display: block;
	margin-bottom: var(--jbk-xs);
	font-family: var(--jbk-heading);
	font-size: var(--jbk-h4);
	font-weight: var(--jbk-strong);
	color: var(--jbk-copy);
}

.z98-key {
	padding: 0 var(--jbk-md);
	min-height: 50px;
}

/* -------------------------------------------------------------
   11. Schede .f44 — cartoncini con icona (GRID-04)
   ------------------------------------------------------------- */
.f44 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
}

.f44-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
}

.f44-title {
	margin-block-end: var(--jbk-md);
}

.f44-stack {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jbk-sm);
}

.f44-panel {
	padding: var(--jbk-lg);
	background: var(--jbk-layer);
	border: var(--jbk-hair) solid var(--jbk-line);
	border-radius: var(--r-md);
	box-shadow: var(--d-xs);
	backdrop-filter: blur(12px);
	color: var(--jbk-copy);
	transition: background var(--jbk-normal) var(--x-even), border-color var(--jbk-normal) var(--x-even);
}

.f44-panel:hover {
	background: #241e3b;
	border-color: var(--jbk-border-strong);
}

.f44-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--jbk-md);
	border-radius: var(--jbk-dot);
	background: var(--jbk-accent);
	color: #ffffff;
	font-family: var(--jbk-heading);
	font-size: var(--jbk-h4);
	font-weight: var(--jbk-strong);
}

.f44-sign {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.f44-lede {
	margin-bottom: var(--jbk-xs);
	font-family: var(--jbk-heading);
	font-size: var(--jbk-h4);
	font-weight: var(--jbk-strong);
	color: var(--jbk-copy);
}

.f44-prose {
	font-size: var(--z-body);
	line-height: var(--jbk-regular);
	color: var(--jbk-copy);
}

.f44-buttons {
	margin-top: var(--jbk-md);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jbk-sm);
}

.f44-key {
	padding: 0 var(--jbk-md);
	min-height: 50px;
}

/* -------------------------------------------------------------
   12. Domande .k35 — fisarmonica con numero laterale (FAQ-04)
   ------------------------------------------------------------- */
.k35 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
}

.k35-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
}

.k35-title {
	margin-block-end: var(--jbk-md);
}

.k35-list {
	display: flex;
	flex-direction: column;
	gap: var(--jbk-xs);
}

.k35-node {
	border-bottom: var(--jbk-hair) solid var(--jbk-line);
	padding-block: var(--jbk-xs);
}

.k35-ask {
	display: grid;
	grid-template-columns: 60px 1fr 24px;
	align-items: start;
	gap: var(--jbk-xs);
	padding-block: var(--jbk-sm);
	cursor: pointer;
	list-style: none;
}

.k35-ask::-webkit-details-marker {
	display: none;
}

.k35-num {
	font-family: var(--jbk-heading);
	font-size: var(--jbk-display-3);
	font-weight: var(--jbk-strong);
	color: var(--jbk-accent);
	line-height: var(--jbk-close);
}

.k35-lede {
	font-family: var(--jbk-heading);
	font-size: var(--jbk-h4);
	font-weight: var(--jbk-strong);
	line-height: var(--jbk-regular);
	color: var(--jbk-copy);
}

.k35-sign {
	justify-self: end;
	margin-top: 6px;
	width: 9px;
	height: 9px;
	border-right: var(--jbk-base) solid var(--jbk-muted);
	border-bottom: var(--jbk-base) solid var(--jbk-muted);
	transform: rotate(45deg);
	transition: transform var(--jbk-normal) var(--x-even);
}

.k35-node[open] .k35-sign {
	transform: rotate(-135deg);
}

.k35-reply {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: var(--jbk-xs);
	padding-block-end: var(--jbk-sm);
	animation: k35-unfold var(--jbk-normal) var(--x-even);
}

.k35-reply p {
	grid-column: 2;
	font-size: var(--z-body);
	line-height: var(--jbk-loose);
	color: var(--jbk-copy);
}

@keyframes k35-unfold {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* -------------------------------------------------------------
   13. Opinioni .y49 — linea del tempo verticale (REV-05)
   ------------------------------------------------------------- */
.y49 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
}

.y49-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
}

.y49-title {
	margin-block-end: var(--jbk-md);
}

.y49-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: var(--jbk-hair) solid var(--jbk-accent);
}

.y49-node {
	position: relative;
	padding-left: var(--jbk-2xl);
	margin-bottom: var(--jbk-lg);
}

.y49-node:last-child {
	margin-bottom: 0;
}

.y49-dot {
	position: absolute;
	left: -8px;
	top: 8px;
	width: 16px;
	height: 16px;
	border-radius: var(--jbk-dot);
	background: var(--jbk-accent);
}

.y49-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jbk-xs);
	margin-bottom: var(--jbk-xs);
	font-size: var(--jbk-small);
	color: var(--jbk-muted);
}

.y49-name {
	color: var(--jbk-copy);
	font-weight: var(--jbk-mid);
	font-size: var(--jbk-small);
}

.y49-stars {
	color: var(--jbk-fade-bottom);
	letter-spacing: 1px;
	font-size: var(--jbk-small);
}

.y49-score {
	color: var(--jbk-muted);
	font-size: var(--jbk-small);
}

.y49-quote {
	margin: 0;
	font-size: var(--z-body);
	line-height: var(--jbk-loose);
	color: var(--jbk-copy);
}

/* -------------------------------------------------------------
   14. Tabella .z54 — righe alternate (TABLE-01)
   ------------------------------------------------------------- */
.z54 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
}

.z54-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
}

.z54-title {
	margin-block-end: var(--jbk-md);
}

.z54-scroll {
	overflow-x: auto;
	padding: var(--jbk-xs);
	background: var(--jbk-layer);
	border: var(--jbk-hair) solid var(--jbk-line);
	border-radius: var(--r-md);
}

.z54-grid {
	width: 100%;
	background: var(--jbk-layer);
	color: var(--jbk-copy);
	font-size: var(--z-body);
}

.z54-grid thead th {
	background: var(--jbk-anchor);
	color: #08140f;
	text-align: left;
	padding: var(--jbk-sm) var(--jbk-md);
	font-family: var(--jbk-body);
	font-size: var(--jbk-xs-2);
	font-weight: var(--jbk-mid);
	text-transform: uppercase;
	letter-spacing: var(--jbk-airy);
}

.z54-grid tbody td {
	padding: var(--jbk-sm) var(--jbk-md);
	color: var(--jbk-muted);
	background: var(--jbk-layer);
	border-top: var(--jbk-hair) solid var(--jbk-line);
	vertical-align: top;
}

.z54-grid tbody td:first-child {
	color: var(--jbk-copy);
	font-weight: var(--jbk-mid);
}

.z54-grid tbody tr:nth-child(even) td {
	background: #221c39;
}

.z54-grid tbody tr:hover td {
	background: #2a2344;
	transition: background var(--jbk-swift) var(--jbk-out);
}

/* -------------------------------------------------------------
   15. Blocco d'invito .i02 — occhiello, titolo, testo breve
   ------------------------------------------------------------- */
.i02 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
}

.i02-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
}

.i02-box {
	padding: var(--jbk-lg);
	background: var(--jbk-layer);
	border: var(--jbk-hair) solid var(--jbk-border-strong);
	border-radius: var(--r-lg);
	box-shadow: var(--d-sm);
	color: var(--jbk-copy);
}

.i02-eye {
	display: inline-block;
	margin-bottom: var(--jbk-xs);
	color: var(--jbk-accent);
	font-size: var(--z-xs);
	text-transform: uppercase;
	letter-spacing: var(--jbk-airy);
	font-weight: var(--jbk-mid);
}

.i02-title {
	margin-bottom: var(--jbk-sm);
}

.i02-prose {
	max-width: var(--jbk-slim);
	margin-bottom: var(--jbk-md);
	font-size: var(--z-body);
	line-height: var(--jbk-loose);
	color: var(--jbk-copy);
}

.i02-key {
	padding: 0 var(--jbk-md);
	min-height: 52px;
}

/* -------------------------------------------------------------
   16. Pagine legali .w62 — riquadro bordato (LEGAL-04)
   ------------------------------------------------------------- */
.w62 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
}

.w62-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
}

.w62-box {
	position: relative;
	padding: var(--jbk-lg);
	background: var(--jbk-layer);
	border: var(--jbk-hair) solid var(--jbk-line);
	border-radius: var(--r-lg);
	box-shadow: var(--d-sm);
	color: var(--jbk-copy);
}

.w62-stamp {
	position: absolute;
	top: var(--jbk-md);
	right: var(--jbk-md);
	color: var(--jbk-muted);
	background: var(--jbk-layer);
	font-size: var(--z-xs);
}

.w62-part {
	margin-block-start: var(--jbk-md);
}

.w62-part:first-of-type {
	margin-block-start: 0;
}

.w62-title {
	margin-block-end: var(--jbk-xs);
	font-size: var(--jbk-h4);
	font-family: var(--jbk-heading);
	font-weight: var(--jbk-strong);
}

.w62-part p {
	margin-block-end: var(--jbk-sm);
	font-size: var(--z-body);
	line-height: var(--jbk-loose);
	color: var(--jbk-copy);
}

.w62-list {
	margin-block: 0 var(--jbk-sm);
	padding-inline-start: var(--jbk-md);
	font-size: var(--z-body);
	line-height: var(--jbk-loose);
	color: var(--jbk-copy);
}

.w62-list li {
	margin-block-end: var(--jbk-xs);
}

.w62-note {
	margin-block-start: var(--jbk-md);
	padding-top: var(--jbk-sm);
	border-top: var(--jbk-hair) solid var(--jbk-line);
	color: var(--jbk-muted);
	font-size: var(--jbk-small);
	line-height: var(--jbk-regular);
}

/* -------------------------------------------------------------
   17. Modulo contatti .i64 — riga unica (FORM-04)
   ------------------------------------------------------------- */
.i64 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
}

.i64-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
}

.i64-title {
	margin-block-end: var(--jbk-sm);
}

.i64-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--jbk-sm);
	padding: var(--jbk-md);
	background: var(--jbk-layer);
	border: var(--jbk-hair) solid var(--jbk-line);
	border-radius: var(--r-md);
}

.i64-slot {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: var(--jbk-2xs);
}

.i64-slot-wide {
	flex: 1 1 100%;
}

.i64-chip {
	color: var(--jbk-muted);
	font-size: var(--jbk-small);
}

.i64-entry {
	min-height: 48px;
	padding: var(--jbk-xs) var(--jbk-sm);
	background: var(--jbk-backdrop);
	color: var(--jbk-copy);
	border: var(--jbk-hair) solid var(--jbk-border-strong);
	border-radius: var(--r-sm);
	font-family: var(--jbk-body);
	font-size: var(--z-body);
}

.i64-entry:focus-visible {
	outline: var(--jbk-base) solid var(--jbk-anchor);
	outline-offset: 1px;
}

textarea.i64-entry {
	min-height: 120px;
	resize: vertical;
}

.i64-key {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 var(--jbk-md);
	background: var(--jbk-anchor);
	color: #08140f;
	border: 0;
	border-radius: var(--r-sm);
	font-family: var(--jbk-body);
	font-size: var(--z-body);
	font-weight: var(--jbk-strong);
	cursor: pointer;
	transition: background var(--jbk-swift) var(--jbk-out);
}

.i64-key:hover,
.i64-key:focus-visible {
	background: var(--jbk-fade-top);
	color: #08140f;
}

.i64-done {
	margin-top: var(--jbk-sm);
	padding: var(--jbk-sm) var(--jbk-md);
	background: #10261f;
	color: var(--jbk-fade-top);
	border: var(--jbk-hair) solid var(--jbk-anchor);
	border-radius: var(--r-sm);
	font-size: var(--jbk-small);
}

.i64-done[hidden] {
	display: none;
}

/* -------------------------------------------------------------
   18. Scheda autore .y26 — verticale centrata (AUTH-02)
   ------------------------------------------------------------- */
.y26 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
}

.y26-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.y26-pic {
	width: 140px;
	height: 140px;
	border-radius: var(--jbk-dot);
	object-fit: cover;
	margin-bottom: var(--jbk-lg);
	border: var(--jbk-base) solid var(--jbk-border-strong);
}

.y26-position {
	margin-bottom: var(--jbk-sm);
	color: var(--jbk-accent);
	font-size: var(--jbk-small);
	text-transform: uppercase;
	letter-spacing: var(--jbk-airy);
	font-weight: var(--jbk-mid);
}

.y26-prose {
	max-width: 720px;
	margin-bottom: var(--jbk-md);
	font-size: var(--z-body);
	line-height: var(--jbk-loose);
	color: var(--jbk-copy);
}

.y26-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--jbk-xs);
}

.y26-node {
	padding: var(--jbk-xs) var(--jbk-sm);
	background: var(--jbk-layer);
	color: var(--jbk-copy);
	border: var(--jbk-hair) solid var(--jbk-line);
	border-radius: var(--jbk-pill);
	font-size: var(--jbk-small);
}

/* -------------------------------------------------------------
   19. Firma dell'autore .s39 — testo a sinistra, ritratto a destra
   ------------------------------------------------------------- */
.s39 {
	padding-block: var(--jbk-md);
	background: var(--jbk-backdrop);
}

.s39-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
	display: flex;
	align-items: center;
	gap: var(--jbk-md);
	padding-block: var(--jbk-sm);
	border-top: var(--jbk-hair) solid var(--jbk-line);
}

.s39-prose {
	flex: 1;
	font-size: var(--jbk-small);
	font-style: italic;
	color: var(--jbk-muted);
}

.s39-name {
	color: var(--jbk-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-style: normal;
	font-weight: var(--jbk-mid);
}

.s39-name:hover {
	text-decoration-thickness: 2px;
	color: var(--jbk-accent);
}

.s39-mark {
	margin-inline: var(--jbk-2xs);
	color: var(--jbk-muted);
}

.s39-position {
	color: var(--jbk-muted);
}

.s39-pic {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--jbk-dot);
	object-fit: cover;
}

/* -------------------------------------------------------------
   20. Blocco errore .p16 — suggerimenti di ricerca (ERR-08)
   ------------------------------------------------------------- */
.p16 {
	padding-block: var(--jbk-sec-y);
	background: var(--jbk-backdrop);
	flex: 1 0 auto;
}

.p16-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
}

.p16-title {
	max-width: var(--jbk-slim);
	margin-bottom: var(--jbk-sm);
}

.p16-prose {
	margin-bottom: var(--jbk-md);
	font-size: var(--z-body);
	line-height: var(--jbk-loose);
	color: var(--jbk-muted);
}

.p16-key {
	padding: 0 var(--jbk-md);
	min-height: 50px;
}

.p16-hints {
	margin-top: var(--jbk-lg);
	padding: var(--jbk-md);
	background: var(--jbk-layer);
	border: var(--jbk-hair) solid var(--jbk-line);
	border-radius: var(--r-md);
}

.p16-lede {
	margin-bottom: var(--jbk-sm);
	font-size: var(--jbk-h4);
	font-family: var(--jbk-heading);
	font-weight: var(--jbk-strong);
	color: var(--jbk-copy);
}

.p16-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jbk-md);
}

.p16-node {
	display: block;
}

.p16-jump {
	color: var(--jbk-anchor);
	font-size: var(--z-body);
}

.p16-jump:hover {
	color: var(--jbk-fade-top);
	text-decoration: underline;
}

/* -------------------------------------------------------------
   21. Avviso cookie .j09 — toast compatto (COOK-13)
   ------------------------------------------------------------- */
.j09 {
	position: fixed;
	inset-block-end: var(--jbk-lg);
	inset-inline-end: var(--jbk-lg);
	max-width: 320px;
	z-index: 90;
	transform: translateY(0);
	opacity: 1;
	transition: transform var(--jbk-gentle) var(--jbk-out), opacity var(--jbk-gentle) var(--jbk-out);
	animation: j09-rise var(--jbk-gentle) var(--jbk-out);
}

@keyframes j09-rise {
	from {
		transform: translateY(120%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.j09.is-gone {
	transform: translateY(260%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.j09-frame {
	display: flex;
	gap: var(--jbk-xs);
	padding: var(--jbk-md);
	background: var(--jbk-backdrop);
	border: var(--jbk-hair) solid var(--jbk-border-strong);
	border-radius: var(--r-lg);
	box-shadow: var(--d-md);
	color: var(--jbk-copy);
}

.j09-badge {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: var(--jbk-dot);
	background: var(--jbk-accent);
	box-shadow: 0 0 0 3px rgba(201, 61, 226, 0.22);
}

.j09-stuff {
	flex: 1;
}

.j09-words {
	margin-bottom: var(--jbk-xs);
	font-size: var(--z-xs);
	line-height: var(--jbk-regular);
	color: var(--jbk-copy);
}

.j09-buttons {
	display: flex;
	align-items: center;
	gap: var(--jbk-xs);
}

.j09-accept {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 var(--jbk-sm);
	background: var(--jbk-anchor);
	color: #08140f;
	border: 0;
	border-radius: var(--r-sm);
	font-family: var(--jbk-body);
	font-size: var(--z-xs);
	font-weight: var(--jbk-strong);
	cursor: pointer;
}

.j09-accept:hover,
.j09-accept:focus-visible {
	background: var(--jbk-fade-top);
	color: #08140f;
}

.j09-dismiss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 var(--jbk-xs);
	background: var(--jbk-backdrop);
	color: var(--jbk-muted);
	border: 0;
	border-radius: var(--r-sm);
	font-family: var(--jbk-body);
	font-size: var(--z-xs);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.j09-dismiss:hover,
.j09-dismiss:focus-visible {
	background: var(--jbk-backdrop);
	color: var(--jbk-copy);
}

/* -------------------------------------------------------------
   22. Piede .q60 — grande e centrato (FOOT-03)
   ------------------------------------------------------------- */
.q60 {
	padding-block: var(--jbk-2xl);
	background: var(--jbk-backdrop);
	border-top: var(--jbk-hair) solid var(--jbk-line);
}

.q60-hold {
	max-width: calc(var(--jbk-page) + 2 * var(--jbk-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--jbk-inset-desktop);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--jbk-lg);
	text-align: center;
}

.q60-glyph {
	display: inline-flex;
}

.q60-glyph-art {
	display: block;
	height: 64px;
	width: auto;
}

.q60-guide {
	width: 100%;
}

.q60-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--jbk-lg);
}

.q60-node {
	display: block;
}

.q60-jump {
	font-family: var(--jbk-heading);
	font-size: var(--z-body);
	font-weight: var(--jbk-mid);
	color: var(--jbk-copy);
}

.q60-jump:hover,
.q60-jump:focus-visible {
	color: var(--jbk-anchor);
}

.q60-slogan {
	max-width: 480px;
	color: var(--jbk-muted);
	font-size: var(--jbk-small);
	line-height: var(--jbk-loose);
}

.q60-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--jbk-sm);
}

.q60-legal-jump {
	color: var(--jbk-muted);
	font-size: var(--z-xs);
	text-transform: uppercase;
	letter-spacing: var(--jbk-airy);
}

.q60-legal-jump:hover,
.q60-legal-jump:focus-visible {
	color: var(--jbk-copy);
}

.q60-legal span {
	color: var(--jbk-muted);
	font-size: var(--z-xs);
}

.q60-mark {
	color: var(--jbk-muted);
	font-size: var(--z-xs);
}

.q60-up {
	color: var(--jbk-muted);
	font-size: var(--z-xs);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.q60-up:hover {
	color: var(--jbk-copy);
}

/* -------------------------------------------------------------
   23. Schermi stretti (impostazione desktop-first)
   ------------------------------------------------------------- */
@media (max-width: 1400px) {
	.u52-rank-frame {
		gap: var(--jbk-sm);
		padding-inline: var(--jbk-md);
	}

	.u52-crown-frame {
		padding-inline: var(--jbk-md);
	}

	.u52-list {
		gap: var(--jbk-xs);
	}

	.u52-node + .u52-node::before {
		margin-inline-end: var(--jbk-xs);
	}

	.u52-buttons .u52-key {
		padding: 0 var(--jbk-xs);
		font-size: 13px;
		letter-spacing: 0.6px;
	}
}

@media (max-width: 1136px) {
	.i71-hold {
		gap: var(--jbk-lg);
	}

	.f44-stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.q60-list {
		gap: var(--jbk-md);
	}
}

@media (max-width: 900px) {
	.u52-guide {
		display: none;
	}

	.u52-menu-tap {
		display: inline-flex;
	}

	.u52-buttons {
		margin-inline-start: auto;
	}

	.u52-crown-frame {
		gap: var(--jbk-xs);
	}

	.u52-crown-frame .u52-jump {
		display: none;
	}

	.i71-hold {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jbk-md);
	}

	.i71-under {
		max-width: none;
	}
}

@media (max-width: 832px) {
	:root {
		--jbk-inset-desktop: 32px;
		--jbk-sec-y: 40px;
	}

	.u52-glyph-art {
		height: 36px;
	}

	.u52-glyph::before {
		width: 40px;
		height: 40px;
		margin-top: -20px;
	}

	.f44-panel {
		padding: var(--jbk-md);
	}

	.w62-box,
	.i02-box {
		padding: var(--jbk-md);
	}

	.w62-stamp {
		position: static;
		display: block;
		margin-bottom: var(--jbk-xs);
	}

	.y49-node {
		padding-left: var(--jbk-lg);
	}
}

@media (max-width: 720px) {
	:root {
		--jbk-display-1: 30px;
		--jbk-head: 24px;
		--jbk-display-3: 20px;
		--jbk-h4: 17px;
		--jbk-h5: 15px;
		--jbk-xs-2: 13px;
		--z-body: 16px;
		--jbk-small: 13px;
		--z-xs: 11px;
		--jbk-inset-desktop: 16px;
	}

	.f44-stack {
		grid-template-columns: minmax(0, 1fr);
	}

	.k35-ask,
	.k35-reply {
		grid-template-columns: 34px 1fr 20px;
	}

	.k35-reply {
		grid-template-columns: 34px 1fr;
	}

	.z54-grid {
		min-width: 520px;
	}

	.z54-grid thead th,
	.z54-grid tbody td {
		padding: var(--jbk-xs) var(--jbk-sm);
		font-size: var(--jbk-small);
	}

	.q60 {
		padding-block: var(--jbk-xl);
	}

	.q60-list {
		gap: var(--jbk-sm);
	}

	.q60-glyph-art {
		height: 52px;
	}

	.j09 {
		inset-inline: var(--jbk-pad-sm);
		inset-block-end: var(--jbk-pad-sm);
		max-width: none;
	}

	.j09-buttons {
		flex-wrap: wrap;
	}

	.j09-accept,
	.j09-dismiss {
		flex: 1 1 auto;
		min-width: 44px;
		min-height: 40px;
	}

	.j09-frame {
		padding: var(--jbk-sm) var(--jbk-md);
		gap: var(--jbk-xs);
	}

	.i64-form {
		padding: var(--jbk-sm);
	}

	.i64-slot {
		flex: 0 0 auto;
		width: 100%;
	}

	.i64-key {
		width: 100%;
	}
}

@media (max-width: 620px) {
	.u52-rank-frame {
		flex-wrap: wrap;
		height: auto;
		min-height: 58px;
		padding-block: var(--jbk-xs);
		row-gap: var(--jbk-xs);
	}

	.u52-glyph {
		order: 1;
	}

	.u52-menu-tap {
		order: 2;
	}

	.u52-buttons {
		order: 3;
		flex-basis: 100%;
		margin-inline-start: 0;
	}

	.u52-buttons .u52-key {
		width: 100%;
		font-size: 13px;
	}

	.y49-node {
		padding-left: var(--jbk-md);
	}

	.y49-dot {
		width: 12px;
		height: 12px;
		left: -6px;
	}
}

@media (max-width: 488px) {
	.i71-buttons .i71-key,
	.z98-prompt .z98-key,
	.i02-box .i02-key,
	.f44-buttons .f44-key {
		width: 100%;
	}

	.u52-crown-frame {
		font-size: 10px;
	}

	.u52-note {
		font-size: 10px;
	}

	.y26-pic {
		width: 116px;
		height: 116px;
	}
}

/* -------------------------------------------------------------
   24. Movimento ridotto su richiesta del sistema
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	[data-seen] {
		opacity: 1;
		filter: none;
		transform: none;
	}
}

/* -------------------------------------------------------------
   25. Bottone offerta — pelle da scripts/cta-style.mjs
   (il proiettore scorre dentro il gradiente: nessuna larghezza in più)
   ------------------------------------------------------------- */
@property --shine-lfwn {
	syntax: "<percentage>";
	inherits: false;
	initial-value: -60%;
}

.lfwn-act {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border: 2px solid #13101F;
	border-radius: 2px;
	background: #65A30D;
	color: #13101F;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 #13101F;
	overflow: hidden;
	transition: background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
}

.lfwn-act:hover {
	background: #4D7C0F;
	color: #FFFFFF;
	box-shadow: 1px 1px 0 #13101F;
	animation: none;
}

.lfwn-act:hover::after {
	animation: none;
}

.lfwn-act:active {
	background: #3F6212;
	color: #FFFFFF;
}

.lfwn-act:focus-visible {
	outline: 3px solid #13101F;
	outline-offset: 3px;
}

.lfwn-act::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	transform: none;
	pointer-events: none;
	background: linear-gradient(100deg, transparent calc(var(--shine-lfwn) - 24%), rgba(255, 255, 255, .42) var(--shine-lfwn), transparent calc(var(--shine-lfwn) + 24%));
	animation: shine_lfwn 4s ease-in-out infinite;
}

@keyframes shine_lfwn {
	0% {
		--shine-lfwn: -60%;
	}

	37.500%,
	100% {
		--shine-lfwn: 160%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lfwn-act,
	.lfwn-act::after {
		animation: none !important;
		transition: none !important;
	}
}

@media (max-width: 924px) {
  .u52-guide,
  .u52-list { display: none !important; }
  .u52-menu-tap { display: flex !important; }
}

/* картинки страниц: вписываются целиком, не занимают весь экран */
.z98-shot{margin-block:24px;}
.z98-shot img{display:block;width:auto;height:auto;max-width:min(100%,560px);max-height:56vh;margin-inline:auto;}