/* ============================================================
   FortunePlay Casino — index.css
   Dark, gold-trimmed premium theme.
   Tokens: TYPO-02 · SPACE-04 · CONT-01 · GEO-09 (glass) · MOTION-01
   Class roots are opaque (NAME-07); element suffixes are descriptive.
   ============================================================ */

/* ---- 1. Design tokens ------------------------------------- */
:root {
	/* colours (colors.X.final from RANDOM_SPEC) */
	--c-accent-main: #19182a;
	--c-secondary: #f5b705;
	--c-accent-dark: #d09b04;
	--c-surface: #14141b;
	--c-panel-bg: #1e1d29;
	--c-gradient-start: #ffffff;
	--c-gradient-to: #fb683b;
	--c-body-color: #ffffff;
	--c-text-muted: #c1c1c1;
	--c-notice-bg: #dc2626;
	--c-border-soft: rgba(255, 255, 255, 0.08);
	--c-border-glass: rgba(255, 255, 255, 0.10);
	--c-glass-fill: rgba(255, 255, 255, 0.04);

	/* fonts (brand.json → Roboto, available on Google Fonts) */
	--c-heading-font: "Roboto", "Segoe UI", system-ui, sans-serif;
	--c-font-text: "Roboto", "Segoe UI", system-ui, sans-serif;

	/* TYPO-02 — Compact Modular (desktop) */
	--c-type-h1: 44px;
	--c-fs-h2: 34px;
	--c-text-h3: 26px;
	--c-size-h4: 20px;
	--c-type-h5: 16px;
	--c-fs-h6: 14px;
	--c-size-body: 16px;
	--c-type-small: 14px;
	--c-size-xs: 12px;
	--c-leading-tight: 1.2;
	--c-leading-normal: 1.55;
	--c-lh-loose: 1.7;
	--c-letter-tight: -0.01em;
	--c-ls-normal: 0;
	--c-tracking-wide: 0.02em;
	--c-weight-regular: 400;
	--c-fw-medium: 500;
	--c-fw-bold: 700;

	/* SPACE-04 — Airy Generous */
	--c-gap-2xs: 6px;
	--c-gutter-xs: 14px;
	--c-spacing-sm: 20px;
	--c-gutter-md: 32px;
	--c-gutter-lg: 48px;
	--c-spacing-xl: 72px;
	--c-gap-2xl: 112px;
	--c-gap-3xl: 160px;
	/* single section vertical rhythm — kept at --c-gutter-lg so adjacent
	   section pairs stay ≤110px (A-09). */
	--c-sec-y: var(--c-gutter-lg);

	/* CONT-01 — Classic Wide */
	--c-wrapper: 1120px;
	--c-prose-width: 680px;
	--c-inset-mobile: 16px;
	--c-container-padding-tablet: 32px;
	--c-gutter-desktop: 48px;

	/* GEO-09 — Glass Refraction */
	--c-round-xs: 2px;
	--c-rounded-sm: 8px;
	--c-rounded-md: 14px;
	--c-round-lg: 22px;
	--c-radius-pill: 9999px;
	--c-circle: 50%;
	--c-shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	--c-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	--c-elevation-2: 0 8px 24px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
	--c-elevation-3: 0 16px 48px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;

	/* MOTION-01 — Static Strict */
	--c-transition-fast: 120ms;
	--c-transition-base: 150ms;
	--c-speed-slow: 200ms;
	--c-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* chrome heights */
	--c-rg-h: 30px;
	--c-header-h: 104px;
	--c-header-h-mobile: 76px;
}

/* ---- 2. Mobile token overrides --------------------------- */
@media (max-width: 767px) {
	:root {
		--c-type-h1: 30px;
		--c-fs-h2: 24px;
		--c-text-h3: 20px;
		--c-size-h4: 18px;
		--c-type-h5: 15px;
		--c-fs-h6: 13px;
		--c-size-body: 15px;
		--c-type-small: 13px;
		--c-size-xs: 11px;
	}
}

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

html, body { overflow-x: clip; }

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

