/* ==========================================================================
   Celsius Casino HU — signal theme
   Tokens: TYPO-01 scale, SPACE-08 rhythm, CONT-07 lanes, GEO-03 pill geometry,
   BP-08 breakpoints. Every custom property name comes from this build's own
   dictionary; canonical names are deliberately absent.
   ========================================================================== */

:root {
	/* --- brand palette (shifted values from the build passport) --- */
	--gf-prime: #ff1a84;
	--gf-spot: #e97840;
	--gf-action-down: #e84a1b;
	--gf-backdrop: #051234;
	--gf-bg-elevated: #0a1c47;
	--gf-glyph: #ffffff;
	--gf-dim: #bfbebe;
	--gf-stroke: #1b2c5c;
	--gf-edge-hard: #31477f;
	--gf-gradient-light: #f7c5b4;
	--gf-gradient-mid: #ee8d6c;
	--gf-caution: #ad2831;

	/* --- SPACE-08: even decimal rhythm --- */
	--gf-hair: 5px;
	--gf-tiny: 10px;
	--gf-snug: 15px;
	--gf-base: 25px;
	--gf-wide: 40px;
	--gf-roomy: 60px;
	--gf-vast: 90px;
	--gf-huge: 140px;
	/* single vertical step for every section root: adjacent pairs stay well
	   below the 110px ceiling the spacing audit enforces */
	--gf-band: 46px;

	/* --- GEO-03: pill heavy --- */
	--r-hair: 1px;
	--r-tiny: 2px;
	--r-snug: 6px;
	--r-base: 10px;
	--r-wide: 16px;
	--r-roomy: 22px;
	--r-vast: 28px;
	--r-huge: 36px;
	--gf-lozenge: 9999px;
	--gf-circle: 50%;

	/* --- shadows --- */
	--d-hair: 0 1px 1px rgba(0, 0, 0, 0.04);
	--d-tiny: none;
	--d-snug: 0 1px 3px rgba(0, 0, 0, 0.05);
	--d-base: 0 4px 12px rgba(0, 0, 0, 0.09);
	--d-wide: 0 8px 24px rgba(0, 0, 0, 0.13);
	--d-roomy: 0 14px 34px rgba(0, 0, 0, 0.2);
	--d-vast: 0 20px 44px rgba(0, 0, 0, 0.26);
	--d-huge: 0 28px 60px rgba(0, 0, 0, 0.32);

	/* --- borders --- */
	--gf-fine: 1px;
	--gf-regular: 2px;
	--gf-bold: 3px;

	/* --- TYPO-01: editorial big display --- */
	--gf-banner: "Outfit", "Trebuchet MS", sans-serif;
	--gf-prose: "Poppins", "Segoe UI", sans-serif;
	--gf-title: clamp(29px, 5.2vw, 64px);
	--gf-display-2: clamp(24px, 3vw, 40px);
	--gf-display-3: clamp(20px, 2vw, 28px);
	--gf-display-4: clamp(18px, 1.6vw, 22px);
	--gf-sm-2: 18px;
	--gf-micro-head: 16px;
	--gf-body: 17px;
	--gf-caption: 14px;
	--gf-mini: 12px;
	--gf-close: 1.1;
	--l-base: 1.5;
	--gf-loose: 1.75;
	--gf-book: 400;
	--gf-semi: 500;
	--gf-black: 700;
	--gf-narrow: -0.02em;
	--gf-normal: 0;
	--gf-open: 0.04em;

	/* --- CONT-07: dual lane --- */
	--gf-outer: 1300px;
	--gf-text: 1300px;
	--gf-slim: 450px;
	--gf-pad-lg: 48px;
	--gf-inset-tablet: 24px;
	--gf-pad-sm: 16px;
	--gf-shell: calc(var(--gf-outer) + 2 * var(--gf-pad-lg));

	/* --- header geometry --- */
	--gf-height-desktop: 80px;
	--gf-size-mobile: 64px;
	--gf-rg-h: 30px;
	--gf-cookie-h: 0px;

	/* --- motion: this build's own numbers --- */
	--gf-quick: 205ms;
	--gf-mid: 370ms;
	--gf-gentle: 556ms;
	--gf-land: cubic-bezier(0.12, 0.91, 0.52, 0.99);
	--gf-start: cubic-bezier(0.99, 0.52, 0.91, 0.12);
	--gf-swing: cubic-bezier(0.68, 0.02, 0.6, 0.97);
	--gf-spring: cubic-bezier(0.31, 1.8, 0.55, 1.35);
}

/* Mobile scale overrides (below the md breakpoint of BP-08) */
@media (max-width: 939px) {
	:root {
		--gf-sm-2: 16px;
		--gf-micro-head: 14px;
		--gf-body: 16px;
		--gf-caption: 13px;
		--gf-mini: 11px;
		--gf-pad-lg: var(--gf-pad-sm);
		--gf-band: 38px;
	}
}

@media (min-width: 620px) and (max-width: 939px) {
	:root {
		--gf-pad-lg: var(--gf-inset-tablet);
	}
}

/* --------------------------------------------------------------------------
   Self-hosted typefaces. Cera Pro is a licensed family, so the display and body
   roles are carried by Outfit / Poppins with the latin-ext block the Hungarian
   diacritics need.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/glyphset/outfit-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/glyphset/outfit-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/glyphset/outfit-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/glyphset/outfit-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/glyphset/poppins-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/glyphset/poppins-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/glyphset/poppins-latin-ext-500-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/glyphset/poppins-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/glyphset/poppins-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/glyphset/poppins-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Reset and base layer
   -------------------------------------------------------------------------- */

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

