/*
 * 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).
 *
 * ────────────────────────────────────────────────────────────────────────────
 * "SWISS SIGNAL" IN ONE PARAGRAPH. Read before adding anything.
 *
 * Paper, ink and one red. A strict grid, sharp corners, hairline rules, huge
 * tightly-set grotesk headlines, and whitespace doing the separating. Red is
 * RARE and LOAD-BEARING — it marks the one thing in a composition that
 * matters (the accent word, the logo square, the section marker, an icon, one
 * big block), and it is never a flood. Shadows exist, but only as a named,
 * soft, straight-down "float" under something that genuinely sits OVER a
 * canvas; everything else is flat. The one oblique line in the system is the
 * clip-path angle on a canvas panel.
 *
 * TWO REGISTERS, same DNA (inherited from the previous two skins, and still
 * right): EXPRESSIVE — hero, cta-banner, bookmaker cards, the calculator,
 * key-takeaways, footer — gets the poster scale, the canvas panels and the
 * floats. READING — content-section, tables, FAQ, callouts, sources, prose —
 * stays calm on paper at an 18px body. Do not upgrade the reading register to
 * poster scale; the expressive sections work BECAUSE the prose does not try.
 * ────────────────────────────────────────────────────────────────────────────
 */

/* ---------- 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 (.xda8cb14a). clip, not hidden, keeps sticky working. */
	overflow-x: clip;
	position: relative;
}

/*
 * NO GRAIN LAYER ON THIS SKIN. The dark sibling carried a fixed fractal-noise
 * overlay and a `:where(#page) > *` lift to keep content above it. White
 * Swiss stock has no tooth to fake, so both are gone — and with them the
 * specificity trap that once took `position: sticky` away from the header
 * (CLAUDE.md §12, 2026-08-26). If a texture is ever reintroduced, re-read that
 * entry before writing the lift.
 */

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

/* Anchor targets land BELOW the sticky header. */
[id] {
	scroll-margin-top: 104px;
}

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);
	letter-spacing: var(--sn-tracking-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: normal;
}

/*
 * HEADINGS. 800 and very tight for h1/h2 — black mass on white stock is where
 * this system gets its weight. h3 steps down to 700 so a run of sub-sections
 * does not shout. Nothing is uppercase (labels are; headings never).
 */
h1, h2, h3, h4, h5, h6 {
	color: var(--sn-heading);
	font-family: var(--sn-font-display);
	font-weight: 800;
	line-height: var(--sn-lh-heading);
	letter-spacing: var(--sn-tracking-display);
	clear: both;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/*
 * FLUID DISPLAY SIZES — ONE CONTINUOUS RAMP PER LEVEL, no breakpoint step.
 * Two clamps that must agree at a breakpoint produced a 10px REVERSE step in
 * the LCP heading on the previous skin (CLAUDE.md §8 B1). One expression.
 *
 * The hero H1 has its own, larger ramp in blocks/hero/style.css; this one is
 * for a template H1 (archive, search, a page without a hero).
 */
h1 {
	font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.5rem);
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
}

h2 {
	font-size: clamp(var(--sn-fs-xl), 1.45rem + 1.9vw, var(--sn-fs-2xl));
	letter-spacing: var(--sn-tracking-tighter);
	line-height: 1;
}

h3 {
	font-size: var(--sn-fs-lg);
	font-weight: 700;
	letter-spacing: var(--sn-tracking-display);
}

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

/* EXPRESSIVE TYPE — opt-in poster scale. */
.x305efdd0 {
	font-family: var(--sn-font-display);
	font-size: clamp(2.75rem, 1rem + 7.2vw, var(--sn-fs-hero));
	font-weight: 800;
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
	text-wrap: balance;
}

/* The single red word inside a display line. RED IS DISPLAY-SIZE ONLY here
   (#FF3B30 is 3.55:1, which is a large-text pass, not a body pass). */
.xb032d124 {
	color: var(--sn-signal);
}

/*
 * Large numerals as graphic shapes. Decorative uses must be aria-hidden.
 * On a betting site a giant figure beside operator copy reads as ODDS or a
 * PAYOUT — use them only as section indices, never a price, a percentage or
 * a multiplier.
 */
