/*
 * 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).
 *
 * ────────────────────────────────────────────────────────────────────────────
 * THE TWO REGISTERS. Read this before adding anything.
 *
 * The design direction ("Material You") was written for a marketing page:
 * 20–24px body, 56px display headlines, 96px section padding, one idea per
 * screen, a hero inside a 48px-radius container. Our pages are 2000–3000-word
 * SEO articles on an 820px measure. Applied literally to the tenth section of
 * an article it produces a page that is five screens of scroll per paragraph,
 * and the reader leaves.
 *
 * So the theme has TWO registers that share one DNA (tonal surfaces, generous
 * radius, pill buttons, state layers, MD3 easing):
 *
 *   EXPRESSIVE — hero, cta-banner, casino-cards, calculator, key-takeaways,
 *                footer. Big containers, atmospheric washes, elevation, the
 *                full micro-interaction set.
 *   READING    — content-section, tables, FAQ, callouts, sources, prose.
 *                Same DNA, ordinary measure, calm body. The tonal surfaces and
 *                the rounded corners keep it in the family.
 *
 * The contrast between the two is what makes the style land on a content site:
 * the expressive sections work BECAUSE the prose between them is not trying to.
 * Do not "upgrade" the reading register to marketing scale.
 * ────────────────────────────────────────────────────────────────────────────
 */

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

html {
	/* In-page anchors (TOC, #cta links) glide instead of jumping.
	   NOTE: overflow-x:clip must NOT sit on html — Chromium then refuses to
	   run smooth/programmatic scrolls entirely. The sideways-scroll guard
	   lives on #page below instead. */
	scroll-behavior: smooth;
}

#page {
	/* The page never scrolls sideways — wide content must live inside its
	   own scroller (.xe38cfbf6). clip (not hidden) keeps position:sticky
	   working for the header. */
	overflow-x: clip;
	position: relative;
}

/*
 * ATMOSPHERE — the design's signature "organic blur shapes".
 *
 * Implemented as three radial gradients on one fixed, decorative layer, NOT as
 * the direction's blurred divs. Two reasons, both measured on previous passes
 * of this network rather than assumed:
 *
 *   1. `filter: blur(64px)` on large elements forces the compositor to
 *      rasterise and re-blur a full-viewport surface; a fixed one re-blurs on
 *      every scroll frame. A radial-gradient IS already a soft-edged blob and
 *      costs a single paint.
 *   2. NO mix-blend-mode. The direction asks for `mix-blend-multiply` on the
 *      shapes; a full-viewport fixed element with a blend mode re-blends the
 *      whole page every frame and is a long-standing jank source on mobile
 *      Safari. Low-opacity colour on a light ground reads the same.
 *
 * Opacity is deliberately tiny — these sit UNDER the content (z-index 0 on a
 * layer that never intercepts a click), and anything stronger starts eating
 * the contrast measured in tokens.css.
 */
#page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image:
		radial-gradient(60vw 60vw at 82% -8%,  color-mix(in srgb, var(--sn-primary) 22%, transparent) 0%, transparent 62%),
		radial-gradient(52vw 52vw at -6% 22%,  color-mix(in srgb, var(--sn-tertiary) 16%, transparent) 0%, transparent 60%),
		radial-gradient(70vw 70vw at 40% 108%, color-mix(in srgb, var(--sn-secondary-container) 55%, transparent) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}

/* Everything the reader touches sits above the wash. */
#page > * {
	position: relative;
	z-index: 1;
}

/*
 * ...but the sticky header must outrank its own later siblings. The rule above
 * is (1,0,0) and therefore BEATS `.x3e159b67 { z-index: 100 }` (0,1,0), which
 * parked the header on the same layer as <main> — and with equal z-index the
 * later element in the DOM paints on top, so the hero (position: relative)
 * covered the header's desktop dropdown. Written as `#page > .x3e159b67` so it
 * outranks the sibling rule instead of fighting it with !important.
 */
#page > .x3e159b67 {
	z-index: 100;
}

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

/* Anchor targets land BELOW the sticky header instead of underneath it
   (header is ~90px: compliance topbar + nav bar), with breathing room. */
[id] {
	scroll-margin-top: 116px;
}

body {
	background: var(--sn-bg);
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-md);
	line-height: var(--sn-lh-body);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--sn-heading);
	line-height: var(--sn-lh-heading);
	font-family: var(--sn-font-display);
	/* 500, NOT 700. MD3 headings are Medium, and this one value is most of the
	   reason the page reads friendly rather than shouty — it is the single
	   biggest departure from every previous market in this network, all of
	   which set 800 here. Roboto's wght axis runs 100–900 (read from fvar),
	   so 500 is a real instance and not a synthesised weight. */
	font-weight: 500;
	letter-spacing: var(--sn-tracking-display);
	clear: both;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/*
 * NOTHING IS UPPERCASE. Recorded because four of the five sibling markets
 * uppercase their H1/H2 and the reflex is strong: MD3 has no uppercase
 * anywhere in its type scale, and a shouted heading contradicts the entire
 * "friendly, approachable, personal" thesis. The only tracked-out uppercase in
 * this theme is the .xd25dd204 micro-type, at 12px, where it reads as a label
 * rather than as a heading.
 */

