/* ============================================================
   MyStake Casino — United Kingdom
   ============================================================ */

/* ---------- fonts ---------- */
@font-face {
	font-family: "Montserrat";
	src: url("/typeset/montserrat-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/typeset/montserrat-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/typeset/montserrat-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/typeset/inter-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/typeset/inter-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/typeset/inter-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---------- tokens ---------- */
:root {
	--c-root: #7934e2;
	--c-beacon: #02a8e3;
	--c-key-active: #0196c6;
	--c-back: #0f1010;
	--c-raised: #191b1c;
	--c-front: #ffffff;
	--c-subtle: #bfbdbc;
	--c-line: #2a2d2f;
	--c-edge-hard: #3d4144;
	--c-blend-a: #73d4ff;
	--c-gradient-mid: #19bbff;
	--c-notice: #c0392b;

	--g-hair: 5px;
	--g-tiny: 10px;
	--g-snug: 15px;
	--g-base: 25px;
	--g-wide: 40px;
	--g-roomy: 60px;
	--g-vast: 90px;
	--g-huge: 140px;

	--r-capsule: 0;
	--r-orb: 50%;
	--r-hair: 0;
	--r-tiny: 0;
	--r-snug: 0;
	--r-base: 0;
	--r-wide: 0;
	--r-roomy: 0;
	--r-vast: 0;
	--r-huge: 0;

	--f-lead: "Montserrat", "Trebuchet MS", sans-serif;
	--f-prose: "Inter", "Helvetica Neue", Arial, sans-serif;

	--z-xxl: clamp(30px, 4.4vw, 48px);
	--z-h2: clamp(24px, 3.1vw, 36px);
	--z-lg-2: 26px;
	--z-sub-2: 21px;
	--z-minor: 18px;
	--z-micro-head: 16px;
	--z-base: 19px;
	--z-sm: 16px;
	--z-micro: 14px;

	--l-tight: 1.2;
	--l-normal: 1.7;
	--l-relaxed: 2;

	--w-regular: 400;
	--w-medium: 500;
	--w-thick: 600;

	--e-tight: -0.01em;
	--e-default: 0;
	--e-loose: 0.02em;

	--d-hair: none;
	--d-tiny: none;
	--d-snug: 0 1px 0 rgba(0, 0, 0, 0.08);
	--d-base: 0 2px 0 rgba(0, 0, 0, 0.12);
	--d-wide: 0 4px 0 rgba(0, 0, 0, 0.16);
	--d-roomy: 0 6px 0 rgba(0, 0, 0, 0.2);
	--d-vast: 0 8px 0 rgba(0, 0, 0, 0.24);
	--d-huge: 0 12px 0 rgba(0, 0, 0, 0.28);

	--t-snap: 219ms;
	--t-base: 410ms;
	--t-gentle: 786ms;

	--x-out: cubic-bezier(0.12, 0.92, 0.31, 0.93);
	--x-take-off: cubic-bezier(0.39, 0.08, 0.42, 0.88);
	--x-smooth: cubic-bezier(0.39, 0.08, 0.42, 0.88);
	--x-pop: cubic-bezier(0.29, 1.4, 0.53, 1.25);

	--v-full: 1000px;
	--v-column: 1000px;
	--v-edge-wide: 24px;
	--v-pad-md: 32px;
	--v-edge-narrow: 16px;

	--b-fine: 1px;
	--b-mid: 2px;
	--b-strong: 4px;

	--h-size-desktop: 42px;
	--h-short: 42px;

	--gyv-slim: 520px;
	--gyv-sec-y: var(--g-wide);
	--gyv-shell: 96px;
	--gyv-band: calc(var(--v-full) + 2 * var(--v-edge-wide));
}

/* ---------- narrow-screen token overrides (desktop-first) ---------- */
@media (max-width: 899px) {
	:root {
		--z-lg-2: 22px;
		--z-sub-2: 19px;
		--z-minor: 17px;
		--z-micro-head: 15px;
		--z-base: 18px;
		--z-sm: 15px;
		--z-micro: 13px;
		--gyv-sec-y: var(--g-base);
	}
}

/* ---------- reset / base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
	scroll-padding-top: calc(var(--gyv-shell) + var(--g-snug));
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--c-back);
	color: var(--c-front);
	font-family: var(--f-prose);
	font-size: var(--z-base);
	font-weight: var(--w-regular);
	line-height: var(--l-relaxed);
	letter-spacing: var(--e-default);
	padding-top: var(--gyv-shell);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

main {
	flex: 1 0 auto;
	display: block;
}

main:has(> .xuvyf) {
	display: flex;
	flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
	letter-spacing: var(--e-tight);
}

h1 {
	font-family: var(--f-lead);
	font-size: var(--z-xxl);
	font-weight: var(--w-thick);
	line-height: var(--l-tight);
}

h2 {
	font-family: var(--f-lead);
	font-size: var(--z-h2);
	font-weight: var(--w-thick);
	line-height: var(--l-tight);
}

h3 {
	font-family: var(--f-prose);
	font-size: var(--z-lg-2);
	font-weight: var(--w-thick);
	line-height: var(--l-tight);
}

h4 {
	font-family: var(--f-prose);
	font-size: var(--z-sub-2);
	font-weight: var(--w-thick);
	line-height: var(--l-tight);
}

h5 {
	font-family: var(--f-prose);
	font-size: var(--z-minor);
	font-weight: var(--w-medium);
	line-height: var(--l-normal);
}

h6 {
	font-family: var(--f-prose);
	font-size: var(--z-micro-head);
	font-weight: var(--w-medium);
	line-height: var(--l-normal);
}

p {
	margin: 0;
}

img {
	max-width: 100%;
	display: block;
}

svg {
	fill: currentColor;
}

a {
	color: var(--c-beacon);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--t-snap) var(--x-out), background-color var(--t-snap) var(--x-out);
}

a:hover {
	color: var(--c-back);
	background-color: var(--c-beacon);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: var(--b-mid) solid var(--c-blend-a);
	outline-offset: 2px;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
}

/* ---------- accessibility ---------- */
.skip-hop {
	position: absolute;
	left: var(--g-snug);
	top: -200px;
	z-index: 400;
	padding: var(--g-tiny) var(--g-snug);
	background: var(--c-beacon);
	color: var(--c-back);
	font-family: var(--f-lead);
	font-size: var(--z-sm);
	text-decoration: none;
}

.skip-hop:not(:focus) {
	top: -200px;
}

.skip-hop:focus {
	top: var(--g-snug);
}

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

/* ============================================================
   Header — HEAD-UTIL
   ============================================================ */
.gubas {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 200;
	background: var(--c-back);
	border-bottom: var(--b-fine) solid var(--c-line);
	transition: transform var(--t-base) var(--x-out), box-shadow var(--t-base) var(--x-out);
}

.gubas.is-cast {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.gubas.is-hidden {
	transform: translateY(-100%);
}

.gubas-utility {
	background: var(--c-raised);
	color: var(--c-subtle);
	border-bottom: var(--b-fine) solid var(--c-line);
}

.gubas-utility-part {
	max-width: calc(var(--v-full) + 2 * var(--g-wide));
	margin-inline: auto;
	padding-inline: var(--g-wide);
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-snug);
	background: var(--c-raised);
	color: var(--c-subtle);
	font-size: var(--z-micro);
	line-height: var(--l-normal);
	letter-spacing: var(--e-loose);
}

.gubas-desk {
	color: var(--c-subtle);
	background: var(--c-raised);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gubas-sign {
	color: var(--c-subtle);
	background: var(--c-raised);
	white-space: nowrap;
}

.gubas-rank {
	min-height: 42px;
	background: var(--c-back);
}

.gubas-frame {
	max-width: calc(var(--v-full) + 2 * var(--g-wide));
	margin-inline: auto;
	padding-inline: var(--g-wide);
	padding-block: var(--g-tiny);
	display: flex;
	align-items: center;
	gap: var(--g-snug);
	flex-wrap: nowrap;
}

.gubas-toggle {
	order: 4;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	padding: 0;
	background: var(--c-back);
	color: var(--c-front);
	border: var(--b-fine) solid var(--c-edge-hard);
	border-radius: var(--r-tiny);
	cursor: pointer;
}

.gubas-toggle:hover {
	background: var(--c-raised);
	color: var(--c-beacon);
}

.gubas-cells {
	display: block;
	width: 4px;
	height: 4px;
	background: currentColor;
	box-shadow: 9px 0 0 0 currentColor, 0 9px 0 0 currentColor, 9px 9px 0 0 currentColor;
	transform: translate(-4px, -4px);
}

.gubas-crest {
	order: 1;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
	background: var(--c-back);
	color: var(--c-front);
}

.gubas-crest:hover {
	background: var(--c-back);
	color: var(--c-front);
}

.gubas-plate {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--g-hair) var(--g-tiny);
	background: var(--c-raised);
	color: var(--c-front);
	border: var(--b-fine) solid var(--c-edge-hard);
	border-radius: var(--r-tiny);
}

.gubas-shot {
	display: block;
	height: 44px;
	width: auto;
	flex-shrink: 0;
}

.gubas-guide {
	order: 2;
	flex: 0 0 auto;
	display: block;
}

.gubas-queue {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--g-tiny);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gubas-unit {
	display: flex;
	align-items: center;
	position: relative;
}

.gubas-unit[hidden] {
	display: none;
}

.gubas-unit + .gubas-unit::before {
	content: "/";
	margin-inline-end: var(--g-tiny);
	color: var(--c-edge-hard);
	font-size: var(--z-micro);
}

.gubas-step {
	display: block;
	padding-block: var(--g-tiny);
	background: var(--c-back);
	color: var(--c-subtle);
	font-family: var(--f-prose);
	font-size: 14px;
	font-weight: 400;
	font-variant-caps: small-caps;
	letter-spacing: var(--e-loose);
	line-height: var(--l-tight);
	text-decoration: none;
	white-space: nowrap;
}

.gubas-step:hover {
	background: var(--c-back);
	color: var(--c-beacon);
}

.gubas-step[aria-current="page"] {
	color: var(--c-front);
	font-weight: var(--w-thick);
}

.gubas-more-opener {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--g-hair);
	min-height: 44px;
	padding-inline: var(--g-tiny);
	background: var(--c-back);
	color: var(--c-subtle);
	border: var(--b-fine) solid var(--c-edge-hard);
	border-radius: var(--r-tiny);
	font-family: var(--f-prose);
	font-size: 14px;
	font-variant-caps: small-caps;
	letter-spacing: var(--e-loose);
	cursor: pointer;
	white-space: nowrap;
}

.gubas-more-opener:hover {
	background: var(--c-raised);
	color: var(--c-beacon);
}

.gubas-more-pane {
	display: none;
	position: absolute;
	inset-block-start: calc(100% + var(--g-hair));
	inset-inline-end: 0;
	z-index: 210;
	min-width: 220px;
	max-height: 70vh;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: var(--g-hair) 0;
	background: var(--c-raised);
	border: var(--b-fine) solid var(--c-edge-hard);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
}

.gubas-more-pane.is-open {
	display: block;
}

.gubas-more-pane .gubas-unit {
	display: block;
	width: 100%;
}

.gubas-more-pane .gubas-unit + .gubas-unit::before {
	content: none;
}

.gubas-more-pane .gubas-step {
	display: block;
	padding: var(--g-hair) var(--g-snug);
	background: var(--c-raised);
	color: var(--c-subtle);
	white-space: nowrap;
}

.gubas-more-pane .gubas-step:hover {
	background: var(--c-back);
	color: var(--c-beacon);
}

.gubas-unit-extra {
	margin-inline-start: var(--g-hair);
}

.gubas-unit + .gubas-unit-extra::before {
	content: none;
	margin-inline-end: 0;
}

.bymodef-key {
	margin-block-start: var(--g-hair);
}

.vumabo-key {
	margin-block-start: var(--g-hair);
}

.gubas-keys {
	order: 3;
	display: flex;
	align-items: center;
	gap: var(--g-tiny);
	margin-inline-start: auto;
	flex: 0 0 auto;
}

.gubas-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: var(--g-base);
	border-radius: var(--r-capsule);
	font-family: var(--f-lead);
	font-size: var(--z-sm);
	font-weight: var(--w-medium);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.gubas-flyout {
	display: none;
	background: var(--c-raised);
	border-top: var(--b-fine) solid var(--c-line);
	max-height: 70vh;
	overflow-y: auto;
}

.gubas-flyout.is-open {
	display: block;
}

.gubas-flyout-guide {
	display: block;
	max-width: calc(var(--v-full) + 2 * var(--g-wide));
	margin-inline: auto;
	padding: var(--g-snug) var(--g-wide) var(--g-base);
}

.gubas-flyout-queue {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--g-hair) var(--g-snug);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gubas-flyout-queue .gubas-unit + .gubas-unit::before {
	content: none;
	margin-inline-end: 0;
}

.gubas-flyout-queue .gubas-step {
	display: block;
	min-height: 44px;
	padding-block: var(--g-tiny);
	background: var(--c-raised);
	color: var(--c-front);
	white-space: normal;
}

.gubas-flyout-queue .gubas-step:hover {
	background: var(--c-raised);
	color: var(--c-beacon);
}

/* ============================================================
   Responsible-gaming band — RG-03
   ============================================================ */
.pledge {
	display: block;
	padding-block: var(--g-snug) 0;
}

.pledge-band {
	display: block;
	max-width: var(--gyv-band);
	margin-inline: auto;
	padding: var(--g-tiny) var(--v-edge-wide);
	background: var(--c-notice);
	color: var(--c-front);
	font-size: var(--z-micro);
	line-height: var(--l-normal);
	letter-spacing: var(--e-loose);
	text-align: center;
}

.pledge-step {
	background: var(--c-notice);
	color: var(--c-front);
	text-decoration: underline;
}

.pledge-step:hover {
	background: var(--c-front);
	color: var(--c-notice);
}

/* ============================================================
   Breadcrumbs — BREAD-04
   ============================================================ */
.vopen {
	display: block;
	padding-block: var(--g-base);
}

.vopen-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--g-hair);
	list-style: none;
}

