/* ============================================================
   NB9 Game Apps Design System v1.5
   One product · one system · every page
   Typography: Geist (display) + Inter (body)
   ============================================================ */

:root {
	/* ---------- Color ---------- */
	--nb9-background: #fafafa;
	--nb9-foreground: #09090b;
	--nb9-surface: #ffffff;
	--nb9-card: #ffffff;
	--nb9-primary: #2563eb;
	--nb9-primary-hover: #1d4ed8;
	--nb9-primary-fg: #ffffff;
	--nb9-primary-soft: #eff6ff;
	--nb9-muted: #f4f4f5;
	--nb9-muted-fg: #71717a;
	--nb9-border: #e4e4e7;
	--nb9-ring: #2563eb;
	--nb9-success: #16a34a;
	--nb9-success-soft: #f0fdf4;
	--nb9-warning: #d97706;
	--nb9-warning-soft: #fffbeb;
	--nb9-danger: #dc2626;

	/* ---------- Spacing scale ---------- */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-8: 32px;
	--s-10: 40px;
	--s-12: 48px;
	--s-16: 64px;
	--s-20: 80px;
	--s-24: 96px;
	--s-32: 128px;

	/* Semantic spacing (homepage = all pages) */
	--space-section: var(--s-24);       /* 96 — page vertical rhythm */
	--space-section-gap: var(--s-8);    /* 32 — gap between section cards */
	--space-card-pad: var(--s-10);      /* 40 — card internal padding */
	--space-card-gap: var(--s-6);       /* 24 */
	--space-heading-gap: var(--s-6);    /* 24 */
	--space-content-gap: var(--s-8);    /* 32 */
	--space-paragraph-gap: var(--s-5);  /* 20 */
	--space-cta-gap: var(--s-10);       /* 40 */
	--page-gutter: var(--s-6);          /* 24 */

	/* ---------- Containers ---------- */
	--container-content: 1120px;
	--container-reading: 760px;
	--container-wide: 1280px;
	--container: var(--container-content);

	/* ---------- Radius (one set) ---------- */
	--r-sm: 6px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-xl: 16px;
	--r-2xl: 20px;
	--r-full: 9999px;

	/* ---------- Shadows (one set) ---------- */
	--shadow-xs: 0 1px 2px rgb(9 9 11 / 4%);
	--shadow-sm: 0 1px 2px rgb(9 9 11 / 5%), 0 1px 3px rgb(9 9 11 / 6%);
	--shadow-md: 0 4px 12px rgb(9 9 11 / 6%), 0 1px 3px rgb(9 9 11 / 4%);
	--shadow-lg: 0 12px 32px rgb(9 9 11 / 8%), 0 4px 8px rgb(9 9 11 / 4%);
	--shadow-glow: 0 0 0 1px rgb(37 99 235 / 12%), 0 8px 24px rgb(37 99 235 / 18%);

	/* ---------- Typography ---------- */
	--font-display: "Geist Sans", "Geist", Inter, ui-sans-serif, system-ui, sans-serif;
	--font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--leading-tight: 1.15;
	--leading-snug: 1.4;
	--leading-normal: 1.6;
	--tracking-tight: -0.03em;
	--tracking-display: -0.04em;

	--text-display: clamp(2.25rem, 4vw, 3rem);   /* H1 */
	--text-heading-l: 1.5rem;                     /* H2 */
	--text-heading-m: 1.25rem;                    /* H3 */
	--text-body-lg: 1.125rem;                     /* lede */
	--text-body: 1rem;
	--text-caption: 0.875rem;                     /* buttons, nav */
	--text-label: 0.75rem;                        /* eyebrow, table th */
	--text-button: 0.875rem;

	--btn-h: 44px;
	--btn-h-sm: 36px;
	--icon-sm: 18px;
	--topbar-h: 64px;
}

/* ============================================================
   LAYOUT LOCK (1120px) — does NOT depend on page HTML classes
   Fixes full-width content when DB pages are outdated.
   ============================================================ */
body.nb9-theme .wp-site-blocks,
body.nb9-theme .wp-site-blocks > * {
	box-sizing: border-box;
}

body.nb9-theme main.wp-block-group,
body.nb9-theme main.alignfull,
body.nb9-theme .wp-block-post-content,
body.nb9-theme .entry-content {
	box-sizing: border-box !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: var(--container-content) !important;
	padding-left: var(--page-gutter) !important;
	padding-right: var(--page-gutter) !important;
	width: 100% !important;
}