html {
	background: var(--gf-backdrop);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

html,
body {
	overflow-x: clip;
}

body {
	background: var(--gf-backdrop);
	color: var(--gf-glyph);
	display: flex;
	flex-direction: column;
	font-family: var(--gf-prose);
	font-size: var(--gf-body);
	font-weight: var(--gf-book);
	line-height: var(--gf-loose);
	margin: 0;
	margin-block-start: calc(var(--gf-height-desktop) + var(--gf-rg-h) + var(--gf-cookie-h));
	min-height: 100vh;
	padding: 0;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
}

h1,
h2 {
	color: var(--gf-glyph);
	font-family: var(--gf-banner);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-narrow);
	line-height: var(--gf-close);
}

h1 {
	font-size: var(--gf-title);
	text-transform: uppercase;
}

h2 {
	font-size: var(--gf-display-2);
}

h3,
h4 {
	color: var(--gf-glyph);
	font-family: var(--gf-banner);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-normal);
	line-height: var(--gf-close);
}

h3 {
	font-size: var(--gf-display-3);
}

h4 {
	font-size: var(--gf-display-4);
}

h5,
h6 {
	color: var(--gf-glyph);
	font-family: var(--gf-prose);
	font-size: var(--gf-sm-2);
	font-weight: var(--gf-semi);
	letter-spacing: var(--gf-open);
	text-transform: uppercase;
}

p {
	margin-block: 0 var(--gf-snug);
}

a {
	color: var(--gf-spot);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--gf-quick) var(--gf-land), text-decoration-thickness var(--gf-quick) var(--gf-land);
}

a:hover {
	color: var(--gf-gradient-light);
	text-decoration-thickness: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: var(--gf-bold) solid var(--gf-spot);
	outline-offset: 3px;
}

img {
	max-width: 100%;
}

ul,
ol {
	line-height: var(--gf-loose);
	margin-block: 0 var(--gf-snug);
	padding-inline-start: var(--gf-base);
}

li {
	margin-block-end: var(--gf-tiny);
}

strong {
	color: var(--gf-glyph);
	font-weight: var(--gf-black);
}

em {
	color: var(--gf-gradient-light);
	font-style: italic;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* Shared section shell — one width for every block on the site. */
.band {
	padding-block: var(--gf-band);
}

.hold {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

/* Reveal-on-scroll: slide axis, 14px travel, only armed once JS is alive. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--gf-gentle) var(--gf-land), transform var(--gf-gentle) var(--gf-land);
	will-change: opacity, transform;
}

.js [data-reveal].in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Intro sequence — header furniture arrives in three beats on first paint. */
@keyframes gf-enter {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

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

@keyframes gf-lift-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

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

.nudge {
	display: inline-block;
	transition: transform var(--gf-quick) var(--gf-land);
}

a:hover .nudge,
button:hover .nudge {
	transform: translateX(5px);
}

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

.skip-hop {
	background: var(--gf-spot);
	border-radius: 0 0 var(--r-base) 0;
	color: #051234;
	font-weight: var(--gf-black);
	inset-inline-start: 0;
	padding: var(--gf-tiny) var(--gf-base);
	position: fixed;
	text-decoration: none;
	top: -200px;
	z-index: 200;
}

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

.skip-hop:focus {
	color: #051234;
	top: 0;
}

/* --------------------------------------------------------------------------
   besakok — reviews, REV-06 compact list with inline ratings
   -------------------------------------------------------------------------- */

.besakok {
	background: var(--gf-backdrop);
	padding-block: var(--gf-band);
}

.besakok-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.besakok-caption {
	margin-block-end: var(--gf-base);
}

.besakok-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.besakok-piece {
	border-block-end: var(--gf-fine) solid var(--gf-stroke);
	display: block;
	margin: 0;
	padding-block: var(--gf-base);
}

.besakok-info {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gf-snug);
	margin-block-end: var(--gf-hair);
}

.besakok-byname {
	color: var(--gf-glyph);
	font-size: var(--gf-body);
	font-weight: var(--gf-black);
}

.besakok-rate {
	color: var(--gf-spot);
	font-family: var(--gf-banner);
	font-size: var(--gf-body);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-open);
}

.besakok-on {
	color: var(--gf-dim);
	font-size: var(--gf-caption);
	margin-inline-start: auto;
}

.besakok-line {
	color: var(--gf-dim);
	line-height: var(--l-base);
	margin: 0;
}

@media (max-width: 619px) {
	.besakok-on {
		margin-inline-start: 0;
	}
}

/* --------------------------------------------------------------------------
   buxak — prose, PROSE-16 (kicker above every heading)
   knobs: align center, density roomy, strength strong, normal head scale/weight
   -------------------------------------------------------------------------- */

.buxak {
	background: var(--gf-backdrop);
	padding-block: var(--gf-band);
}

.buxak-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.buxak-part {
	display: block;
	max-width: var(--gf-text);
}

.buxak-lede {
	margin-block: var(--gf-wide) var(--gf-base);
	text-align: center;
}

.buxak-part > .buxak-lede:first-child {
	margin-block-start: 0;
}

.buxak-eyebrow {
	color: var(--gf-spot);
	display: block;
	font-family: var(--gf-banner);
	font-size: var(--gf-caption);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-open);
	margin-block-end: var(--gf-tiny);
	text-transform: uppercase;
}

.buxak-lede h2 {
	margin-block-start: 0;
	text-align: center;
}

.buxak-part p {
	color: var(--gf-dim);
	margin-block-end: var(--gf-base);
}