.vopen-unit {
	display: inline-flex;
	align-items: baseline;
	gap: var(--g-hair);
	font-size: var(--z-sm);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
}

.vopen-unit + .vopen-unit::before {
	content: "—";
	color: var(--c-edge-hard);
	margin-inline-end: var(--g-snug);
	margin-inline-start: var(--g-snug);
}

.vopen-tick {
	font-family: var(--f-lead);
	font-size: var(--z-micro-head);
	font-weight: var(--w-thick);
	color: var(--c-beacon);
	background: var(--c-back);
	margin-inline-end: var(--g-hair);
}

.vopen-step {
	background: var(--c-back);
	color: var(--c-subtle);
	text-decoration: none;
}

.vopen-step:hover {
	background: var(--c-back);
	color: var(--c-beacon);
}

.vopen-here {
	color: var(--c-front);
	background: var(--c-back);
}

/* ============================================================
   Hero — HERO-07 (Top-Tile + Text Below)
   ============================================================ */
.bymodef {
	display: block;
}

.bymodef-figure {
	display: block;
	margin: 0;
	position: relative;
}

.bymodef-figure::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 120px;
	background-image: linear-gradient(to bottom, rgba(15, 16, 16, 0), var(--c-back));
	pointer-events: none;
}

.bymodef-shot {
	display: block;
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: center;
}