body {
	margin: 0;
	font-family: var(--c-font-text);
	font-size: var(--c-size-body);
	font-weight: var(--c-weight-regular);
	line-height: var(--c-leading-normal);
	color: var(--c-body-color);
	background: var(--c-surface);
	padding-top: calc(var(--c-header-h) + var(--c-rg-h));
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 { margin: 0; }

a { color: var(--c-secondary); text-decoration: none; transition: color var(--c-transition-fast) var(--c-ease); }
a:hover { color: var(--c-accent-dark); }

button { font-family: inherit; }

ul { list-style: none; margin: 0; padding: 0; }

/* ---- 4. a11y --------------------------------------------- */
.skip-link {
	position: fixed;
	left: var(--c-spacing-sm);
	top: var(--c-spacing-sm);
	z-index: 300;
	background: var(--c-secondary);
	color: var(--c-accent-main);
	padding: var(--c-gutter-xs) var(--c-gutter-md);
	border-radius: var(--c-rounded-sm);
	font-weight: var(--c-fw-bold);
}
.skip-link:not(:focus) { top: -200px !important; }

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

:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---- 5. Section inner width (single shared width, A-11) --- */
.p15-inner,
.a86-inner,
.z81-inner,
.e84-inner,
.f74-inner,
.o24-inner,
.t69-inner,
.p32-inner,
.h63-inner,
.u18-inner,
.u55-inner,
.a57-inner,
.f08-inner {
	width: 100%;
	max-width: calc(var(--c-wrapper) + 2 * var(--c-gutter-desktop));
	margin-inline: auto;
	padding-inline: var(--c-gutter-desktop);
}

@media (max-width: 767px) {
	.p15-inner,
	.a86-inner,
	.z81-inner,
	.e84-inner,
	.f74-inner,
	.o24-inner,
	.t69-inner,
	.p32-inner,
	.h63-inner,
	.u18-inner,
	.u55-inner,
	.a57-inner,
	.f08-inner {
		padding-inline: var(--c-inset-mobile);
	}
}

/* ---- 6. Responsible-gaming banner (fixed, above header) --- */
.rg-banner {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 101;
	min-height: var(--c-rg-h);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--c-gutter-xs);
	padding: 4px var(--c-spacing-sm);
	background: var(--c-notice-bg);
	color: #fff;
	font-size: var(--c-size-xs);
	font-weight: var(--c-fw-medium);
	letter-spacing: var(--c-tracking-wide);
	text-align: center;
}
.rg-banner a { color: #fff; text-decoration: underline; }
.rg-banner a:hover { color: #fff; }

/* ============================================================
   HEADER — HEAD-12 Drawer-Only Mobile-First · STICKY-01 fixed
   ============================================================ */
.p15 {
	position: fixed;
	top: var(--c-rg-h);
	left: 0; right: 0;
	z-index: 100;
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border-soft);
}
.p15-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--c-gutter-md);
	min-height: var(--c-header-h);
}
.p15-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.p15-logo img {
	height: 88px;
	width: auto;
	flex-shrink: 0;
	mix-blend-mode: lighten;
}
.p15-actions {
	display: flex;
	align-items: center;
	gap: var(--c-spacing-sm);
	margin-left: auto;
}
.p15-auth { display: flex; align-items: center; gap: var(--c-gutter-xs); }
.p15-auth-btn {
	white-space: nowrap;
	flex-shrink: 0;
	font-family: var(--c-font-text);
	font-weight: var(--c-fw-medium);
	font-size: var(--c-type-small);
	letter-spacing: var(--c-tracking-wide);
	padding: 10px var(--c-gutter-md);
	border-radius: var(--c-rounded-sm);
	border: 1px solid transparent;
	cursor: pointer;
}
.p15-auth-btn--c-login {
	background: transparent;
	color: var(--c-body-color);
	border-color: var(--c-border-glass);
}
.p15-auth-btn--c-login:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--c-secondary);
}
.p15-auth-btn--c-register {
	background: var(--c-secondary);
	color: var(--c-accent-main);
}
.p15-auth-btn--c-register:hover {
	background: var(--c-accent-dark);
	color: var(--c-accent-main);
}
.p15-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--c-gap-2xs);
	margin-left: auto;
	background: transparent;
	color: var(--c-body-color);
	border: 1px solid var(--c-border-glass);
	border-radius: var(--c-rounded-sm);
	padding: 10px var(--c-spacing-sm);
	font-size: var(--c-type-small);
	font-weight: var(--c-fw-medium);
	letter-spacing: var(--c-tracking-wide);
	cursor: pointer;
}
.p15-toggle:hover { color: var(--c-secondary); border-color: var(--c-secondary); }
.p15-toggle-text { line-height: 1; }
.p15-toggle svg { width: 20px; height: 20px; display: block; }

/* Drawer (kept inside <header> so the drawer/toggle relationship is
   discoverable; slides from the right). Pattern A: display none↔flex. */
.p15-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 150;
	background: rgba(0, 0, 0, 0.6);
}
.p15-backdrop.is-open { display: block; }

.p15-drawer {
	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0;
	z-index: 160;
	width: 360px;
	max-width: 100vw;
	flex-direction: column;
	gap: var(--c-gutter-md);
	padding: var(--c-gutter-lg) var(--c-gutter-md);
	background: var(--c-panel-bg);
	border-left: 1px solid var(--c-border-soft);
	box-shadow: var(--c-elevation-3);
	overflow-y: auto;
}
.p15-drawer.is-open { display: flex; }
.p15-drawer-close {
	align-self: flex-end;
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--c-body-color);
	border: 1px solid var(--c-border-glass);
	border-radius: var(--c-circle);
	cursor: pointer;
}
.p15-drawer-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--c-secondary); }
.p15-drawer-close svg { width: 18px; height: 18px; }
.p15-drawer-nav { display: flex; flex-direction: column; }
.p15-drawer-link {
	display: block;
	padding: var(--c-spacing-sm) 0;
	font-family: var(--c-heading-font);
	font-weight: var(--c-fw-bold);
	font-size: var(--c-type-h5);
	color: var(--c-body-color);
	border-bottom: 1px solid var(--c-border-soft);
}
.p15-drawer-link:hover,
.p15-drawer-link[aria-current="page"] { color: var(--c-secondary); }
.p15-drawer-auth { display: flex; flex-direction: column; gap: var(--c-gutter-xs); margin-top: var(--c-spacing-sm); }
.p15-drawer-auth .p15-auth-btn { width: 100%; text-align: center; }

