/*
 * Base layer — global typography, layout wrappers, shared components.
 * Loads after style.css and tokens.css. Blocks reuse these classes,
 * never redefine them (see CLAUDE.md §4).
 *
 * ────────────────────────────────────────────────────────────────────────────
 * "INDUSTRIAL MODERN" IN ONE PARAGRAPH. Read before adding anything.
 *
 * A control room, not a poster. Navy chrome frames the page (a fixed 280px
 * sidebar on desktop, a navy bar on phones, a navy footer), the content sits
 * on an off-white ground in white cards with 8–12px corners, 1px #E5E1E4
 * edges and low navy-tinted shadows. ORANGE MEANS "ACTION OR ACTIVE": the
 * primary button, the active nav bar, the H2 bar, the featured card, a KPI
 * accent. Labels are uppercase Montserrat 900 at wide tracking; prose is
 * 16px Montserrat 500. Motion is the prompt's 200ms standard curve, plus a
 * scale(.95) press on buttons.
 *
 * TWO REGISTERS, same DNA: EXPRESSIVE — hero, casino cards, cta-banner,
 * key-takeaways, the calculator — gets the KPI-card treatment (white cards,
 * orange accents, the dot-grid canvas). READING — content-section, tables,
 * FAQ, callouts, sources, prose — stays calm. Do not dashboard-ify prose.
 * ────────────────────────────────────────────────────────────────────────────
 */

/* ---------- Global ---------- */

html {
	/* In-page anchors glide. NOTE: overflow-x:clip must NOT sit on html —
	   Chromium then refuses smooth/programmatic scrolls. The guard lives on
	   #page instead. */
	scroll-behavior: smooth;
}

#page {
	/* The page never scrolls sideways; wide content lives in its own
	   scroller (.xc8790e22). clip, not hidden, keeps sticky working —
	   and clip creates no containing block, so the fixed sidebar is not
	   clipped by it either. */
	overflow-x: clip;
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Anchor targets land BELOW the sticky header (phone: strip + navy bar ≈ 96;
   desktop: the 80px top bar). */
[id] {
	scroll-margin-top: 112px;
}

body {
	background: var(--sn-bg);
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-base);
	font-weight: 500;
	line-height: var(--sn-lh-body);
	letter-spacing: var(--sn-tracking-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: normal;
}

/*
 * HEADINGS. The prompt's two heading voices:
 *   page title   — 600, tight tracking, sentence case (h1)
 *   section head — 900, UPPERCASE, tracking-tighter (h2)
 * h3 and below are 700 sentence case so a run of sub-sections does not shout.
 *
 * DUTCH COMPOUNDS IN UPPERCASE 900 are the risk of this skin: a word like
 * "VERSLAVINGSPREVENTIE" is wider than a 375px column. lang="nl-NL" plus
 * hyphens:auto (on h2 only) lets the browser break it properly;
 * overflow-wrap is the backstop where no hyphenation dictionary exists.
 */
h1, h2, h3, h4, h5, h6 {
	color: var(--sn-heading);
	font-family: var(--sn-font-display);
	font-weight: 700;
	line-height: var(--sn-lh-heading);
	letter-spacing: var(--sn-tracking-display);
	clear: both;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/*
 * FLUID SIZES — ONE CONTINUOUS RAMP PER LEVEL, no breakpoint step (two clamps
 * meeting at a breakpoint is a standing bug, CLAUDE.md §8 B1). The hero H1 has
 * its own ramp in blocks/hero/style.css; this one is for a template H1.
 */
h1 {
	font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
	font-weight: 600;
	line-height: var(--sn-lh-display);
}

/* Only the UPPERCASE h2 hyphenates — sentence-case headings broke badly
   ("zon-der" in the hero H1 at 375px). */
h2 {
	-webkit-hyphens: auto;
	        hyphens: auto;
	font-size: clamp(var(--sn-fs-xl), 1.1rem + 1.1vw, var(--sn-fs-2xl));
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-tighter);
	line-height: var(--sn-lh-display);
}

h3 {
	font-size: var(--sn-fs-lg);
	letter-spacing: -.015em;
}

h4, h5, h6 {
	letter-spacing: -.01em;
}

/* EXPRESSIVE TYPE — opt-in display scale (no consumer by default). */
.xf9f24ddc {
	font-family: var(--sn-font-display);
	font-size: clamp(2.25rem, 1.5rem + 3vw, var(--sn-fs-5xl));
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: var(--sn-tracking-tighter);
	text-transform: uppercase;
	text-wrap: balance;
}

/* An accent word on navy chrome may be orange (8.47); on the light ground it
   is NOT text-safe (1.93), so it becomes an orange highlighter bar under navy
   type instead. */
.x0bd49b0c {
	color: inherit;
	background: linear-gradient(transparent 62%, var(--sn-signal-tint) 62%);
}

/* Large numerals as graphic shapes. Decorative uses must be aria-hidden; never
   a price, a payout or a multiplier. */
.x9f3e68ee {
	font-family: var(--sn-font-display);
	font-size: clamp(3rem, 2rem + 4vw, var(--sn-fs-5xl));
	font-weight: 900;
	line-height: 1;
	letter-spacing: var(--sn-tracking-tighter);
	font-variant-numeric: tabular-nums;
	color: var(--sn-border);
	user-select: none;
	pointer-events: none;
}

/*
 * SECTION MARKER — the prompt's ACTIVE-NAV INDICATOR, reused: a 4px orange
 * bar with round ends at the left of every content H2, the heading indented
 * past it. The sidebar's active item and the H2s share one mark, which is
 * what makes the page read as one system.
 *
 * The network's fingerprint slot: NL underline, DE vertical cyan rule, SE
 * filled square, TH lozenge, AU2 open ring, FR rule-above, ENG stacked pills,
 * ENG2 mono "01", ENG3 red square on a hairline. Here: the 4px orange bar
 * beside UPPERCASE 900 type — the DE rule was a gradient beside sentence-case
 * Sora on a different site, so the pair is distinct.
 *
 * Do NOT add per-block heading markers on top of this.
 */
