/*
 * 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 ("Bold Typography") was written for a poster: 96px
 * headlines, 160px section padding, one idea per screen, type as the entire
 * visual language. Our pages are 2000–3000-word SEO articles on a 720px
 * 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 (near-black ground, zero
 * radius, one accent, rules instead of shadows, tracked-out labels):
 *
 *   EXPRESSIVE — hero, cta-banner, casino-cards, calculator, key-takeaways,
 *                footer. Poster scale, full-bleed rules, the section indices,
 *                the whole micro-interaction set.
 *   READING    — content-section, tables, FAQ, callouts, sources, prose.
 *                Same DNA, ordinary measure, calm body. The sharp edges and
 *                the tracked labels 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 poster 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 (.xeee0a3e9). clip (not hidden) keeps position:sticky
	   working for the header. */
	overflow-x: clip;
	position: relative;
}

/*
 * GRAIN — the design's "subtle noise texture", and the only non-typographic
 * ornament in the entire skin.
 *
 * A flat near-black page is the one background that shows banding on cheap
 * panels and reads as dead space on good ones; a 1.5% fractal-noise overlay
 * gives it a paper tooth without becoming a visible texture. It replaces the
 * three coloured radial gradients the sibling skin used for atmosphere —
 * there is no atmosphere in this design, colour is rationed to the accent.
 *
 * IMPLEMENTATION NOTES, both of which are load-bearing:
 *
 *   1. The SVG is BASE64, not URL-encoded, and that is deliberate. The
 *      per-site class hasher (inc/skin-hash.php) rewrites every `sn-` token
 *      it finds in served CSS, with a lookbehind that only spares `--sn-*`
 *      and `data-sn-*`. A URL-encoded SVG is arbitrary ASCII and could
 *      contain the sequence; the base64 alphabet has no `-` in it at all, so
 *      the collision is impossible by construction rather than by luck.
 *
 *   2. It is a repeating 160px tile on ONE fixed layer, with no filter and no
 *      mix-blend-mode. `filter: blur()` on a full-viewport fixed element
 *      re-rasterises every scroll frame, and a blend mode re-blends the whole
 *      page — both measured as jank sources on mobile Safari on earlier
 *      passes of this network.
 */
#page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nNCcgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJyBmaWx0ZXI9J3VybCgjZyknLz48L3N2Zz4=");
	background-repeat: repeat;
	opacity: .015;
	pointer-events: none;
	z-index: 0;
}

/*
 * Everything the reader touches sits above the grain.
 *
 * WRITTEN INSIDE `:where()` ON PURPOSE, and it is load-bearing. As
 * `#page > *` this rule is (1,0,0), which OUTRANKS every class rule on the
 * three elements it matches — so it silently took `position: sticky` AND
 * `z-index: 100` away from `.x228453dc` (0,1,0) and handed it
 * `position: relative; z-index: 1` instead. Two visible bugs came out of
 * that: the header did not stick at all, and because `#primary` and
 * `#colophon` share the same z-index and come LATER in the DOM, page content
 * painted straight over the header — most obviously the mobile nav panel,
 * which had the hero's headline and byline showing through it.
 *
 * At (0,0,0) the lift still beats the grain's `z-index: 0` (any specificity
 * beats none is not the mechanism here — nothing else declares position or
 * z-index on these three elements, so this rule applies unopposed), while any
 * block or template rule that DOES own an element's layer wins, which is what
 * it should have done from the start. Same lesson as the `:where()` link
 * rules further down and as `--sn-btn-ink`: never let a generic rule outrank
 * the thing that owns an element's behaviour.
 */
:where(#page) > * {
	position: relative;
	z-index: 1;
}

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