/* Fluid display sizes: the token is the FLOOR (phone) and the clamp scales up
   to the design's ceiling — headline-large 48px for h1, headline-medium 32px
   for h2. One continuous ramp, no breakpoint step. */
h1 { font-size: clamp(var(--sn-fs-2xl), 2.2rem + 2.6vw, var(--sn-fs-3xl)); line-height: var(--sn-lh-display); }
h2 { font-size: clamp(var(--sn-fs-xl), 1.6rem + 1.3vw, 2.25rem); }
h3 { font-size: var(--sn-fs-lg); }

/*
 * EXPRESSIVE TYPE. Opt-in, for the hero headline and section breaks only —
 * the marketing-scale display the direction asks for, kept off the document's
 * ordinary headings so an article does not become a landing page.
 */
.xc2247108 {
	font-family: var(--sn-font-display);
	font-size: clamp(2.25rem, 1.6rem + 3.2vw, var(--sn-fs-3xl));
	font-weight: 500;
	line-height: var(--sn-lh-display);
	letter-spacing: -.02em;
	text-wrap: balance;
}

/*
 * Large numerals as graphic shapes (step indices, calculator figures).
 * Decorative uses must be aria-hidden — a screen reader announcing "zero
 * three" between two paragraphs is noise.
 *
 * On a gambling site these carry a second risk: a giant figure next to casino
 * copy reads as a payout, a bonus or odds. Use them ONLY as section indices
 * (01, 02, 03) — never a currency amount, a percentage or a multiplier.
 */
.xbada212f {
	font-family: var(--sn-font-display);
	font-size: clamp(3.5rem, 2rem + 7vw, 7rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--sn-surface-2);
	user-select: none;
	pointer-events: none;
}

/*
 * SECTION MARKER — two stacked pills above every content H2.
 *
 * This is the family's fingerprint slot and every market gets its own: NL
 * underline, DE vertical rule, SE filled square, TH gold lozenge, AU2 open
 * ring, FR rule-above. Here it is a long primary pill followed by a short
 * tertiary one, because the pill IS this design system's shape and because two
 * tones answer the direction's own warning against a palette that reads muted.
 *
 * Above the heading rather than beside it: a left-side marker eats horizontal
 * space, and it would have to be square-ended to align, which is exactly the
 * shape this skin does not have. Do NOT add per-block heading markers on top.
 */
.site-main h2 {
	position: relative;
	padding-top: calc(6px + var(--sn-sp-4));
}

.site-main h2::before,
.site-main h2::after {
	content: '';
	position: absolute;
	top: 0;
	height: 6px;
	border-radius: var(--sn-radius-pill);
}

.site-main h2::before {
	left: 0;
	width: 44px;
	background: var(--sn-primary);
}

.site-main h2::after {
	left: 52px;
	width: 16px;
	background: var(--sn-pink); /* MD3 tertiary */
}

/*
 * Eyebrow label above section headings — a TONAL CHIP, not bare text. Michael
 * drops it into a WYSIWYG as <p class="xc07ce309">…</p> before a heading.
 * The chip is the MD3 way to say "small label with colour but no authority":
 * secondary-container ground, its own on- ink at 13.24:1.
 */
.xc07ce309 {
	display: inline-block;
	margin: 0 0 var(--sn-sp-3);
	padding: var(--sn-sp-1) var(--sn-sp-3);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-secondary-container);
	color: var(--sn-on-secondary-container);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	letter-spacing: var(--sn-tracking-label);
}

/* When an eyebrow is present it replaces the pill marker — two markers stacked
   above one heading is just clutter. */
.xc07ce309 + h2 {
	margin-top: 0;
}

.site-main .xc07ce309 + h2 {
	padding-top: 0;
}

.site-main .xc07ce309 + h2::before,
.site-main .xc07ce309 + h2::after {
	display: none;
}

.xc07ce309 + h3 {
	margin-top: 0;
}

/* Lede: the opening paragraph of an article — MD3 body-large. */
.x54309d62 {
	font-size: var(--sn-fs-lead);
	line-height: 1.55;
	color: var(--sn-heading);
	font-weight: 400;
}