.site-main h2 {
	position: relative;
	padding-left: calc(4px + var(--sn-sp-4));
}

.site-main h2::before {
	content: '';
	position: absolute;
	top: .12em;
	bottom: .12em;
	left: 0;
	width: 4px;
	border-radius: 2px;
	background: var(--sn-signal);
}

/*
 * THE EYEBROW — an uppercase 900 label in dark amber (5.86) behind a short
 * orange pill. Michael drops it into a WYSIWYG as <p class="x1ba4ba1a">…</p>.
 */
.x1ba4ba1a {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-2);
	margin: 0 0 var(--sn-sp-3);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-widest);
	color: var(--sn-signal-ink);
}

.x1ba4ba1a::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 4px;
	border-radius: 2px;
	background: var(--sn-signal);
}

/* An eyebrow replaces the section marker — two markers is clutter. */
.x1ba4ba1a + h2,
.x1ba4ba1a + h3 {
	margin-top: 0;
}

.site-main .x1ba4ba1a + h2 {
	padding-left: 0;
}

.site-main .x1ba4ba1a + h2::before {
	display: none;
}

/* Lede — soft ink, relaxed leading, short measure. */
.x770158fa {
	max-width: 60ch;
	font-size: var(--sn-fs-lead);
	line-height: 1.6;
	color: var(--sn-text-soft);
	font-weight: 500;
}

/*
 * THE GLOBAL LINK RULES SIT AT (0,0,1) — `a` plus :where() for the states —
 * so any class rule (a button, the casino-list plugin's CTA) wins by default,
 * while they still beat underscores' style.css, whose own link rules are now
 * :where() too. Until 2026-10-12 these were fully :where() (0,0,0) and LOST
 * to style.css's bare `a { color: #4169e1 }`: every unclassed link on every
 * skin since 2026-08-10 rendered royal blue. As bare
 * `a:hover` (0,1,1) they once repainted a plugin CTA's label onto its own
 * background, permanently in the :visited case (CLAUDE.md §12, 2026-08-10).
 * ORDER IS LVHA and must stay that way.
 */
a {
	color: var(--sn-heading);
	text-decoration: none;
}

a:where(:visited) {
	color: var(--sn-heading);
}

a:where(:hover, :focus) {
	color: var(--sn-signal-ink);
}

/*
 * PROSE LINKS: navy, 600, with a 2px ORANGE underline. Colour alone cannot
 * mark a link (navy links in navy-ish text), so the underline IS the
 * affordance — a graphic mark, where orange is legal. Hover: dark amber text.
 */
:where(.site-main, .x78e309e7) :where(p, li, td, th, dd, blockquote) a {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--sn-signal);
	text-underline-offset: .2em;
	text-decoration-thickness: var(--sn-border-thick);
}

:where(.site-main, .x78e309e7) :where(p, li, td, th, dd, blockquote) :where(.xd13150f3, .x05b2e6b9, .xb6731027, .x5add6584, .xf9f05e8a) {
	text-decoration: none;
}

/* Keyboard focus — a 2px navy outline; orange on the navy chrome (8.47). */
:focus-visible {
	outline: var(--sn-border-thick) solid var(--sn-heading);
	outline-offset: 3px;
}

:root {
	accent-color: var(--sn-signal);
	caret-color: var(--sn-heading);
	color-scheme: light;
}

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

/* Content lists: ONE compact hanging indent (underscores double-indents). */
ul,
ol {
	margin: 0 0 1.5em;
	padding-left: var(--sn-sp-6);
}

li > ul,
li > ol {
	margin: var(--sn-sp-1) 0 0;
}

/* Orange bullets in prose. Class-styled lists set list-style themselves. */
:where(.site-main, .x78e309e7) :where(ul:not([class])) > li::marker {
	color: var(--sn-signal);
}

:where(.site-main, .x78e309e7) :where(ol:not([class])) > li::marker {
	color: var(--sn-heading);
	font-weight: 800;
}

strong, b {
	font-weight: 700;
}

/* Selection: orange, navy type (8.47). */
::selection {
	background: var(--sn-signal);
	color: var(--sn-heading);
}

/* ---------- Layout wrappers ---------- */

.xa5760b39 {
	width: 100%;
	max-width: var(--sn-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sn-sp-4);
	padding-right: var(--sn-sp-4);
}

.xac7c1eea {
	max-width: min(var(--sn-container-wide), 1600px);
}

.x78e309e7 {
	width: 100%;
	max-width: var(--sn-content);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sn-sp-4);
	padding-right: var(--sn-sp-4);
}

@media (min-width: 768px) {
	.xa5760b39,
	.x78e309e7 {
		padding-left: var(--sn-sp-6);
		padding-right: var(--sn-sp-6);
	}
}

/*
 * THE SIDEBAR SHIFT. From 1200px the whole page moves right by the 280px rail
 * (header.php). Padding on #page rather than margins on each region, so the
 * top bar, main and footer all move together and nothing has to know.
 * Gutters grow to 32px — the prompt asks 40, which would cost the casino grid
 * its fourth column at 1440 (tokens.css LAYOUT).
 */
@media (min-width: 1200px) {
	#page {
		padding-left: var(--sn-sidebar);
	}

	.xa5760b39,
	.x78e309e7 {
		padding-left: var(--sn-sp-8);
		padding-right: var(--sn-sp-8);
	}
}

/* THE 12-COLUMN GRID. Gutter 24px. */
.x3237c96b {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sn-sp-6);
}

.x3237c96b > * {
	grid-column: 1 / -1;
	min-width: 0;
}

/* ---------- Buttons ---------- */