@media (max-width: 620px) {
	.p15-auth { display: none; }
}
@media (max-width: 767px) {
	.p15-inner { min-height: var(--c-header-h-mobile); }
	.p15-logo img { height: 60px; }
}

/* ============================================================
   HERO — HERO-05 Bordered Plate Editorial (typographic)
   ============================================================ */
.a86 {
	background: var(--c-surface);
	padding-block: 96px var(--c-sec-y);
}
.a86-frame {
	position: relative;
	padding: var(--c-gap-2xl) var(--c-gutter-lg);
	outline: 4px solid var(--c-body-color);
	outline-offset: 8px;
	box-shadow: 0 0 0 8px var(--c-surface), 0 0 0 9px var(--c-body-color);
	background:
		radial-gradient(120% 140% at 15% 0%, rgba(251, 104, 59, 0.12), transparent 55%),
		radial-gradient(120% 140% at 100% 100%, rgba(245, 183, 5, 0.10), transparent 55%),
		var(--c-surface);
}
.a86-content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--c-spacing-sm); }
.a86-eyebrow {
	margin: 0;
	font-size: var(--c-type-small);
	font-style: italic;
	color: var(--c-secondary);
	letter-spacing: var(--c-tracking-wide);
}
.a86 h1 {
	font-family: var(--c-heading-font);
	font-weight: 800;
	font-size: clamp(38px, 6vw, 66px);
	line-height: var(--c-leading-tight);
	letter-spacing: var(--c-letter-tight);
	color: var(--c-body-color);
}
.a86-divider {
	width: 80px;
	height: 1px;
	margin: var(--c-gutter-xs) 0;
	border: 0;
	background: var(--c-secondary);
}
.a86-subtitle {
	margin: 0;
	max-width: 640px;
	font-size: var(--c-type-h5);
	line-height: var(--c-lh-loose);
	color: var(--c-text-muted);
}
.a86-cta {
	margin-top: var(--c-spacing-sm);
	display: inline-block;
	background: var(--c-secondary);
	color: var(--c-accent-main);
	font-weight: var(--c-fw-bold);
	letter-spacing: var(--c-tracking-wide);
	padding: var(--c-spacing-sm) var(--c-spacing-xl);
	border-radius: var(--c-round-xs);
}
.a86-cta:hover { background: var(--c-accent-dark); color: var(--c-accent-main); }

/* ============================================================
   PAGE HEADER — PHEAD-01 Eyebrow + Title + Divider + Desc
   ============================================================ */