/*
 * THE GLOBAL LINK RULES ARE ZERO-SPECIFICITY, VIA :where(). This is not a
 * style choice, it is what stops them repainting things that are not prose.
 *
 * Written as bare `a:hover` these rules are (0,1,1), which BEATS any
 * single-class button rule (0,1,0). Our own .x5f7e1117 escapes only because
 * `.x5f7e1117:hover` happens to be (0,2,0) — a third-party link-button has no
 * such luck. The casino-list plugin's CTA is `<a class="primary-button">`, and
 * at (0,1,0) it lost both fights: on hover its label was repainted to the
 * hover colour ON the hover colour, and after one click `a:visited` repainted
 * it to the accent on an accent gradient. Both are 1.00:1 — the label simply
 * disappeared, permanently in the visited case.
 *
 * At (0,0,0) any class-based rule wins and the cascade does the right thing by
 * default. Prose links are unaffected: nothing else sets their colour, so
 * source order still decides.
 *
 * ORDER IS LVHA (link, visited, hover, active) and must stay that way. It was
 * a, hover, visited — with equal specificity the later `a:visited` won, so a
 * visited link did not visibly respond to hover at all.
 */
:where(a) {
	color: var(--sn-accent);
	text-decoration: none;
}

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

/*
 * HOVERS DEEPEN HERE. The previous market was the family's first dark skin and
 * its rule was the opposite ("hovers brighten") — correct there, wrong the
 * moment the ground goes light again, where a lighter link fades toward the
 * page. --sn-primary-press is the primary under a 12% black state layer.
 */
:where(a:hover, a:focus) {
	color: var(--sn-primary-press);
	text-decoration: underline;
}

/* PROSE LINKS ARE UNDERLINED. Colour alone is not a distinction — the primary
   measures 6.28:1 on the page against body text's 16.71:1, which is a hue
   difference far more than a luminance one, so an unmarked link is effectively
   invisible to anyone who does not perceive hue. :where() keeps this at ZERO
   specificity so the opt-out list below always wins — an earlier skin wrote it
   as `.site-main p a` (0,1,2), which outranked `.x5f7e1117` (0,1,0) and
   underlined every button sitting in a paragraph. */
:where(.site-main, .x27186e3c) :where(p, li, td, th, dd, blockquote) a {
	text-decoration: underline;
	text-underline-offset: .15em;
	text-decoration-thickness: 1.5px;
}

:where(.site-main, .x27186e3c) :where(p, li, td, th, dd, blockquote) :where(.x5f7e1117, .x738abeca, .x55553920, .x6281acb0) {
	text-decoration: none;
}

/* Global keyboard focus ring — the design's 2px primary ring at a 2px offset.
   :focus-visible keeps it off mouse clicks. No border-radius override: the
   outline follows the element's own (usually pill) shape by itself. */
:focus-visible {
	outline: 2px solid var(--sn-primary);
	outline-offset: 2px;
}

/* Native controls (checkbox, radio, range, text caret) pick up the brand
   instead of the browser's default blue. */
:root {
	accent-color: var(--sn-primary);
	caret-color: var(--sn-primary);
	color-scheme: light;
}

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

/* Content lists: ONE compact hanging indent. Underscores ships
   `margin: 0 0 1.5em 3em` on top of the browser's ~40px padding-left —
   a double indent that wrecks lists inside callouts and flex layouts.
   Blocks that restyle their own lists (toc, faq, chips, sources…) set
   explicit margins/paddings with class selectors and are unaffected. */
ul,
ol {
	margin: 0 0 1.5em;
	padding-left: var(--sn-sp-6);
}

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

/* Selection: the tonal container, with its own ink at 13.24:1. Not the
   primary — white-on-primary is 6.44 and fine for a button, but a whole
   selected paragraph in it is heavy. */
::selection {
	background: var(--sn-secondary-container);
	color: var(--sn-on-secondary-container);
}

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

.x80a4df67 {
	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);
}

/* Expressive sections push to the edges. Still capped by --sn-container so it
   does not become unbounded on an ultrawide monitor. */
.x86bb461b {
	max-width: min(var(--sn-container-wide), 1600px);
}

.x27186e3c {
	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) {
	.x80a4df67,
	.x27186e3c {
		padding-left: var(--sn-sp-6);
		padding-right: var(--sn-sp-6);
	}
}

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

/*
 * EVERY BUTTON IS A PILL. No exceptions, no "slightly rounded" variant — this
 * is the single most recognisable Material You characteristic and the first
 * thing that would make the page read as a generic theme if it were relaxed.
 *
 * NEVER set `color` on .x5f7e1117 from a context — set --sn-btn-ink instead.
 * WHY, because this bug shipped twice: base.css forced
 * `.x5f7e1117:visited { color: … }` while a context (the CTA band, the casino
 * panels) recoloured the same button. Equal specificity meant that AFTER the
 * visitor followed the link the label was repainted to the base ink, which on
 * a light band is the same colour as the band — the label simply vanished.
 * Routing ink through a custom property means a context override is inherited
 * by the base, hover and visited rules alike and cannot lose that race.
 */