/* Anchor targets land BELOW the sticky header instead of underneath it,
   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);
	letter-spacing: var(--sn-tracking-body);
	/* The design system's grayscale-on-dark rendering: without this, light
	   type on near-black is smeared by subpixel AA on macOS and reads a
	   weight heavier than it is set. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * HEADINGS. Weight 600 and TIGHT TRACKING — that pairing is the system, and
 * it is worth saying why 600 rather than 700/800:
 *
 * "Bold Typography" names a philosophy, not a font-weight. The drama comes
 * from SCALE CONTRAST (the system asks for 6:1 or greater between H1 and body)
 * and from tracking pulled to -0.04em/-0.06em. At 80px, 700 and 800 close
 * Inter Tight's apertures and the headline reads heavier but visually smaller,
 * which is the opposite of what a poster wants. Every sibling market in this
 * network set 700 or 800 here; this one does not.
 */
h1, h2, h3, h4, h5, h6 {
	color: var(--sn-heading);
	font-family: var(--sn-font-display);
	font-weight: 600;
	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, no breakpoint step.
 *
 * The shape of the clamp matters as much as its ends. An earlier market
 * shipped a mobile override that capped the H1 through 767px, which produced
 * 48px at 767 and 73px at 768 — a 25px jump across one pixel of viewport. The
 * middle terms below are solved so the line passes through the intended value
 * at both ends: h1 is 32px at 375px and 80px at 1280px.
 *
 * THE FLOOR IS THE MONEY-PAGE CONSTRAINT, not a design preference. The H1 is
 * both the LCP element and the largest single block of vertical space on a
 * phone, and these pages exist to put a casino list near the fold. 32px at
 * 375px is what leaves room for it; the poster scale the system asks for is
 * available above, and on the hero via .x6ab1418c.
 */
h1 {
	font-size: clamp(2rem, .76rem + 5.3vw, 5rem);
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
}

h2 {
	font-size: clamp(var(--sn-fs-xl), 1.55rem + 1.9vw, var(--sn-fs-2xl));
	letter-spacing: var(--sn-tracking-display);
}

h3 {
	font-size: var(--sn-fs-lg);
}

/*
 * EXPRESSIVE TYPE. Opt-in, for the hero headline and section breaks only —
 * the poster scale the direction asks for, kept off the document's ordinary
 * headings so an article does not become a landing page.
 */
.x6ab1418c {
	font-family: var(--sn-font-display);
	font-size: clamp(2.5rem, 1rem + 6.4vw, var(--sn-fs-5xl));
	font-weight: 600;
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
	text-wrap: balance;
}

/*
 * Large numerals as graphic shapes (section indices, calculator figures).
 * Mono, because in this system numbers are technical detail and are set as
 * such. 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.
 */
.x896f6aea {
	font-family: var(--sn-font-mono);
	font-size: clamp(3.5rem, 2rem + 7vw, var(--sn-fs-5xl));
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--sn-tracking-tighter);
	color: var(--sn-surface-2);
	user-select: none;
	pointer-events: none;
}

/*
 * SECTION MARKER — a mono index and an accent bar 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, ENG two stacked pills. Here it is a NUMBERED INDEX,
 * which no sibling has, and which is the most editorial move available: it
 * turns an article into a numbered sequence of sections the way a magazine
 * contents page does, and it gives the mono face its most visible job.
 *
 * Both pseudo-elements are positioned off a counter, so the numbering is
 * automatic and an editor cannot get it out of step by reordering blocks.
 *
 * WHY THE ToC NO LONGER NUMBERS ITS OWN ITEMS: it used to print numbered
 * chips, and it necessarily skips its own heading when it builds the list, so
 * every entry would have disagreed with the section it points at by one. The
 * numbers now exist in exactly ONE place — here — and the ToC marks its items
 * with a rule instead (blocks/toc/style.css).
 *
 * Do NOT add per-block heading markers on top of this.
 */
.site-main {
	counter-reset: x08a4db5e;
}

.site-main h2 {
	position: relative;
	counter-increment: x08a4db5e;
	padding-top: calc(12px + var(--sn-sp-4));
}

/* The index itself. decimal-leading-zero always yields two digits below 100,
   so the bar's left offset below is deterministic in a monospaced face. */
.site-main h2::before {
	content: counter(x08a4db5e, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-primary);
}

/* The accent bar. The system specifies h-1/w-16 (4px x 64px); at the 12px
   label size it sits beside, 4px outweighs the numeral, so it is set to the
   --sn-border-thick weight and 56px. */