.xef27b6e3 {
	font-family: var(--sn-font-display);
	font-size: clamp(3.5rem, 2rem + 7vw, var(--sn-fs-5xl));
	font-weight: 800;
	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 — a red square sitting on a hairline, above every content H2.
 *
 * The network's fingerprint slot: NL underline, DE vertical rule, SE filled
 * square, TH lozenge, AU2 open ring, FR rule-above, ENG stacked pills, ENG2
 * a mono "01" index. Here: a 10px SIGNAL SQUARE at the left end of a full-width
 * ink/10 hairline — the prompt's "index rule" idiom without the counter.
 *
 * DELIBERATELY UNNUMBERED. A counted index is eng-asset2's marker, and it also
 * forced the ToC to stop numbering (two counters cannot be kept in step). With
 * no counter here that constraint is gone, but the ToC stays unnumbered anyway
 * — see blocks/toc/style.css.
 *
 * Do NOT add per-block heading markers on top of this.
 */
.site-main h2 {
	position: relative;
	padding-top: calc(10px + var(--sn-sp-6));
}

.site-main h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: var(--sn-signal);
}

.site-main h2::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 18px;
	right: 0;
	height: var(--sn-border-w);
	background: var(--sn-border);
}

/* Phone: the marker's reserved space is spent above EVERY h2, including the
   money list's heading, so the gap closes to sp-3. The square keeps its size. */
@media (max-width: 767px) {
	.site-main h2 {
		padding-top: calc(10px + var(--sn-sp-3));
	}
}

/*
 * THE INDEX-RULE EYEBROW — the prompt's "AI Product Design ─── 01 / Hero":
 * an uppercase, widely-tracked signal-ink label followed by a hairline rule
 * capped at 120px. The label is #D70015, never #FF3B30 — it is 11px text.
 * Michael drops it into a WYSIWYG as <p class="x2faaa70f">…</p>.
 *
 * The prompt's trailing "01 / Hero" index is NOT reproduced: a counted index
 * is the sibling skin's marker (see above), and a number beside betting copy
 * reads as odds.
 */
.x2faaa70f {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	margin: 0 0 var(--sn-sp-4);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-2xs);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-widest);
	color: var(--sn-signal-ink);
}

.x2faaa70f::after {
	content: '';
	flex: 1 1 auto;
	max-width: 120px;
	height: var(--sn-border-w);
	background: color-mix(in srgb, var(--sn-heading) 15%, transparent);
}

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

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

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

/* Lede — the prompt's tight subhead: soft ink, relaxed leading, short measure. */
.x233623b9 {
	max-width: 46ch;
	font-size: var(--sn-fs-lead);
	line-height: 1.5;
	color: var(--sn-text-soft);
	font-weight: 400;
	letter-spacing: var(--sn-tracking-body);
}

/*
 * THE GLOBAL LINK RULES ARE ZERO-SPECIFICITY, VIA :where() — so any class
 * rule (a button, the casino-list plugin's CTA) wins by default. 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.
 *
 * Links are INK at rest, signal-ink on hover. Red is the response, not the
 * resting state — the same logic as the black keys.
 */
:where(a) {
	color: var(--sn-heading);
	text-decoration: none;
}

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

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

/*
 * PROSE LINKS: ink, with a 2px SIGNAL underline. Colour alone cannot mark a
 * link here — ink links in ink text are 1:1 — so the underline IS the
 * affordance, and red is spent on it because it is exactly the sort of small,
 * load-bearing mark this system reserves the colour for (3.55:1 as a graphic
 * against paper clears 1.4.11). On hover the text goes red too.
 * :where() keeps it at zero specificity so the button opt-out always wins.
 */
:where(.site-main, .x9aca1bcc) :where(p, li, td, th, dd, blockquote) a {
	text-decoration: underline;
	text-decoration-color: var(--sn-signal);
	text-underline-offset: .18em;
	text-decoration-thickness: var(--sn-border-thick);
}

:where(.site-main, .x9aca1bcc) :where(p, li, td, th, dd, blockquote) :where(.x0d4f1685, .x3b87601c, .x2ac4b836, .xce0c9097) {
	text-decoration: none;
}