.bymodef-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	padding-block: var(--gyv-sec-y);
	display: block;
}

.bymodef-matter {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--g-snug);
}

.bymodef-flag {
	font-family: var(--f-lead);
	font-size: var(--z-micro);
	font-weight: var(--w-medium);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
	color: var(--c-beacon);
	background: var(--c-back);
}

.bymodef-sub {
	max-width: var(--gyv-slim);
	color: var(--c-subtle);
	font-size: var(--z-base);
	line-height: var(--l-relaxed);
}

.bymodef-note {
	font-size: var(--z-micro);
	color: var(--c-subtle);
	background: var(--c-back);
	letter-spacing: var(--e-loose);
}

/* ============================================================
   Page header — PHEAD-04 (Two-Column)
   ============================================================ */
.tigeby {
	display: block;
	padding-block: var(--gyv-sec-y);
	border-bottom: var(--b-fine) solid var(--c-line);
}

.tigeby-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--g-wide);
	align-items: start;
}

.tigeby-part {
	display: flex;
	flex-direction: column;
	gap: var(--g-snug);
	min-width: 0;
}

.tigeby-flag {
	font-family: var(--f-lead);
	font-size: var(--z-micro);
	font-weight: var(--w-medium);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
	color: var(--c-beacon);
	background: var(--c-back);
}

.tigeby-line {
	color: var(--c-subtle);
	font-size: var(--z-base);
	line-height: var(--l-relaxed);
}

.tigeby-moment {
	font-size: var(--z-micro);
	color: var(--c-subtle);
	background: var(--c-back);
	letter-spacing: var(--e-loose);
}

/* ============================================================
   Inline CTA — INLINE-CTA-06 (Dual-Button Mini Bar)
   ============================================================ */
.mabara {
	display: block;
	padding-block: var(--g-base);
}

.mabara-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--g-snug);
	text-align: center;
}

.mabara-line {
	color: var(--c-subtle);
	font-size: var(--z-base);
	line-height: var(--l-normal);
}

.mabara-keys {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--g-snug);
}