.z81 {
	background: var(--c-surface);
	padding-block: var(--c-spacing-xl) var(--c-sec-y);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.z81-inner { display: flex; flex-direction: column; gap: var(--c-gutter-md); }
.z81-eyebrow {
	font-family: var(--c-font-text);
	font-weight: var(--c-fw-medium);
	font-size: var(--c-type-small);
	text-transform: uppercase;
	letter-spacing: var(--c-tracking-wide);
	color: var(--c-secondary);
}
.z81-title {
	font-family: var(--c-heading-font);
	font-weight: 800;
	font-size: var(--c-type-h1);
	line-height: var(--c-leading-tight);
	letter-spacing: var(--c-letter-tight);
	color: var(--c-body-color);
	max-width: 920px;
}
.z81-divider { width: 60px; height: 2px; background: var(--c-secondary); }
.z81-description {
	font-size: var(--c-type-h5);
	line-height: var(--c-leading-normal);
	color: var(--c-text-muted);
	max-width: 720px;
}
.z81-meta { font-size: var(--c-type-small); color: var(--c-text-muted); }

/* ============================================================
   PROSE — PROSE-01 Classic Long-Read
   ============================================================ */
.p32 { background: var(--c-surface); padding-block: var(--c-sec-y); }
.p32-body { max-width: var(--c-prose-width); }
.p32 h2 {
	font-family: var(--c-heading-font);
	font-weight: 800;
	font-size: var(--c-fs-h2);
	line-height: var(--c-leading-tight);
	color: var(--c-body-color);
	margin-top: var(--c-gutter-lg);
	margin-bottom: var(--c-gutter-md);
}
.p32-body > h2:first-child { margin-top: 0; }
.p32 h3 {
	font-family: var(--c-font-text);
	font-weight: var(--c-fw-bold);
	font-size: var(--c-text-h3);
	color: var(--c-body-color);
	margin-top: var(--c-gutter-md);
	margin-bottom: var(--c-spacing-sm);
}
.p32 p {
	font-size: var(--c-size-body);
	line-height: var(--c-lh-loose);
	color: var(--c-body-color);
	margin: 0 0 var(--c-gutter-md);
}
.p32 a { color: var(--c-secondary); text-decoration: underline; text-underline-offset: 3px; }
.p32 a:hover { color: var(--c-accent-dark); text-decoration-thickness: 2px; }
.p32 strong { font-weight: var(--c-fw-bold); color: var(--c-body-color); }
.p32 em { font-style: italic; color: var(--c-body-color); }
.p32 ol, .p32 ul.p32-list {
	margin: 0 0 var(--c-gutter-md);
	padding-left: var(--c-gutter-md);
	color: var(--c-body-color);
	line-height: var(--c-lh-loose);
}
.p32 ol { list-style: decimal; }
.p32 ul.p32-list { list-style: disc; }
.p32 li { margin-bottom: var(--c-gap-2xs); }
.p32-figure { margin: 0 0 var(--c-gutter-md); }
.p32-figure img { width: 100%; border-radius: var(--c-rounded-md); border: 1px solid var(--c-border-glass); }
.p32-figure figcaption { margin-top: var(--c-gutter-xs); font-size: var(--c-type-small); color: var(--c-text-muted); font-style: italic; }

/* Context image at top of a content page */
.p32-context { max-width: 100%; margin-bottom: var(--c-gutter-md); }
.p32-context img { width: 100%; border-radius: var(--c-rounded-md); border: 1px solid var(--c-border-glass); }

/* ============================================================
   ITEMS GRID — GRID-09 Horizontal Scroll Strip
   ============================================================ */
.e84 { background: var(--c-surface); padding-block: var(--c-sec-y); }
.e84-head { margin-bottom: var(--c-gutter-md); }
.e84-eyebrow {
	display: block;
	font-size: var(--c-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--c-tracking-wide);
	color: var(--c-secondary);
	margin-bottom: var(--c-gap-2xs);
}
.e84-title { font-family: var(--c-heading-font); font-weight: 800; font-size: var(--c-fs-h2); color: var(--c-body-color); }
.e84-rail {
	display: flex;
	gap: var(--c-gutter-md);
	overflow-x: auto;
	padding-bottom: var(--c-spacing-sm);
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.e84-card {
	flex-shrink: 0;
	width: 320px;
	min-height: 200px;
	scroll-snap-align: start;
	padding: var(--c-gutter-md);
	border: 1px solid var(--c-border-glass);
	border-radius: var(--c-rounded-md);
	background: var(--c-glass-fill);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: var(--c-shadow-xs);
}
.e84-card-title {
	font-family: var(--c-heading-font);
	font-weight: var(--c-fw-bold);
	font-size: var(--c-size-h4);
	color: var(--c-body-color);
	margin-bottom: var(--c-spacing-sm);
}
.e84-card-text { font-size: var(--c-type-small); line-height: var(--c-leading-normal); color: var(--c-text-muted); }
.e84-hint { margin-top: var(--c-spacing-sm); font-size: var(--c-size-xs); color: var(--c-text-muted); letter-spacing: var(--c-tracking-wide); }

/* ============================================================
   DATA TABLE — TABLE-06 Magazine Editorial with Captions
   ============================================================ */
.h63 { background: var(--c-surface); padding-block: var(--c-sec-y); }
.h63-wrap { overflow-x: auto; }
.h63-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.h63-table caption {
	font-family: var(--c-heading-font);
	font-size: var(--c-size-h4);
	font-style: italic;
	color: var(--c-text-muted);
	text-align: center;
	padding-bottom: var(--c-gutter-md);
}
.h63-caption-rule { display: block; width: 40px; height: 2px; background: var(--c-secondary); margin: 0 auto var(--c-spacing-sm); }
.h63-table th,
.h63-table td {
	padding: var(--c-spacing-sm) var(--c-gutter-md);
	text-align: left;
	border-bottom: 1px solid var(--c-border-soft);
	font-size: var(--c-size-body);
}
.h63-table thead th {
	font-family: var(--c-font-text);
	font-weight: var(--c-fw-bold);
	color: var(--c-secondary);
	text-transform: uppercase;
	font-size: var(--c-type-small);
	letter-spacing: var(--c-tracking-wide);
}
.h63-table td { color: var(--c-text-muted); }
.h63-table tbody tr:hover td { color: var(--c-body-color); }

/* ============================================================
   REVIEWS — REV-02 Quote-Style Editorial
   ============================================================ */
.o24 { background: var(--c-surface); padding-block: var(--c-sec-y); }
.o24-head { margin-bottom: var(--c-gutter-md); }
.o24-eyebrow {
	display: block;
	font-size: var(--c-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--c-tracking-wide);
	color: var(--c-secondary);
	margin-bottom: var(--c-gap-2xs);
}
.o24-title { font-family: var(--c-heading-font); font-weight: 800; font-size: var(--c-fs-h2); color: var(--c-body-color); }
.o24-list { display: flex; flex-direction: column; }
.o24-item {
	position: relative;
	max-width: var(--c-prose-width);
	padding-block: var(--c-gutter-lg);
	padding-left: var(--c-gutter-lg);
	border-bottom: 1px solid var(--c-border-soft);
}
.o24-item:last-child { border-bottom: 0; }
.o24-item::before {
	content: "\201C";
	position: absolute;
	top: 6px; left: -6px;
	font-family: var(--c-heading-font);
	font-size: var(--c-type-h1);
	line-height: 1;
	color: var(--c-secondary);
}
.o24-quote { margin: 0; }
.o24-quote p {
	margin: 0;
	font-family: var(--c-heading-font);
	font-style: italic;
	font-size: var(--c-size-h4);
	line-height: var(--c-leading-tight);
	color: var(--c-body-color);
}
.o24-attribution {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--c-gutter-xs);
	margin-top: var(--c-spacing-sm);
	font-size: var(--c-type-small);
	color: var(--c-text-muted);
}
.o24-author { font-style: normal; font-weight: var(--c-fw-bold); color: var(--c-body-color); }
.o24-rating-text { color: var(--c-secondary); font-weight: var(--c-fw-bold); }
.o24-attribution time { position: relative; padding-left: var(--c-spacing-sm); }
.o24-attribution time::before { content: "\00B7"; position: absolute; left: 5px; }

/* ============================================================
   FAQ — FAQ-01 Classic Accordion
   ============================================================ */
.f74 { background: var(--c-surface); padding-block: var(--c-sec-y); }
.f74-title { font-family: var(--c-heading-font); font-weight: 800; font-size: var(--c-fs-h2); color: var(--c-body-color); margin-bottom: var(--c-gutter-md); }
.f74-list { border-top: 1px solid var(--c-border-soft); }
.f74-item { border-bottom: 1px solid var(--c-border-soft); }
.f74-item dt { margin: 0; }
.f74-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--c-gutter-md);
	padding: var(--c-gutter-md) 0;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: var(--c-body-color);
}
.f74-question:hover { color: var(--c-secondary); }
.f74-question:hover .f74-question-text { color: var(--c-secondary); }
.f74-question-text { font-family: var(--c-font-text); font-weight: var(--c-fw-bold); font-size: var(--c-type-h5); color: var(--c-body-color); }
.f74-icon {
	flex-shrink: 0;
	font-size: 24px;
	line-height: 1;
	color: var(--c-secondary);
	transition: transform var(--c-transition-base) var(--c-ease);
}
.f74-question[aria-expanded="true"] .f74-icon { transform: rotate(45deg); }
.f74-answer { padding: 0 0 var(--c-gutter-md); }
.f74-answer[hidden] { display: none; }
.f74-answer p { margin: 0; padding-top: var(--c-gap-2xs); font-size: var(--c-size-body); line-height: var(--c-lh-loose); color: var(--c-text-muted); }