/*
 * Keyboard focus — a 2px INK outline at 3px offset. Ink rather than red: the
 * focus ring must be findable on every surface, including the red block and
 * the black footer (where it switches to paper, see .xf9e1ad79).
 */
:focus-visible {
	outline: var(--sn-border-thick) solid var(--sn-heading);
	outline-offset: 3px;
}

:root {
	accent-color: var(--sn-heading);
	caret-color: var(--sn-signal-ink);
	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;
}

/* Square red bullets in prose — the logo glyph's square, at bullet size.
   Class-styled lists (toc, faq, chips, sources…) set list-style themselves. */
:where(.site-main, .x9aca1bcc) :where(ul:not([class])) > li::marker {
	color: var(--sn-signal);
}

:where(.site-main, .x9aca1bcc) :where(ul:not([class])) {
	list-style: square;
}

/* Selection: ink block, white type (19.80). */
::selection {
	background: var(--sn-heading);
	color: var(--sn-bg);
}

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

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

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

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

/* 16 / 24 gutters, NOT the prompt's 24 / 32 / 48 — see tokens.css LAYOUT. */
@media (min-width: 768px) {
	.x9a2aa606,
	.x9aca1bcc {
		padding-left: var(--sn-sp-6);
		padding-right: var(--sn-sp-6);
	}
}

/*
 * THE 12-COLUMN GRID. Blocks that split (hero 7/5, media-text, the footer)
 * lay out on it so every edge on the page snaps to the same columns. Gutter
 * is 24px, matching the container padding.
 */
.x195ce059 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sn-sp-6);
}

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

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

/*
 * THE BLACK KEY. The prompt's "Start free" button, used for every CTA:
 * sharp ink block, white label, an arrow that nudges right on hover, and a
 * fill that FLIPS TO RED on hover.
 *
 * THE HOVER RED IS #D70015, NOT THE PROMPT'S #FF3B30 — white on #FF3B30 is
 * 3.55:1 and fails as a label (tokens.css note 1). #D70015 is 5.38:1, and it
 * reads as the same red at button size.
 *
 * Sentence case, semibold, no tracking — the uppercase tracked form belongs
 * to .xce0c9097 below. eng-asset2's buttons are uppercase vermillion
 * blocks; these are neither.
 *
 * INK NEVER GOES THROUGH `color`, ALWAYS THROUGH --sn-btn-ink. This bug has
 * shipped twice: a `.x0d4f1685: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. ::after, because
 * ::before on a button has historically been reserved for sheens.
 */
.x0d4f1685 {
	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 var(--sn-primary);
	border-radius: var(--sn-radius-pill); /* 0 */
	background: var(--sn-primary);
	color: var(--sn-btn-ink, #FFFFFF);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: var(--sn-lh-compact);
	min-height: 48px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background var(--sn-motion-fast) var(--sn-ease),
	            border-color var(--sn-motion-fast) var(--sn-ease),
	            color var(--sn-motion-fast) var(--sn-ease),
	            transform var(--sn-motion-fast) var(--sn-ease);
}

.x0d4f1685::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-fast) var(--sn-ease);
}