.buxak-part p:last-child {
	margin-block-end: 0;
}

.buxak-steps {
	color: var(--gf-dim);
	counter-reset: buxak-step;
	list-style: none;
	margin-block: 0 var(--gf-base);
	padding-inline-start: 0;
}

.buxak-steps > li {
	margin-block-end: var(--gf-snug);
	padding-inline-start: var(--gf-wide);
	position: relative;
}

.buxak-steps > li::before {
	background: var(--gf-prime);
	border-radius: var(--gf-circle);
	color: #051234;
	content: counter(buxak-step);
	counter-increment: buxak-step;
	display: grid;
	font-family: var(--gf-banner);
	font-size: var(--gf-mini);
	font-weight: var(--gf-black);
	height: 26px;
	inset-block-start: 4px;
	inset-inline-start: 0;
	place-items: center;
	position: absolute;
	width: 26px;
}

.buxak-marks {
	color: var(--gf-dim);
	list-style: none;
	margin-block: 0 var(--gf-base);
	padding-inline-start: var(--gf-base);
}

.buxak-marks > li {
	position: relative;
}

.buxak-marks > li::before {
	background: var(--gf-spot);
	content: "";
	height: 7px;
	inset-block-start: 13px;
	inset-inline-start: calc(-1 * var(--gf-snug));
	position: absolute;
	transform: rotate(45deg);
	width: 7px;
}

.buxak-frame {
	border: var(--gf-fine) solid var(--gf-stroke);
	border-radius: var(--r-base);
	margin: 0 auto var(--gf-base);
	max-width: 720px;
	overflow: hidden;
	padding: var(--gf-snug);
}

/* square art is an infographic: it gets a narrower frame instead of being
   letterboxed inside a wide one */
.buxak-square {
	max-width: 500px;
}

.buxak-shot {
	border-radius: var(--r-snug);
	display: block;
	height: auto;
	margin-inline: auto;
	width: 100%;
}

.buxak-cap {
	color: var(--gf-dim);
	display: block;
	font-size: var(--gf-caption);
	margin-block-start: var(--gf-tiny);
	text-align: center;
}

/* --------------------------------------------------------------------------
   favevib — author card, AUTH-02 vertical centered editorial
   -------------------------------------------------------------------------- */

.favevib {
	background: var(--gf-backdrop);
	padding-block: var(--gf-band);
}

.favevib-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.favevib-brick {
	margin-inline: auto;
	max-width: 600px;
	text-align: center;
}

.favevib-photo {
	border-radius: var(--gf-circle);
	display: block;
	height: 140px;
	margin: 0 auto var(--gf-wide);
	object-fit: cover;
	object-position: 62% 26%;
	width: 140px;
}

.favevib-duty {
	color: var(--gf-spot);
	display: block;
	font-size: var(--gf-caption);
	font-weight: var(--gf-semi);
	letter-spacing: var(--gf-open);
	text-transform: uppercase;
}

.favevib-byname {
	font-size: var(--gf-display-2);
	margin-block: var(--gf-tiny) var(--gf-snug);
}

.favevib-bio {
	color: var(--gf-dim);
	line-height: var(--gf-loose);
	margin-block-end: var(--gf-base);
}

.favevib-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gf-tiny);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.favevib-chip {
	background: var(--gf-bg-elevated);
	border: var(--gf-fine) solid var(--gf-stroke);
	border-radius: var(--gf-lozenge);
	color: var(--gf-dim);
	font-size: var(--gf-mini);
	margin: 0;
	padding: var(--gf-hair) var(--gf-snug);
}

.favevib-heading {
	margin-block: var(--gf-wide) var(--gf-snug);
	text-align: center;
}

.favevib-list {
	list-style: none;
	margin: 0 auto;
	max-width: 600px;
	padding: 0;
}

.favevib-list > li {
	border-block-start: var(--gf-fine) solid var(--gf-stroke);
	margin: 0;
	padding-block: var(--gf-snug);
}

.favevib-anchor {
	color: var(--gf-spot);
	font-weight: var(--gf-semi);
	text-decoration: none;
}

.favevib-anchor:hover {
	color: var(--gf-gradient-light);
	text-decoration: underline;
	text-decoration-thickness: 3px;
}

/* --------------------------------------------------------------------------
   keli — cookie notice, COOK-08 bordered bar with icon, parked under the
   fixed header row so it never fights the sticky strategy
   -------------------------------------------------------------------------- */

.keli {
	background: var(--gf-bg-elevated);
	border-block-end: var(--gf-regular) solid var(--gf-spot);
	color: var(--gf-glyph);
	inset-block-start: calc(var(--gf-rg-h) + var(--gf-height-desktop));
	inset-inline: 0;
	min-height: 56px;
	position: fixed;
	z-index: 90;
}

.keli.is-gone {
	display: none;
}

.keli-inner {
	align-items: center;
	display: flex;
	gap: var(--gf-base);
	margin-inline: auto;
	max-width: var(--gf-shell);
	min-height: 56px;
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.keli-sign {
	color: var(--gf-spot);
	flex-shrink: 0;
	height: 24px;
	width: 24px;
}

.keli-sign svg {
	display: block;
	fill: none;
	height: 24px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
	width: 24px;
}

.keli-words {
	color: var(--gf-glyph);
	flex: 1;
	font-size: var(--gf-caption);
	line-height: var(--l-base);
	margin: 0;
}

.keli-keys {
	display: inline-flex;
	flex-shrink: 0;
	gap: var(--gf-tiny);
}

.keli-confirm,
.keli-deny {
	border-radius: var(--gf-lozenge);
	cursor: pointer;
	font-family: var(--gf-banner);
	font-size: var(--gf-mini);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-open);
	min-height: 36px;
	padding: var(--gf-hair) var(--gf-snug);
	text-transform: uppercase;
	transition: background var(--gf-quick) var(--gf-land), color var(--gf-quick) var(--gf-land);
}