.x5f7e1117 {
	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-w) solid transparent;
	border-radius: var(--sn-radius-pill);
	background: var(--sn-primary);
	color: var(--sn-btn-ink, #FFFFFF);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	letter-spacing: var(--sn-tracking-label);
	line-height: var(--sn-lh-compact);
	/* Touch target: 44px WCAG minimum; the design's default button is 40px and
	   its large button 48px, so this sits between them and clears the floor. */
	min-height: 44px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background var(--sn-motion) var(--sn-ease),
	            box-shadow var(--sn-motion) var(--sn-ease),
	            transform var(--sn-motion-fast) var(--sn-ease);
}

/* Elevation on hover, per the design: no shadow at rest, shadow-md raised. */
.x5f7e1117:hover,
.x5f7e1117:focus {
	background: var(--sn-primary-hover);
	color: var(--sn-btn-ink, #FFFFFF);
	text-decoration: none;
	box-shadow: var(--sn-shadow-md);
}

/*
 * PRESSED DARKENS, and this is a deliberate, measured departure from the
 * supplied design system. It specifies active = primary at 80%, which over
 * this page resolves to #8572B6 and drops the white label to 4.13:1 — under
 * the 4.5 AA floor, in the one state where the user's finger is on the
 * control. --sn-primary-press is the same primary under a 12% black state
 * layer: #5B4690, white at 7.71:1. The scale-95 press feedback the design
 * actually relies on is untouched.
 */
.x5f7e1117:active {
	background: var(--sn-primary-press);
	transform: scale(.95);
	box-shadow: none;
}

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

/* TONAL — the MD3 secondary button: a filled container, not an outline. Use it
   where an action is real but subordinate; it is the correct partner for the
   filled primary, and unlike a ghost it survives on a busy surface. */
.x55553920 {
	background: var(--sn-secondary-container);
	--sn-btn-ink: var(--sn-on-secondary-container);
}

.x55553920:hover,
.x55553920:focus {
	background: color-mix(in srgb, var(--sn-primary) 12%, var(--sn-secondary-container));
	--sn-btn-ink: var(--sn-on-secondary-container);
}

.x55553920:active {
	background: color-mix(in srgb, var(--sn-primary) 20%, var(--sn-secondary-container));
}

/*
 * OUTLINED. The border uses --sn-border-strong, not --sn-border: this is the
 * edge of a control, so WCAG 1.4.11 wants 3:1 and only that token clears it
 * (3.53–4.44 depending on the surface; --sn-border is 1.66).
 */
.x738abeca {
	background: transparent;
	border-color: var(--sn-border-strong);
	--sn-btn-ink: var(--sn-primary);
}

.x738abeca:hover,
.x738abeca:focus {
	background: var(--sn-state-hover);
	border-color: var(--sn-primary);
	--sn-btn-ink: var(--sn-primary);
	box-shadow: none;
}

.x738abeca:active {
	background: var(--sn-state-press);
}

/* TEXT button — no container at all until you touch it. */
.x6281acb0 {
	background: transparent;
	border-color: transparent;
	padding-left: var(--sn-sp-4);
	padding-right: var(--sn-sp-4);
	--sn-btn-ink: var(--sn-primary);
}

.x6281acb0:hover,
.x6281acb0:focus {
	background: var(--sn-state-hover);
	--sn-btn-ink: var(--sn-primary);
	box-shadow: none;
}

.x6281acb0:active {
	background: var(--sn-state-press);
}

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

/* ---------- Inputs (MD3 filled text field) ---------- */

/*
 * The distinctive Material shape: ROUNDED TOP CORNERS, SQUARE BOTTOM, a filled
 * recessed ground and a 2px bottom rule that turns primary on focus. It reads
 * as a field even with no border around it, which is the whole point — an
 * outlined box would contradict the tonal system.
 *
 * The bottom rule is --sn-border-strong at rest (3:1 as a control edge) and
 * 2px, because it is the ONLY edge the control has.
 */
.xdceac9a2,
.x27186e3c input[type='text'],
.x27186e3c input[type='email'],
.x27186e3c input[type='search'],
.x27186e3c input[type='number'],
.x27186e3c textarea,
.search-form input[type='search'] {
	width: 100%;
	min-height: 56px;
	padding: var(--sn-sp-3) var(--sn-sp-4);
	background: var(--sn-surface-2);
	border: 0;
	border-bottom: 2px solid var(--sn-border-strong);
	border-radius: var(--sn-radius-sm) var(--sn-radius-sm) 0 0;
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-base);
	transition: border-color var(--sn-motion-fast) var(--sn-ease),
	            background var(--sn-motion-fast) var(--sn-ease);
}