/* Avoid double gutters when content already has .nb9-page shell */
body.nb9-theme .wp-block-post-content > .nb9-page,
body.nb9-theme .wp-block-post-content > .nb9-homepage,
body.nb9-theme main > .nb9-page,
body.nb9-theme main > .nb9-homepage {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

/* Stop Gutenberg alignfull from breaking the column */
body.nb9-theme .wp-block-post-content .alignfull,
body.nb9-theme main .alignfull:not(main) {
	left: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	position: relative !important;
	right: auto !important;
	width: 100% !important;
}

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

body.nb9-theme {
	margin: 0;
	background: var(--nb9-background);
	color: var(--nb9-foreground);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 400;
	line-height: var(--leading-normal);
	padding-top: var(--topbar-h);
	padding-bottom: 80px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

@media (min-width: 881px) {
	body.nb9-theme {
		padding-bottom: 0;
	}
}

body.nb9-theme.nb9-nav-open {
	overflow: hidden;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------- Shared column ---------- */
.nb9-shell,
.nb9-page,
.nb9-homepage,
.nb9-footer-inner,
.nb9-topbar__inner {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--container-content);
	padding-left: var(--page-gutter);
	padding-right: var(--page-gutter);
	width: 100%;
}

.nb9-page,
.nb9-homepage {
	color: var(--nb9-foreground);
	padding-top: var(--s-8);
	padding-bottom: var(--s-24);
}

.nb9-page.wp-block-group,
.nb9-homepage.wp-block-group,
.nb9-page .wp-block-group,
.nb9-homepage .wp-block-group,
.nb9-page .is-layout-constrained,
.nb9-homepage .is-layout-constrained,
.nb9-page.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.nb9-homepage.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 100% !important;
}

.nb9-page > *,
.nb9-homepage > * {
	max-width: 100%;
}

.nb9-prose {
	max-width: var(--container-reading);
}

.nb9-wide {
	max-width: var(--container-wide);
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Type (one system) ---------- */
.nb9-page :where(h1, h2, h3, h4),
.nb9-homepage :where(h1, h2, h3, h4) {
	color: var(--nb9-foreground);
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-heading-gap);
	max-width: none;
	text-align: left;
}

.nb9-page h1,
.nb9-homepage h1 {
	font-size: var(--text-display);
	letter-spacing: var(--tracking-display);
	margin-bottom: var(--s-4);
}

.nb9-page h2,
.nb9-homepage h2 {
	font-size: var(--text-heading-l);
}

.nb9-page h3,
.nb9-homepage h3 {
	font-size: var(--text-heading-m);
	margin-bottom: var(--s-2);
}

.nb9-page p,
.nb9-homepage p,
.nb9-page li,
.nb9-homepage li {
	font-size: var(--text-body);
	text-align: left;
}

.nb9-page p,
.nb9-homepage p {
	margin: 0 0 var(--space-paragraph-gap);
}

.nb9-page p:last-child,
.nb9-homepage p:last-child,
.nb9-section > p:last-child {
	margin-bottom: 0;
}

.nb9-page a,
.nb9-homepage a {
	color: var(--nb9-primary);
	text-underline-offset: 0.15em;
}

.nb9-eyebrow {
	color: var(--nb9-success);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0 0 var(--s-3);
	text-align: left;
	text-transform: uppercase;
}

.nb9-lede {
	color: var(--nb9-muted-fg);
	font-size: var(--text-body-lg);
	line-height: var(--leading-snug);
	margin: 0 0 var(--space-content-gap);
	max-width: var(--container-reading);
}

/* ---------- Header ---------- */
.nb9-topbar {
	background: rgb(255 255 255 / 80%);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--nb9-border);
	inset: 0 0 auto;
	position: fixed;
	z-index: 1000;
}

.nb9-topbar__inner {
	align-items: center;
	display: flex;
	gap: var(--s-4);
	justify-content: space-between;
	min-height: var(--topbar-h);
}

.nb9-topbar__brand {
	align-items: center;
	color: var(--nb9-foreground);
	display: inline-flex;
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: 600;
	gap: var(--s-2);
	letter-spacing: var(--tracking-tight);
	text-decoration: none;
}