.x0d4f1685:hover,
.x0d4f1685:focus {
	background: var(--sn-primary-hover);
	border-color: var(--sn-primary-hover);
	color: var(--sn-btn-ink, #FFFFFF);
	text-decoration: none;
}

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

/* Press: deeper red (6.89) plus a 1px travel. */
.x0d4f1685:active {
	background: var(--sn-primary-press);
	border-color: var(--sn-primary-press);
	transform: translateY(1px);
}

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

/* OUTLINE — 1px ink edge (19.80, a real control boundary), inverts to the
   black key on hover. */
.x3b87601c {
	background: transparent;
	border-color: var(--sn-heading);
	--sn-btn-ink: var(--sn-heading);
}

.x3b87601c:hover,
.x3b87601c:focus {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
	--sn-btn-ink: var(--sn-bg);
}

/* TONAL — canvas fill; its edge is --sn-border-strong because a #F4F4F4
   fill is 1.10:1 from paper and is not a boundary on its own. */
.x2ac4b836 {
	background: var(--sn-canvas);
	border-color: var(--sn-border-strong);
	--sn-btn-ink: var(--sn-heading);
}

.x2ac4b836:hover,
.x2ac4b836:focus {
	background: var(--sn-bg);
	border-color: var(--sn-heading);
	--sn-btn-ink: var(--sn-heading);
}

/*
 * TEXT — the prompt's "Start designing" CTA, verbatim in behaviour: an
 * uppercase, 0.18em-tracked bold label over a 2px underline that GROWS UPWARD
 * into a full red block on hover, inverting the label to white.
 *
 * The block is #D70015 (white on it 5.38). The resting underline is the same
 * red, so the grow reads as one continuous gesture rather than a colour swap.
 * The arrow from .x0d4f1685 is replaced with the prompt's up-right arrow.
 */
.xce0c9097 {
	padding: var(--sn-sp-2) var(--sn-sp-1);
	border-color: transparent;
	background: linear-gradient(var(--sn-signal-ink), var(--sn-signal-ink)) left bottom / 100% var(--sn-border-thick) no-repeat;
	min-height: 44px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	--sn-btn-ink: var(--sn-heading);
	transition: background-size var(--sn-motion) var(--sn-ease),
	            color var(--sn-motion) var(--sn-ease);
}

.xce0c9097::after {
	-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyJyBzdHJva2UtbGluZWNhcD0nc3F1YXJlJz48cGF0aCBkPSdNNyAxN0wxNyA3TTggN2g5djknLz48L3N2Zz4=");
	        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyJyBzdHJva2UtbGluZWNhcD0nc3F1YXJlJz48cGF0aCBkPSdNNyAxN0wxNyA3TTggN2g5djknLz48L3N2Zz4=");
}

.xce0c9097:hover,
.xce0c9097:focus {
	background-color: transparent;
	background-size: 100% 100%;
	border-color: transparent;
	--sn-btn-ink: #FFFFFF;
}

.xce0c9097:hover::after,
.xce0c9097:focus::after {
	transform: translate(2px, -2px);
}

.xce0c9097:active {
	background-color: transparent;
	border-color: transparent;
}

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

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

/*
 * Sharp, paper-filled, 1px --sn-border-strong edge (4.54 — a hairline input
 * at 1.25:1 is not an input). 16px text so iOS does not zoom; 48px rising to
 * 56px. Focus turns the edge INK, plus the global ring for keyboards.
 */
.x51f54f84,
.x9aca1bcc input[type='text'],
.x9aca1bcc input[type='email'],
.x9aca1bcc input[type='search'],
.x9aca1bcc input[type='number'],
.x9aca1bcc textarea,
.search-form input[type='search'] {
	width: 100%;
	min-height: 48px;
	padding: var(--sn-sp-3) var(--sn-sp-4);
	background: var(--sn-bg);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-base);
	letter-spacing: var(--sn-tracking-body);
	transition: border-color var(--sn-motion-fast) var(--sn-ease),
	            box-shadow var(--sn-motion-fast) var(--sn-ease);
}

@media (min-width: 768px) {
	.x51f54f84,
	.x9aca1bcc input[type='text'],
	.x9aca1bcc input[type='email'],
	.x9aca1bcc input[type='search'],
	.x9aca1bcc input[type='number'],
	.search-form input[type='search'] {
		min-height: 56px;
	}
}

.x51f54f84:focus,
.x9aca1bcc input:focus,
.x9aca1bcc textarea:focus,
.search-form input[type='search']:focus {
	border-color: var(--sn-heading);
	box-shadow: inset 0 0 0 1px var(--sn-heading);
}

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

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

/*
 * Card hover, this system's way: the hairline edge turns INK and the card
 * picks up the small float — it rises off the paper by shadow, not by
 * transform. No scale, no lift in position.
 *
 * INK ROUTES THROUGH CUSTOM PROPERTIES, never a descendant `*` rule — that
 * would be (0,2,0) and outrank the block rules that own each element's
 * contrast (CLAUDE.md §12, 2026-08-10, twice). The inks do not change on
 * hover here; the slots exist so a skin that inverts has somewhere to put
 * them. :focus-within gives keyboards the same state. NO CONTENT MAY APPEAR
 * only on hover (§7).
 */