/*
 * THE ORANGE PILL — the prompt's primary button, used for every CTA: solid
 * #F7A526, rounded-full, UPPERCASE 900 label at .08em, shadow, and a
 * scale(.95) press. THE LABEL IS NAVY (8.47) — white on this orange is 2.03:1
 * and is banned (tokens.css).
 *
 * INK NEVER GOES THROUGH `color`, ALWAYS THROUGH --sn-btn-ink. This bug has
 * shipped twice: a `.xd13150f3:visited { color }` of equal specificity repainted
 * a recoloured label onto its own background after one click.
 *
 * THE ARROW is a CSS mask (base64 SVG — the base64 alphabet has no `-`, so it
 * can never collide with inc/skin-hash.php's `sn-` rewrite), painted in
 * currentColor so it follows the label through every state.
 */
.xd13150f3 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-3) var(--sn-sp-6);
	border: var(--sn-border-thick) solid var(--sn-primary);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-primary);
	color: var(--sn-btn-ink, #151936);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	line-height: var(--sn-lh-compact);
	min-height: 48px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--sn-shadow-md);
	transition: all var(--sn-motion) var(--sn-ease);
}

.xd13150f3::after {
	content: '';
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyJyBzdHJva2UtbGluZWNhcD0nc3F1YXJlJz48cGF0aCBkPSdNNCAxMmgxNU0xMyA2bDYgNi02IDYnLz48L3N2Zz4=") center / contain no-repeat;
	        mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyJyBzdHJva2UtbGluZWNhcD0nc3F1YXJlJz48cGF0aCBkPSdNNCAxMmgxNU0xMyA2bDYgNi02IDYnLz48L3N2Zz4=") center / contain no-repeat;
	transition: transform var(--sn-motion) var(--sn-ease);
}