.site-main h2::after {
	content: '';
	position: absolute;
	top: 5px;
	left: 30px;
	width: 56px;
	height: var(--sn-border-thick);
	background: var(--sn-primary);
}

/*
 * On a phone the marker's reserved space is spent above EVERY h2 on the page,
 * including the money list's own heading, where it pushes the first casino card
 * towards the fold. The index and the bar keep their size — only the gap
 * between them and the heading closes, from sp-4 to sp-2. Measured: 8px per
 * heading, and it is the heading directly above the list that matters.
 */
@media (max-width: 767px) {
	.site-main h2 {
		padding-top: calc(12px + var(--sn-sp-2));
	}
}

/*
 * Eyebrow label above section headings. NOT a chip in this skin — a chip is a
 * rounded container and there are none here. It is the system's tracked-out
 * mono micro-label with a leading accent bar. Michael drops it into a WYSIWYG
 * as <p class="xa1b57f43">…</p> before a heading.
 */
.xa1b57f43 {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	margin: 0 0 var(--sn-sp-4);
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-primary);
}

.xa1b57f43::before {
	content: '';
	flex: 0 0 auto;
	width: 32px;
	height: var(--sn-border-thick);
	background: var(--sn-primary);
}

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

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

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

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

/* Lede: the opening paragraph of an article. The system's lead size (18px)
   is our body size, so the lede takes the next step up and stays at 400 —
   scale does the work, weight does not. */
.xd675dbef {
	font-size: var(--sn-fs-lead);
	line-height: 1.5;
	color: var(--sn-heading);
	font-weight: 400;
	letter-spacing: var(--sn-tracking-body);
}

/*
 * 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 .x4b925f13 escapes only because
 * `.x4b925f13: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 background. 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 BRIGHTEN HERE, and this is the third time this network has flipped
 * the rule. On the light sibling skin the rule was "hovers deepen", because on
 * a light ground a lighter link fades into the page. Back on black the
 * opposite is true, and --sn-primary-press is BRIGHTER than --sn-primary-hover
 * rather than darker: there is no contrast headroom below vermillion on a
 * near-black ground (a darkened press measures 4.43:1 and fails). Treat every
 * hover value inherited from eng-asset as wrong until re-measured.
 */
:where(a:hover, a:focus) {
	color: var(--sn-primary-hover);
	text-decoration: underline;
}

/*
 * PROSE LINKS ARE UNDERLINED, and in this system the underline is the primary
 * interactive affordance rather than a fallback. Colour alone is not a
 * distinction — the accent measures 5.58:1 on the page against body text's
 * 18.97:1, which is far more a hue difference 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 `.x4b925f13` (0,1,0) and underlined every button in a paragraph.
 */
:where(.site-main, .xa91e084c) :where(p, li, td, th, dd, blockquote) a {
	text-decoration: underline;
	text-underline-offset: .15em;
	text-decoration-thickness: var(--sn-border-thick);
}

:where(.site-main, .xa91e084c) :where(p, li, td, th, dd, blockquote) :where(.x4b925f13, .xf43e5c51, .x723e3b41, .x30fc2aa8) {
	text-decoration: none;
}

/*
 * Global keyboard focus ring — the system's 2px accent outline at a 2px
 * offset. :focus-visible keeps it off mouse clicks.
 *
 * KEPT DESPITE THE DESIGN SYSTEM SAYING `outline-none` ON INPUTS. There the
 * only focus signal is a 1px border changing colour, which is a fragile
 * indicator on a control that already has a border, and it is the kind of
 * thing that passes review and fails a real keyboard user. The border still
 * turns accent as specified; this is in addition, and only for keyboards.
 */
:focus-visible {
	outline: var(--sn-border-thick) solid var(--sn-primary);
	outline-offset: 2px;
}

/* Native controls (checkbox, radio, range, text caret) pick up the accent
   instead of the browser's default blue, and the UA renders its own widgets
   for a dark page. */