.xe29b7857 {
	--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);
}

.xe29b7857:hover,
.xe29b7857:focus-within {
	border-color: var(--sn-heading);
	box-shadow: var(--sn-float-sm);
}

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

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

/*
 * THE CANVAS — the prompt's "infinite canvas" panel: #F4F4F4 with a 56px line
 * grid and a faint red wash top-right. `.x1da9b037` adds the one oblique
 * line in the system: the left edge cut on desktop, the top edge on a phone.
 *
 * clip-path CLIPS box-shadow and children. A floating artifact that should
 * cast a shadow sits INSIDE the clipped panel (its own shadow is clipped only
 * at the panel edge, which is what the prompt draws), and nothing that has to
 * overhang the edge may live inside it.
 */
.xf1c56b8a {
	background: var(--sn-pat-canvas);
}

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

@media (min-width: 900px) {
	.x1da9b037 {
		clip-path: var(--sn-clip-lean);
	}
}

/*
 * THE LOGO GLYPH — a black tile holding a 45°-rotated red square. Reusable:
 * the header wordmark, the footer brand, the 404. Size with `--sn-glyph`.
 * The one rotation on the page; nothing else in this system is turned.
 */
.x862c49b6 {
	--sn-glyph: 28px;
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: var(--sn-glyph);
	height: var(--sn-glyph);
	background: var(--sn-heading);
	vertical-align: middle;
}

.x862c49b6::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 36%;
	height: 36%;
	background: var(--sn-signal);
	transform: rotate(45deg);
}

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

.x7b62492b {
	padding-top: var(--sn-sp-16);
	padding-bottom: var(--sn-sp-16);
}

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

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

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

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

.xb2460fc3 {
	display: block;
	border-radius: 0;
	height: auto;
	max-width: 100%;
}

/* The one image interaction: the picture scales inside a clipped box while
   the box holds still. */
.xc89b5041 {
	overflow: hidden;
	display: block;
}

.xc89b5041 .xb2460fc3 {
	transition: transform var(--sn-motion-slow) var(--sn-ease);
}

.xc89b5041:hover .xb2460fc3,
.xc89b5041:focus-within .xb2460fc3 {
	transform: scale(1.04);
}

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

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

/*
 * RULED, not carded: a 2px INK rule under the head, ink/10 hairlines between
 * rows, uppercase tracked labels for the column heads, no fill, no zebra.
 *
 * 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. Wrong on three separate market passes. The head is
 * transparent here, so the corner is painted with the PAGE ground (paper).
 */