.xd13150f3:hover,
.xd13150f3:focus {
	background: var(--sn-primary-hover);
	border-color: var(--sn-primary-hover);
	color: var(--sn-btn-ink, #151936);
	text-decoration: none;
	box-shadow: var(--sn-glow);
}

.xd13150f3:hover::after,
.xd13150f3:focus::after {
	transform: translateX(3px);
}

/* Press: the prompt's scale(.95). */
.xd13150f3:active {
	background: var(--sn-primary-press);
	border-color: var(--sn-primary-press);
	transform: scale(.95);
}

.xd13150f3:visited {
	color: var(--sn-btn-ink, #151936);
}

/* OUTLINE — the prompt's second CTA: 2px navy border, navy label; fills navy
   with a white label on hover (17.15). */
.x05b2e6b9 {
	background: transparent;
	border-color: var(--sn-border-ink);
	box-shadow: none;
	--sn-btn-ink: var(--sn-heading);
}

.x05b2e6b9:hover,
.x05b2e6b9:focus {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
	box-shadow: var(--sn-shadow-md);
	--sn-btn-ink: #FFFFFF;
}

.x05b2e6b9:active {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
}

/* DARK — the prompt's black "Force Sync" pill, for use ON an orange surface
   (black on orange 10.36; white on black 21). */
.xf9f05e8a {
	background: #000000;
	border-color: #000000;
	box-shadow: none;
	--sn-btn-ink: #FFFFFF;
}

.xf9f05e8a:hover,
.xf9f05e8a:focus,
.xf9f05e8a:active {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
	box-shadow: none;
	--sn-btn-ink: #FFFFFF;
}

/* TONAL — surface-2 fill; its edge is --sn-border-strong because the fill
   alone is not a boundary. */
.xb6731027 {
	background: var(--sn-surface-2);
	border-color: var(--sn-surface-2);
	box-shadow: none;
	--sn-btn-ink: var(--sn-heading);
}

.xb6731027:hover,
.xb6731027:focus,
.xb6731027:active {
	background: var(--sn-surface);
	border-color: var(--sn-border-strong);
	box-shadow: var(--sn-shadow);
	--sn-btn-ink: var(--sn-heading);
}

/* TEXT — uppercase 900 navy over a 2px orange underline. */
.x5add6584 {
	min-height: 44px;
	padding: var(--sn-sp-2) 0;
	border-color: transparent;
	border-radius: 0;
	background: linear-gradient(var(--sn-signal), var(--sn-signal)) left bottom / 100% var(--sn-border-thick) no-repeat;
	box-shadow: none;
	--sn-btn-ink: var(--sn-heading);
}

.x5add6584:hover,
.x5add6584:focus,
.x5add6584:active {
	background: linear-gradient(var(--sn-signal), var(--sn-signal)) left bottom / 100% 4px no-repeat;
	border-color: transparent;
	box-shadow: none;
	transform: none;
	--sn-btn-ink: var(--sn-heading);
}

@media (prefers-reduced-motion: reduce) {
	.xd13150f3,
	.xd13150f3::after,
	.xd13150f3:hover::after,
	.xd13150f3:focus::after,
	.xd13150f3:active {
		transform: none;
		transition: none;
	}
}

/* ---------- Inputs ---------- */

/*
 * 8px corners on the #F6F2F6 input fill, 1px --sn-border-strong edge (4.17 —
 * a #E5E1E4 hairline input is not an input). 16px text so iOS does not zoom.
 * Focus: navy edge plus a soft orange ring.
 */
.xfaed8140,
.x78e309e7 input[type='text'],
.x78e309e7 input[type='email'],
.x78e309e7 input[type='search'],
.x78e309e7 input[type='number'],
.x78e309e7 textarea,
.search-form input[type='search'] {
	width: 100%;
	min-height: 48px;
	padding: var(--sn-sp-3) var(--sn-sp-4);
	background: var(--sn-input);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: var(--sn-radius);
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-base);
	font-weight: 500;
	transition: border-color var(--sn-motion) var(--sn-ease),
	            box-shadow var(--sn-motion) var(--sn-ease),
	            background var(--sn-motion) var(--sn-ease);
}

.xfaed8140:focus,
.x78e309e7 input:focus,
.x78e309e7 textarea:focus,
.search-form input[type='search']:focus {
	background: var(--sn-surface);
	border-color: var(--sn-heading);
	box-shadow: 0 0 0 3px var(--sn-signal-tint);
}

.xfaed8140::placeholder,
.x78e309e7 input::placeholder,
.x78e309e7 textarea::placeholder {
	color: var(--sn-text-muted);
	opacity: 1;
}

/* ---------- Card state layer (the "flood") ---------- */

/*
 * Card hover: the edge darkens and the card picks up the medium shadow. No
 * movement — the prompt's micro-interactions are colour and shadow, and a
 * lifting card on a list page reads as a layout shift.
 *
 * INK ROUTES THROUGH CUSTOM PROPERTIES, never a descendant `*` rule (that
 * would outrank the block rules that own each element's contrast — CLAUDE.md
 * §12, 2026-08-10). NO CONTENT MAY APPEAR only on hover (§7).
 */
.xdd4b7d06 {
	--sn-ink: var(--sn-heading);
	--sn-ink-muted: var(--sn-text-muted);
	--sn-ink-rule: var(--sn-border);
	transition: box-shadow var(--sn-motion) var(--sn-ease),
	            border-color var(--sn-motion) var(--sn-ease);
}

.xdd4b7d06:hover,
.xdd4b7d06:focus-within {
	border-color: var(--sn-border-strong);
	box-shadow: var(--sn-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
	.xdd4b7d06,
	.xdd4b7d06:hover,
	.xdd4b7d06:focus-within {
		transition: none;
	}
}

/* ---------- Canvas panels ---------- */

/* The dot-grid feature surface. `--lean` is inert on this skin (the token
   resolves to none) and kept only so older markup does not break. */
.xd24b3561 {
	background: var(--sn-pat-canvas);
	border-radius: var(--sn-radius-lg);
}

.x5a2e2379 {
	clip-path: var(--sn-clip-lean-m);
}

/*
 * THE LOGO MARK (header.php / footer.php render it as inline SVG): an orange
 * tile, a navy play-triangle, a navy notch. Fills come from here so the mark
 * follows the tokens.
 */
.xa25d867f {
	display: block;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.x82ac6f73  { fill: var(--sn-signal); }
.x37ae56b5  { fill: var(--sn-heading); }
.xb3bcc91c { fill: #121A36; }

/* .xe249dbef — the same mark as a pure-CSS tile for places without markup
   control (the 404). Size with `--sn-glyph`. */
.xe249dbef {
	--sn-glyph: 40px;
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: var(--sn-glyph);
	height: var(--sn-glyph);
	border-radius: calc(var(--sn-glyph) / 4);
	background: var(--sn-signal);
	vertical-align: middle;
}

.xe249dbef::after {
	content: '';
	position: absolute;
	inset: 26% 22% 26% 36%;
	background: var(--sn-heading);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- Section rhythm ---------- */

.x37b1855b {
	padding-top: var(--sn-sp-12);
	padding-bottom: var(--sn-sp-12);
}

@media (min-width: 1024px) {
	.x37b1855b {
		padding-top: var(--sn-sp-16);
		padding-bottom: var(--sn-sp-16);
	}
}

.xf2d17175 {
	border: 0;
	border-top: var(--sn-border-w) solid var(--sn-border);
	margin: var(--sn-sp-12) 0;
}

/* ---------- Images (rendered by blocks) ---------- */

.x080bc6da {
	display: block;
	border-radius: var(--sn-radius);
	height: auto;
	max-width: 100%;
}

/* The one image interaction: the picture scales inside a clipped box. */
.x4c82797f {
	overflow: hidden;
	display: block;
	border-radius: var(--sn-radius-lg);
}

.x4c82797f .x080bc6da {
	border-radius: 0;
	transition: transform var(--sn-motion-slow) var(--sn-ease);
}

.x4c82797f:hover .x080bc6da,
.x4c82797f:focus-within .x080bc6da {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.x4c82797f .x080bc6da,
	.x4c82797f:hover .x080bc6da {
		transform: none;
		transition: none;
	}
}

/* ---------- Shared table base ---------- */

/*
 * THE PROMPT'S DATA TABLE: a white card (1px edge, 12px corners), a
 * #F0EDF0 head band with UPPERCASE 900 11px labels at .08em, 1px row rules,
 * and a #F6F2F6 row hover.
 *
 * WHENEVER THE THEAD TREATMENT CHANGES, re-check the sticky corner in
 * blocks/comparison-table/style.css — it must be painted the SAME colour as
 * the head band (--sn-surface-2 here). Wrong on three separate market passes.
 */
.xc8790e22 {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	box-shadow: var(--sn-shadow);
}

.x856d32ac {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--sn-fs-sm);
	font-variant-numeric: tabular-nums;
}

.x856d32ac th,
.x856d32ac td {
	padding: var(--sn-sp-4) var(--sn-sp-5);
	border: 0;
	text-align: left;
	vertical-align: top;
}

.x856d32ac thead th {
	padding-top: var(--sn-sp-5);
	padding-bottom: var(--sn-sp-5);
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
	border-bottom: var(--sn-border-w) solid var(--sn-border);
}

.x856d32ac tbody tr {
	background: transparent;
	transition: background var(--sn-motion) var(--sn-ease);
}

.x856d32ac tbody td,
.x856d32ac tbody th {
	border-bottom: var(--sn-border-w) solid var(--sn-border);
}

.x856d32ac tbody tr:last-child td,
.x856d32ac tbody tr:last-child th {
	border-bottom: 0;
}

.x856d32ac tbody tr:hover {
	background: var(--sn-state-hover);
}

/* WYSIWYG tables (auto-wrapped by sterrennacht_wrap_naked_tables) keep their
   header cells in the first body row — style them like a thead. */
.x3d640519 tr:first-child th {
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
}

.x3d640519 td {
	min-width: 120px;
}

/* ---------- Panels ---------- */

/* The KPI card: white on the off-white ground, 1px edge, 12px corners. */
.x81c238ba {
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	padding: var(--sn-sp-6);
	box-shadow: var(--sn-shadow);
}

@media (min-width: 768px) {
	.x81c238ba {
		padding: var(--sn-sp-8);
	}
}

/* ---------- Site header (T1) ---------- */

/*
 * ONE MARKUP, TWO LAYOUTS (see header.php):
 *   < 1200px  light compliance strip + NAVY bar (mark, name, hamburger);
 *             the menu drops as a full-width navy panel.
 *   ≥ 1200px  the strip becomes the prompt's 80px sticky top bar with a
 *             search pill; .x3df4a7c0 becomes the fixed 280px sidebar.
 *
 * NOTHING ON .x0f873a2f MAY SET transform, filter OR backdrop-filter: any of
 * them would make the header the containing block of the position:fixed rail
 * and the sidebar would scroll away with a 100px-tall header. The blur lives
 * on the topbar, which is a sibling of the rail, not its ancestor.
 */
.x0f873a2f {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .x0f873a2f {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .x0f873a2f {
		top: 32px;
	}
}

/* The 18+ compliance strip. Static, never animated, never collapsed. */
.x34c0fd24 {
	background: var(--sn-surface);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
	font-size: var(--sn-fs-xs);
	font-weight: 600;
	color: var(--sn-text-muted);
}

.x8b28e0fb {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sn-sp-4);
	padding: var(--sn-sp-2) var(--sn-sp-4);
}

.xb7c9baca {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-2);
	margin: 0;
	line-height: 1.35;
}

/*
 * The 18+ badge — a navy pill with white type (17.15). CONTENT, never
 * aria-hidden (§7). Deliberately NOT orange: the age limit is information,
 * and orange on this skin means "click me".
 */
.x9f4373ba {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 2px var(--sn-sp-2);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-heading);
	color: #FFFFFF;
	font-family: var(--sn-font);
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

/* Search pill — desktop top bar only. */
.x6e1350a4 {
	display: none;
}

/* The navy chrome: a bar on phones, the sidebar from 1200px. */
.x3df4a7c0 {
	position: relative;
	background: var(--sn-purple);
	color: var(--sn-on-chrome);
}

.x3df4a7c0 :focus-visible {
	outline-color: var(--sn-signal);
}

.x0771fd67 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sn-sp-4);
	min-height: 60px;
	padding: var(--sn-sp-2) var(--sn-sp-4);
}

.x3823ee3f {
	flex: 0 1 auto;
	min-width: 0;
}

.xb9a1bc58 {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	color: var(--sn-on-chrome);
	text-decoration: none;
}

.xb9a1bc58:hover,
.xb9a1bc58:focus,
.xb9a1bc58:visited {
	color: var(--sn-on-chrome);
}

.xb9a1bc58 .xa25d867f {
	width: 36px;
	height: 36px;
	transition: transform var(--sn-motion) var(--sn-ease);
}

.xb9a1bc58:hover .xa25d867f {
	transform: rotate(-6deg);
}

@media (prefers-reduced-motion: reduce) {
	.xb9a1bc58 .xa25d867f {
		transition: none;
	}
}

.x40ee49e4 {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* Brand name — prompt: weight 900, 18px. */
.x59b8c9d6 {
	font-family: var(--sn-font-display);
	font-size: 1rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Sub-headline — prompt: weight 700, 9px, uppercase. Muted lilac (7.26). */
.x93ba745d {
	font-size: var(--sn-fs-3xs);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-widest);
	color: var(--sn-on-chrome-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 380px) {
	.x93ba745d {
		display: none;
	}
}

.x0f873a2f .custom-logo {
	max-height: 44px;
	width: auto;
}

.x50828db0 {
	/* Static, so the mobile drop panel positions against the full-width rail.
	   Underscores sets .main-navigation to width:100%; flex keeps the
	   hamburger pinned right. */
	position: static;
	width: auto;
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.xf7dd9bd0 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--sn-sp-2);
	background: transparent;
	border: var(--sn-border-w) solid var(--sn-chrome-rule);
	border-radius: var(--sn-radius);
	color: var(--sn-on-chrome);
	cursor: pointer;
	transition: all var(--sn-motion) var(--sn-ease);
}

.xf7dd9bd0:hover,
.xf7dd9bd0:focus,
.x50828db0.toggled .xf7dd9bd0 {
	background: var(--sn-signal);
	border-color: var(--sn-signal);
	color: var(--sn-heading);
}

.xf7dd9bd0:active {
	transform: scale(.95);
}

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

/* Mobile: full-width navy drop panel under the bar. */
.x50828db0 > ul,
.x50828db0 > div > ul {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding: var(--sn-sp-2) var(--sn-sp-4) var(--sn-sp-4);
	background: var(--sn-purple);
	border-top: var(--sn-border-w) solid var(--sn-chrome-rule);
	box-shadow: var(--sn-shadow-lg);
}

.x50828db0.toggled > ul,
.x50828db0.toggled > div > ul {
	display: block;
}

/*
 * NAV LINKS — the prompt's sidebar items on every width: 14px 600, white at
 * 80% resting, white on hover over a white/10 wash; the ACTIVE item gets the
 * wash plus the 4×24px orange bar at its far left.
 */
.x50828db0 li {
	position: relative;
}

.x50828db0 li a {
	position: relative;
	display: block;
	padding: var(--sn-sp-3) var(--sn-sp-4);
	border-radius: var(--sn-radius);
	color: rgba(255, 255, 255, .82);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: all var(--sn-motion) var(--sn-ease);
}

.x50828db0 li a:visited {
	color: rgba(255, 255, 255, .82);
}

.x50828db0 li a:hover,
.x50828db0 li a:focus {
	background: var(--sn-chrome-hover);
	color: var(--sn-on-chrome);
	text-decoration: none;
}

.x50828db0 li.current-menu-item > a,
.x50828db0 li.current_page_item > a,
.x50828db0 li.current-menu-ancestor > a {
	background: var(--sn-chrome-hover);
	color: var(--sn-on-chrome);
}

.x50828db0 li.current-menu-item > a::after,
.x50828db0 li.current_page_item > a::after {
	content: '';
	position: absolute;
	left: calc(-1 * var(--sn-sp-4));
	top: 50%;
	width: 4px;
	height: 24px;
	margin-top: -12px;
	border-radius: 0 2px 2px 0;
	background: var(--sn-signal);
}

/* Chevron on parent items (rotates when open via .focus — navigation.js). */
.x50828db0 li.menu-item-has-children > a::before,
.x50828db0 li.page_item_has_children > a::before {
	content: '';
	position: absolute;
	right: var(--sn-sp-4);
	top: 50%;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	padding: 2.5px;
	transform: translateY(-75%) rotate(45deg);
	transition: transform var(--sn-motion) var(--sn-ease);
}

.x50828db0 li.menu-item-has-children.focus > a::before,
.x50828db0 li.page_item_has_children.focus > a::before {
	transform: translateY(-25%) rotate(225deg);
}

.x50828db0 li.menu-item-has-children > a,
.x50828db0 li.page_item_has_children > a {
	padding-right: var(--sn-sp-10);
}

/* Mobile submenu: nested inline behind a hairline, collapsed until the
   parent gets .focus. Overrides underscores' -999em positioning. */
.x50828db0 ul ul {
	display: none;
	position: static;
	float: none;
	margin: var(--sn-sp-1) 0 var(--sn-sp-2) var(--sn-sp-4);
	padding: 0 0 0 var(--sn-sp-2);
	border-left: var(--sn-border-w) solid var(--sn-chrome-rule);
	box-shadow: none;
}

.x50828db0 li.focus > ul {
	display: block;
	left: auto;
}

/* Underscores force-opens all nested uls when .toggled — collapse them back. */
.x50828db0.toggled ul ul {
	display: none;
}

.x50828db0.toggled li.focus > ul {
	display: block;
}

.x50828db0 ul ul a {
	width: auto; /* underscores forces 200px */
	font-size: var(--sn-fs-sm);
	font-weight: 500;
}

.x50828db0 ul ul li.current-menu-item > a::after,
.x50828db0 ul ul li.current_page_item > a::after {
	left: calc(-1 * var(--sn-sp-2) - 2px);
}

/*
 * SUBMENU TOGGLE BUTTON — injected by assets/js/nav.js beside every parent
 * link, which then navigates to its own page. [data-sn-collapsible] is set by
 * the same script, so without JS the button never shows and the CSS chevron
 * on the link (above) keeps working.
 */
.x28fe2a1f {
	display: none;
}

.x50828db0[data-sn-collapsible] .x28fe2a1f {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: calc(var(--sn-sp-3) * 2 + 1.35em);
	padding: 0;
	border: 0;
	border-radius: var(--sn-radius);
	background: transparent;
	color: var(--sn-on-chrome-muted);
	font-size: var(--sn-fs-sm);
	cursor: pointer;
	transition: all var(--sn-motion) var(--sn-ease);
}

.x50828db0[data-sn-collapsible] .x28fe2a1f:hover {
	background: var(--sn-chrome-hover);
	color: var(--sn-on-chrome);
}

.x50828db0[data-sn-collapsible] .x28fe2a1f::before {
	content: '';
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	padding: 2.5px;
	transform: translateY(-25%) rotate(45deg);
	transition: transform var(--sn-motion) var(--sn-ease);
}

.x50828db0[data-sn-collapsible] li.is-open > .x28fe2a1f::before {
	transform: translateY(25%) rotate(225deg);
}

.x50828db0[data-sn-collapsible] li.menu-item-has-children > a::before,
.x50828db0[data-sn-collapsible] li.page_item_has_children > a::before {
	display: none;
}

.x50828db0[data-sn-collapsible] li.is-open > ul {
	display: block;
}

/* The help card belongs to the desktop sidebar. */
.x1406b005 {
	display: none;
}

/* ---- Desktop: the 80px top bar + the fixed 280px sidebar ---- */
@media (min-width: 1200px) {
	.x34c0fd24 {
		background: color-mix(in srgb, var(--sn-bg) 90%, transparent);
		-webkit-backdrop-filter: saturate(1.4) blur(12px);
		        backdrop-filter: saturate(1.4) blur(12px);
		font-size: var(--sn-fs-sm);
	}

	.x8b28e0fb {
		height: var(--sn-topbar-h);
		padding: 0 var(--sn-sp-8);
	}

	/* The prompt's search: pill, #F6F2F6, 48px left padding for the icon. */
	.x6e1350a4 {
		position: relative;
		display: block;
		flex: 0 1 380px;
	}

	.x6e1350a4 svg {
		position: absolute;
		left: var(--sn-sp-5);
		top: 50%;
		margin-top: -9px;
		color: var(--sn-text-muted);
		pointer-events: none;
	}

	.x6e1350a4 input[type='search'] {
		width: 100%;
		height: 48px;
		padding: 0 var(--sn-sp-5) 0 48px;
		border: var(--sn-border-w) solid var(--sn-border-strong);
		border-radius: var(--sn-radius-pill);
		background: var(--sn-input);
		color: var(--sn-text);
		font-family: var(--sn-font);
		font-size: var(--sn-fs-sm);
		font-weight: 500;
		transition: all var(--sn-motion) var(--sn-ease);
	}

	.x6e1350a4 input[type='search']::placeholder {
		color: var(--sn-text-muted);
		opacity: 1;
	}

	.x6e1350a4 input[type='search']:focus {
		outline: none;
		background: var(--sn-surface);
		border-color: var(--sn-heading);
		box-shadow: 0 0 0 3px var(--sn-signal-tint);
	}

	.x3df4a7c0 {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 101;
		display: flex;
		flex-direction: column;
		gap: var(--sn-sp-6);
		width: var(--sn-sidebar);
		padding: var(--sn-sp-6) var(--sn-sp-4);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--sn-chrome-rule) transparent;
	}

	.admin-bar .x3df4a7c0 {
		top: 32px;
	}

	.x0771fd67 {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sn-sp-8);
		min-height: 0;
		padding: 0;
	}

	.x3823ee3f {
		padding: 0 var(--sn-sp-2);
	}

	.xb9a1bc58 .xa25d867f {
		width: 40px;
		height: 40px;
	}

	.x59b8c9d6 {
		font-size: 1.125rem;
	}

	.xf7dd9bd0 {
		display: none;
	}

	.x50828db0 {
		display: block;
	}

	.x50828db0 > ul,
	.x50828db0 > div > ul {
		display: grid !important; /* Beat underscores' .main-navigation rules. */
		gap: 2px;
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	/* In a sidebar there is room: submenus are always open, indented. */
	.x50828db0 ul ul,
	.x50828db0.toggled ul ul {
		display: block;
		position: static;
		left: auto;
		margin: 2px 0 var(--sn-sp-2) var(--sn-sp-4);
	}

	.x50828db0 ul ul a {
		padding-top: var(--sn-sp-2);
		padding-bottom: var(--sn-sp-2);
		font-size: .8125rem;
		color: var(--sn-on-chrome-muted);
	}

	.x50828db0 li.menu-item-has-children > a::before,
	.x50828db0 li.page_item_has_children > a::before {
		display: none;
	}

	.x50828db0 li.menu-item-has-children > a,
	.x50828db0 li.page_item_has_children > a {
		padding-right: var(--sn-sp-4);
	}

	.x50828db0[data-sn-collapsible] li.menu-item-has-children > a,
	.x50828db0[data-sn-collapsible] li.page_item_has_children > a {
		padding-right: 48px;
	}

	/* With JS the sidebar submenus collapse; the current section starts open. */
	.x50828db0[data-sn-collapsible] li:not(.is-open) > ul {
		display: none;
	}

	/*
	 * RAIL LAYOUT (2026-10-16, staging: the menu ran UNDER the help card).
	 * The brand stays at the top, the help card at the bottom, and the NAV is
	 * the one region that scrolls between them. Before, .x0771fd67 had
	 * min-height:0 as a shrinkable flex item while its content stayed visible,
	 * so a long menu overflowed its box and painted across the card. The nav's
	 * negative side margin keeps the active item's orange bar (left:-16px)
	 * inside the scroll box, which would otherwise clip it.
	 */
	.x0771fd67 {
		flex: 1 1 auto;
		gap: var(--sn-sp-6);
	}

	.x3823ee3f {
		flex: none;
	}

	.x50828db0 {
		flex: 1 1 auto;
		min-height: 0;
		margin: 0 calc(-1 * var(--sn-sp-4));
		padding: 0 var(--sn-sp-4);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--sn-chrome-rule) transparent;
	}

	/*
	 * THE ORANGE CARD — the prompt's sync widget, as the help card. Navy ink
	 * on orange (8.47), the black pill button (white 21:1). It never shrinks;
	 * the nav above it scrolls instead.
	 */
	.x1406b005 {
		display: block;
		flex: none;
		margin-top: 0;
		padding: var(--sn-sp-5);
		border-radius: var(--sn-radius-lg);
		background: var(--sn-signal);
		color: var(--sn-heading);
	}

	.x1406b005 :focus-visible {
		outline-color: var(--sn-heading);
	}

	.xd3b2fab0 {
		display: flex;
		align-items: center;
		gap: var(--sn-sp-2);
		margin: 0 0 var(--sn-sp-3);
		font-size: var(--sn-fs-3xs);
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: var(--sn-tracking-widest);
	}

	.xfb0bc6a0 {
		margin: 0 0 var(--sn-sp-1);
		font-size: var(--sn-fs-base);
		font-weight: 900;
		line-height: 1.25;
	}

	.xe1a29733 {
		margin: 0 0 var(--sn-sp-4);
		font-size: var(--sn-fs-xs);
		font-weight: 600;
		line-height: 1.5;
	}

	.x8f6997f8,
	.x8f6997f8:visited {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--sn-sp-2);
		min-height: 44px;
		padding: var(--sn-sp-2) var(--sn-sp-4);
		border-radius: var(--sn-radius-pill);
		background: #000000;
		color: #FFFFFF;
		font-size: var(--sn-fs-2xs);
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: var(--sn-tracking-label);
		text-decoration: none;
		transition: all var(--sn-motion) var(--sn-ease);
	}

	.x8f6997f8:hover,
	.x8f6997f8:focus {
		background: var(--sn-heading);
		color: #FFFFFF;
	}

	.x8f6997f8:active {
		transform: scale(.95);
	}

	.x90429c5a,
	.x90429c5a:visited {
		display: inline-block;
		margin-top: var(--sn-sp-3);
		color: var(--sn-heading);
		font-size: var(--sn-fs-xs);
		font-weight: 700;
		text-decoration: underline;
		text-underline-offset: .2em;
	}

	.x90429c5a:hover,
	.x90429c5a:focus {
		color: #000000;
	}
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
	.x8f6997f8:active {
		transform: none;
	}
}