.mabara-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: var(--g-base);
	border-radius: var(--r-capsule);
	font-family: var(--f-lead);
	font-size: var(--z-sm);
	font-weight: var(--w-medium);
	text-decoration: none;
}

.mabara-key-quiet {
	background: var(--c-back);
	color: var(--c-front);
	border: var(--b-fine) solid var(--c-edge-hard);
}

.mabara-key-quiet:hover {
	background: var(--c-raised);
	color: var(--c-front);
	border-color: var(--c-front);
}

/* ============================================================
   Items grid — GRID-08 (Cards with Top-Border Accent)
   ============================================================ */
.geledom {
	display: block;
	padding-block: var(--gyv-sec-y);
}

.geledom-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: block;
}

.geledom-queue {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--g-base);
	align-items: start;
	margin-block-start: var(--g-base);
	list-style: none;
}

.geledom-card {
	display: flex;
	flex-direction: column;
	gap: var(--g-tiny);
	padding: var(--g-base);
	background: var(--c-raised);
	color: var(--c-front);
	border-top: var(--b-strong) solid var(--c-beacon);
	box-shadow: var(--d-snug);
	transition: transform var(--t-snap) var(--x-out);
}

.geledom-card::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	margin-block-start: auto;
	background: var(--c-beacon);
	transition: width var(--t-base) var(--x-out);
}

.geledom-card:hover::after {
	width: 100%;
}

.geledom-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--c-back);
	color: var(--c-beacon);
	border: var(--b-fine) solid var(--c-edge-hard);
}

.geledom-mark svg {
	width: 21px;
	height: 21px;
}

.geledom-hdr {
	font-size: var(--z-sub-2);
	color: var(--c-front);
	background: var(--c-raised);
}

.geledom-line {
	color: var(--c-subtle);
	background: var(--c-raised);
	font-size: var(--z-sm);
	line-height: var(--l-normal);
}

/* ============================================================
   Reviews — REV-02 (Quote-Style Editorial)
   ============================================================ */
.rypab {
	display: block;
	padding-block: var(--gyv-sec-y);
}

.rypab-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: block;
}

.rypab-queue {
	display: block;
	margin-block-start: var(--g-base);
	list-style: none;
}

.rypab-unit {
	display: block;
	position: relative;
	padding-block: var(--g-base);
	padding-inline-start: var(--g-roomy);
	border-bottom: var(--b-fine) solid var(--c-line);
}

.rypab-unit:last-child {
	border-bottom: 0;
}

.rypab-unit::before {
	content: "\201C";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--g-tiny);
	font-family: var(--f-lead);
	font-size: 48px;
	line-height: 1;
	color: var(--c-beacon);
	background: var(--c-back);
}

.rypab-quote {
	margin: 0;
	font-family: var(--f-lead);
	font-size: var(--z-sub-2);
	font-style: italic;
	line-height: var(--l-normal);
	color: var(--c-front);
	background: var(--c-back);
}

.rypab-info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--g-tiny);
	margin-block-start: var(--g-snug);
	font-size: var(--z-sm);
	color: var(--c-subtle);
	background: var(--c-back);
}

.rypab-handle {
	font-style: normal;
	font-weight: var(--w-medium);
	color: var(--c-front);
	background: var(--c-back);
}

.rypab-score {
	color: var(--c-beacon);
	background: var(--c-back);
	letter-spacing: var(--e-loose);
}

/* ============================================================
   Prose — PROSE-06 (centred, density roomy)
   ============================================================ */
.gygopib {
	display: block;
	padding-block: var(--gyv-sec-y);
}

.gygopib-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: block;
}

.gygopib-matter {
	display: block;
	text-align: center;
}

.gygopib-matter h2 {
	font-size: var(--z-sub-2);
	font-weight: var(--w-regular);
	line-height: var(--l-normal);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
	color: var(--c-front);
	margin-block-start: 40px;
	margin-block-end: var(--g-base);
	text-align: center;
}

.gygopib-matter h2:first-child {
	margin-block-start: 0;
}

.gygopib-matter p {
	color: var(--c-subtle);
	font-size: var(--z-base);
	line-height: var(--l-relaxed);
	margin-block-end: var(--g-base);
	text-align: center;
}

.gygopib-matter p:last-child {
	margin-block-end: 0;
}

.gygopib-matter strong {
	color: var(--c-front);
	font-weight: var(--w-thick);
}

.gygopib-matter em {
	color: var(--c-front);
	font-style: italic;
}

.gygopib-queue {
	display: block;
	list-style: none;
	margin-block-end: var(--g-base);
	text-align: center;
}

.gygopib-unit {
	display: block;
	position: relative;
	padding-block: var(--g-hair);
	color: var(--c-subtle);
	font-size: var(--z-base);
	line-height: var(--l-normal);
}

.gygopib-unit::before {
	content: "\2014";
	color: var(--c-beacon);
	margin-inline-end: var(--g-hair);
}

.gygopib-shot {
	display: block;
	width: 100%;
	height: auto;
	max-height: 52vh;
	object-fit: cover;
	margin-block: var(--g-base);
	border: var(--b-fine) solid var(--c-line);
}

.gygopib-shot-tall {
	max-width: 620px;
	margin-inline: auto;
}

.gygopib-lure {
	display: block;
	margin-block: var(--g-base);
	text-align: center;
}

/* ============================================================
   Data table — TABLE-02 (Borderless Editorial)
   ============================================================ */
.vaziz {
	display: block;
	padding-block: var(--gyv-sec-y);
}

.vaziz-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: block;
}

.vaziz-scroll {
	display: block;
	margin-block-start: var(--g-base);
	overflow-x: auto;
}

.vaziz-grid {
	width: 100%;
	min-width: 620px;
	background: var(--c-back);
	color: var(--c-front);
	font-size: var(--z-base);
}