.xda8cb14a {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

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

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

.x9fd853c9 thead th {
	background: transparent;
	color: var(--sn-heading);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
	border-bottom: var(--sn-border-thick) solid var(--sn-border-ink);
}

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

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

.x9fd853c9 tbody tr:last-child td,
.x9fd853c9 tbody tr:last-child th {
	border-bottom: var(--sn-border-w) solid var(--sn-border-ink);
}

.x9fd853c9 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. */
.x6feddef4 tr:first-child th {
	background: transparent;
	color: var(--sn-heading);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
	border-bottom: var(--sn-border-thick) solid var(--sn-border-ink);
}

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

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

/* A region marked by a hairline on paper. Not an object, not a tone. */
.x8efd355f {
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	padding: var(--sn-sp-6);
	box-shadow: none;
}

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

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

/*
 * The prompt's sticky nav: translucent paper (white/90) with a backdrop blur
 * and an ink/10 hairline under it. The blur is worth its cost HERE, unlike on
 * the dark sibling: the hero's canvas panel and grid texture scroll beneath
 * it, and a flat bar would cut a white rectangle out of them.
 */
.xd8eb4e28 {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	        backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
}

/* Without backdrop-filter support the bar is simply opaque paper. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.xd8eb4e28 {
		background: var(--sn-bg);
	}
}

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

/* The 18+ compliance strip. Static, never animated, never collapsed. */
.xac8b484a {
	border-bottom: var(--sn-border-w) solid var(--sn-border);
	font-size: var(--sn-fs-xs);
	color: var(--sn-text-muted);
	letter-spacing: -.005em;
}

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

/*
 * The 18+ badge — a solid ink tile with paper type (19.80). CONTENT, never
 * aria-hidden (§7): the one element whose legibility outranks the design.
 * Deliberately NOT red: the age limit is information, and red here means
 * "this is the thing that matters to the page's argument".
 */
.x551a41b8 {
	display: inline-flex;
	align-items: center;
	padding: 1px var(--sn-sp-2);
	border: var(--sn-border-w) solid var(--sn-heading);
	border-radius: 0;
	background: var(--sn-heading);
	color: var(--sn-bg);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

.x3352a3ba {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sn-sp-6);
	min-height: 64px;
	padding-top: var(--sn-sp-2);
	padding-bottom: var(--sn-sp-2);
}

@media (min-width: 1024px) {
	.x3352a3ba {
		min-height: 72px;
	}
}

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

/*
 * THE WORDMARK — the prompt's lockup: the black tile + rotated red square,
 * then the site name in 800 at tight tracking. The glyph is drawn on the
 * link's ::before (tile) and ::after (square) so the title markup stays a
 * plain text link that an SEO plugin or the customizer can rewrite.
 */
.x07f3b9dd {
	margin: 0;
	font-family: var(--sn-font-display);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	white-space: nowrap;
}

.x07f3b9dd a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-3);
	color: var(--sn-heading);
	text-decoration: none;
}

.x07f3b9dd a::before {
	content: '';
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background: var(--sn-heading);
}

.x07f3b9dd a::after {
	content: '';
	position: absolute;
	left: 9px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: var(--sn-signal);
	transform: rotate(45deg);
	transition: transform var(--sn-motion) var(--sn-ease);
}

.x07f3b9dd a:hover::after,
.x07f3b9dd a:focus::after {
	transform: rotate(135deg);
}

@media (prefers-reduced-motion: reduce) {
	.x07f3b9dd a::after {
		transition: none;
	}
}

.xd8eb4e28 .custom-logo {
	max-height: 56px;
	width: auto;
}

@media (max-width: 767px) {
	.xd8eb4e28 .custom-logo {
		max-height: 40px;
	}
}

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

.x1afa2a4c {
	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-border-strong);
	border-radius: 0;
	color: var(--sn-heading);
	cursor: pointer;
	transition: background var(--sn-motion-fast) var(--sn-ease),
	            color var(--sn-motion-fast) var(--sn-ease),
	            border-color var(--sn-motion-fast) var(--sn-ease);
}

.x1afa2a4c:hover,
.x1afa2a4c:focus,
.xdcb9ae85.toggled .x1afa2a4c {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
	color: var(--sn-bg);
}

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

/* Mobile: dropdown panel (wp_nav_menu ul and wp_page_menu div>ul). Paper, a
   hairline, and the float — it genuinely sits OVER the page. */
.xdcb9ae85 > ul,
.xdcb9ae85 > div > ul {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + var(--sn-sp-3));
	min-width: 260px;
	padding: var(--sn-sp-2);
	background: var(--sn-bg);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	box-shadow: var(--sn-float);
}

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

/*
 * NAV LINKS — the prompt's: 14px medium, SENTENCE CASE, ink/70 darkening to
 * ink on hover. Not uppercase, not tracked: that is the dark sibling's nav.
 * A 2px red underline scales in on hover and stays on the current item.
 */
.xdcb9ae85 li a {
	position: relative;
	display: block;
	padding: var(--sn-sp-3);
	border-radius: 0;
	color: var(--sn-text-soft);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	letter-spacing: -.01em;
	text-decoration: none;
	transition: color var(--sn-motion-fast) var(--sn-ease);
}

.xdcb9ae85 li a::after {
	content: '';
	position: absolute;
	left: var(--sn-sp-3);
	right: var(--sn-sp-3);
	bottom: var(--sn-sp-1);
	height: var(--sn-border-thick);
	background: var(--sn-signal);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--sn-motion-fast) var(--sn-ease);
}