/* ============================================================
   CTA — CTA-09 Eyebrow + H2 + Short Text
   ============================================================ */
.t69 { background: var(--c-surface); padding-block: var(--c-sec-y); }
.t69-inner { text-align: left; }
.t69-card {
	padding: var(--c-gutter-lg);
	border: 1px solid var(--c-border-glass);
	border-radius: var(--c-round-lg);
	background:
		radial-gradient(120% 160% at 0% 0%, rgba(245, 183, 5, 0.12), transparent 60%),
		var(--c-glass-fill);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: var(--c-shadow-sm);
}
.t69-eyebrow {
	display: block;
	font-size: var(--c-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--c-tracking-wide);
	color: var(--c-secondary);
	margin-bottom: var(--c-gutter-xs);
}
.t69-title { font-family: var(--c-heading-font); font-weight: 800; font-size: var(--c-fs-h2); color: var(--c-body-color); margin-bottom: var(--c-spacing-sm); }
.t69-text { font-size: var(--c-size-body); line-height: var(--c-lh-loose); color: var(--c-text-muted); max-width: 580px; margin-bottom: var(--c-gutter-md); }
.t69-btn {
	display: inline-block;
	background: var(--c-secondary);
	color: var(--c-accent-main);
	font-weight: var(--c-fw-bold);
	letter-spacing: var(--c-tracking-wide);
	padding: var(--c-spacing-sm) var(--c-gutter-lg);
	border-radius: var(--c-rounded-md);
}
.t69-btn:hover { background: var(--c-accent-dark); color: var(--c-accent-main); }

/* ============================================================
   LEGAL — LEGAL-02 Numbered Sections
   ============================================================ */