.vaziz-grid th {
	padding-block: var(--g-snug);
	padding-inline: var(--g-tiny);
	text-align: start;
	font-family: var(--f-lead);
	font-size: var(--z-sm);
	font-weight: var(--w-thick);
	text-transform: uppercase;
	letter-spacing: var(--e-loose);
	color: var(--c-front);
	background: var(--c-back);
	border-bottom: var(--b-mid) solid var(--c-beacon);
}

.vaziz-grid td {
	padding-block: var(--g-snug);
	padding-inline: var(--g-tiny);
	color: var(--c-subtle);
	background: var(--c-back);
	border-bottom: var(--b-fine) solid var(--c-line);
	vertical-align: top;
}

.vaziz-grid tr:last-child td {
	border-bottom: 0;
}

.vaziz-grid td:first-child {
	color: var(--c-front);
	background: var(--c-back);
	font-weight: var(--w-medium);
}

.vaziz-note {
	display: block;
	margin-block-start: var(--g-tiny);
	font-size: var(--z-micro);
	color: var(--c-subtle);
	background: var(--c-back);
}

/* ============================================================
   FAQ — FAQ-01 (Classic Accordion)
   ============================================================ */
.sozelu {
	display: block;
	padding-block: var(--gyv-sec-y);
}

.sozelu-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: block;
}

.sozelu-queue {
	display: block;
	margin-block-start: var(--g-base);
}

.sozelu-unit {
	display: block;
	border-bottom: var(--b-fine) solid var(--c-line);
}

.sozelu-ask {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--g-snug);
	padding-block: var(--g-base);
	cursor: pointer;
	list-style: none;
	background: var(--c-back);
	color: var(--c-front);
}

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

.sozelu-ask:hover {
	background: var(--c-back);
	color: var(--c-beacon);
}

.sozelu-hdr {
	font-size: var(--z-minor);
	font-weight: var(--w-thick);
	line-height: var(--l-normal);
	color: inherit;
	text-align: start;
}

.sozelu-sign {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
	color: var(--c-beacon);
	transition: transform var(--t-base) var(--x-out);
}

.sozelu-sign::before,
.sozelu-sign::after {
	content: "";
	position: absolute;
	inset-block-start: 11px;
	inset-inline-start: 2px;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.sozelu-sign::after {
	transform: rotate(90deg);
}

.sozelu-unit[open] .sozelu-sign {
	transform: rotate(45deg);
}

.sozelu-matter {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--t-base) var(--x-out);
}

.sozelu-unit[open] .sozelu-matter {
	grid-template-rows: 1fr;
}

.sozelu-part {
	overflow: hidden;
	min-height: 0;
}

.sozelu-part p {
	padding-block-end: var(--g-base);
	color: var(--c-subtle);
	font-size: var(--z-base);
	line-height: var(--l-relaxed);
}

/* ============================================================
   CTA block — CTA-09 (Eyebrow + H2 + Short Text)
   ============================================================ */
.vumabo {
	display: block;
	padding-block: var(--gyv-sec-y);
	background: var(--c-raised);
	color: var(--c-front);
	border-block: var(--b-fine) solid var(--c-line);
}

.vumabo-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--g-snug);
	text-align: start;
}

.vumabo-flag {
	font-family: var(--f-lead);
	font-size: var(--z-micro);
	font-weight: var(--w-medium);
	text-transform: uppercase;
	letter-spacing: var(--e-loose);
	color: var(--c-beacon);
	background: var(--c-raised);
}

.vumabo-line {
	max-width: var(--gyv-slim);
	color: var(--c-subtle);
	background: var(--c-raised);
	font-size: var(--z-base);
	line-height: var(--l-relaxed);
}

.vumabo-note {
	font-size: var(--z-micro);
	color: var(--c-subtle);
	background: var(--c-raised);
	letter-spacing: var(--e-loose);
}

/* ============================================================
   Legal section — LEGAL-03 (Two-Column Sidebar TOC)
   ============================================================ */
.zubotix {
	display: block;
	padding-block: var(--gyv-sec-y);
}

.zubotix-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--g-wide);
	align-items: start;
}

.zubotix-toc {
	position: sticky;
	inset-block-start: calc(var(--gyv-shell) + var(--g-snug));
	align-self: start;
	display: block;
	padding: var(--g-snug);
	background: var(--c-raised);
	color: var(--c-front);
	border: var(--b-fine) solid var(--c-line);
}

.zubotix-hdr {
	font-size: var(--z-micro-head);
	text-transform: uppercase;
	letter-spacing: var(--e-loose);
	color: var(--c-front);
	background: var(--c-raised);
	margin-block-end: var(--g-tiny);
}

.zubotix-queue {
	display: block;
	margin: 0;
	padding-inline-start: var(--g-base);
	font-size: var(--z-sm);
	color: var(--c-subtle);
}

.zubotix-unit {
	margin-block-end: var(--g-hair);
}

.zubotix-step {
	background: var(--c-raised);
	color: var(--c-subtle);
	text-decoration: none;
}

.zubotix-step:hover {
	background: var(--c-raised);
	color: var(--c-beacon);
}

.zubotix-matter {
	display: block;
	min-width: 0;
}

.zubotix-part {
	display: block;
	margin-block-end: var(--g-base);
}

.zubotix-part h2 {
	font-size: var(--z-lg-2);
	margin-block-start: 40px;
	margin-block-end: var(--g-snug);
}

.zubotix-part:first-child h2 {
	margin-block-start: 0;
}

.zubotix-part p {
	color: var(--c-subtle);
	font-size: var(--z-base);
	line-height: var(--l-relaxed);
	margin-block-end: var(--g-snug);
}

.zubotix-queue-help {
	display: block;
	list-style: none;
	margin-block-start: var(--g-snug);
}

.zubotix-unit-help {
	display: block;
	padding: var(--g-snug);
	margin-block-end: var(--g-tiny);
	background: var(--c-raised);
	color: var(--c-subtle);
	border-inline-start: var(--b-strong) solid var(--c-notice);
	font-size: var(--z-sm);
	line-height: var(--l-normal);
}