.keli-confirm {
	background: var(--gf-spot);
	border: var(--gf-fine) solid var(--gf-spot);
	color: #051234;
}

.keli-confirm:hover {
	background: var(--gf-gradient-light);
	color: #051234;
}

.keli-deny {
	background: var(--gf-backdrop);
	border: var(--gf-fine) solid var(--gf-edge-hard);
	color: var(--gf-glyph);
}

.keli-deny:hover {
	background: var(--gf-stroke);
	color: var(--gf-glyph);
}

@media (max-width: 939px) {
	.keli {
		inset-block-start: calc(var(--gf-rg-h) + var(--gf-size-mobile));
	}
}

@media (max-width: 720px) {
	.keli {
		min-height: 0;
	}

	.keli-inner {
		align-items: flex-start;
		flex-wrap: wrap;
		font-size: 13px;
		gap: 8px;
		line-height: 1.35;
		min-height: 0;
		padding-block: 12px;
		padding-inline: 14px;
	}

	.keli-words {
		flex: 1 1 200px;
		font-size: 13px;
		line-height: 1.35;
	}

	.keli-keys {
		flex: 1 0 100%;
	}

	.keli-confirm,
	.keli-deny {
		flex: 1 1 auto;
		font-size: 12px;
		min-height: 36px;
		padding: 8px 14px;
	}
}

/* --------------------------------------------------------------------------
   nabygak — contact block, FORM-03 compact single field per row
   -------------------------------------------------------------------------- */

.nabygak {
	background: var(--gf-backdrop);
	padding-block: var(--gf-band);
}

.nabygak-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.nabygak-intro {
	color: var(--gf-dim);
	margin: 0 auto var(--gf-base);
	max-width: var(--gf-slim);
	text-align: center;
}

.nabygak-form {
	margin-inline: auto;
	max-width: 620px;
}

.nabygak-cell {
	display: block;
	margin-block-end: var(--gf-snug);
}

.nabygak-tag {
	color: var(--gf-glyph);
	display: block;
	font-size: var(--gf-caption);
	font-weight: var(--gf-semi);
	letter-spacing: var(--gf-open);
	margin-block-end: var(--gf-hair);
	text-transform: uppercase;
}

.nabygak-input,
.nabygak-area {
	background: var(--gf-bg-elevated);
	border: var(--gf-fine) solid var(--gf-edge-hard);
	border-radius: var(--r-base);
	color: var(--gf-glyph);
	font-family: var(--gf-prose);
	font-size: var(--gf-body);
	padding: var(--gf-snug) var(--gf-base);
	width: 100%;
}

.nabygak-input {
	border-radius: var(--gf-lozenge);
	min-height: 52px;
}

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

.nabygak-input::placeholder,
.nabygak-area::placeholder {
	color: var(--gf-dim);
}

.nabygak-send {
	background: var(--gf-prime);
	border: none;
	border-radius: var(--gf-lozenge);
	color: #051234;
	cursor: pointer;
	font-family: var(--gf-banner);
	font-size: var(--gf-micro-head);
	font-weight: var(--gf-black);
	height: 52px;
	letter-spacing: var(--gf-open);
	text-transform: uppercase;
	transition: background var(--gf-quick) var(--gf-land), color var(--gf-quick) var(--gf-land);
	width: 100%;
}

.nabygak-send:hover {
	background: var(--gf-gradient-light);
	color: #051234;
}

.nabygak-done {
	background: var(--gf-bg-elevated);
	border: var(--gf-fine) solid var(--gf-spot);
	border-radius: var(--r-base);
	color: var(--gf-glyph);
	margin-block-start: var(--gf-snug);
	padding: var(--gf-snug) var(--gf-base);
	text-align: center;
}

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

/* --------------------------------------------------------------------------
   nate — closing call, CTA-08 inverted block
   -------------------------------------------------------------------------- */

.nate {
	background: var(--gf-prime);
	color: #051234;
	padding-block: var(--gf-band);
	scroll-margin-block-start: calc(var(--gf-height-desktop) + var(--gf-rg-h) + var(--gf-snug));
}

.nate-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	text-align: center;
	width: 100%;
}

.nate-caption {
	color: #051234;
	font-size: var(--gf-title);
	letter-spacing: var(--gf-narrow);
	text-transform: uppercase;
}

.nate-line {
	color: #051234;
	font-size: var(--gf-sm-2);
	line-height: var(--l-base);
	margin: var(--gf-snug) auto var(--gf-base);
	max-width: 780px;
}

.nate-call {
	align-items: center;
	display: inline-flex;
	gap: var(--gf-tiny);
	justify-content: center;
	min-height: 56px;
	text-decoration: none;
}

.nate-note {
	color: #051234;
	display: block;
	font-size: var(--gf-mini);
	margin-block-start: var(--gf-snug);
}

/* --------------------------------------------------------------------------
   nynur — data table, TABLE-04 highlighted first column
   -------------------------------------------------------------------------- */

.nynur {
	background: var(--gf-backdrop);
	padding-block: var(--gf-band);
}

.nynur-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.nynur-caption {
	margin-block-end: var(--gf-snug);
}