.u18 { background: var(--c-surface); padding-block: var(--c-sec-y); }
.u18-intro { max-width: var(--c-prose-width); font-size: var(--c-type-h5); line-height: var(--c-lh-loose); color: var(--c-text-muted); margin-bottom: var(--c-gutter-lg); }
.u18-body { counter-reset: legal-section; max-width: var(--c-prose-width); }
.u18-section { counter-increment: legal-section; margin-bottom: var(--c-gutter-lg); }
.u18-section h3 {
	font-family: var(--c-font-text);
	font-weight: var(--c-fw-bold);
	font-size: var(--c-text-h3);
	color: var(--c-body-color);
	margin-bottom: var(--c-spacing-sm);
}
.u18-section h3::before {
	content: counter(legal-section) ". ";
	color: var(--c-secondary);
	font-family: var(--c-heading-font);
	font-weight: var(--c-fw-bold);
	margin-right: var(--c-gap-2xs);
}
.u18-section p {
	padding-left: var(--c-gutter-md);
	font-size: var(--c-size-body);
	line-height: var(--c-lh-loose);
	color: var(--c-body-color);
	margin: 0 0 var(--c-spacing-sm);
}
.u18-support { max-width: var(--c-prose-width); margin-top: var(--c-gutter-lg); padding: var(--c-gutter-md); border: 1px solid var(--c-border-glass); border-radius: var(--c-rounded-md); background: var(--c-glass-fill); }
.u18-support h3 { font-family: var(--c-font-text); font-weight: var(--c-fw-bold); font-size: var(--c-size-h4); color: var(--c-body-color); margin-bottom: var(--c-spacing-sm); }
.u18-support-list { display: flex; flex-direction: column; gap: var(--c-gutter-xs); }
.u18-support-list li { position: relative; padding-left: var(--c-gutter-md); color: var(--c-text-muted); line-height: var(--c-leading-normal); }
.u18-support-list li::before { content: "\2022"; position: absolute; left: 0; color: var(--c-secondary); }
.u18-disclaimer { max-width: var(--c-prose-width); margin-top: var(--c-gutter-md); font-size: var(--c-type-small); font-style: italic; color: var(--c-text-muted); line-height: var(--c-lh-loose); }
@media (max-width: 767px) {
	.u18-section p { padding-left: 0; }
}

/* ============================================================
   CONTACT FORM — FORM-02 Two-Column Side-by-Side
   ============================================================ */
.u55 { background: var(--c-surface); padding-block: var(--c-sec-y); }
.u55-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--c-spacing-xl); align-items: start; }
.u55-info {
	padding: var(--c-gutter-lg);
	background: rgba(25, 24, 42, 0.55);
	border: 1px solid var(--c-border-glass);
	border-radius: var(--c-rounded-md);
}
.u55-info h3 { font-family: var(--c-heading-font); font-weight: var(--c-fw-bold); font-size: var(--c-size-h4); color: var(--c-body-color); margin-bottom: var(--c-spacing-sm); }
.u55-info-intro { font-size: var(--c-size-body); line-height: var(--c-lh-loose); color: var(--c-text-muted); margin-bottom: var(--c-gutter-md); }
.u55-info-list { display: flex; flex-direction: column; gap: var(--c-gutter-xs); }
.u55-info-list li { color: var(--c-text-muted); font-size: var(--c-type-small); }
.u55-info-list a { color: var(--c-secondary); }
.u55-form { display: block; }
.u55-field { display: flex; flex-direction: column; gap: var(--c-gap-2xs); margin-bottom: var(--c-gutter-md); }
.u55-field label { font-size: var(--c-type-small); font-weight: var(--c-fw-medium); color: var(--c-body-color); }
.u55-input,
.u55-textarea {
	font-family: inherit;
	font-size: var(--c-size-body);
	color: var(--c-body-color);
	background: var(--c-panel-bg);
	border: 1px solid var(--c-border-glass);
	border-radius: var(--c-rounded-sm);
	padding: var(--c-spacing-sm);
}
.u55-input:focus,
.u55-textarea:focus { outline: 2px solid var(--c-secondary); outline-offset: 1px; border-color: var(--c-secondary); }
.u55-textarea { min-height: 140px; resize: vertical; }
.u55-submit {
	background: var(--c-secondary);
	color: var(--c-accent-main);
	font-weight: var(--c-fw-bold);
	letter-spacing: var(--c-tracking-wide);
	padding: var(--c-spacing-sm) var(--c-gutter-lg);
	border: 0;
	border-radius: var(--c-rounded-md);
	cursor: pointer;
}
.u55-submit:hover { background: var(--c-accent-dark); color: var(--c-accent-main); }
.u55-success {
	margin-top: var(--c-gutter-md);
	padding: var(--c-gutter-md);
	border: 1px solid var(--c-secondary);
	border-radius: var(--c-rounded-md);
	background: rgba(245, 183, 5, 0.10);
	color: var(--c-body-color);
}
.u55-success[hidden] { display: none; }
@media (max-width: 767px) {
	.u55-grid { grid-template-columns: 1fr; gap: var(--c-gutter-lg); }
}

/* ============================================================
   AUTHOR BYLINE — BYLINE-07 Expertise Tags Block
   ============================================================ */