.zubotix-fine {
	display: block;
	margin-block-start: var(--g-base);
	padding: var(--g-snug);
	background: var(--c-raised);
	color: var(--c-subtle);
	border: var(--b-fine) solid var(--c-line);
	font-size: var(--z-sm);
	line-height: var(--l-normal);
}

.zubotix-moment {
	display: block;
	margin-block-end: var(--g-base);
	font-size: var(--z-micro);
	color: var(--c-subtle);
	background: var(--c-back);
	letter-spacing: var(--e-loose);
}

/* ============================================================
   Contact form — FORM-06 (Floating Labels)
   ============================================================ */
.selap {
	display: block;
	padding-block: var(--gyv-sec-y);
}

.selap-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: block;
}

.selap-form {
	display: flex;
	flex-direction: column;
	gap: var(--g-snug);
	margin-block-start: var(--g-base);
	max-width: 620px;
}

.selap-entry {
	position: relative;
	display: block;
	flex: 0 0 auto;
}

.selap-input,
.selap-area {
	width: 100%;
	padding: var(--g-base) var(--g-snug) var(--g-tiny);
	background: var(--c-raised);
	color: var(--c-front);
	border: var(--b-mid) solid var(--c-edge-hard);
	border-radius: var(--r-tiny);
	font-family: var(--f-prose);
	font-size: var(--z-sm);
	line-height: var(--l-normal);
}

.selap-area {
	min-height: 140px;
	resize: vertical;
}

.selap-input:focus,
.selap-area:focus {
	border-color: var(--c-beacon);
	outline: none;
}

.selap-mark {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: var(--g-snug);
	transform: translateY(-50%);
	color: var(--c-subtle);
	background: var(--c-raised);
	font-size: var(--z-sm);
	pointer-events: none;
	transition: inset-block-start var(--t-snap) var(--x-out), font-size var(--t-snap) var(--x-out);
}

.selap-entry-area .selap-mark {
	inset-block-start: var(--g-base);
	transform: translateY(-50%);
}

.selap-input:focus + .selap-mark,
.selap-input:not(:placeholder-shown) + .selap-mark,
.selap-area:focus + .selap-mark,
.selap-area:not(:placeholder-shown) + .selap-mark {
	inset-block-start: var(--g-tiny);
	transform: translateY(0);
	font-size: var(--z-micro);
	color: var(--c-beacon);
	background: var(--c-raised);
}

.selap-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 44px;
	padding-inline: var(--g-base);
	background: var(--c-beacon);
	color: var(--c-back);
	border: 0;
	border-radius: var(--r-capsule);
	font-family: var(--f-lead);
	font-size: var(--z-sm);
	font-weight: var(--w-medium);
	cursor: pointer;
}

.selap-key:hover {
	background: var(--c-key-active);
	color: var(--c-back);
}

.selap-message {
	display: none;
	margin-block-start: var(--g-snug);
	padding: var(--g-snug);
	background: var(--c-raised);
	color: var(--c-front);
	border-inline-start: var(--b-strong) solid var(--c-beacon);
	font-size: var(--z-sm);
	line-height: var(--l-normal);
}

.selap-message.is-open {
	display: block;
}

.selap-queue {
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-snug);
	list-style: none;
	margin-block-start: var(--g-base);
}

.selap-unit {
	display: block;
	padding: var(--g-snug);
	background: var(--c-raised);
	color: var(--c-subtle);
	border: var(--b-fine) solid var(--c-line);
	font-size: var(--z-sm);
	line-height: var(--l-normal);
	flex: 1 1 240px;
}

.selap-unit strong {
	display: block;
	color: var(--c-front);
	background: var(--c-raised);
	font-weight: var(--w-medium);
}

/* ============================================================
   Author byline — BYLINE-07 (Expertise Tags Block)
   ============================================================ */
.tosib {
	display: block;
	padding-block: var(--gyv-sec-y);
}

.tosib-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: block;
}

.tosib-card {
	display: flex;
	flex-direction: column;
	gap: var(--g-snug);
	padding: var(--g-base);
	background: var(--c-raised);
	color: var(--c-front);
	border: var(--b-fine) solid var(--c-line);
	box-shadow: var(--d-snug);
}

.tosib-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--g-snug);
}

.tosib-face {
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--r-orb);
	border: var(--b-fine) solid var(--c-edge-hard);
}

.tosib-part {
	display: flex;
	flex-direction: column;
	gap: var(--g-hair);
	min-width: 0;
}

.tosib-handle {
	font-size: var(--z-sub-2);
	font-family: var(--f-lead);
	color: var(--c-front);
	background: var(--c-raised);
}

.tosib-step {
	background: var(--c-raised);
	color: var(--c-front);
	text-decoration: none;
}

.tosib-step:hover {
	background: var(--c-raised);
	color: var(--c-beacon);
}

.tosib-post {
	font-size: var(--z-sm);
	color: var(--c-subtle);
	background: var(--c-raised);
}

.tosib-moment {
	font-size: var(--z-micro);
	color: var(--c-subtle);
	background: var(--c-raised);
	letter-spacing: var(--e-loose);
}

.tosib-note {
	color: var(--c-subtle);
	background: var(--c-raised);
	font-size: var(--z-sm);
	line-height: var(--l-normal);
}

.tosib-keys {
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-tiny);
}

.tosib-chip {
	display: inline-block;
	padding: var(--g-hair) var(--g-snug);
	background: var(--c-root);
	color: var(--c-front);
	border-radius: var(--r-capsule);
	font-size: var(--z-micro);
	text-transform: uppercase;
	letter-spacing: var(--e-loose);
}

.tosib-more {
	background: var(--c-raised);
	color: var(--c-beacon);
	font-size: var(--z-sm);
	text-decoration: underline;
}