.nynur-cap {
	color: var(--gf-dim);
	display: block;
	font-size: var(--gf-caption);
	margin-block-end: var(--gf-base);
}

.nynur-scroll {
	-webkit-overflow-scrolling: touch;
	border: var(--gf-fine) solid var(--gf-stroke);
	border-radius: var(--r-base);
	overflow-x: auto;
}

.nynur-grid {
	font-size: var(--gf-caption);
	min-width: 520px;
}

.nynur-grid thead th {
	background: var(--gf-prime);
	color: #051234;
	font-family: var(--gf-banner);
	font-size: var(--gf-mini);
	letter-spacing: var(--gf-open);
	padding: var(--gf-snug) var(--gf-base);
	text-align: start;
	text-transform: uppercase;
}

.nynur-grid thead th + th {
	background: #b30d5c;
	color: var(--gf-glyph);
}

.nynur-grid tbody td {
	background: var(--gf-backdrop);
	border-block-start: var(--gf-fine) solid var(--gf-stroke);
	color: var(--gf-dim);
	padding: var(--gf-snug) var(--gf-base);
	vertical-align: top;
}

.nynur-grid tbody td:first-child {
	background: var(--gf-prime);
	border-inline-end: 4px solid var(--gf-spot);
	color: #051234;
	font-weight: var(--gf-black);
	white-space: nowrap;
}

@media (max-width: 619px) {
	.nynur-grid {
		font-size: var(--gf-mini);
		min-width: 460px;
	}

	.nynur-grid thead th,
	.nynur-grid tbody td {
		padding: var(--gf-tiny) var(--gf-snug);
	}
}

/* --------------------------------------------------------------------------
   rg-banner — RG-01 strip above the header, height reported back to CSS by JS
   -------------------------------------------------------------------------- */

.rg-banner {
	background: var(--gf-caution);
	color: var(--gf-glyph);
	display: block;
	font-size: var(--gf-mini);
	inset-block-start: 0;
	inset-inline: 0;
	letter-spacing: var(--gf-open);
	line-height: 1.35;
	margin: 0;
	padding: 6px var(--gf-snug);
	position: fixed;
	text-align: center;
	z-index: 120;
}

.rg-flag {
	background: var(--gf-glyph);
	border-radius: var(--gf-lozenge);
	color: #ad2831;
	display: inline-flex;
	font-weight: var(--gf-black);
	margin-inline-end: var(--gf-hair);
	padding: 1px 8px;
}

.rg-anchor {
	color: var(--gf-glyph);
	text-decoration-thickness: 1px;
}

.rg-anchor:hover {
	color: var(--gf-gradient-light);
	text-decoration-thickness: 3px;
}

@media (max-width: 619px) {
	.rg-banner {
		font-size: 10px;
		padding: 5px var(--gf-tiny);
	}
}

/* --------------------------------------------------------------------------
   rupiga — error block, ERR-01 centered hero style
   -------------------------------------------------------------------------- */

.rupiga {
	background: var(--gf-backdrop);
	padding-block: var(--gf-band);
	text-align: center;
}

.rupiga-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--gf-wide);
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.rupiga-digits {
	color: var(--gf-spot);
	font-family: var(--gf-banner);
	font-size: clamp(80px, 18vw, 200px);
	font-weight: var(--gf-black);
	line-height: var(--gf-close);
}

.rupiga-caption {
	max-width: var(--gf-slim);
}

.rupiga-line {
	color: var(--gf-dim);
	font-size: var(--gf-sm-2);
	line-height: var(--l-base);
	margin: 0;
	max-width: 600px;
}

.rupiga-button {
	align-items: center;
	background: var(--gf-spot);
	border-radius: var(--r-base);
	color: #051234;
	display: inline-flex;
	font-family: var(--gf-banner);
	font-weight: var(--gf-black);
	gap: var(--gf-tiny);
	letter-spacing: var(--gf-open);
	min-height: 52px;
	padding-inline: var(--gf-roomy);
	text-decoration: none;
	text-transform: uppercase;
	transition: background var(--gf-quick) var(--gf-land), color var(--gf-quick) var(--gf-land);
}

.rupiga-button:hover {
	background: var(--gf-action-down);
	color: #051234;
}

/* --------------------------------------------------------------------------
   ryze — inline offer prompt, INLINE-CTA-02 centered card
   -------------------------------------------------------------------------- */

.ryze {
	display: block;
	margin-block: var(--gf-base);
}

.ryze-brick {
	background: var(--gf-bg-elevated);
	border: var(--gf-fine) solid var(--gf-edge-hard);
	border-radius: var(--r-base);
	margin-inline: auto;
	max-width: 600px;
	padding: var(--gf-base) var(--gf-base);
	text-align: center;
}

.ryze-heading {
	font-size: var(--gf-display-4);
	margin-block-end: var(--gf-tiny);
}

.ryze-sub {
	color: var(--gf-dim);
	font-size: var(--gf-caption);
	line-height: var(--l-base);
	margin-block-end: var(--gf-snug);
}

.ryze-note {
	color: var(--gf-dim);
	display: block;
	font-size: var(--gf-mini);
	margin-block-start: var(--gf-tiny);
}

.ryze-button {
	align-items: center;
	display: inline-flex;
	gap: var(--gf-tiny);
	justify-content: center;
	min-height: 48px;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   sekomo — page header, PHEAD-08 tag cluster + title
   -------------------------------------------------------------------------- */

.sekomo {
	background: var(--gf-backdrop);
	padding-block: var(--gf-band);
}

.sekomo-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.sekomo-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gf-tiny);
	list-style: none;
	margin: 0 0 var(--gf-base);
	padding: 0;
}