.xdceac9a2:focus,
.x27186e3c input:focus,
.x27186e3c textarea:focus,
.search-form input[type='search']:focus {
	border-bottom-color: var(--sn-primary);
	outline: none;
	background: color-mix(in srgb, var(--sn-primary) 5%, var(--sn-surface-2));
}

/* Placeholders route through the muted token. The design brief's own
   suggestion (on-background at 50%) resolves to roughly #8E8D90 here, which is
   3.1:1 — not a stylistic choice, a defect. --sn-text-muted is 7.24 on this
   fill. */
.xdceac9a2::placeholder,
.x27186e3c input::placeholder,
.x27186e3c textarea::placeholder {
	color: var(--sn-text-muted);
	opacity: 1;
}

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

/*
 * The card hover behaviour, MD3 style: the surface takes a tonal step and the
 * card lifts. It does NOT invert — that was the French skin's move, where the
 * whole card flooded with the accent and every child needed new ink.
 *
 * INK STILL ROUTES THROUGH CUSTOM PROPERTIES, not through a descendant `*`
 * rule. The obvious implementation (`.x1bbcf30e:hover * { color: … }`) is
 * (0,2,0) and would outrank the very block rules that own each element's
 * contrast — the exact mistake that made the plugin CTA and the visited button
 * label vanish (CLAUDE.md §12, 2026-08-10, twice). Consumers read
 * var(--sn-ink) etc., so a block can always override its own ink and win.
 * The slots are kept even though the inks no longer change, precisely so a
 * future skin that DOES invert has somewhere to put them.
 *
 * :focus-within is included so a keyboard user gets the same state a mouse
 * user gets. NO CONTENT MAY APPEAR only on hover — the state changes colour,
 * elevation and position, never visibility (CLAUDE.md §7, §12 2026-07-14).
 */
.x1bbcf30e {
	--sn-ink: var(--sn-heading);
	--sn-ink-muted: var(--sn-text-muted);
	--sn-ink-rule: var(--sn-border);
	transition: background var(--sn-motion) var(--sn-ease),
	            box-shadow var(--sn-motion) var(--sn-ease),
	            transform var(--sn-motion) var(--sn-ease);
}

.x1bbcf30e:hover,
.x1bbcf30e:focus-within {
	background: var(--sn-secondary-container);
	box-shadow: var(--sn-shadow-md);
	transform: scale(1.02);
	/* Ink is unchanged and that is correct: on-surface reads 13.24:1 against
	   the secondary container, so nothing needs repainting. Measured, not
	   assumed — the sibling skins all had to repaint here. */
}

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

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

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

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

/* Hairline divider between major sections. --sn-border, never
   --sn-border-strong: this separates, it is not the edge of a control. */
.xd6be0151 {
	border: 0;
	border-top: 1px solid var(--sn-border);
	margin: var(--sn-sp-12) 0;
}

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

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

/* ---------- Shared table base ---------- */
/* Table blocks wrap their <table class="xf45167ad"> in .xe38cfbf6 — mandatory. */

/*
 * Tables are CARDS here: a tonal surface, a 24px radius, a soft elevation and
 * hairline row separators. No zebra and no outer border — MD3 explicitly
 * prefers tonal separation to lines, and a striped table on a tinted surface
 * reads as noise.
 *
 * WHENEVER THE THEAD BACKGROUND CHANGES, re-check the sticky corner in
 * blocks/comparison-table/style.css — it has to be painted with the SAME
 * colour as the band or it reads as a patch. That has now been wrong on THREE
 * separate market passes, because the band lives here and the corner lives in
 * the block. Both files carry this warning.
 */
.xe38cfbf6 {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--sn-surface);
	border: 0;
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
}

.xf45167ad {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--sn-fs-base);
}

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

.xf45167ad thead th {
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	white-space: nowrap;
	border-bottom: 1px solid var(--sn-border);
}

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

.xf45167ad tbody td,
.xf45167ad tbody th {
	border-bottom: 1px solid var(--sn-border);
}

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

/* Row hover is a STATE LAYER, not a colour swap — same model as the buttons. */
.xf45167ad tbody tr:hover {
	background: var(--sn-state-hover);
}

/* WYSIWYG tables (auto-wrapped by sterrennacht_wrap_naked_tables) usually
   keep their header cells in the first body row — style them like a thead. */
.x7b33b195 tr:first-child th {
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	white-space: nowrap;
	border-bottom: 1px solid var(--sn-border);
}

.x7b33b195 td {
	min-width: 120px; /* keeps pasted tables readable before the wrap scrolls */
}

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