.tosib-more:hover {
	background: var(--c-beacon);
	color: var(--c-back);
}

/* ============================================================
   Author card — AUTH-08 (Minimal Avatar + Name)
   ============================================================ */
.dasipe {
	display: block;
	padding-block: var(--gyv-sec-y);
}

.dasipe-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: block;
}

.dasipe-card {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: var(--g-snug);
	padding: var(--g-snug) var(--g-base);
	background: var(--c-raised);
	color: var(--c-front);
	border: var(--b-fine) solid var(--c-line);
}

.dasipe-face {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--r-orb);
	border: var(--b-fine) solid var(--c-edge-hard);
}

.dasipe-part {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dasipe-handle {
	font-size: var(--z-base);
	font-weight: var(--w-thick);
	color: var(--c-front);
	background: var(--c-raised);
}

.dasipe-post {
	font-size: var(--z-micro);
	color: var(--c-subtle);
	background: var(--c-raised);
}

.dasipe-queue {
	display: block;
	list-style: none;
	margin-block-start: var(--g-base);
}

.dasipe-unit {
	display: block;
	padding-block: var(--g-tiny);
	border-bottom: var(--b-fine) solid var(--c-line);
}

.dasipe-unit:last-child {
	border-bottom: 0;
}

.dasipe-step {
	background: var(--c-back);
	color: var(--c-subtle);
	font-size: var(--z-sm);
	text-decoration: none;
}

.dasipe-step:hover {
	background: var(--c-back);
	color: var(--c-beacon);
}

.dasipe-hdr {
	font-size: var(--z-lg-2);
	margin-block-start: var(--g-base);
}

/* ============================================================
   Error block — ERR-03 (Minimal No-Drama)
   ============================================================ */
.xuvyf {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	justify-content: center;
	padding-block: var(--gyv-sec-y);
}

.xuvyf-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	width: 100%;
	display: block;
	text-align: center;
}

.xuvyf-hdr {
	max-width: var(--gyv-slim);
	margin-inline: auto;
	font-family: var(--f-lead);
	font-size: var(--z-h2);
	font-weight: var(--w-thick);
	line-height: var(--l-tight);
}

.xuvyf-line {
	max-width: var(--gyv-slim);
	margin-inline: auto;
	margin-block-start: var(--g-snug);
	color: var(--c-subtle);
	font-size: var(--z-base);
	line-height: var(--l-relaxed);
}

.xuvyf-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-block-start: var(--g-base);
	padding-inline: var(--g-base);
	background: var(--c-beacon);
	color: var(--c-back);
	border-radius: var(--r-capsule);
	font-family: var(--f-lead);
	font-size: var(--z-sm);
	font-weight: var(--w-medium);
	text-decoration: none;
}

.xuvyf-key:hover {
	background: var(--c-key-active);
	color: var(--c-back);
}

/* ============================================================
   Cookie banner — COOK-11 (Inline Above Footer)
   ============================================================ */
.zegy {
	display: none;
	padding-block: var(--g-base);
}

.zegy.is-live {
	display: block;
	animation: zegy-glide var(--t-gentle) var(--x-out) 1;
}

@keyframes zegy-glide {
	from {
		transform: translateX(-24px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.zegy-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: block;
}

.zegy-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--g-base);
	padding: var(--g-base);
	background: var(--c-raised);
	color: var(--c-front);
	border: var(--b-fine) solid var(--c-edge-hard);
}

.zegy-hdr {
	display: block;
	font-size: var(--z-micro-head);
	text-transform: uppercase;
	letter-spacing: var(--e-loose);
	color: var(--c-front);
	background: var(--c-raised);
	margin-block-end: var(--g-hair);
}

.zegy-line {
	color: var(--c-subtle);
	background: var(--c-raised);
	font-size: var(--z-sm);
	line-height: var(--l-normal);
}

.zegy-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-inline-end: var(--g-hair);
	color: var(--c-beacon);
	vertical-align: text-bottom;
}

.zegy-keys {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--g-tiny);
}

.zegy-confirm,
.zegy-refuse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: var(--g-base);
	border-radius: var(--r-capsule);
	font-family: var(--f-lead);
	font-size: var(--z-sm);
	font-weight: var(--w-medium);
	cursor: pointer;
	white-space: nowrap;
}

.zegy-confirm {
	background: var(--c-beacon);
	color: var(--c-back);
	border: var(--b-fine) solid var(--c-beacon);
}

.zegy-confirm:hover {
	background: var(--c-key-active);
	color: var(--c-back);
}

.zegy-refuse {
	background: var(--c-raised);
	color: var(--c-front);
	border: var(--b-fine) solid var(--c-edge-hard);
}

.zegy-refuse:hover {
	background: var(--c-back);
	color: var(--c-front);
}

/* ============================================================
   Footer — FOOT-09 (Wide Single-Strip Industrial)
   ============================================================ */
.fura {
	display: block;
	background: var(--c-root);
	color: var(--c-front);
	padding-block: var(--g-base);
	margin-block-start: auto;
}

.fura-frame {
	max-width: calc(var(--v-full) + 2 * var(--v-edge-wide));
	margin-inline: auto;
	padding-inline: var(--v-edge-wide);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-snug) var(--g-base);
}

.fura-crest {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	background: var(--c-root);
	color: var(--c-front);
	text-decoration: none;
}

.fura-crest:hover {
	background: var(--c-root);
	color: var(--c-front);
}

.fura-plate {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--g-hair) var(--g-tiny);
	background: var(--c-back);
	color: var(--c-front);
	border: var(--b-fine) solid var(--c-edge-hard);
}

.fura-shot {
	display: block;
	height: 36px;
	width: auto;
	flex-shrink: 0;
}

.fura-guide {
	display: block;
	flex: 1 1 520px;
}

.fura-queue {
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-hair) var(--g-base);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fura-unit {
	display: block;
}