:root {
	accent-color: var(--sn-primary);
	caret-color: var(--sn-primary);
	color-scheme: dark;
}

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 accent with its own near-black ink (5.58:1). On this skin
   that is safe and on-message — on the previous DARK skin in this network the
   equivalent rule measured 1.35:1 and selected text was unreadable, because
   the accent there could never carry ink. Measured, not copied. */
::selection {
	background: var(--sn-primary);
	color: var(--sn-primary-dark);
}

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

.xc0d642c7 {
	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 so it does not become
   unbounded on an ultrawide monitor. */
.xc78a6974 {
	max-width: min(var(--sn-container-wide), 1600px);
}

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

/*
 * THE PADDING RAMP IS 16 / 24, NOT the design system's 24 / 48 / 64.
 *
 * Reverted deliberately (Andy, 2026-08-19). The system's ramp is written for a
 * marketing page where the container holds one idea; here it holds the casino
 * grid, and 64px of padding a side at 1024px+ ate enough width to drop that
 * grid from four columns to three. Generous gutters are not worth a column on
 * the money block. Change this and re-run tools/fold-measure/run.sh AND look at
 * the list at 1280 and 1440.
 */
@media (min-width: 768px) {
	.xc0d642c7,
	.xa91e084c {
		padding-left: var(--sn-sp-6);
		padding-right: var(--sn-sp-6);
	}
}

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

/*
 * A MEASURED DEPARTURE, AND THE BIGGEST ONE IN THIS SKIN. READ BEFORE EDITING.
 *
 * The design system's primary button is text-only with an animated underline:
 * no fill, no border, accent text. That is right for a design manifesto and
 * wrong for this site. Every .x4b925f13 on a money page is an affiliate CTA — the
 * casino card's "Visit site", the CTA band, the hero action — and a text link
 * is not a conversion control. Downgrading them all would be redesigning the
 * business, not the page.
 *
 * So the four variants map like this, and all four are in the system:
 *
 *   .x4b925f13         ACCENT BLOCK. Filled vermillion, near-black ink, sharp.
 *                   The system supplies the accentForeground token for exactly
 *                   this pairing, and its "highlighted card" badge is the same
 *                   object at a smaller size. Hover is the FULL INVERSION it
 *                   specifies for the outline button — the block flips to warm
 *                   white and the ink stays black (18.97:1).
 *   .xf43e5c51  The system's secondary/outline button, verbatim.
 *   .x723e3b41  The quiet filled variant, on the recessed surface.
 *   .x30fc2aa8   The system's text-only primary WITH the animated
 *                   underline, kept intact for in-prose actions where a filled
 *                   block would be too loud.
 *
 * INK NEVER GOES THROUGH `color`, ALWAYS THROUGH --sn-btn-ink. This bug
 * shipped twice: base.css forced `.x4b925f13:visited { color: … }` while a
 * context recoloured the same button, and equal specificity meant that after
 * the visitor followed the link the label was repainted to the base ink — on
 * that band, the same colour as the band. The label simply vanished.
 *
 * AND THE INK IS BLACK ON THIS SKIN. White on vermillion is 3.40:1 and fails.
 * That is the reverse of the sibling light skin, where On Primary was white,
 * so a button copied across from eng-asset arrives broken and looks fine.
 */
.x4b925f13 {
	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 — see tokens.css */
	background: var(--sn-primary);
	color: var(--sn-btn-ink, #0A0A0A);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	line-height: var(--sn-lh-compact);
	/* Touch target: 44px is the WCAG floor and the system's own mobile
	   minimum; 48px matches its h-12 control height. */
	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);
}

/* FULL INVERSION on hover — the system's own outline-button behaviour,
   applied to the filled block. Black on warm white is 18.97:1. */
.x4b925f13:hover,
.x4b925f13:focus {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
	color: var(--sn-btn-ink, #0A0A0A);
	text-decoration: none;
}

/*
 * PRESS IS POSITIONAL, NOT CHROMATIC, and that is forced rather than chosen.
 * The sibling skin darkened its pressed state; here the accent one step down
 * is #E03600, which measures 4.43:1 on the page and 4.43:1 for its own label —
 * below AA in the one state where the user's finger is on the control — and
 * the step after that is 3.78. A dark ground has no room underneath a
 * saturated accent. The system's specified affordance is translate-y-px, it
 * costs no contrast at all, and it is what ships.
 */
.x4b925f13:active {
	transform: translateY(1px);
}

.x4b925f13:visited {
	color: var(--sn-btn-ink, #0A0A0A);
}

/* OUTLINE — the system's secondary button: a 1px foreground edge that inverts
   to a solid block on hover. The edge is the FOREGROUND, not --sn-border:
   this is the boundary of a control, so WCAG 1.4.11 wants 3:1 and the
   hairline token is 1.31. */
.xf43e5c51 {
	background: transparent;
	border-color: var(--sn-heading);
	--sn-btn-ink: var(--sn-heading);
}

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

/* TONAL — the quiet filled variant, on the recessed surface. Its edge is
   --sn-border-strong (4.18:1) for the same 1.4.11 reason. */
.x723e3b41 {
	background: var(--sn-surface-2);
	border-color: var(--sn-border-strong);
	--sn-btn-ink: var(--sn-heading);
}

.x723e3b41:hover,
.x723e3b41:focus {
	background: var(--sn-surface-2);
	border-color: var(--sn-primary);
	--sn-btn-ink: var(--sn-primary);
}

/*
 * TEXT — the design system's primary button, kept intact: no container, accent
 * label, and an underline that is always present and GROWS on hover
 * (scale-x 1 → 1.1 from the left edge). The system's one piece of signature
 * motion.
 *
 * The underline is ::after on purpose. Buttons in this theme have historically
 * carried a ::before for a gradient sheen; that is gone with the previous
 * skin, but the convention that ::before is not free on a button is cheap to
 * keep.
 */
.x30fc2aa8 {
	position: relative;
	background: transparent;
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
	min-height: 44px;
	--sn-btn-ink: var(--sn-primary);
}

.x30fc2aa8::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--sn-sp-2);
	height: var(--sn-border-thick);
	background: var(--sn-primary);
	transform-origin: left center;
	transition: transform var(--sn-motion-fast) var(--sn-ease);
}

.x30fc2aa8:hover,
.x30fc2aa8:focus {
	background: transparent;
	border-color: transparent;
	--sn-btn-ink: var(--sn-primary-hover);
}

.x30fc2aa8:hover::after,
.x30fc2aa8:focus::after {
	background: var(--sn-primary-hover);
	transform: scaleX(1.1);
}

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

	.x30fc2aa8::after,
	.x30fc2aa8:hover::after,
	.x30fc2aa8:focus::after {
		transform: none;
		transition: none;
	}
}

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