.xdcb9ae85 li a:hover,
.xdcb9ae85 li a:focus {
	color: var(--sn-heading);
	text-decoration: none;
}

.xdcb9ae85 li a:hover::after,
.xdcb9ae85 li a:focus::after {
	transform: scaleX(1);
}

.xdcb9ae85 li.current-menu-item > a,
.xdcb9ae85 li.current_page_item > a {
	background: transparent;
	color: var(--sn-heading);
}

.xdcb9ae85 li.current-menu-item > a::after,
.xdcb9ae85 li.current_page_item > a::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.xdcb9ae85 li a::after {
		transition: none;
	}
}

/* Chevron on parent items (rotates up when open via .focus — navigation.js). */
.xdcb9ae85 li.menu-item-has-children > a::before,
.xdcb9ae85 li.page_item_has_children > a::before {
	content: '';
	position: absolute;
	right: var(--sn-sp-2);
	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-fast) var(--sn-ease);
}

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

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

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

.xdcb9ae85 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. */
.xdcb9ae85.toggled ul ul {
	display: none;
}

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

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

@media (min-width: 768px) {
	.x1afa2a4c {
		display: none;
	}

	.xdcb9ae85 {
		justify-content: flex-end;
	}

	.xdcb9ae85 > ul,
	.xdcb9ae85 > 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;
	}

	.xdcb9ae85 li a {
		padding: var(--sn-sp-2) var(--sn-sp-3);
	}

	.xdcb9ae85 li a::after {
		bottom: 0;
	}

	/* Desktop dropdown: paper, hairline, float. */
	.xdcb9ae85 ul ul {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		min-width: 260px;
		margin: 0;
		padding: var(--sn-sp-2);
		background: var(--sn-bg);
		border: var(--sn-border-w) solid var(--sn-border);
		border-radius: 0;
		box-shadow: var(--sn-float);
	}

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

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

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

/* ---------- Marquee band (footer.php) ---------- */

/*
 * The prompt's closing band: full-bleed, hairlines top and bottom, uppercase
 * 12px 0.18em-tracked labels each followed by a small red asterisk, two
 * identical tracks translating 0 → -50% for a seamless loop.
 *
 * IT SITS DIRECTLY ABOVE THE FOOTER, NOT UNDER THE HERO, and that is a fold
 * decision: under the hero it would push the first bookmaker card below the
 * fold on every phone, and the list above the fold is a standing requirement.
 * It is decorative (aria-hidden in the markup), carries no compliance text,
 * and stops dead under prefers-reduced-motion.
 */
.x5c9b5329 {
	overflow: hidden;
	margin-top: var(--sn-sp-24);
	border-top: var(--sn-border-w) solid var(--sn-border);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
	background: var(--sn-bg);
	user-select: none;
}

.x187a846b {
	display: flex;
	width: max-content;
	animation: x5c9b5329 32s linear infinite;
}

.x1b124b00 {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.xf53b79d0 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-4);
	padding: var(--sn-sp-4) var(--sn-sp-6);
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-xs);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
}

/* The red asterisk separator — a drawn six-point mark, not a glyph. */
.xf53b79d0::after {
	content: '';
	width: 10px;
	height: 10px;
	background: var(--sn-signal);
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPSczJyBzdHJva2UtbGluZWNhcD0nc3F1YXJlJz48cGF0aCBkPSdNMTIgMnYyME0zLjM0IDdsMTcuMzIgMTBNMy4zNCAxN2wxNy4zMi0xMCcvPjwvc3ZnPg==") center / contain no-repeat;
	        mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPSczJyBzdHJva2UtbGluZWNhcD0nc3F1YXJlJz48cGF0aCBkPSdNMTIgMnYyME0zLjM0IDdsMTcuMzIgMTBNMy4zNCAxN2wxNy4zMi0xMCcvPjwvc3ZnPg==") center / contain no-repeat;
}