.nb9-topbar__mark {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-glow);
	display: inline-block;
	flex: 0 0 auto;
	height: 24px;
	width: 24px;
}

.nb9-topbar__nav {
	display: none;
	gap: var(--s-1);
}

.nb9-topbar__nav a {
	border-radius: var(--r-md);
	color: var(--nb9-muted-fg);
	font-size: var(--text-caption);
	font-weight: 500;
	padding: var(--s-2) var(--s-3);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.nb9-topbar__nav a:hover {
	background: var(--nb9-muted);
	color: var(--nb9-foreground);
}

.nb9-topbar__actions {
	align-items: center;
	display: flex;
	gap: var(--s-2);
}

.nb9-nav-toggle {
	align-items: center;
	background: var(--nb9-surface);
	border: 1px solid var(--nb9-border);
	border-radius: var(--r-md);
	cursor: pointer;
	display: inline-flex;
	height: var(--btn-h-sm);
	justify-content: center;
	padding: 0;
	width: var(--btn-h-sm);
}

.nb9-nav-toggle__bars,
.nb9-nav-toggle__bars::before,
.nb9-nav-toggle__bars::after {
	background: var(--nb9-foreground);
	border-radius: var(--r-full);
	content: "";
	display: block;
	height: 1.5px;
	position: relative;
	transition: transform 0.2s ease;
	width: 16px;
}

.nb9-nav-toggle__bars::before {
	position: absolute;
	top: -5px;
}

.nb9-nav-toggle__bars::after {
	position: absolute;
	top: 5px;
}

.nb9-nav-toggle[aria-expanded="true"] .nb9-nav-toggle__bars {
	background: transparent;
}

.nb9-nav-toggle[aria-expanded="true"] .nb9-nav-toggle__bars::before {
	transform: translateY(5px) rotate(45deg);
}

.nb9-nav-toggle[aria-expanded="true"] .nb9-nav-toggle__bars::after {
	transform: translateY(-5px) rotate(-45deg);
}

.nb9-mobile-nav {
	background: var(--nb9-surface);
	border-bottom: 1px solid var(--nb9-border);
	box-shadow: var(--shadow-md);
	padding: var(--s-4) var(--page-gutter) var(--s-6);
}

.nb9-mobile-nav nav {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	margin: 0 auto;
	max-width: var(--container-content);
}

.nb9-mobile-nav a:not(.nb9-dl-btn) {
	border-radius: var(--r-md);
	color: var(--nb9-foreground);
	font-size: var(--text-body);
	font-weight: 500;
	padding: var(--s-3) var(--s-4);
	text-decoration: none;
}

.nb9-mobile-nav a:not(.nb9-dl-btn):hover {
	background: var(--nb9-muted);
}

.nb9-mobile-nav .nb9-dl-btn {
	margin-top: var(--s-3);
}

@media (min-width: 880px) {
	.nb9-topbar__nav {
		display: flex;
	}

	.nb9-nav-toggle,
	.nb9-mobile-nav {
		display: none !important;
	}
}

/* ---------- Buttons (one spec) ---------- */
.nb9-dl-cta {
	margin: var(--space-cta-gap) 0 0;
}

.nb9-dl-btn,
.nb9-page .wp-block-button__link,
.nb9-homepage .wp-block-button__link,
body.nb9-theme .wp-block-button__link {
	align-items: center;
	background: var(--nb9-primary) !important;
	border: 1px solid transparent !important;
	border-radius: var(--r-lg) !important;
	box-shadow: var(--shadow-glow);
	color: var(--nb9-primary-fg) !important;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-body);
	font-size: var(--text-button);
	font-weight: 600;
	justify-content: center;
	letter-spacing: -0.01em;
	line-height: 1.2;
	min-height: var(--btn-h);
	padding: 0 var(--s-6) !important;
	text-decoration: none !important;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nb9-dl-btn:hover,
.nb9-page .wp-block-button__link:hover,
.nb9-homepage .wp-block-button__link:hover,
body.nb9-theme .wp-block-button__link:hover {
	background: var(--nb9-primary-hover) !important;
	box-shadow: 0 0 0 1px rgb(37 99 235 / 16%), 0 10px 28px rgb(37 99 235 / 24%);
	color: #fff !important;
	transform: translateY(-1px);
}

.nb9-dl-btn:focus-visible,
.nb9-page .wp-block-button__link:focus-visible,
.nb9-homepage .wp-block-button__link:focus-visible,
.nb9-topbar a:focus-visible,
.nb9-nav-toggle:focus-visible,
.nb9-page summary:focus-visible,
.nb9-homepage summary:focus-visible {
	outline: 2px solid var(--nb9-ring);
	outline-offset: 3px;
}

.nb9-dl-btn--ghost,
.nb9-page .wp-block-button.is-style-outline .wp-block-button__link,
.nb9-homepage .wp-block-button.is-style-outline .wp-block-button__link,
body.nb9-theme .wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--nb9-surface) !important;
	border: 1px solid var(--nb9-border) !important;
	box-shadow: var(--shadow-xs) !important;
	color: var(--nb9-foreground) !important;
}