.x1016a150 {
	background: var(--sn-surface);
	border: 0;
	border-radius: var(--sn-radius);
	padding: var(--sn-sp-6);
	box-shadow: var(--sn-shadow);
}

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

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

/*
 * A light surface with a hairline under it and a backdrop blur, per the
 * design — not a coloured bar. The blur matters: the atmospheric wash scrolls
 * underneath, and a flat opaque header would cut a hard rectangle out of it.
 * The background is therefore translucent, with an opaque fallback first for
 * browsers without backdrop-filter.
 */
.x3e159b67 {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sn-bg);
	background: color-mix(in srgb, var(--sn-bg) 82%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--sn-border);
}

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

/* The 18+ compliance strip. Static, never animated, never collapsed. */
.x958243aa {
	border-bottom: 1px solid var(--sn-border);
	font-size: var(--sn-fs-xs);
	color: var(--sn-text-muted);
}

.x3c4e5a5f {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-2);
	padding-top: var(--sn-sp-1);
	padding-bottom: var(--sn-sp-1);
}

/* The 18+ badge — a tonal chip. It is CONTENT, not decoration: it is never
   aria-hidden (CLAUDE.md §7). */
.x944206c6 {
	display: inline-flex;
	align-items: center;
	padding: 1px var(--sn-sp-2);
	border: 0;
	border-radius: var(--sn-radius-pill);
	background: var(--sn-secondary-container);
	color: var(--sn-on-secondary-container);
	font-weight: 500;
	letter-spacing: 0;
}

.x08a7fc02 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sn-sp-4);
	padding-top: var(--sn-sp-3);
	padding-bottom: var(--sn-sp-3);
}

.x031d332a {
	flex: 0 0 auto;
}

.x08b3631e {
	margin: 0;
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-lg);
	font-weight: 500;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.x08b3631e a {
	color: var(--sn-heading);
	text-decoration: none;
}

/* The wordmark's one flourish: a primary dot. Kept from the previous skin
   because it is punctuation, not a shape — and a dot is on-message here. */
.x08b3631e a::after {
	content: '.';
	color: var(--sn-primary);
}

.x3e159b67 .custom-logo {
	max-height: 64px;
	width: auto;
}

/* Phone: the header is STICKY, so every pixel here is spent on every screen of
   the page, not just the first. Measured at 375x667 on the previous skin it
   was 133px — a fifth of the viewport — which is why a money list under a hero
   could not break the fold. The compliance topbar is untouched: the 18+ badge
   and the notice keep their size and their two lines (§7 — that strip is the
   one thing on the page that may never be shrunk to buy space). */
@media (max-width: 767px) {
	.x08a7fc02 {
		padding-top: var(--sn-sp-2);
		padding-bottom: var(--sn-sp-2);
	}

	.x3e159b67 .custom-logo {
		max-height: 44px;
	}
}

.xbf57c70c {
	position: relative;
	/* Underscores sets .main-navigation to width:100%; flex keeps the
	   hamburger pinned to the far right on mobile. */
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.x9c4c43d6 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--sn-sp-2);
	background: transparent;
	border: 0;
	border-radius: var(--sn-radius-pill);
	color: var(--sn-heading);
	cursor: pointer;
	transition: background var(--sn-motion-fast) var(--sn-ease);
}

.x9c4c43d6:hover,
.x9c4c43d6:focus {
	background: var(--sn-state-hover);
}

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

/* Mobile: dropdown panel (covers both wp_nav_menu ul and wp_page_menu div>ul).
   A raised MD3 surface: tonal fill, 12px radius, elevation — no outline. */
.xbf57c70c > ul,
.xbf57c70c > div > ul {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + var(--sn-sp-2));
	min-width: 240px;
	padding: var(--sn-sp-2);
	background: var(--sn-surface);
	border: 0;
	border-radius: var(--sn-radius-sm);
	box-shadow: var(--sn-shadow-lg);
}

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

/* Nav items are PILLS. On mobile they fill the panel width; on desktop they
   are individual capsules that take a state layer on hover. */
.xbf57c70c li a {
	display: block;
	padding: var(--sn-sp-3);
	border-radius: var(--sn-radius-pill);
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	letter-spacing: var(--sn-tracking-label);
	text-decoration: none;
	transition: background var(--sn-motion-fast) var(--sn-ease),
	            color var(--sn-motion-fast) var(--sn-ease);
}

.xbf57c70c li a:hover,
.xbf57c70c li a:focus {
	background: var(--sn-state-hover);
	color: var(--sn-primary);
	text-decoration: none;
}

/* The current item is a filled tonal chip — MD3's own navigation indicator. */
.xbf57c70c li.current-menu-item > a,
.xbf57c70c li.current_page_item > a {
	background: var(--sn-secondary-container);
	color: var(--sn-on-secondary-container);
}