.sekomo-chip {
	background: var(--gf-prime);
	border-radius: var(--gf-lozenge);
	color: #051234;
	font-size: var(--gf-mini);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-open);
	margin: 0;
	padding: var(--gf-hair) var(--gf-snug);
	text-transform: uppercase;
}

.sekomo-line {
	color: var(--gf-dim);
	margin-block: var(--gf-snug) 0;
	max-width: var(--gf-text);
}

.sekomo-on {
	color: var(--gf-dim);
	display: block;
	font-size: var(--gf-caption);
	margin-block-start: var(--gf-tiny);
}

/* --------------------------------------------------------------------------
   tamag — header, HEAD-BURGER composition
   knobs: 80px row, sticky, dots burger, no frame, shadow edge, normal side pad,
   large logo, no logo frame, market code, flat drawer list
   -------------------------------------------------------------------------- */

.tamag {
	background: var(--gf-backdrop);
	box-shadow: var(--d-base);
	height: 80px;
	inset-block-start: var(--gf-rg-h);
	inset-inline: 0;
	position: fixed;
	transition: box-shadow var(--gf-mid) var(--gf-swing);
	z-index: 110;
}

.tamag.is-scrolled {
	box-shadow: var(--d-roomy);
}

.tamag-bar {
	align-items: center;
	animation: gf-enter var(--gf-gentle) var(--gf-land) both;
	display: flex;
	gap: var(--gf-base);
	height: 80px;
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.tamag-glyph {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
	text-decoration: none;
}

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

.tamag-mark {
	border: var(--gf-fine) solid var(--gf-edge-hard);
	border-radius: var(--gf-lozenge);
	color: var(--gf-dim);
	font-family: var(--gf-banner);
	font-size: var(--gf-mini);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-open);
	margin-inline-start: auto;
	padding: 3px var(--gf-tiny);
}

.tamag-menu-lever {
	align-items: center;
	background: var(--gf-backdrop);
	border: none;
	border-radius: var(--gf-lozenge);
	color: var(--gf-glyph);
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	gap: var(--gf-tiny);
	font-family: var(--gf-banner);
	font-size: var(--gf-mini);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-open);
	min-height: 44px;
	padding-inline: var(--gf-snug);
	text-transform: uppercase;
	transition: color var(--gf-quick) var(--gf-land);
}

.tamag-menu-lever:hover {
	background: var(--gf-backdrop);
	color: var(--gf-spot);
}

.tamag-dots {
	display: inline-flex;
	gap: 4px;
}

.tamag-dots i {
	background: currentColor;
	border-radius: var(--gf-circle);
	display: block;
	height: 5px;
	width: 5px;
}

.tamag-dock {
	background: var(--gf-bg-elevated);
	border-block-start: var(--gf-fine) solid var(--gf-stroke);
	box-shadow: var(--d-wide);
	display: none;
	inset-block-start: 100%;
	inset-inline: 0;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	position: absolute;
}

.tamag-dock.is-open {
	display: block;
}

.tamag-guide {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-block: var(--gf-tiny);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.tamag-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tamag-piece {
	display: block;
	margin: 0;
}

.tamag-anchor {
	border-block-end: var(--gf-fine) solid var(--gf-stroke);
	color: var(--gf-glyph);
	display: block;
	font-family: var(--gf-banner);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: var(--gf-normal);
	padding-block: var(--gf-snug);
	text-decoration: none;
	transition: color var(--gf-quick) var(--gf-land);
	white-space: nowrap;
}

.tamag-anchor:hover {
	color: var(--gf-spot);
}

.tamag-piece:last-child .tamag-anchor {
	border-block-end: none;
}

.tamag-anchor[aria-current="page"] {
	color: var(--gf-spot);
	font-weight: 600;
}

@media (max-width: 939px) {
	body {
		margin-block-start: calc(var(--gf-size-mobile) + var(--gf-rg-h) + var(--gf-cookie-h));
	}

	.tamag {
		height: 64px;
	}

	.tamag-bar {
		gap: var(--gf-snug);
		height: 64px;
	}

	.tamag-shot {
		height: 44px;
	}
}

@media (max-width: 439px) {
	.tamag-mark {
		display: none;
	}

	.tamag-menu-lever {
		margin-inline-start: auto;
	}

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

/* --------------------------------------------------------------------------
   tobo — legal section, LEGAL-08 minimal plain
   -------------------------------------------------------------------------- */

.tobo {
	background: var(--gf-backdrop);
	padding-block: var(--gf-band);
}

.tobo-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.tobo-part {
	display: block;
	margin-block-end: var(--gf-wide);
	max-width: var(--gf-text);
}

.tobo-part:last-child {
	margin-block-end: 0;
}

.tobo-head {
	color: var(--gf-glyph);
	font-family: var(--gf-prose);
	font-size: var(--gf-display-3);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-normal);
	margin-block-end: var(--gf-snug);
}

.tobo-part p {
	color: var(--gf-dim);
	line-height: var(--gf-loose);
}

.tobo-list {
	color: var(--gf-dim);
	margin-block: 0 var(--gf-snug);
}

.tobo-note {
	border-block-start: var(--gf-fine) solid var(--gf-stroke);
	color: var(--gf-dim);
	display: block;
	font-size: var(--gf-caption);
	margin-block-start: var(--gf-base);
	max-width: var(--gf-text);
	padding-block-start: var(--gf-snug);
}

/* --------------------------------------------------------------------------
   toru — FAQ, FAQ-06 anchored linked list
   -------------------------------------------------------------------------- */

.toru {
	background: var(--gf-backdrop);
	padding-block: var(--gf-band);
}

.toru-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.toru-caption {
	margin-block-end: var(--gf-base);
}

.toru-toc {
	background: var(--gf-bg-elevated);
	border: var(--gf-fine) solid var(--gf-stroke);
	border-radius: var(--r-base);
	margin-block-end: var(--gf-wide);
	padding: var(--gf-wide);
}

.toru-toc ol {
	color: var(--gf-dim);
	margin: 0;
	padding-inline-start: var(--gf-base);
}

.toru-anchor {
	color: var(--gf-dim);
	text-decoration: none;
}

.toru-anchor:hover {
	color: var(--gf-glyph);
	text-decoration: underline;
	text-decoration-thickness: 3px;
}

.toru-list {
	margin: 0;
}

.toru-ask {
	border-block-start: var(--gf-fine) solid var(--gf-stroke);
	padding-block-start: var(--gf-base);
	scroll-margin-block-start: calc(var(--gf-height-desktop) + var(--gf-rg-h) + var(--gf-snug));
}

.toru-head {
	font-size: var(--gf-display-3);
	margin: 0;
}

.toru-line {
	color: var(--gf-dim);
	margin: var(--gf-tiny) 0 var(--gf-base);
}

.toru-line p {
	color: var(--gf-dim);
	margin: 0;
}

@media (max-width: 619px) {
	.toru-toc {
		padding: var(--gf-base) var(--gf-snug);
	}
}

/* --------------------------------------------------------------------------
   xati — hero, HERO-03 centered compact (image only as a low-key backdrop)
   -------------------------------------------------------------------------- */

.xati {
	background-color: var(--gf-backdrop);
	background-image: linear-gradient(180deg, rgba(5, 18, 52, 0.86) 0%, rgba(5, 18, 52, 0.94) 55%, #051234 100%), url("/photos/spotlight.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-block-end: var(--gf-fine) solid var(--gf-stroke);
	padding-block: var(--gf-band);
}

.xati-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-block: var(--gf-wide);
	padding-inline: var(--gf-pad-lg);
	text-align: center;
	width: 100%;
}

.xati-tagline {
	animation: gf-lift-in var(--gf-gentle) var(--gf-land) both;
	color: var(--gf-spot);
	display: block;
	font-family: var(--gf-banner);
	font-size: var(--gf-mini);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-open);
	margin-block-end: var(--gf-base);
	text-transform: uppercase;
}