.nb9-dl-btn--ghost:hover,
.nb9-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
.nb9-homepage .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--nb9-muted) !important;
	border-color: #d4d4d8 !important;
	color: var(--nb9-foreground) !important;
}

.nb9-dl-btn--header {
	font-size: var(--text-label);
	min-height: var(--btn-h-sm);
	padding: 0 var(--s-4) !important;
	white-space: nowrap;
}

.nb9-dl-btn--sticky {
	width: 100%;
}

.nb9-dl-note {
	color: var(--nb9-muted-fg);
	font-size: var(--text-label);
	margin: var(--s-2) 0 0;
}

.nb9-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin: 0 0 var(--s-4);
}

.nb9-sticky-dl {
	background: rgb(255 255 255 / 92%);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--nb9-border);
	bottom: 0;
	left: 0;
	padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
	position: fixed;
	right: 0;
	z-index: 999;
}

@media (min-width: 881px) {
	.nb9-sticky-dl {
		display: none;
	}
}

/* ---------- Hero (one structure) ---------- */
.nb9-hero {
	background: var(--nb9-card);
	border: 1px solid var(--nb9-border);
	border-radius: var(--r-2xl);
	box-shadow: var(--shadow-md);
	margin: 0 0 var(--space-section-gap);
	overflow: hidden;
	width: 100%;
}

/* Simple hero — every inner page without illustration */
.nb9-hero--simple,
.nb9-hero:not(:has(.nb9-hero-grid)) {
	padding: var(--space-card-pad);
}

@media (min-width: 880px) {
	.nb9-hero--simple,
	.nb9-hero:not(:has(.nb9-hero-grid)) {
		padding: var(--s-12) var(--space-card-pad);
	}
}

.nb9-hero--simple .nb9-actions,
.nb9-hero:not(:has(.nb9-hero-grid)) .nb9-actions,
.nb9-hero--simple .nb9-dl-cta,
.nb9-hero:not(:has(.nb9-hero-grid)) .nb9-dl-cta {
	margin-top: var(--s-2);
	margin-bottom: 0;
}

/* Split hero — home / download / safety */
.nb9-hero--split,
.nb9-hero:has(.nb9-hero-grid) {
	padding: 0;
}