/* Chevron on parent items (rotates up when open via .focus — navigation.js). */
.xbf57c70c li.menu-item-has-children > a::after,
.xbf57c70c li.page_item_has_children > a::after {
	content: '';
	display: inline-block;
	margin-left: var(--sn-sp-2);
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	padding: 2.5px;
	transform: translateY(-3px) rotate(45deg);
	transition: transform var(--sn-motion-fast) var(--sn-ease);
}

.xbf57c70c li.menu-item-has-children.focus > a::after,
.xbf57c70c li.page_item_has_children.focus > a::after {
	transform: translateY(1px) rotate(225deg);
}

/* Mobile submenu: nested inline inside the panel, indented, collapsed until
   the parent gets .focus (tap — handled by navigation.js/nav.js). Overrides
   underscores' absolute/-999em positioning. */
.xbf57c70c ul ul {
	display: none;
	position: static;
	float: none;
	margin: var(--sn-sp-1) 0 var(--sn-sp-1) var(--sn-sp-3);
	padding: 0 0 0 var(--sn-sp-2);
	border-left: 2px solid var(--sn-secondary-container);
	box-shadow: none;
}

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

/* Underscores force-opens all nested uls when .toggled — collapse them back
   so the mobile submenu is a tap-to-expand accordion (chevron on parent). */
.xbf57c70c.toggled ul ul {
	display: none;
}

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

.xbf57c70c ul ul a {
	width: auto; /* underscores forces 200px */
	font-weight: 400;
}

/*
 * NAV BREAKPOINT IS 1101px, NOT THE 768px USED EVERYWHERE ELSE (§4 lists two
 * breakpoints; this is the documented exception and the only one). The primary
 * menu is the widest thing in the header — logo, several multi-word UK menu
 * labels and their chevrons — and between 768 and 1100 it either wrapped to a
 * second line or squeezed the logo. The hamburger therefore holds until 1100
 * inclusive and the horizontal bar starts at 1101.
 *
 * Underscores' own `@media screen and (min-width: 37.5em)` in style.css hides
 * .menu-toggle and flexes .main-navigation ul from 600px. It is neutralised by
 * SOURCE ORDER only — equal specificity, base.css enqueued after the parent
 * sheet — so this block must stay in base.css and base.css must keep loading
 * last. Do not "tidy" these rules into a stylesheet that loads earlier.
 */
@media (min-width: 1101px) {
	.x9c4c43d6 {
		display: none;
	}

	.xbf57c70c {
		justify-content: flex-start; /* Desktop: menu sits next to the logo. */
	}

	.xbf57c70c > ul,
	.xbf57c70c > div > ul {
		display: flex !important; /* Beat underscores' .main-navigation rules. */
		position: static;
		gap: var(--sn-sp-1);
		min-width: 0;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.xbf57c70c li a {
		padding: var(--sn-sp-2) var(--sn-sp-4);
	}

	/* Desktop dropdown: a raised tonal card under the parent item. Opens on
	   hover, keyboard focus, or click (.focus via nav.js). */
	.xbf57c70c ul ul {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		min-width: 250px;
		margin: 0;
		padding: var(--sn-sp-2);
		background: var(--sn-surface);
		border: 0;
		border-left: 0;
		border-radius: var(--sn-radius-sm);
		box-shadow: var(--sn-shadow-lg);
	}

	/* Invisible bridge so the pointer can cross the gap without closing. */
	.xbf57c70c ul ul::before {
		content: '';
		position: absolute;
		top: -12px;
		left: 0;
		right: 0;
		height: 12px;
	}

	.xbf57c70c li:hover > ul,
	.xbf57c70c li:focus-within > ul,
	.xbf57c70c li.focus > ul {
		display: block;
		left: 0;
	}

	.xbf57c70c ul ul li a {
		color: var(--sn-text);
	}

	/* Chevron opens on hover too. */
	.xbf57c70c li.menu-item-has-children:hover > a::after,
	.xbf57c70c li.page_item_has_children:hover > a::after {
		transform: translateY(1px) rotate(225deg);
	}
}

/* ---------- Site footer (T2) ---------- */
/* Three stacked rows: brand/menus, the prominent responsible-gambling strip,
   then copyright + disclosure. */

/*
 * The footer is a large tonal container with the design's extra-large radius
 * on its TOP corners — the same "major container" treatment as the hero, which
 * is what closes the page as a shape rather than as a coloured band.
 *
 * DELIBERATELY NOT FLOODED WITH THE PRIMARY. The direction floods major
 * sections with colour; a purple band carrying the 18+ badge, the statutory
 * warning and the help links reads as promotional, and those are the one part
 * of the page that must read as information. Same call as every market before
 * this one.
 */
.x8b1399d9 {
	margin-top: var(--sn-sp-16);
	background: var(--sn-purple-deep);
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-base);
	border-top: 0;
	border-radius: var(--sn-radius-xl) var(--sn-radius-xl) 0 0;
}