.xati h1 {
	animation: gf-lift-in var(--gf-gentle) var(--gf-land) 120ms both;
}

.xati-sub {
	animation: gf-lift-in var(--gf-gentle) var(--gf-land) 240ms both;
	color: var(--gf-dim);
	line-height: var(--gf-loose);
	margin-block: var(--gf-base);
	margin-inline: auto;
	max-width: var(--gf-slim);
}

.xati-call {
	align-items: center;
	display: inline-flex;
	gap: var(--gf-tiny);
	justify-content: center;
	margin-block: var(--gf-wide) var(--gf-base);
	min-height: 56px;
	text-decoration: none;
}

.xati-note {
	color: var(--gf-dim);
	display: block;
	font-size: var(--gf-mini);
	margin-inline: auto;
	max-width: var(--gf-slim);
}

/* --------------------------------------------------------------------------
   xigigim — footer, FOOT-10 sectioned detail-rich
   -------------------------------------------------------------------------- */

.xigigim {
	background: var(--gf-backdrop);
	border-block-start: var(--gf-fine) solid var(--gf-stroke);
	padding-block: var(--gf-band);
}

.xigigim-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.xigigim-brand {
	align-items: center;
	border-block-end: var(--gf-fine) solid var(--gf-stroke);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gf-base);
	justify-content: space-between;
	padding-block: var(--gf-wide);
}

.xigigim-glyph {
	display: inline-flex;
	line-height: 0;
	text-decoration: none;
}

.xigigim-shot {
	display: block;
	height: 56px;
	width: auto;
}

.xigigim-slogan {
	color: var(--gf-dim);
	font-size: var(--gf-caption);
	margin: 0;
	max-width: 520px;
	text-align: end;
}

.xigigim-cols {
	border-block-end: var(--gf-fine) solid var(--gf-stroke);
	display: grid;
	gap: var(--gf-wide);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-block: var(--gf-roomy);
}

.xigigim-strip {
	display: block;
	min-width: 0;
}

.xigigim-heading {
	color: var(--gf-glyph);
	font-family: var(--gf-banner);
	font-size: var(--gf-caption);
	font-weight: var(--gf-black);
	letter-spacing: var(--gf-open);
	margin-block-end: var(--gf-snug);
	text-transform: uppercase;
}

.xigigim-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.xigigim-piece {
	margin-block-end: var(--gf-tiny);
}

.xigigim-anchor {
	color: var(--gf-dim);
	font-size: var(--gf-caption);
	text-decoration: none;
}

.xigigim-anchor:hover {
	color: var(--gf-spot);
	text-decoration: underline;
	text-decoration-thickness: 3px;
}

.xigigim-note {
	border-block-end: var(--gf-fine) solid var(--gf-stroke);
	color: var(--gf-dim);
	font-size: var(--gf-caption);
	line-height: var(--l-base);
	margin: 0;
	padding-block: var(--gf-base);
}

.xigigim-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gf-snug);
	justify-content: space-between;
	padding-block: var(--gf-base);
}

.xigigim-copy {
	color: var(--gf-dim);
	font-size: var(--gf-caption);
	margin: 0;
}