.nb9-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.nb9-hero-grid {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.nb9-hero-copy {
	padding: var(--space-card-pad);
}

@media (min-width: 880px) {
	.nb9-hero-copy {
		padding: var(--s-12) var(--space-card-pad);
	}
}

.nb9-hero-copy h1 {
	max-width: 18ch;
}

.nb9-hero-visual {
	align-items: center;
	background:
		radial-gradient(700px 320px at 80% 10%, #dbeafe 0%, transparent 55%),
		radial-gradient(560px 280px at 10% 90%, #dcfce7 0%, transparent 50%),
		linear-gradient(165deg, #fafafa 0%, #eff6ff 100%);
	border-top: 1px solid var(--nb9-border);
	display: flex;
	justify-content: center;
	min-height: 280px;
	padding: var(--s-12);
	position: relative;
}

@media (min-width: 900px) {
	.nb9-hero-visual {
		border-left: 1px solid var(--nb9-border);
		border-top: 0;
		min-height: 100%;
	}
}

.nb9-hero-visual::after {
	background: radial-gradient(circle at center, rgb(37 99 235 / 12%), transparent 65%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.nb9-phone {
	background: #18181b;
	border-radius: 30px;
	box-shadow: var(--shadow-lg);
	height: 368px;
	padding: 10px;
	position: relative;
	width: 188px;
	z-index: 1;
}

.nb9-phone::before {
	background: #3f3f46;
	border-radius: var(--r-full);
	content: "";
	height: 6px;
	left: 50%;
	position: absolute;
	top: 14px;
	transform: translateX(-50%);
	width: 52px;
	z-index: 2;
}

.nb9-phone__screen {
	background: #fff;
	border-radius: 22px;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	height: 100%;
	overflow: hidden;
	padding: 34px 16px 16px;
}

.nb9-phone__badge {
	background: var(--nb9-success-soft);
	border-radius: var(--r-full);
	color: var(--nb9-success);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 8px;
	text-transform: uppercase;
	width: fit-content;
}

.nb9-phone__title {
	color: var(--nb9-foreground);
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	line-height: 1.2;
	margin: 0;
}

.nb9-phone__meta {
	color: var(--nb9-muted-fg);
	font-size: 11px;
	line-height: 1.4;
	margin: 0;
}

.nb9-phone__btn {
	background: var(--nb9-primary);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-glow);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	margin-top: auto;
	padding: 12px;
	text-align: center;
}

.nb9-phone__row {
	background: var(--nb9-muted);
	border-radius: var(--r-sm);
	height: 8px;
}

.nb9-phone__row--short {
	width: 58%;
}

.nb9-trust-strip {
	border-top: 1px solid var(--nb9-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: var(--s-8);
	padding-top: var(--s-6);
}

.nb9-trust-strip p {
	color: var(--nb9-muted-fg);
	flex: 1 1 140px;
	font-size: var(--text-label);
	margin: 0;
	padding: var(--s-1) var(--s-4) var(--s-1) 0;
}

.nb9-trust-strip strong {
	color: var(--nb9-foreground);
	display: block;
	font-size: var(--text-caption);
	font-weight: 600;
	margin-bottom: var(--s-1);
}

/* ---------- Sections = premium content cards (homepage language) ---------- */
/*
 * Every major block is a card: rounded, soft border, light shadow, 40px pad.
 * Same on Home, Download, Safety, Help, About, Ledger, etc.
 */
.nb9-section:not(.nb9-page-cta):not(.nb9-final-cta),
.nb9-panel,
.nb9-answer {
	background: var(--nb9-card);
	border: 1px solid var(--nb9-border);
	border-radius: var(--r-2xl);
	box-shadow: var(--shadow-sm);
	box-sizing: border-box;
	margin: 0 0 var(--space-section-gap);
	padding: var(--space-card-pad);
	width: 100%;
}

.nb9-section > .wp-block-heading:first-child,
.nb9-section > h2:first-child {
	margin-top: 0;
}

.nb9-section .nb9-dl-cta,
.nb9-section .nb9-actions {
	margin-top: var(--space-cta-gap);
}

.nb9-section .nb9-actions:first-of-type {
	margin-top: 0;
}

/* Callout variant — same card chrome, tinted surface */
.nb9-section.nb9-callout,
.nb9-section.nb9-note,
.nb9-section.nb9-security,
.nb9-section.nb9-alert,
.nb9-callout,
.nb9-note,
.nb9-security,
.nb9-alert {
	background: var(--nb9-success-soft);
	border: 1px solid #bbf7d0;
	border-radius: var(--r-2xl);
	box-shadow: var(--shadow-sm);
	box-sizing: border-box;
	margin: 0 0 var(--space-section-gap);
	padding: var(--space-card-pad);
	width: 100%;
}

.nb9-callout--warning,
.nb9-alert--warning,
.nb9-section.nb9-callout--warning {
	background: var(--nb9-warning-soft);
	border-color: #fde68a;
}

.nb9-callout :where(h2, h3, p),
.nb9-note :where(h2, h3, p),
.nb9-security :where(h2, h3, p),
.nb9-alert :where(h2, h3, p),
.nb9-section.nb9-callout :where(h2, h3, p) {
	text-align: left;
}

/* Nested feature tiles inside a section card */
.nb9-card-grid {
	gap: var(--space-card-gap) !important;
	margin-top: var(--space-content-gap);
}

.nb9-card-grid .wp-block-column {
	background: var(--nb9-background);
	border: 1px solid var(--nb9-border);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-xs);
	padding: var(--s-8);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nb9-card-grid .wp-block-column:hover {
	border-color: #d4d4d8;
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
}

.nb9-step {
	align-items: center;
	background: var(--nb9-primary-soft);
	border-radius: var(--r-full);
	color: var(--nb9-primary);
	display: flex;
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: 600;
	height: 32px;
	justify-content: center;
	margin: 0 0 var(--s-4);
	width: 32px;
}

/* Lists */
.nb9-checklist {
	list-style: none;
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.nb9-checklist li {
	margin: var(--s-3) 0;
	padding-left: 32px;
	position: relative;
}

.nb9-checklist li::before {
	align-items: center;
	background: var(--nb9-success-soft);
	border-radius: var(--r-full);
	color: var(--nb9-success);
	content: "✓";
	display: inline-flex;
	font-size: 10px;
	font-weight: 800;
	height: var(--icon-sm);
	justify-content: center;
	left: 0;
	position: absolute;
	top: 2px;
	width: var(--icon-sm);
}

.nb9-page .wp-block-list,
.nb9-homepage .wp-block-list {
	margin: 0;
	padding-left: var(--s-6);
}

.nb9-page .wp-block-list li,
.nb9-homepage .wp-block-list li {
	margin: var(--s-2) 0;
}

/* Tables */
.nb9-table {
	display: block;
	margin: var(--space-content-gap) 0 0;
	overflow-x: auto;
	width: 100%;
}

.nb9-table table {
	background: var(--nb9-background);
	border: 1px solid var(--nb9-border);
	border-collapse: separate;
	border-radius: var(--r-xl);
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

@media (max-width: 720px) {
	.nb9-table table {
		min-width: 560px;
	}
}

.nb9-table :where(th, td) {
	border-bottom: 1px solid var(--nb9-border);
	border-right: 1px solid var(--nb9-border);
	padding: var(--s-3) var(--s-4);
	text-align: start;
	vertical-align: top;
}

.nb9-table tr :where(th, td):last-child {
	border-right: 0;
}

.nb9-table tbody tr:last-child :where(th, td) {
	border-bottom: 0;
}

.nb9-table th {
	background: var(--nb9-muted);
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* FAQ nested inside section cards */
.nb9-section details,
.nb9-page details,
.nb9-homepage details {
	background: var(--nb9-background);
	border: 1px solid var(--nb9-border);
	border-radius: var(--r-lg);
	box-shadow: none;
	margin: var(--s-2) 0;
	overflow: hidden;
	width: 100%;
}

.nb9-section details:first-of-type {
	margin-top: var(--space-content-gap);
}

.nb9-page summary,
.nb9-homepage summary {
	cursor: pointer;
	font-size: var(--text-caption);
	font-weight: 600;
	list-style: none;
	padding: var(--s-4) var(--s-6);
}

.nb9-page summary::-webkit-details-marker,
.nb9-homepage summary::-webkit-details-marker {
	display: none;
}

.nb9-page details[open] summary,
.nb9-homepage details[open] summary {
	background: var(--nb9-muted);
}

.nb9-page details > :not(summary),
.nb9-homepage details > :not(summary) {
	border-top: 1px solid var(--nb9-border);
	padding: var(--s-4) var(--s-6) var(--s-6);
}

/* Page-end CTA — light card (same language as homepage sections, NOT black) */
.nb9-page-cta,
.nb9-final-cta,
.nb9-section.nb9-page-cta,
.nb9-section.nb9-final-cta {
	background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
	border: 1px solid #bfdbfe;
	border-radius: var(--r-2xl);
	box-shadow: var(--shadow-sm);
	color: var(--nb9-foreground);
	margin: var(--space-section-gap) 0 0;
	padding: var(--space-card-pad);
	text-align: center;
	width: 100%;
}

.nb9-page-cta h2,
.nb9-final-cta h2,
.nb9-page-cta p,
.nb9-final-cta p {
	color: var(--nb9-foreground);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.nb9-page-cta h2,
.nb9-final-cta h2 {
	font-family: var(--font-display);
	font-size: var(--text-heading-l);
	margin-bottom: var(--space-heading-gap);
}

.nb9-page-cta p,
.nb9-final-cta p {
	color: var(--nb9-muted-fg);
	max-width: 40rem;
}

.nb9-page-cta .nb9-dl-note,
.nb9-final-cta .nb9-dl-note {
	color: var(--nb9-muted-fg);
}

.nb9-page-cta .nb9-dl-cta,
.nb9-final-cta .nb9-dl-cta,
.nb9-page-cta .nb9-actions,
.nb9-final-cta .nb9-actions {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: var(--space-cta-gap);
}

.nb9-page-cta .nb9-actions,
.nb9-final-cta .nb9-actions {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.nb9-page-cta .nb9-support,
.nb9-final-cta .nb9-support {
	color: var(--nb9-muted-fg);
	font-size: var(--text-caption);
	margin-top: var(--s-6);
	text-align: center;
}

.nb9-page-cta .nb9-support a,
.nb9-final-cta .nb9-support a {
	color: var(--nb9-primary);
}

/* ---------- Footer ---------- */
.nb9-site-footer {
	background: var(--nb9-surface);
	border-top: 1px solid var(--nb9-border);
	color: var(--nb9-muted-fg);
	font-size: var(--text-caption);
	margin-top: var(--s-16);
	padding: var(--s-24) 0 96px;
	width: 100%;
}

@media (min-width: 881px) {
	.nb9-site-footer {
		padding-bottom: var(--s-24);
	}
}

.nb9-footer-cta {
	background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
	border: 1px solid #bfdbfe;
	border-radius: var(--r-2xl);
	box-shadow: var(--shadow-sm);
	margin-bottom: var(--s-16);
	padding: var(--s-12) var(--s-8);
	text-align: center;
}

.nb9-footer-cta h2 {
	color: var(--nb9-foreground);
	font-family: var(--font-display);
	font-size: var(--text-heading-l);
	margin: 0 0 var(--s-2);
}

.nb9-footer-cta .nb9-dl-cta {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-top: var(--s-6);
}

.nb9-footer-grid {
	gap: var(--s-8) !important;
}

.nb9-footer-grid a {
	color: var(--nb9-muted-fg);
	text-decoration: none;
	transition: color 0.15s ease;
}

.nb9-footer-grid a:hover {
	color: var(--nb9-primary);
}

.nb9-footer-fine {
	border-top: 1px solid var(--nb9-border);
	font-size: var(--text-label);
	margin-top: var(--s-12);
	padding-top: var(--s-6);
}

.nb9-header-spacer {
	display: none;
}

.nb9-site-header {
	align-items: center;
	border-bottom: 1px solid var(--nb9-border);
	display: flex;
	justify-content: flex-start;
	padding: var(--s-4) 0;
}

.nb9-site-header__logo {
	display: inline-flex;
}

.nb9-site-header__logo img {
	display: block;
	height: 44px;
	width: auto;
}

.nb9-footer-logo {
	display: block;
	height: 36px;
	margin-bottom: var(--s-3);
	width: auto;
}

/* ---------- Mobile rhythm ---------- */
@media (max-width: 879px) {
	:root {
		--space-section-gap: var(--s-6);
		--space-card-pad: var(--s-6);
		--page-gutter: var(--s-4);
	}

	.nb9-page,
	.nb9-homepage {
		padding-top: var(--s-6);
		padding-bottom: var(--s-16);
	}

	.nb9-hero-copy,
	.nb9-hero--simple,
	.nb9-hero:not(:has(.nb9-hero-grid)) {
		padding: var(--s-8) var(--s-6);
	}

	.nb9-page-cta,
	.nb9-final-cta,
	.nb9-section.nb9-page-cta,
	.nb9-section.nb9-final-cta {
		padding: var(--s-12) var(--s-6);
	}
}

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

/* Real screenshot inside the existing .nb9-phone mockup frame — additive only. */
.nb9-phone__shot {
	border-radius: 12px;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Curated slot-game tile strip. */
.nb9-game-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin: var(--s-4) 0;
}

.nb9-game-tiles figure {
	margin: 0;
	max-width: 96px;
	text-align: center;
}

.nb9-game-tiles img {
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	display: block;
	height: auto;
	width: 100%;
}

.nb9-game-tiles figcaption {
	color: var(--nb9-muted-fg);
	font-size: 11px;
	margin-top: var(--s-2);
}

/* Captioned inline screenshot card (e.g. rewards/referral screen). */
.nb9-screenshot-card {
	margin: var(--s-4) 0;
	max-width: 320px;
}

.nb9-screenshot-card img {
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	display: block;
	height: auto;
	width: 100%;
}

.nb9-screenshot-card figcaption {
	color: var(--nb9-muted-fg);
	font-size: 12px;
	margin-top: var(--s-2);
}