/*
 * Sharp, recessed, 1px edged. The system's spec verbatim except for the focus
 * ring (see the :focus-visible note above): 16px text so iOS does not zoom on
 * focus, h-12 rising to h-14, and the border turns accent on focus.
 *
 * The edge is --sn-border-strong, not --sn-border. An input outlined at
 * 1.31:1 is not an input, it is a rectangle of slightly different black.
 */
.x3c522925,
.xa91e084c input[type='text'],
.xa91e084c input[type='email'],
.xa91e084c input[type='search'],
.xa91e084c input[type='number'],
.xa91e084c textarea,
.search-form input[type='search'] {
	width: 100%;
	min-height: 48px;
	padding: var(--sn-sp-3) var(--sn-sp-4);
	background: var(--sn-surface-2);
	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);
}

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

.x3c522925:focus,
.xa91e084c input:focus,
.xa91e084c textarea:focus,
.search-form input[type='search']:focus {
	border-color: var(--sn-primary);
	background: var(--sn-surface-2);
}

/* Placeholders route through the muted token. The design's own suggestion
   (foreground at 50%) resolves to roughly #858585 on this fill, which is
   3.4:1 — not a stylistic choice, a defect. --sn-text-muted is 6.90 here. */
.x3c522925::placeholder,
.xa91e084c input::placeholder,
.xa91e084c textarea::placeholder {
	color: var(--sn-text-muted);
	opacity: 1;
}

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