/* ---------- Site footer (T2) ---------- */

/*
 * The navy footer: the same chrome as the sidebar, so on desktop the two read
 * as one L-shaped frame. White 17.15, muted lilac 7.26, orange 8.47 (legal as
 * ink on navy — used for hover underlines only). Deliberately NOT orange as a
 * ground: an orange band carrying the 18+ badge would read as an advert.
 */
.x323a4f6e {
	margin-top: var(--sn-sp-16);
	background: var(--sn-purple-deep);
	color: var(--sn-on-chrome-muted);
	font-size: var(--sn-fs-sm);
}

.x323a4f6e :focus-visible {
	outline-color: var(--sn-signal);
}

/* Row 1: brand + about | menus, on the 12-column grid (5 / 3 / 3). */
.x50c33665 {
	display: grid;
	gap: var(--sn-sp-8);
	padding: var(--sn-sp-12) 0 var(--sn-sp-10);
}

.x50c33665 > * {
	min-width: 0;
}

.xdc1f365c {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	margin: 0 0 var(--sn-sp-4);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-lg);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.x3d649f0b {
	margin: 0;
	max-width: 52ch;
	line-height: 1.7;
}

.x5fd260e6 {
	margin: 0 0 var(--sn-sp-4);
	color: var(--sn-on-chrome);
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
}