@media (max-width: 767px) {
	.x8b1399d9 {
		border-radius: var(--sn-radius) var(--sn-radius) 0 0;
	}
}

/* Row 1: brand + about | menus. */
.xf6f5e234 {
	display: grid;
	gap: var(--sn-sp-8);
	padding: var(--sn-sp-12) 0 var(--sn-sp-8);
}

.xc395985f {
	margin: 0 0 var(--sn-sp-3);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-lg);
	font-weight: 500;
	letter-spacing: -.02em;
}

.xc395985f::after {
	content: '.';
	color: var(--sn-primary);
}

.x1a539f82 {
	margin: 0;
	max-width: 46ch;
}

.xc39022b6 {
	margin: 0 0 var(--sn-sp-3);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font);
	font-weight: 500;
	font-size: var(--sn-fs-sm);
	letter-spacing: var(--sn-tracking-label);
}

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

.x78e51715 a {
	color: var(--sn-text-muted);
	text-decoration: none;
}

.x78e51715 a:hover,
.x78e51715 a:focus {
	color: var(--sn-primary);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

/* Row 2: responsible-gambling strip — compliance made prominent. STATIC by
   requirement: no animation, no reveal, no hover-only content (§7). */
.x1cebed2b {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-4);
	padding: var(--sn-sp-6) 0;
	border-top: 1px solid var(--sn-border);
	border-bottom: 1px solid var(--sn-border);
}

.x2605a0a8 {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	flex-wrap: wrap;
}

.x2605a0a8 p {
	margin: 0;
	color: var(--sn-text);
}

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

/* Outlined pill chips — deliberately NOT the filled/primary treatment:
   compliance links are informational, not the action (CLAUDE.md §7).
   --sn-border-strong because these are interactive edges. */
.x9dda14a2 a {
	display: inline-block;
	padding: var(--sn-sp-2) var(--sn-sp-4);
	border: 1px solid var(--sn-border-strong);
	border-radius: var(--sn-radius-pill);
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	letter-spacing: var(--sn-tracking-label);
	text-decoration: none;
	transition: border-color var(--sn-motion-fast) var(--sn-ease),
	            background var(--sn-motion-fast) var(--sn-ease);
}

.x9dda14a2 a:hover,
.x9dda14a2 a:focus {
	background: var(--sn-state-hover);
	border-color: var(--sn-primary);
	color: var(--sn-text);
	text-decoration: none;
}

/* Row 3: copyright + disclosure. */
.x5e24dcd8 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-4) 0 var(--sn-sp-6);
	font-size: var(--sn-fs-sm);
	color: var(--sn-text-muted);
}

.xcd0bff98,
.x6e92bb1b {
	margin: 0;
}

@media (min-width: 768px) {
	.xf6f5e234 {
		grid-template-columns: minmax(0, 1.5fr) auto auto;
		gap: var(--sn-sp-16);
	}

	.x1cebed2b {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

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

	.x6e92bb1b {
		text-align: right;
		max-width: 62ch;
	}
}

/* ---------- Scroll reveal ---------- */
/*
 * COMPLIANCE BY CONSTRUCTION: the hidden state exists ONLY under .x77212259,
 * 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, which is
 * what keeps this on the right side of the standing rule that no page content
 * may be obscured (CLAUDE.md §7).
 *
 * A small rise plus a fade — not the direction's scale-from-0.8, which on a
 * page whose body is already large reads as a rendering glitch and which moves
 * the LCP candidate.
 */

.x77212259 .x92d00f26 {
	opacity: 0;
	transform: translateY(14px);
}

.x77212259 .x92d00f26.is-inview {
	opacity: 1;
	transform: none;
	transition: opacity var(--sn-motion-slow) var(--sn-ease),
	            transform var(--sn-motion-slow) var(--sn-ease);
}

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

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

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

/* Small tracked label — the ONE piece of uppercase micro-type in the theme
   (see the note under the headings): at 12px it reads as a label, which is
   what MD3 calls this size, rather than as a shouted heading. */
.xd25dd204 {
	font-family: var(--sn-font);
	font-size: var(--sn-fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sn-text-muted);
}

/* Tonal chip — the reusable MD3 container for a short label with colour but no
   authority. Blocks use it for badges, counts and status marks. */
.x51b40f4e {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-1);
	padding: var(--sn-sp-1) var(--sn-sp-3);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-secondary-container);
	color: var(--sn-on-secondary-container);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	line-height: var(--sn-lh-compact);
}

.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;
}