/*
 * The card hover behaviour, this system's way: "border color lightens,
 * background color change. No lift, no shadow, no scale." All three of those
 * negatives are deliberate — the sibling skin lifted and scaled cards, and
 * doing that here would put motion where this design puts none.
 *
 * INK ROUTES THROUGH CUSTOM PROPERTIES, not through a descendant `*` rule. The
 * obvious implementation (`.xe6de1ff9: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 do not change, precisely so a 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,
 * never visibility (CLAUDE.md §7, §12 2026-07-14).
 */
.xe6de1ff9 {
	--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),
	            border-color var(--sn-motion) var(--sn-ease);
}

.xe6de1ff9:hover,
.xe6de1ff9:focus-within {
	background: var(--sn-surface-2);
	border-color: var(--sn-border-strong);
	--sn-ink-rule: var(--sn-border-strong);
	/* Ink is unchanged and that is correct: the foreground reads 16.67:1 on
	   the recessed surface. Measured, not assumed. */
}

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

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

/* The system's section padding ramp: 80 / 112 / 160px, held to the 4px
   spacing scale as 64 / 96 / 128. */
.x7f3525e0 {
	padding-top: var(--sn-sp-16);
	padding-bottom: var(--sn-sp-16);
}

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

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

/* Full-width rule between major sections. In a system with no shadows this is
   one of only three depth cues (the others are layered type and the accent
   underline), so it is used generously and never decorated. */
.x3b42431a {
	border: 0;
	border-top: var(--sn-border-w) solid var(--sn-border);
	margin: var(--sn-sp-12) 0;
}

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

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

/*
 * The system's one image interaction: the picture scales inside a clipped box
 * while the box itself stays put, over 500ms. Blocks opt in by wrapping the
 * image in .x1a23c42e — the frame clips, the image moves.
 */
.x1a23c42e {
	overflow: hidden;
	display: block;
}

.x1a23c42e .x888e01ff {
	transition: transform var(--sn-motion-slow) var(--sn-ease);
}

.x1a23c42e:hover .x888e01ff,
.x1a23c42e:focus-within .x888e01ff {
	transform: scale(1.05);
}

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

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

/*
 * Tables are RULED, not carded: no fill, no radius, no shadow, no zebra. A
 * heavy rule under the head, hairlines between rows, and the column headers
 * set as tracked-out mono labels. That is the editorial table, and it is what
 * this system's "full-width horizontal borders" idiom produces.
 *
 * WHENEVER THE THEAD TREATMENT 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. On this skin the head is
 * TRANSPARENT, so the corner has to be painted with the page ground.
 */
.xeee0a3e9 {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

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

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

.x4e4ff6eb thead th {
	background: transparent;
	color: var(--sn-text-muted);
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
	border-bottom: var(--sn-border-thick) solid var(--sn-border-strong);
}

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

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

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

/* Row hover is a neutral wash — no hue. Colour is rationed to the accent. */
.x4e4ff6eb 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. */
.x3e3fde2f tr:first-child th {
	background: transparent;
	color: var(--sn-text-muted);
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
	border-bottom: var(--sn-border-thick) solid var(--sn-border-strong);
}

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

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

/*
 * The system's card: "Border: 1px solid border. Background: transparent. No
 * radius. No shadow." The transparent fill is the part that matters — a panel
 * here is a REGION MARKED OUT BY A RULE, not an object sitting on the page.
 */
.x836823f3 {
	background: transparent;
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	padding: var(--sn-sp-6);
	box-shadow: none;
}

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

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

/*
 * The page ground with a hairline under it. NOT a coloured bar, and NOT a
 * translucent blurred pane either — the sibling skin needed the blur because
 * a coloured atmospheric wash scrolled beneath it and a flat bar cut a
 * rectangle out of it. There is no wash here: the ground is flat black, so an
 * opaque header is indistinguishable from a blurred one and costs nothing.
 */
.x228453dc {
	/* These two are only effective because the grain lift above is written as
	   `:where(#page) > *`. Do not restore its ID form — it outranks this rule
	   and takes both declarations away. */
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sn-bg);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
}

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

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