.xff09cfc3 {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sn-sp-3);
}

.xff09cfc3 a,
.xff09cfc3 a:visited {
	color: var(--sn-on-chrome-muted);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--sn-motion) var(--sn-ease);
}

.xff09cfc3 a:hover,
.xff09cfc3 a:focus {
	color: var(--sn-on-chrome);
	text-decoration: underline;
	text-decoration-color: var(--sn-signal);
	text-decoration-thickness: var(--sn-border-thick);
	text-underline-offset: 4px;
}

/* Row 2: responsible-gambling strip — compliance made prominent. STATIC by
   requirement: no animation, no reveal, no hover-only content (§7). */
.xb1bd03ea {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-4);
	padding: var(--sn-sp-6);
	border: var(--sn-border-w) solid var(--sn-chrome-rule);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-chrome-hover);
}

.x1a7705e3 {
	display: flex;
	align-items: flex-start;
	gap: var(--sn-sp-3);
}

.x1a7705e3 p {
	margin: 0;
	color: var(--sn-on-chrome);
	font-weight: 600;
	max-width: 70ch;
}

/* On navy the badge inverts: white pill, navy type. */
.x323a4f6e .x9f4373ba {
	background: var(--sn-on-chrome);
	color: var(--sn-heading);
	margin-top: 1px;
}