.xigigim-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gf-snug);
	list-style: none;
	margin: 0;
	padding: 0;
}

.xigigim-legal li {
	margin: 0;
}

@media (max-width: 939px) {
	.xigigim-cols {
		gap: var(--gf-base);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-block: var(--gf-wide);
	}

	.xigigim-slogan {
		text-align: start;
	}
}

@media (max-width: 619px) {
	.xigigim-cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   xokus — items grid, GRID-03 two-column asymmetric widths with matched icons
   -------------------------------------------------------------------------- */

.xokus {
	background: var(--gf-backdrop);
	padding-block: var(--gf-band);
}

.xokus-inner {
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.xokus-caption {
	margin-block-end: var(--gf-base);
}

.xokus-list {
	display: grid;
	gap: var(--gf-base);
	grid-template-columns: repeat(10, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.xokus-brick {
	background: var(--gf-bg-elevated);
	border: var(--gf-fine) solid var(--gf-stroke);
	border-radius: var(--r-base);
	margin: 0;
	padding: var(--gf-wide);
}

/* Asymmetric rhythm: odd rows run 60/40, even rows 40/60. The span word is put
   on the cell by the page generator, so inserted offer cells keep the pattern. */
.xokus-wide {
	grid-column: span 6;
}

.xokus-slim {
	grid-column: span 4;
}

.xokus-full {
	grid-column: 1 / -1;
}

.xokus-sign {
	color: var(--gf-spot);
	display: block;
	height: 30px;
	margin-block-end: var(--gf-snug);
	width: 30px;
}

.xokus-sign svg {
	display: block;
	fill: none;
	height: 30px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
	width: 30px;
}

.xokus-head {
	font-size: var(--gf-display-4);
	margin-block-end: var(--gf-tiny);
}

.xokus-line {
	color: var(--gf-dim);
	line-height: var(--l-base);
	margin: 0;
}

.xokus-plug {
	align-content: center;
	background: var(--gf-bg-elevated);
	border: var(--gf-regular) dashed var(--gf-spot);
	border-radius: var(--r-base);
	display: grid;
	margin: 0;
	padding: var(--gf-wide);
	text-align: center;
}

.xokus-plug .ryze-heading {
	margin-block-end: var(--gf-tiny);
}

@media (max-width: 939px) {
	.xokus-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.xokus-brick {
		padding: var(--gf-base);
	}

	.xokus-plug {
		padding: var(--gf-base);
	}

	.xokus-wide,
	.xokus-slim,
	.xokus-full {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------------------
   zydasy — author byline, BYLINE-03 thin strip on top of the article
   -------------------------------------------------------------------------- */

.zydasy {
	background: var(--gf-backdrop);
	border-block-end: var(--gf-fine) solid var(--gf-stroke);
}

.zydasy-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gf-tiny);
	margin-inline: auto;
	max-width: var(--gf-shell);
	padding-block: var(--gf-snug);
	padding-inline: var(--gf-pad-lg);
	width: 100%;
}

.zydasy-photo {
	border-radius: var(--gf-circle);
	flex-shrink: 0;
	height: 34px;
	object-fit: cover;
	object-position: 62% 26%;
	width: 34px;
}

.zydasy-info {
	color: var(--gf-dim);
	font-size: var(--gf-caption);
}

.zydasy-byname {
	color: var(--gf-spot);
	font-weight: var(--gf-semi);
	text-decoration: none;
}

.zydasy-byname:hover {
	color: var(--gf-gradient-light);
	text-decoration: underline;
	text-decoration-thickness: 3px;
}

.zydasy-duty {
	color: var(--gf-dim);
}

.zydasy-on {
	color: var(--gf-dim);
}

/* --------------------------------------------------------------------------
   Reduced motion — every looping or travelling effect is dropped
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Offer button — colour, shape and the looping tilt come from the offer-style
   tool (the fill is deliberately outside the brand palette so the button reads
   as an action, not as decoration).
   -------------------------------------------------------------------------- */

.visalu-grab{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--gf-roomy);min-height:52px;border-radius:var(--r-base);font-weight:var(--gf-black);letter-spacing:var(--gf-open)}
.visalu-grab{
  background:#65A30D;color:#051234;text-decoration:none;text-transform:uppercase;
  transition:background 0.18s ease-in-out,border-color 0.18s ease-in-out;}
.visalu-grab.visalu-grab{color:#051234;text-decoration:none;}
.visalu-grab:hover{background:#4D7C0F;color:#FFFFFF;animation:none}
.visalu-grab.visalu-grab:hover{color:#FFFFFF;text-decoration:none}
.visalu-grab:hover::after{animation:none}
.visalu-grab:active{background:#3F6212;color:#FFFFFF}
.visalu-grab:focus-visible{outline:3px solid #051234;outline-offset:3px}
@keyframes visalu-flare{0%{transform:rotate(0)}12.857%{transform:rotate(1.2deg)}25.714%,100%{transform:rotate(0)}}
.visalu-grab{animation:visalu-flare 1.75s ease-out infinite;transform-origin:50% 90%}
@media (prefers-reduced-motion:reduce){.visalu-grab,.visalu-grab::after{animation:none!important;transition:none!important}}

/* Separation where the button sits on the brand-pink closing block, plus a
   narrower inline padding once the row gets tight. */
.nate .visalu-grab {
	box-shadow: 0 0 0 3px #051234;
}

@media (max-width: 619px) {
	.visalu-grab {
		padding-inline: var(--gf-base);
		text-align: center;
	}
}