.xc3a18b55 {
	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 — an outlined mono mark. It is CONTENT, not decoration: it is
 * never aria-hidden (CLAUDE.md §7), and it is the one element on the page
 * whose legibility outranks the design.
 */
.x2de1da19 {
	display: inline-flex;
	align-items: center;
	padding: 1px var(--sn-sp-2);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	background: transparent;
	color: var(--sn-heading);
	font-family: var(--sn-font-mono);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-wide);
}

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

.xebb98747 {
	flex: 0 0 auto;
}

.xb649615d {
	margin: 0;
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-lg);
	font-weight: 600;
	letter-spacing: var(--sn-tracking-tighter);
	white-space: nowrap;
}

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

/* The wordmark's one flourish: a vermillion full stop. A dot is punctuation,
   not a shape, so it survives a system that has banned every other ornament —
   and it is the cheapest possible place to put the single accent. */
.xb649615d a::after {
	content: '.';
	color: var(--sn-primary);
}

.x228453dc .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. 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) {
	.x75fcaf68 {
		padding-top: var(--sn-sp-3);
		padding-bottom: var(--sn-sp-3);
	}

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

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

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

.xb8160f95:hover,
.xb8160f95:focus {
	border-color: var(--sn-primary);
	color: var(--sn-primary);
}

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

/* Mobile: dropdown panel (covers both wp_nav_menu ul and wp_page_menu div>ul).
   A sharp, bordered card on the card surface — no radius, no elevation. */
.xf37a134f > ul,
.xf37a134f > 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-surface);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	box-shadow: none;
}

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

/*
 * Nav items are TRACKED-OUT UPPERCASE LABELS with an accent underline, which
 * is this system's single interactive affordance. The sibling skin made them
 * pills; there are no pills here.
 *
 * The underline is a border on a pseudo-element rather than text-decoration so
 * it can animate from zero width and sit at a fixed distance from the label.
 */
.xf37a134f li a {
	position: relative;
	display: block;
	padding: var(--sn-sp-3);
	border-radius: 0;
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	text-decoration: none;
	transition: color var(--sn-motion-fast) var(--sn-ease);
}

.xf37a134f 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-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--sn-motion-fast) var(--sn-ease);
}

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

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

/* The current item keeps its underline permanently — the design's own
   "underlines as the primary interactive affordance", used as state. */
.xf37a134f li.current-menu-item > a,
.xf37a134f li.current_page_item > a {
	background: transparent;
	color: var(--sn-heading);
}

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

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

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

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

/* Parent items need room for the chevron. */
.xf37a134f li.menu-item-has-children > a,
.xf37a134f li.page_item_has_children > a {
	padding-right: var(--sn-sp-6);
}

/* Mobile submenu: nested inline inside the panel, indented behind an accent
   rule, collapsed until the parent gets .focus (tap — navigation.js/nav.js).
   Overrides underscores' absolute/-999em positioning. */
.xf37a134f 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-primary);
	box-shadow: none;
}

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

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

.xf37a134f ul ul a {
	width: auto; /* underscores forces 200px */
	font-weight: 400;
	text-transform: none;
	letter-spacing: var(--sn-tracking-body);
}

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

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

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

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

	.xf37a134f li a::after {
		left: var(--sn-sp-3);
		right: var(--sn-sp-3);
		bottom: 0;
	}

	/* Desktop dropdown: a sharp bordered card under the parent item. Opens on
	   hover, keyboard focus, or click (.focus via nav.js). */
	.xf37a134f 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-surface);
		border: var(--sn-border-w) solid var(--sn-border-strong);
		border-left-width: var(--sn-border-w);
		border-radius: 0;
		box-shadow: none;
	}

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

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

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

	/* Chevron opens on hover too. */
	.xf37a134f li.menu-item-has-children:hover > a::before,
	.xf37a134f li.page_item_has_children:hover > a::before {
		transform: translateY(-25%) rotate(225deg);
	}
}

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