.xed6c82dd {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sn-sp-2);
	margin: 0;
	padding: 0;
}

/*
 * Outlined pills — informational, not the action. Edge #7D809C (4.44 on navy,
 * a real control boundary). NOT uppercase: "KANSSPELAUTORITEIT" is harder to
 * recognise than the name as written, and this strip is where recognition
 * beats styling.
 */
.xed6c82dd a,
.xed6c82dd a:visited {
	display: inline-block;
	padding: var(--sn-sp-2) var(--sn-sp-4);
	border: var(--sn-border-w) solid #7D809C;
	border-radius: var(--sn-radius-pill);
	color: var(--sn-on-chrome);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	text-decoration: none;
	transition: all var(--sn-motion) var(--sn-ease);
}

.xed6c82dd a:hover,
.xed6c82dd a:focus {
	background: var(--sn-on-chrome);
	border-color: var(--sn-on-chrome);
	color: var(--sn-heading);
	text-decoration: none;
}

/* Row 3: copyright + disclosure. */
.x4ed77c95 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-3);
	padding: var(--sn-sp-6) 0 var(--sn-sp-8);
	font-size: var(--sn-fs-xs);
	color: var(--sn-on-chrome-muted);
}

.x2f0330c0,
.x5d7db166 {
	margin: 0;
}