.fura-step {
	display: block;
	background: var(--c-root);
	color: var(--c-front);
	font-size: var(--z-sm);
	letter-spacing: var(--e-loose);
	text-decoration: none;
}

.fura-step:hover {
	background: var(--c-root);
	color: var(--c-blend-a);
	text-decoration: underline;
}

.fura-guide-fine {
	display: block;
	flex: 1 1 62%;
}

.fura-queue-fine {
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-hair) var(--g-snug);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fura-step-fine {
	display: block;
	background: var(--c-root);
	color: #ede7fb;
	font-size: var(--z-micro);
	letter-spacing: var(--e-loose);
	text-decoration: none;
}

.fura-step-fine:hover {
	background: var(--c-root);
	color: var(--c-front);
	text-decoration: underline;
}

.fura-note {
	display: block;
	margin-inline-start: auto;
	background: var(--c-root);
	color: #ede7fb;
	font-size: var(--z-micro);
	letter-spacing: var(--e-loose);
}

/* ============================================================
   Narrow screens
   ============================================================ */
@media (max-width: 1240px) {
	.gubas-frame {
		padding-inline: var(--v-pad-md);
		gap: var(--g-tiny);
	}

	.gubas-utility-part {
		padding-inline: var(--v-pad-md);
	}

	.gubas-key {
		padding-inline: var(--g-snug);
		font-size: var(--z-micro);
	}

	.gubas-shot {
		height: 38px;
	}
}

@media (max-width: 899px) {
	.gubas-toggle {
		display: inline-flex;
		order: 3;
	}

	.gubas-guide {
		display: none;
	}

	.gubas-keys {
		order: 2;
		margin-inline-start: auto;
	}

	.gubas-frame {
		padding-inline: var(--v-edge-narrow);
		gap: var(--g-tiny);
	}

	.gubas-utility-part {
		padding-inline: var(--v-edge-narrow);
		min-height: 26px;
	}

	.gubas-sign {
		display: none;
	}

	.gubas-shot {
		height: 34px;
	}

	.bymodef-shot {
		height: 220px;
	}

	.tigeby-frame {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--g-snug);
	}

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

	.zubotix-frame {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--g-base);
	}

	.zubotix-toc {
		position: static;
	}

	.rypab-unit {
		padding-inline-start: var(--g-wide);
	}

	.rypab-quote {
		font-size: var(--z-minor);
	}
}

@media (max-width: 720px) {
	.zegy-card {
		grid-template-columns: minmax(0, 1fr);
		padding: 12px 14px;
		gap: 8px;
	}

	.zegy-hdr {
		display: none;
	}

	.zegy-keys {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.zegy-confirm,
	.zegy-refuse {
		flex: 1 1 auto;
		min-height: 40px;
		padding-inline: 14px;
		font-size: 13px;
		white-space: normal;
	}

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

	.fura-frame {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--g-snug);
	}

	.fura-note {
		margin-inline-start: 0;
	}

	.fura-guide,
	.fura-guide-fine {
		flex: 0 0 auto;
		width: 100%;
	}

	.gubas-desk {
		font-size: 12px;
	}

	.mabara-keys {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

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

@media (max-width: 640px) {
	.vaziz-grid {
		min-width: 0;
		font-size: var(--z-sm);
	}

	.vaziz-grid th,
	.vaziz-grid td {
		padding-inline: var(--g-hair);
	}
}

@media (max-width: 620px) {
	.gubas-frame {
		flex-wrap: wrap;
		row-gap: var(--g-tiny);
	}

	.gubas-keys {
		order: 4;
		flex-basis: 100%;
		margin-inline-start: 0;
	}

	.gubas-key {
		width: 100%;
	}

	.gubas-toggle {
		order: 2;
		margin-inline-start: auto;
	}

	.gubas-flyout-queue {
		grid-template-columns: minmax(0, 1fr);
	}

	.selap-queue {
		flex-direction: column;
	}

	.selap-unit {
		flex: 0 0 auto;
	}
}

@media (max-width: 430px) {
	.pledge-band {
		padding-inline: var(--v-edge-narrow);
		font-size: 12px;
	}

	.bymodef-shot {
		height: 190px;
	}

	.vopen-unit {
		font-size: var(--z-micro);
	}

	.vopen-unit + .vopen-unit::before {
		margin-inline: var(--g-hair);
	}

	.zegy-keys {
		flex-direction: column;
		align-items: stretch;
	}

	.zegy-confirm,
	.zegy-refuse {
		width: 100%;
	}

	.tosib-top {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   Offer button — colour, form and loop from scripts/cta-style.mjs
   ============================================================ */
.lure-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--g-base);
	min-height: 44px;
	border-radius: var(--r-capsule);
	font-size: var(--z-sm);
	font-weight: var(--w-medium);
	background: #65a30d;
	color: #0f1010;
	text-decoration: none;
	border: 0;
	transition: background var(--t-snap) var(--x-out), border-color var(--t-snap) var(--x-out);
	animation: lure-glow 2.14s linear infinite;
}

.lure-act.lure-act {
	color: #0f1010;
	text-decoration: none;
}

.lure-act:hover {
	background: #4d7c0f;
	color: #ffffff;
	animation: none;
}

.lure-act.lure-act:hover {
	background: #4d7c0f;
	color: #ffffff;
	text-decoration: none;
}

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

.lure-act:active {
	background: #3f6212;
	color: #ffffff;
}

.lure-act:focus-visible {
	outline: 3px solid #0f1010;
	outline-offset: 3px;
}

@keyframes lure-glow {
	0% {
		transform: scale(1);
		animation-timing-function: cubic-bezier(0.25, 0.8, 0.35, 1);
	}
	20.093% {
		transform: scale(1.075);
		animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
	}
	46.262%,
	100% {
		transform: scale(1);
	}
}

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

@media (max-width: 490px) {
  .gubas-guide,
  .gubas-queue { display: none !important; }
  .gubas-more-opener { display: flex !important; }
}