/*
 * The footer is the page ground closed by a full-width rule. The sibling skin
 * made it a large tonal container with a 48px radius on its top corners; there
 * are no radii here and no second surface colour worth spending, so the rule
 * does the whole job — which is exactly what this system means by "content is
 * separated by full-width horizontal borders".
 *
 * DELIBERATELY NOT FLOODED WITH THE ACCENT. The direction floods major
 * sections with colour; a vermillion band carrying the 18+ badge, the
 * safer-gambling notice 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.
 */
.x0829a0db {
	margin-top: var(--sn-sp-24);
	background: var(--sn-purple-deep);
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-base);
	border-top: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
}

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

.xbb3bdd40 {
	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: 600;
	letter-spacing: var(--sn-tracking-tighter);
}

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

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

.xb0c71efd {
	margin: 0 0 var(--sn-sp-4);
	color: var(--sn-text-muted);
	font-family: var(--sn-font-mono);
	font-weight: 500;
	font-size: var(--sn-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
}

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

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

.xccd0318c a:hover,
.xccd0318c a:focus {
	color: var(--sn-heading);
	text-decoration: underline;
	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). */
.xbd5db2e4 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-4);
	padding: var(--sn-sp-8) 0;
	border-top: var(--sn-border-w) solid var(--sn-border);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
}

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

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

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

/*
 * Outlined chips — deliberately NOT the accent block: compliance links are
 * informational, not the action (CLAUDE.md §7). --sn-border-strong because
 * these are interactive edges and the hairline token is 1.31:1.
 *
 * AND THEY ARE NOT UPPERCASE, which is the one place this skin's label idiom
 * is overruled. "BEGAMBLEAWARE" and "GAMSTOP SELF-EXCLUSION" are harder to
 * recognise at a glance than the names as they are actually written, and this
 * strip is the part of the page where recognition beats styling.
 */
.x31db80ed 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-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	letter-spacing: var(--sn-tracking-body);
	text-decoration: none;
	transition: border-color var(--sn-motion-fast) var(--sn-ease),
	            color var(--sn-motion-fast) var(--sn-ease);
}

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

/* Row 3: copyright + disclosure. */
.x157b32f1 {
	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-text-muted);
}

.xb9f63ba3,
.xbe658f5d {
	margin: 0;
}

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

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

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

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

/* ---------- Scroll reveal ---------- */
/*
 * COMPLIANCE BY CONSTRUCTION: the hidden state exists ONLY under .xb74e7fdb,
 * 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).
 *
 * The system's own scroll animation: fade in plus a 20px rise over 500ms. Not
 * its scale-from-0.8 — on a page whose body is already large that reads as a
 * rendering glitch, and it moves the LCP candidate.
 */

.xb74e7fdb .xb5387ad4 {
	opacity: 0;
	transform: translateY(20px);
}

.xb74e7fdb .xb5387ad4.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) {
	.xb74e7fdb .xb5387ad4,
	.xb74e7fdb .xb5387ad4.is-inview {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

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

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

/*
 * The tracked-out mono label. In the sibling skin this was the theme's ONE
 * piece of uppercase micro-type, used sparingly; here it is a core idiom of
 * the system ("wide letter-spacing on labels, 0.1em to 0.2em") and it is used
 * for every label, stat caption, table head and eyebrow in the theme.
 */
.xbf77ee44 {
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-text-muted);
}

/* Sparse emphasis — the widest tracking in the system, for a single short
   label that has to carry a whole section (hero eyebrow, band kicker). */
.x3e667e1f {
	letter-spacing: var(--sn-tracking-widest);
}

/* Chip — a bordered mono mark. No fill and no radius: in this system a chip is
   a label inside a rule, not a capsule. Blocks use it for badges and counts. */
.xc2439fd3 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-1);
	padding: var(--sn-sp-1) var(--sn-sp-3);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	background: transparent;
	color: var(--sn-heading);
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-wide);
	line-height: var(--sn-lh-compact);
}

/* The one filled chip: the system's "highlighted card" badge — accent ground,
   near-black ink (5.58:1). Reserved for a single mark per screen. */
.xa28c678d {
	background: var(--sn-primary);
	border-color: var(--sn-primary);
	color: var(--sn-primary-dark);
}

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