.x2f0330c0 {
	font-weight: 700;
}

@media (min-width: 768px) {
	.x50c33665 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--sn-sp-6);
	}

	.x50c33665 > :first-child {
		grid-column: 1 / span 5;
	}

	.x50c33665 > .x2efce35b {
		grid-column: span 3;
	}

	.x50c33665 > .x2efce35b:nth-child(2) {
		grid-column: 7 / span 3;
	}

	.x4ed77c95 {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sn-sp-8);
	}

	.x5d7db166 {
		text-align: right;
		max-width: 70ch;
	}
}

@media (min-width: 1024px) {
	.xb1bd03ea {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--sn-sp-8);
	}

	.xed6c82dd {
		justify-content: flex-end;
		flex: 0 1 auto;
	}
}

/* ---------- Scroll reveal ---------- */
/*
 * COMPLIANCE BY CONSTRUCTION: the hidden state exists ONLY under .x7ebc5849,
 * which reveal.js adds after its own prefers-reduced-motion check and only for
 * blocks still below the fold. No JS means nothing is EVER hidden (§7).
 */

.x7ebc5849 .x69798fc1 {
	opacity: 0;
	transform: translateY(16px);
}

.x7ebc5849 .x69798fc1.is-inview {
	opacity: 1;
	transform: none;
	transition: opacity 500ms var(--sn-ease-out),
	            transform 500ms var(--sn-ease-out);
}

@media (prefers-reduced-motion: reduce) {
	.x7ebc5849 .x69798fc1,
	.x7ebc5849 .x69798fc1.is-inview {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Utilities ---------- */

.xd46b6bba {
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-sm);
}

/* The uppercase label — prompt's table header: 11px 900 at .08em. */
.x59295695 {
	font-family: var(--sn-font);
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-text-muted);
}

.x974885fc {
	letter-spacing: var(--sn-tracking-widest);
}

/* Chip — a pill label on surface-2. */
.x2d9165f5 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-1) var(--sn-sp-3);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	line-height: var(--sn-lh-compact);
}

/* The orange chip: orange fill, NAVY 900 type (8.47 — white would be 2.03). */
.xad995afe {
	background: var(--sn-signal);
	border-color: var(--sn-signal);
	color: var(--sn-heading);
	font-weight: 900;
}

/*
 * STATUS BADGE — the prompt's table status pill: rounded-full, a 6px centre
 * dot, 900 text, tinted by state. Ink is the semantic 700/800 on its 50-tint.
 */
.x0b99ab55 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--sn-radius-pill);
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	font-size: var(--sn-fs-2xs);
	font-weight: 900;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.x0b99ab55::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.x784c864f   { background: var(--sn-tip-tint);     color: var(--sn-tip); }
.x8119a2ff { background: var(--sn-info-tint);    color: var(--sn-info); }
.xa644e90e { background: var(--sn-warning-tint); color: var(--sn-warning); }

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