.f75 { padding-block: var(--c-gutter-lg); background: var(--c-surface); }
.f75-hold { max-width: var(--c-prose-width); margin-inline: auto; padding-inline: var(--c-gutter-desktop); }
.f75-date { margin-top: var(--c-spacing-sm); font-size: var(--c-type-small); color: var(--c-text-muted); }
.f75-date time { color: var(--c-text-muted); }
.f75-card {
	padding: var(--c-gutter-lg);
	background: var(--c-panel-bg);
	border: 1px solid var(--c-border-glass);
	border-radius: var(--c-rounded-md);
	box-shadow: var(--c-shadow-sm);
}
.f75-header { display: flex; align-items: center; gap: var(--c-spacing-sm); margin-bottom: var(--c-gutter-md); }
.f75-portrait {
	width: 72px; height: 72px;
	border-radius: var(--c-circle);
	object-fit: cover;
	object-position: center top;
	flex-shrink: 0;
	border: 2px solid var(--c-secondary);
}
.f75-name { font-family: var(--c-heading-font); font-weight: 800; font-size: var(--c-size-h4); }
.f75-name a { color: var(--c-body-color); }
.f75-name a:hover { color: var(--c-secondary); }
.f75-role { font-size: var(--c-type-small); color: var(--c-text-muted); }
.f75-bio { font-size: var(--c-size-body); line-height: var(--c-lh-loose); color: var(--c-text-muted); margin: 0 0 var(--c-gutter-md); }
.f75-expertise { display: flex; flex-wrap: wrap; gap: var(--c-gutter-xs); margin-bottom: var(--c-gutter-md); }
.f75-tag {
	padding: var(--c-gap-2xs) var(--c-spacing-sm);
	background: var(--c-accent-main);
	color: var(--c-body-color);
	border-radius: var(--c-radius-pill);
	font-size: var(--c-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--c-tracking-wide);
}
.f75-link { color: var(--c-secondary); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--c-fw-medium); }
.f75-link:hover { color: var(--c-accent-dark); }
@media (max-width: 767px) {
	.f75-hold { padding-inline: var(--c-inset-mobile); }
}

/* ============================================================
   AUTHOR CARD — AUTH-08 Minimal Avatar + Name (/reviewer/)
   ============================================================ */
.a57 { background: var(--c-surface); padding-block: var(--c-sec-y); }
.a57-identity { display: flex; align-items: center; gap: var(--c-gutter-md); margin-bottom: var(--c-gutter-lg); }
.a57-avatar {
	width: 96px; height: 96px;
	border-radius: var(--c-circle);
	object-fit: cover;
	object-position: center top;
	border: 2px solid var(--c-secondary);
	flex-shrink: 0;
}
.a57-name { font-family: var(--c-heading-font); font-weight: 800; font-size: var(--c-text-h3); color: var(--c-body-color); }
.a57-role { font-size: var(--c-type-small); color: var(--c-text-muted); margin-top: var(--c-gap-2xs); }
.a57-bio { max-width: var(--c-prose-width); font-size: var(--c-type-h5); line-height: var(--c-lh-loose); color: var(--c-text-muted); margin-bottom: var(--c-gutter-md); }
.a57-expertise { display: flex; flex-wrap: wrap; gap: var(--c-gutter-xs); margin-bottom: var(--c-gutter-lg); }
.a57-tag {
	padding: var(--c-gap-2xs) var(--c-spacing-sm);
	background: var(--c-accent-main);
	color: var(--c-body-color);
	border-radius: var(--c-radius-pill);
	font-size: var(--c-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--c-tracking-wide);
}
.a57-articles { max-width: var(--c-prose-width); margin-top: var(--c-gutter-lg); padding-top: var(--c-gutter-md); border-top: 1px solid var(--c-border-soft); }
.a57-articles-heading { font-family: var(--c-font-text); font-weight: var(--c-fw-bold); font-size: var(--c-size-h4); color: var(--c-body-color); margin-bottom: var(--c-spacing-sm); }
.a57-articles-list { display: flex; flex-direction: column; gap: var(--c-gutter-xs); }
.a57-articles-item { position: relative; padding-left: var(--c-gutter-md); color: var(--c-text-muted); }
.a57-articles-item::before { content: "\2022"; position: absolute; left: 0; color: var(--c-secondary); }

/* ============================================================
   COOKIE BANNER — COOK-06 Detailed with Preferences Link
   ============================================================ */