@keyframes x5c9b5329 {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Hovering pauses it — moving text should never be un-pausable. */
.x5c9b5329:hover .x187a846b {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.x187a846b {
		animation: none;
	}
}

/* With the band present the footer sits flush under it. */
.x5c9b5329 + .xf9e1ad79 {
	margin-top: 0;
}

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

/*
 * THE ONE BLACK SLAB. A Swiss page closes on a solid band, and it puts the
 * compliance strip on a surface no promotional element uses. Ink ground,
 * paper type (19.80), muted #A3A3A3 (7.85). Deliberately NOT red: a red band
 * carrying the 18+ badge and the helpline would read as an advert.
 */
.xf9e1ad79 {
	margin-top: var(--sn-sp-24);
	background: var(--sn-purple-deep);
	color: var(--sn-on-chrome-muted);
	font-size: var(--sn-fs-base);
	border-radius: 0;
}

.xf9e1ad79 :focus-visible {
	outline-color: var(--sn-on-chrome);
}

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

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

.x61516a81 {
	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: 800;
	line-height: 1;
	letter-spacing: -.035em;
}

/* The glyph on black: the tile turns paper so it still reads as a tile. */
.x61516a81::before {
	content: '';
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background: var(--sn-on-chrome) linear-gradient(var(--sn-signal), var(--sn-signal)) center / 10px 10px no-repeat;
}

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

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

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

.xfe3226ba a {
	color: var(--sn-on-chrome-muted);
	text-decoration: none;
	transition: color var(--sn-motion-fast) var(--sn-ease);
}

.xfe3226ba a:hover,
.xfe3226ba 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). */
.x876a0b24 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-4);
	padding: var(--sn-sp-8) 0;
	border-top: var(--sn-border-w) solid #2A2A2A;
	border-bottom: var(--sn-border-w) solid #2A2A2A;
}

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

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

/* On black the badge inverts: paper tile, ink type. */
.xf9e1ad79 .x551a41b8 {
	background: var(--sn-on-chrome);
	border-color: var(--sn-on-chrome);
	color: var(--sn-heading);
}

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

/*
 * Outlined chips — informational, not the action. Edge #767676 (4.18 on the
 * ink ground, a real control boundary). NOT uppercase: "BEGAMBLEAWARE" is
 * harder to recognise than the name as written, and this strip is where
 * recognition beats styling.
 */
.x5a68ab8a a {
	display: inline-block;
	padding: var(--sn-sp-2) var(--sn-sp-4);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	color: var(--sn-on-chrome);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	letter-spacing: -.005em;
	text-decoration: none;
	transition: background var(--sn-motion-fast) var(--sn-ease),
	            color var(--sn-motion-fast) var(--sn-ease),
	            border-color var(--sn-motion-fast) var(--sn-ease);
}

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

/* Row 3: copyright + disclosure. */
.xabf7e183 {
	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-sm);
	color: var(--sn-on-chrome-muted);
}

.x47af9d47,
.xab700e54 {
	margin: 0;
}

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

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

	.xbdd4987b > .xc6d1daed {
		grid-column: span 3;
	}

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

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

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

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

/* ---------- Scroll reveal ---------- */
/*
 * COMPLIANCE BY CONSTRUCTION: the hidden state exists ONLY under .xf383b1a9,
 * 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).
 * The prompt's fade-up: 24px rise, expo-out.
 */

.xf383b1a9 .xe0a91dd9 {
	opacity: 0;
	transform: translateY(24px);
}

.xf383b1a9 .xe0a91dd9.is-inview {
	opacity: 1;
	transform: none;
	transition: opacity 600ms var(--sn-ease-out),
	            transform 600ms var(--sn-ease-out);
}

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

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

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

/* The uppercase rule label — 12px 700 at 0.18em. Every table head, stat
   caption and small section label uses it. */
.x3c21151e {
	font-family: var(--sn-font);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-text-muted);
}

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

/* Chip — a label inside a hairline square. */
.x56907e6b {
	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-strong);
	border-radius: 0;
	background: var(--sn-bg);
	color: var(--sn-heading);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-xs);
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: var(--sn-lh-compact);
}

/* The one RED chip: signal fill, INK type (5.58 — white would be 3.55).
   Reserved for a single mark per screen, e.g. the featured bookmaker's badge. */
.xd395aeab {
	background: var(--sn-signal);
	border-color: var(--sn-signal);
	color: var(--sn-heading);
	font-weight: 700;
}

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