.a36 {
	position: fixed;
	left: var(--c-gutter-md);
	right: var(--c-gutter-md);
	bottom: var(--c-gutter-md);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: var(--c-gutter-md);
	padding: var(--c-gutter-md) var(--c-gutter-lg);
	background: var(--c-panel-bg);
	border: 1px solid var(--c-border-glass);
	border-radius: var(--c-round-lg);
	box-shadow: var(--c-elevation-3);
}
.a36[hidden] { display: none; }
.a36-text { flex: 1 1 auto; font-size: var(--c-type-small); line-height: var(--c-leading-normal); color: var(--c-text-muted); }
.a36-actions { display: flex; align-items: center; gap: var(--c-spacing-sm); flex-shrink: 0; }
.a36-prefs { color: var(--c-text-muted); text-decoration: underline; text-underline-offset: 3px; font-size: var(--c-type-small); }
.a36-prefs:hover { color: var(--c-secondary); }
.a36-button {
	padding: 10px var(--c-gutter-md);
	border-radius: var(--c-rounded-sm);
	font-weight: var(--c-fw-bold);
	font-size: var(--c-type-small);
	cursor: pointer;
	white-space: nowrap;
}
.a36-decline { background: rgba(255, 255, 255, 0.04); color: var(--c-body-color); border: 1px solid var(--c-border-glass); }
.a36-decline:hover { background: rgba(255, 255, 255, 0.10); color: var(--c-secondary); }
.a36-accept { background: var(--c-secondary); color: var(--c-accent-main); border: 1px solid var(--c-secondary); }
.a36-accept:hover { background: var(--c-accent-dark); color: var(--c-accent-main); }
@media (max-width: 720px) {
	.a36 { flex-direction: column; align-items: stretch; padding: 12px 14px; gap: 8px; font-size: 13px; line-height: 1.35; }
	.a36-actions { flex-wrap: wrap; }
	.a36-button { flex: 1 1 auto; padding: 8px 14px; font-size: 12px; min-height: 36px; }
}

/* ============================================================
   ERROR BLOCK — ERR-04 Full-Bleed Atmospheric (404)
   ============================================================ */
.x27 {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.85)), url("/images/snapshot.webp");
	background-size: cover;
	background-position: center;
}
.x27-box { max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: var(--c-gutter-md); }
.x27-code { font-family: var(--c-heading-font); font-weight: 800; font-size: clamp(72px, 16vw, 160px); line-height: 1; color: #ffffff; }
.x27-title { font-family: var(--c-heading-font); font-weight: 800; font-size: var(--c-fs-h2); color: #ffffff; }
.x27-text { font-size: var(--c-type-h5); line-height: var(--c-lh-loose); color: #f0f0f0; }
.x27-btn {
	display: inline-block;
	background: var(--c-secondary);
	color: var(--c-accent-main);
	font-weight: var(--c-fw-bold);
	letter-spacing: var(--c-tracking-wide);
	padding: var(--c-spacing-sm) var(--c-gutter-lg);
	border-radius: var(--c-rounded-md);
}
.x27-btn:hover { background: var(--c-accent-dark); color: var(--c-accent-main); }

/* ============================================================
   FOOTER — FOOT-10 Sectioned Detail-Rich
   ============================================================ */
.f08 { background: var(--c-surface); padding-block: var(--c-gap-2xl) var(--c-gutter-lg); border-top: 1px solid var(--c-border-soft); }
.f08-brandrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--c-gutter-lg);
	padding-block: var(--c-gutter-lg);
	border-bottom: 1px solid var(--c-border-soft);
}
.f08-logo img { height: 72px; width: auto; mix-blend-mode: lighten; }
.f08-slogan { max-width: 420px; text-align: right; font-size: var(--c-type-small); color: var(--c-text-muted); line-height: var(--c-leading-normal); }
.f08-navgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--c-gutter-lg);
	padding-block: var(--c-spacing-xl);
	border-bottom: 1px solid var(--c-border-soft);
}
.f08-col { display: flex; flex-direction: column; }
.f08-col-heading { font-family: var(--c-font-text); font-weight: var(--c-fw-bold); font-size: var(--c-type-small); text-transform: uppercase; letter-spacing: var(--c-tracking-wide); color: var(--c-secondary); margin-bottom: var(--c-spacing-sm); }
.f08-col-list { display: flex; flex-direction: column; gap: var(--c-gutter-xs); }
.f08-col-list a { color: var(--c-text-muted); font-size: var(--c-type-small); }
.f08-col-list a:hover { color: var(--c-secondary); }
.f08-contact { font-size: var(--c-type-small); color: var(--c-text-muted); line-height: var(--c-lh-loose); }
.f08-contact a { color: var(--c-secondary); }
.f08-disclaimer {
	padding-block: var(--c-gutter-md);
	border-bottom: 1px solid var(--c-border-soft);
	font-size: var(--c-type-small);
	line-height: var(--c-lh-loose);
	color: var(--c-text-muted);
}
.f08-disclaimer a { color: var(--c-secondary); text-decoration: underline; }
.f08-copyrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--c-spacing-sm);
	padding-block: var(--c-gutter-md);
}
.f08-copyright { font-size: var(--c-type-small); color: var(--c-text-muted); }
.f08-legal { display: flex; flex-wrap: wrap; gap: var(--c-gutter-md); }
.f08-legal a { font-size: var(--c-type-small); color: var(--c-text-muted); }
.f08-legal a:hover { color: var(--c-secondary); }
@media (max-width: 767px) {
	.f08-brandrow { flex-direction: column; align-items: flex-start; }
	.f08-slogan { text-align: left; }
	.f08-navgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.f08-navgrid { grid-template-columns: 1fr; }
}